@import url("/resources/Assets/CSS/style.less");

#socialLoginContainer, #idSocialLoginContainer, .openAuthFormContainer {
display: none !important;
}

.wa-accordian-menu summary, .wa-accordian-menu details { display: block; }
.wa-accordian-menu *:focus { outline: none; }
.wa-accordian-menu details summary { border: 1px solid rgba(0,0,0,0.1); margin-bottom: 5px; border-radius: 4px; padding: 4px 10px; font-size: 16px !important; cursor: pointer; }
.wa-accordian-menu .level-1 summary { font-weight: bold; }
.wa-accordian-menu .level-2 summary { font-weight: normal; }
.wa-accordian-menu .level-2 { margin-left: 10px; }

/* JOBS */
/* #FunctionalBlock1_ctl00_topicList_subscribeDiv, .topicListHeaderTable, .forumPanelContainer, .forumMessageHeaderBodyContainer { display: none !important; }
*/

#FunctionalBlock1_ctl00_messageList_sortOrderLinkButton, .forumMessageHeaderBodyContainer, #FunctionalBlock1_ctl00_messageList_messages_ctl01_forumMessage_divLastModified, #FunctionalBlock1_ctl00_messageList_replyTop, #FunctionalBlock1_ctl00_messageList_replyBottom { display: none !important; }

#idTopicListContainer .topicTitle { font-size: 16px; font-weight: bold; }

@media only screen and (max-width: 700px) {
.covid-update-btn a { padding-top: 20px !important; padding-bottom: 20px !important; }
.covid-update-btn font { font-size: 17px !important; }
}




/* Code to change page width START */
.container_12 {
    width: 1200px;
}

.s1_grid_12{
    width: auto;
}

@media only screen and (max-width: 1199px) and (min-width: 600px){
.container_12 {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 1200px;
    min-width: 600px;
}}

@media only screen and (max-width: 616px){
.container_12 {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 600px;
    min-width: 320px;
    display: block;
}}
/* Code to change page width END */


/* August 17, 2026 - Brand Redesign */
/* =========================================================
   CLA WILDAPRICOT TYPOGRAPHY + LINK SYSTEM
   ========================================================= */

/* RED HAT TEXT VARIABLE FONT */
@font-face {
    font-family: 'Red Hat Text';
    src: url('https://members.criminallawyers.ca/resources/Assets/CSS/RedHatText-VariableFont_wght.woff2') format('woff2');
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
}


/* =========================================================
   BASE TYPOGRAPHY
   ========================================================= */

html,
body {
    font-family: 'Red Hat Text', Arial, sans-serif !important;
    font-weight: 400;
    line-height: 1.6;
}

/* Common WildApricot content containers */
.WaGadgetContent,
.WaGadgetContent p,
.WaGadgetContent li,
.WaGadgetContent td,
.WaGadgetContent th,
.WaGadgetContent label,
.gadgetStyleBody,
.gadgetStyleBody p,
.gadgetStyleBody li,
.zoneContent,
.zoneContent p,
.zoneContent li {
    font-family: 'Red Hat Text', Arial, sans-serif !important;
}


/* =========================================================
   HEADINGS
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6,
.WaGadgetContent h1,
.WaGadgetContent h2,
.WaGadgetContent h3,
.WaGadgetContent h4,
.WaGadgetContent h5,
.WaGadgetContent h6 {
    font-family: 'Red Hat Text', Arial, sans-serif !important;
    line-height: 1.15;
    color: #111;
}

h1 {
    font-weight: 700;
}

h2 {
    font-weight: 700;
}

h3 {
    font-weight: 600;
}

h4,
h5,
h6 {
    font-weight: 600;
}


/* =========================================================
   NORMAL CONTENT LINKS
   ========================================================= */

.WaGadgetContent a,
.gadgetStyleBody a,
.zoneContent a {
    font-family: 'Red Hat Text', Arial, sans-serif;
    color: #111;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition:
        color 0.2s ease,
        opacity 0.2s ease,
        text-decoration-color 0.2s ease;
}

.WaGadgetContent a:hover,
.WaGadgetContent a:focus,
.gadgetStyleBody a:hover,
.gadgetStyleBody a:focus,
.zoneContent a:hover,
.zoneContent a:focus {
    color: #555;
}


