/* Flat header (brand refresh): no dropdowns except the account menu. */

#main-header { box-shadow: none; border-bottom: 1px solid var(--acc-line); }
/* Divi writes width="93" height="43" on the logo; override so the SVG keeps its real aspect ratio. */
/* The Vancouver logo is 4:1; Divi gives SVG logos a percentage height, so size it explicitly. */
#main-header #logo { width: 288px; height: 72px; max-height: none !important; padding: 0 !important; background: none !important; transition: width .3s ease, height .3s ease, filter .3s ease; }
#main-header.et-fixed-header #logo { width: 208px; height: 52px; }

/* Lay the logo and the menu out side by side. Divi positions the logo absolutely and pads the
   menu by the logo's width attribute (93px for an SVG), which overlaps the wider brand logo. */
@media (min-width: 981px) {
    #main-header .container.et_menu_container { display: flex; align-items: center; justify-content: space-between; }
    #main-header .logo_container { position: relative; width: auto; height: auto; flex: 0 0 auto; }
    #main-header .logo_container .logo_helper { display: none; }
    #main-header #et-top-navigation { float: none; padding-left: 32px !important; margin-left: auto; }
}

@media (min-width: 981px) {
    #top-menu { display: inline-flex; align-items: center; }
}
#top-menu > li { padding-right: 26px; }
#top-menu > li > a {
    font-family: var(--acc-font-body);
    font-weight: 700;
    font-size: 16px;
    text-transform: none;
    color: var(--acc-slate);
    padding-bottom: 6px;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
}
#top-menu > li > a:hover { opacity: 1; color: var(--acc-green); }
#top-menu > li.current-menu-item > a,
#top-menu > li.current-menu-ancestor > a,
#top-menu > li.current_page_item > a { color: var(--acc-slate); border-bottom-color: var(--acc-teal); }

/* Join: a menu item with the CSS class acc-nav-join, for visitors only. */
#top-menu .acc-nav-join { order: 99; padding-right: 0; }
/* Join is moved to the end with order, so "Log in" is the last li in the markup and Divi drops its
   right padding (#top-menu li:last-child). Space Join from it here instead. */
#top-menu .acc-nav-join { margin-left: 22px; }
#top-menu .acc-nav-join > a {
    background: var(--acc-green);
    color: #fff;
    border: 0;
    border-radius: 6px;
    padding: 10px 18px !important; /* Divi pads menu links at the bottom only */
}
#top-menu .acc-nav-join > a:hover { background: var(--acc-slate); color: #fff; }
/* White text in every state: Divi's .et-fixed-header #top-menu a {color: ... !important} (and the
   slate rule for the scrolled header below) would otherwise turn it slate on green. */
#main-header #top-menu .acc-nav-join > a,
#main-header #top-menu .acc-nav-join > a:hover,
#main-header.et-fixed-header #top-menu .acc-nav-join > a,
#main-header.et-fixed-header #top-menu .acc-nav-join > a:hover { color: #fff !important; }
body.logged-in #top-menu .acc-nav-join,
body.logged-in #mobile_menu .acc-nav-join { display: none; }

/* Account: "Log in" or the member's first name with a small dropdown. */
#top-menu .acc-account > a::after { content: ''; }
#top-menu .acc-account.menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    margin-left: 6px;
    border: solid var(--acc-slate);
    border-width: 0 2px 2px 0;
    padding: 3px;
    transform: rotate(45deg) translateY(-3px);
    position: static;
}
#top-menu .acc-account .sub-menu { border-top: 3px solid var(--acc-teal); }
#top-menu .acc-account .sub-menu a { font-weight: 500; color: var(--acc-slate); }

/* Log in: a plain text link like its siblings. Beats style.css's old outlined box
   (#menu-item-logged-out-user a { border; padding: 20px !important; color !important }).
   Top/bottom padding stay at 20px like the other links (style.css #top-menu li a). */
#top-menu .acc-login > a {
    color: var(--acc-slate) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border: 0 !important;
    border-bottom: 3px solid transparent !important;
}
#top-menu .acc-login > a:hover { color: var(--acc-green) !important; }

#et_search_icon::before { color: var(--acc-slate); }

