/**
 * Mobile menu override: 60vw width, 10px from left edge.
 * Loaded in head — instant mobile nav (no wait for footer fluid-overrides or jQuery).
 */

/* ≤992px: hamburger visible; hide nav list until body.sqx-mobile-nav-open */
@media only screen and (max-width: 992px) {
    body:not(.sqx-mobile-nav-open) #main-navigation-bar #primary-menu,
    body:not(.sqx-mobile-nav-open) #main-navigation-bar #menu-nav,
    body:not(.sqx-mobile-nav-open) #main-navigation-bar .main-navigation .menu > ul {
        display: none !important;
        visibility: hidden !important;
    }

    #main-navigation-bar .main-navigation .toggle-menu {
        display: block !important;
        visibility: visible !important;
        margin-left: 0 !important;
    }

    #main-navigation-bar .offcanvas-navigaiton.bottom-bar-left,
    #main-navigation-bar .offcanvas-navigaiton {
        display: flex !important;
        visibility: visible !important;
    }

    body.sqx-mobile-nav-open #main-navigation-bar #primary-menu,
    body.sqx-mobile-nav-open #main-navigation-bar #menu-nav,
    body.sqx-mobile-nav-open #main-navigation-bar .main-navigation .menu > ul {
        display: flex !important;
        visibility: visible !important;
    }
}

/* Mobile menu panel: dropdown flush with bottom of #main-navigation-bar */
@media only screen and (max-width: 992px) {
    #main-navigation-bar:not(.aft-sticky-navigation) {
        position: relative !important;
    }

    #main-navigation-bar .bottom-bar-flex,
    #main-navigation-bar .offcanvas-navigaiton,
    #main-navigation-bar .navigation-container,
    #main-navigation-bar .main-navigation,
    #main-navigation-bar .main-navigation > div.menu {
        position: static !important;
    }

    #primary-menu,
    #menu-nav,
    #menu-nav.menu-mobile,
    body .main-navigation .menu .menu-mobile,
    .main-navigation .menu .menu-mobile,
    .main-navigation .menu > ul,
    .main-navigation .menu > ul.menu-mobile {
        position: absolute !important;
        width: min(60vw, calc(100vw - 20px)) !important;
        max-width: min(60vw, calc(100vw - 20px)) !important;
        left: var(--sqx-mobile-gutter) !important;
        right: auto !important;
        top: 100% !important;
        margin-top: 0 !important;
        transform: none !important;
    }

    #main-navigation-bar.aft-sticky-navigation #primary-menu,
    #main-navigation-bar.aft-sticky-navigation #menu-nav,
    #main-navigation-bar.aft-sticky-navigation .main-navigation .menu > ul {
        left: var(--sqx-sticky-nav-inset, var(--sqx-mobile-gutter)) !important;
    }

    /* Blue bar full edge-to-edge of modal; no white strips on sides; text left-aligned with padding */
    #primary-menu,
    #menu-nav,
    #menu-nav.menu-mobile,
    .main-navigation .menu.menu-mobile,
    .main-navigation #menu-nav.menu-mobile,
    .main-navigation .menu > ul {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    #primary-menu > li,
    #menu-nav.menu-mobile > li,
    .main-navigation .menu.menu-mobile > li,
    .main-navigation .menu > ul > li,
    .main-navigation #menu-nav.menu-mobile > li {
        margin: 0 !important;
        padding: 0 !important;
    }
    #primary-menu,
    #menu-nav,
    #menu-nav.menu-mobile,
    .main-navigation .menu.menu-mobile,
    .main-navigation .menu .menu-mobile,
    .main-navigation .menu > ul.menu-mobile {
        align-items: flex-start !important;
        text-align: left !important;
    }

    #primary-menu > li,
    #menu-nav.menu-mobile > li,
    .main-navigation .menu.menu-mobile > li,
    .main-navigation .menu > ul > li,
    .main-navigation #menu-nav.menu-mobile > li {
        text-align: left !important;
        align-self: stretch !important;
    }

    #primary-menu > li > a,
    #menu-nav.menu-mobile > li > a,
    .main-navigation .menu.menu-mobile > li > a,
    .main-navigation .menu > ul > li > a,
    .main-navigation #menu-nav.menu-mobile > li > a,
    .main-navigation .menu .menu-mobile li a {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 10px !important;
        border-top: 0 !important;
        border-bottom: 0 !important;
        border-radius: 5px !important;
        text-align: left !important;
        justify-content: flex-start !important;
        transition: color 0.25s ease, background-color 0.25s ease !important;
    }

    #primary-menu > li > a:hover,
    #primary-menu > li > a:focus-visible,
    #menu-nav.menu-mobile > li > a:hover,
    #menu-nav.menu-mobile > li > a:focus-visible,
    .main-navigation .menu.menu-mobile > li > a:hover,
    .main-navigation .menu.menu-mobile > li > a:focus-visible,
    .main-navigation .menu > ul > li > a:hover,
    .main-navigation .menu > ul > li > a:focus-visible,
    .main-navigation #menu-nav.menu-mobile > li > a:hover,
    .main-navigation #menu-nav.menu-mobile > li > a:focus-visible {
        color: #ffffff !important;
        background-color: #005696 !important;
    }

    /* Sticky: keep current-page highlight (theme only styles :hover in sticky dropdown) */
    #main-navigation-bar.aft-sticky-navigation #menu-nav.menu-mobile > li.current-menu-item > a,
    #main-navigation-bar.aft-sticky-navigation #menu-nav.menu-mobile > li.current_page_item > a,
    #main-navigation-bar.aft-sticky-navigation .main-navigation .menu.menu-mobile > li.current-menu-item > a,
    #main-navigation-bar.aft-sticky-navigation .main-navigation .menu.menu-mobile > li.current_page_item > a,
    .af-bottom-header.aft-sticky-navigation #menu-nav.menu-mobile > li.current-menu-item > a,
    .af-bottom-header.aft-sticky-navigation #menu-nav.menu-mobile > li.current_page_item > a,
    .af-bottom-header.aft-sticky-navigation .main-navigation .menu.menu-mobile > li.current-menu-item > a,
    .af-bottom-header.aft-sticky-navigation .main-navigation .menu.menu-mobile > li.current_page_item > a {
        color: #ffffff !important;
        background-color: #005696 !important;
    }
}

/* xs: keep same gutter-aligned dropdown anchor */
@media only screen and (max-width: 576px) {
    #menu-nav.menu-mobile,
    body .main-navigation .menu .menu-mobile,
    .main-navigation .menu .menu-mobile,
    .main-navigation .menu > ul.menu-mobile {
        left: var(--sqx-mobile-gutter) !important;
        right: auto !important;
        transform: none !important;
    }

    #main-navigation-bar.aft-sticky-navigation #menu-nav.menu-mobile,
    #main-navigation-bar.aft-sticky-navigation .main-navigation .menu > ul.menu-mobile {
        left: var(--sqx-sticky-nav-inset, var(--sqx-mobile-gutter)) !important;
    }
}