/* =========================================================
   CLA ARROW / "READ MORE" LINKS
   Add class="cla-link" to any link you want styled this way
   ========================================================= */

a.cla-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;

    font-family: 'Red Hat Text', Arial, sans-serif !important;
    font-weight: 600;
    color: #111 !important;

    text-decoration: none !important;
    line-height: 1.3;

    transition: opacity 0.2s ease;
}

a.cla-link::after {
    content: ">";
    display: inline-block;
    font-weight: 600;
    transition: transform 0.2s ease;
}

a.cla-link:hover,
a.cla-link:focus {
    opacity: 0.65;
    text-decoration: none !important;
}

a.cla-link:hover::after,
a.cla-link:focus::after {
    transform: translateX(4px);
}


/* =========================================================
   BUTTONS
   ========================================================= */

.WaGadgetContent input[type="button"],
.WaGadgetContent input[type="submit"],
.WaGadgetContent button,
.WaGadgetContent .button,
.WaGadgetContent a.button,
.WaGadgetContent .functionalButton,
.WaGadgetContent .navigationButton {
    font-family: 'Red Hat Text', Arial, sans-serif !important;
    font-weight: 600;

    border-radius: 0;
    transition:
        opacity 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease;
}


/* =========================================================
   FORMS
   ========================================================= */

input,
textarea,
select,
button {
    font-family: 'Red Hat Text', Arial, sans-serif !important;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
textarea,
select {
    font-weight: 400;
}


/* =========================================================
   MAIN NAVIGATION
   ========================================================= */

.WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a,
.WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a > span {
    font-family: 'Red Hat Text', Arial, sans-serif !important;
    font-weight: 600 !important;
}


/* Dropdown menu */
.WaGadgetMenuHorizontal .menuInner ul ul li > .item > a,
.WaGadgetMenuHorizontal .menuInner ul ul li > .item > a > span {
    font-family: 'Red Hat Text', Arial, sans-serif !important;
    font-weight: 500 !important;
}


/* =========================================================
   VERTICAL / MOBILE NAVIGATION
   ========================================================= */

.WaGadgetMenuVertical .menuInner a,
.WaGadgetMenuVertical .menuInner a span,
.WaGadgetMobilePanel .mobilePanel a {
    font-family: 'Red Hat Text', Arial, sans-serif !important;
}


/* =========================================================
   LOGIN / MEMBER UI
   ========================================================= */

.WaGadgetLoginForm,
.WaGadgetLoginForm input,
.WaGadgetLoginForm button,
.WaGadgetLoginButton,
.WaGadgetLoginButton a {
    font-family: 'Red Hat Text', Arial, sans-serif !important;
}


/* =========================================================
   EVENTS / MEMBER DIRECTORY / SYSTEM CONTENT
   ========================================================= */

.WaGadgetEvents,
.WaGadgetEvents p,
.WaGadgetEvents td,
.WaGadgetEvents label,
.WaGadgetMemberDirectory,
.WaGadgetMemberDirectory p,
.WaGadgetMemberDirectory td,
.WaGadgetContactProfile,
.WaGadgetContactProfile p {
    font-family: 'Red Hat Text', Arial, sans-serif !important;
}

/* =========================================================
   CLA TOP HEADER
   Full-width solid white — remove WildApricot texture
   ========================================================= */

body .zoneHeader1,
body .zoneHeader1 .container_12,
body .zoneHeader1 .container_12 > div,
body .zoneHeader1 .WaPlaceHolderHeader,
body .zoneHeader1 #idHeaderContentHolder,
body .zoneHeader1 .WaLayoutContainerOnly,
body .zoneHeader1 .WaLayoutTable,
body .zoneHeader1 .WaLayoutRow,
body .zoneHeader1 .WaLayoutItem,
body .zoneHeader1 .placeHolderContainer {
    background-color: #ffffff !important;
    background-image: none !important;
    background-repeat: no-repeat !important;
}


/* Make the outer page behind the header white too */
body,
html {
    background-color: #ffffff !important;
}


/* Top header text */
body .zoneHeader1 {
    color: #292624 !important;
}

body .zoneHeader1 a,
body .zoneHeader1 p,
body .zoneHeader1 strong {
    color: #292624 !important;
}


/* Keep the actual CLA logo background image!
   Do NOT remove the image from this specific gadget. */
body .zoneHeader1 #id_KxbYLDm {
    background-image: url("/resources/Assets/Images/Logo Final_H_Colour.png") !important;
    background-repeat: no-repeat !important;
    background-position: left top !important;
    background-size: auto 100% !important;
}