/* ---- Phone (Divi's phone header is below 981px) ---- */
@media (max-width: 980px) {
    /* Divi positions the phone header absolutely and pads the page for it, so fixing it keeps the layout. */
    #main-header { position: fixed !important; top: 0; left: 0; right: 0; z-index: 9999; }
    /* Sit below the WordPress admin bar: 32px tall above 782px, 46px below. */
    body.admin-bar #main-header { top: 32px !important; }
    #main-header #logo { width: 176px; height: 44px; max-height: none; max-width: none; }
    /* Divi's logo container spans the whole header on phones and swallows taps on "Menu". */
    #main-header .logo_container { width: auto; right: auto; }

    #et_mobile_nav_menu .mobile_nav { display: flex; align-items: center; cursor: pointer; }
    #et_mobile_nav_menu .mobile_menu_bar::before { color: var(--acc-slate); font-size: 28px; }
    #et_mobile_nav_menu .mobile_nav::after {
        content: 'Menu';
        order: -1;
        margin-right: 6px;
        font-weight: 700;
        font-size: 15px;
        color: var(--acc-slate);
    }
    #et_mobile_nav_menu .mobile_nav.opened::after { content: 'Close'; }
    /* header.js makes the icon the menu button. */
    #et_mobile_nav_menu .mobile_menu_bar:focus-visible { outline: 3px solid var(--acc-teal); outline-offset: 4px; }

    #mobile_menu {
        position: fixed;
        top: var(--acc-header-h, 72px);
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: auto;
        background: #fff;
        border-top: 0;
        box-shadow: none;
        padding: 0 0 24px;
        z-index: 9998;
    }
    #mobile_menu li { padding: 0; }
    #mobile_menu > li > a {
        display: flex;
        align-items: center;
        min-height: 52px;
        padding: 0 20px;
        border-bottom: 1px solid var(--acc-line);
        font-family: var(--acc-font-body);
        font-weight: 700;
        font-size: 17px;
        color: var(--acc-slate);
        background: none;
    }
    #mobile_menu > li.current-menu-item > a {
        border-left: 4px solid var(--acc-teal);
        padding-left: 16px;
        background: var(--acc-arctic);
    }
    #mobile_menu .acc-nav-join > a {
        margin: 16px 20px 0;
        justify-content: center;
        min-height: 48px;
        border: 0;
        border-radius: 6px;
        background: var(--acc-green);
        color: #fff;
    }
    #mobile_menu .acc-account > a {
        min-height: 0;
        padding-top: 20px;
        border-bottom: 0;
        font-size: 13px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--acc-green);
    }
    /* Log in is a normal row; !important beats style.css's old #menu-item-logged-out-user a box. */
    #mobile_menu .acc-account.acc-login > a,
    #mobile_menu .acc-login > a {
        min-height: 52px;
        padding: 0 20px !important;
        border: 0 !important;
        border-bottom: 1px solid var(--acc-line) !important;
        font-size: 17px;
        letter-spacing: 0;
        text-transform: none;
        color: var(--acc-slate) !important;
    }
    #mobile_menu .acc-account .sub-menu { display: block !important; padding: 0; border: 0; }
    #mobile_menu .acc-account .sub-menu a { padding: 10px 20px; font-size: 16px; font-weight: 500; color: var(--acc-slate); border: 0; }
    #mobile_menu::after {
        content: 'Resources, policies and contact details are at the bottom of every page.';
        display: block;
        padding: 20px 20px 0;
        font-size: 14px;
        color: var(--acc-muted);
    }
}

@media (max-width: 782px) {
    body.admin-bar #main-header { top: 46px !important; }
}
/* Below 600px the admin bar scrolls away with the page, so pin the header to the top
   (it overlaps the admin bar only while the page is scrolled to the very top). */
@media (max-width: 600px) {
    body.admin-bar #main-header { top: 0 !important; }
}

html.acc-menu-open,
html.acc-menu-open body { overflow: hidden; }

/* ---- Narrow desktops (981-1150px): a smaller logo and tighter menu so it stays on one line ---- */
@media (min-width: 981px) and (max-width: 1150px) {
    #main-header #logo { width: 220px; height: 55px; }
    #main-header.et-fixed-header #logo { width: 184px; height: 46px; }
    #main-header #et-top-navigation { padding-left: 20px !important; }
    #top-menu > li { padding-right: 14px; }
    #top-menu .acc-nav-join { margin-left: 12px; }
    #top-menu > li > a { font-size: 15px; }
}


/* ---- Header background: always white, except over the home page photo before scrolling ----
   Overrides the old home-page rules in style.css (transparent header, white logo box). Divi adds
   .et-fixed-header to #main-header as soon as the page scrolls, so the header fades to white then. */
#main-header {
    background-color: #fff !important;
    transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease;
}
#main-header.et-fixed-header { box-shadow: 0 1px 0 var(--acc-line) !important; }
#main-header.et-fixed-header #top-menu > li > a { color: var(--acc-slate) !important; }
#main-header.et-fixed-header #top-menu > li:not(.acc-nav-join) > a:hover { color: var(--acc-green) !important; }
#main-header.et-fixed-header #et_search_icon::before { color: var(--acc-slate) !important; }

@media (min-width: 981px) {
    .home #main-header:not(.et-fixed-header) {
        background-color: transparent !important;
        border-bottom-color: transparent;
    }
    /* Reversed (white) logo over the photo, as the brand guide asks for busy backgrounds. */
    .home #main-header:not(.et-fixed-header) #logo { filter: brightness(0) invert(1); }
    .home #main-header:not(.et-fixed-header) #top-menu > li:not(.acc-nav-join) > a,
    .home #main-header:not(.et-fixed-header) #et_search_icon::before { color: #fff !important; }
    .home #main-header:not(.et-fixed-header) #top-menu > li.current-menu-item > a { border-bottom-color: var(--acc-teal); }
    .home #main-header.et-fixed-header #top-menu a { color: var(--acc-slate) !important; }
    .home #main-header.et-fixed-header #top-menu .acc-nav-join > a { color: #fff !important; }
    .home #main-header.et-fixed-header #top-menu > li:not(.acc-nav-join) > a:hover { color: var(--acc-green) !important; }
    /* The photo section is pulled up under the header (style.css used -136px for the old header);
       the brand header is about 139px tall, so match it to avoid a white strip above the photo. */
    .home div.et_pb_section.et_pb_section_0 { margin-top: -139px !important; }
}

/* Phones: Divi doesn't mark the header as scrolled, so keep it white with the colour logo. */
@media (max-width: 980px) {
    .home #main-header { background-color: #fff !important; }
    .home #logo { filter: none; vertical-align: middle !important; }
    .home .mobile_menu_bar::before,
    .home #et_search_icon::before { color: var(--acc-slate) !important; }
}