/* =========================================================
   CLA NAVIGATION — MATCH NEW PUBLIC WEBSITE
   ========================================================= */


/* Full navigation band */
.zoneHeader2,
.zoneHeader2 > .container_12,
.zoneHeader2 > .container_12 > div,
#id_Header1,
#id_Header1 > div,
#id_yOhi7Wr,
#id_yOhi7Wr .menuBackground,
#id_yOhi7Wr .menuInner,
#id_yOhi7Wr ul.firstLevel {
    background: #EBF2F2 !important;
    background-color: #EBF2F2 !important;
    background-image: none !important;
}


/* Ensure navigation extends edge-to-edge */
.zoneHeader2 {
    width: 100%;
}


/* =========================================================
   TOP LEVEL MENU
   ========================================================= */

#id_yOhi7Wr .menuInner ul.firstLevel > li {
    background: transparent !important;
}

#id_yOhi7Wr .menuInner ul.firstLevel > li > .item {
    background: transparent !important;
    border: 0 !important;
}


/* Main navigation links */
#id_yOhi7Wr .menuInner ul.firstLevel > li > .item > a {
    background: transparent !important;
    color: #243861 !important;

    font-family: 'Red Hat Text', Arial, sans-serif !important;
    font-size: 18px !important;
    line-height: 24px !important;
    font-weight: 600 !important;

    padding: 22px 22px !important;

    opacity: 1 !important;
    text-decoration: none !important;
    text-shadow: none !important;
}


/* First item can sit slightly closer to left edge */
#id_yOhi7Wr .menuInner ul.firstLevel > li:first-child > .item > a {
    padding-left: 22px !important;
}


/* Text itself */
#id_yOhi7Wr .menuInner ul.firstLevel > li > .item > a > span {
    color: #243861 !important;
    font-family: 'Red Hat Text', Arial, sans-serif !important;

    border: 0 !important;
    background: none !important;
}


/* Hover */
#id_yOhi7Wr .menuInner ul.firstLevel > li > .item > a:hover,
#id_yOhi7Wr .menuInner ul.firstLevel > li > .item > a:focus {
    background: transparent !important;
    color: #243861 !important;
}


/* =========================================================
   ACTIVE ITEM
   Thin navy underline like new website
   ========================================================= */

#id_yOhi7Wr .menuInner ul.firstLevel > li.sel > .item {
    border: 0 !important;
}

#id_yOhi7Wr .menuInner ul.firstLevel > li.sel > .item > a {
    background: transparent !important;
    color: #243861 !important;
}

#id_yOhi7Wr .menuInner ul.firstLevel > li.sel > .item > a > span {
    color: #243861 !important;

    border-bottom: 3px solid #243861 !important;

    padding-bottom: 17px !important;
}


/* =========================================================
   REMOVE OLD WILDAPRICOT WHITE ARROW / SPRITE
   ========================================================= */

#id_yOhi7Wr .menuInner ul.firstLevel > li.dir > .item > a > span:before {
    display: none !important;
    content: none !important;
    background: none !important;
}


/* =========================================================
   CLA DOWN CHEVRON
   ========================================================= */

#id_yOhi7Wr .menuInner ul.firstLevel > li.dir > .item > a > span:after {
    content: "" !important;

    display: inline-block !important;

    width: 7px !important;
    height: 7px !important;

    margin-left: 10px !important;
    margin-bottom: 3px !important;

    border-right: 1.5px solid #243861 !important;
    border-bottom: 1.5px solid #243861 !important;

    background: none !important;

    transform: rotate(45deg) !important;

    vertical-align: middle !important;
}


/* =========================================================
   DROPDOWN
   ========================================================= */

#id_yOhi7Wr .menuInner ul.secondLevel,
#id_yOhi7Wr .menuInner ul.thirdLevel,
#id_yOhi7Wr .menuInner ul ul {
    background: #FFFFFF !important;

    border: 0 !important;

    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.10) !important;

    min-width: 210px !important;
}


/* Dropdown rows */
#id_yOhi7Wr .menuInner ul ul > li,
#id_yOhi7Wr .menuInner ul ul > li > .item {
    background: #FFFFFF !important;
}


/* Dropdown links */
#id_yOhi7Wr .menuInner ul ul > li > .item > a {
    background: #FFFFFF !important;
    color: #243861 !important;

    font-family: 'Red Hat Text', Arial, sans-serif !important;
    font-size: 15px !important;
    line-height: 20px !important;
    font-weight: 400 !important;

    padding: 9px 16px !important;

    opacity: 1 !important;

    text-decoration: none !important;
    text-shadow: none !important;
}


/* Dropdown text */
#id_yOhi7Wr .menuInner ul ul > li > .item > a > span {
    color: #243861 !important;
}


/* Dropdown hover / selected */
#id_yOhi7Wr .menuInner ul ul > li > .item > a:hover,
#id_yOhi7Wr .menuInner ul ul > li > .item > a:focus,
#id_yOhi7Wr .menuInner ul ul > li.sel > .item > a {
    background: #8AA4C1 !important;
    color: #FFFFFF !important;
}

#id_yOhi7Wr .menuInner ul ul > li > .item > a:hover > span,
#id_yOhi7Wr .menuInner ul ul > li > .item > a:focus > span,
#id_yOhi7Wr .menuInner ul ul > li.sel > .item > a > span {
    color: #FFFFFF !important;
}


/* =========================================================
   OVERFLOW / PHANTOM MENU
   The ≡ appearing at far right
   ========================================================= */

#id_yOhi7Wr .menuInner ul.firstLevel > li.phantom > .item > a {
    color: #243861 !important;

    font-family: Arial, sans-serif !important;
    font-size: 28px !important;
    line-height: 24px !important;

    padding: 22px 14px !important;
}

#id_yOhi7Wr .menuInner ul.firstLevel > li.phantom > .item > a > span {
    color: #243861 !important;
    border: 0 !important;
}


/* =========================================================
   MOBILE MENU BUTTON
   ========================================================= */

#id_yOhi7Wr .menuButton {
    color: #243861 !important;
    background: #EBF2F2 !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media only screen and (max-width: 900px) {

    #id_yOhi7Wr .menuInner ul.firstLevel > li > .item > a {
        font-size: 16px !important;
        padding: 16px 20px !important;
    }

    #id_yOhi7Wr .menuInner ul.firstLevel {
        background: #EBF2F2 !important;
    }

}

/* =========================================================
   CLA MEMBER SEARCH BAND
   ========================================================= */

.zoneHeader3,
.zoneHeader3 > .container_12,
.zoneHeader3 > .container_12 > div,
.zoneHeader3 #id_Header2 {
    background: #243861 !important;
    background-color: #243861 !important;
    background-image: none !important;
}

/* =========================================================
   CLA GADGET STYLE 001
   Reusable content cards
   ========================================================= */

.gadgetStyle001 {
    background: #ffffff !important;
    border: 5px solid #243861 !important;
    border-radius: 0 !important;
}


/* Card title area */
.gadgetStyle001 .gadgetStyleTitle {
    background: #243861 !important;
    background-color: #243861 !important;
    background-image: none !important;

    padding: 16px 20px !important;
}


/* Card title */
.gadgetStyle001 .gadgetStyleTitle h4,
.gadgetStyle001 .gadgetStyleTitle .gadgetTitleH4 {
    color: #ffffff !important;

    font-family: 'Red Hat Text', Arial, sans-serif !important;
    font-weight: 600 !important;
    font-size: 24px !important;
    line-height: 1.2 !important;

    margin: 0 !important;
}


/* Card content */
.gadgetStyle001 .gadgetStyleBody {
    background: #ffffff !important;
    color: #292624 !important;

    padding: 18px 20px 20px !important;
}


/* Body text */
.gadgetStyle001 .gadgetStyleBody p,
.gadgetStyle001 .gadgetStyleBody li,
.gadgetStyle001 .gadgetStyleBody font {
    color: #292624 !important;
    font-family: 'Red Hat Text', Arial, sans-serif !important;
}