/* Theme 24 */
#notification-bottom > a {
    pointer-events: visible;
}
#container #navigation_can {
    z-index: 1001;
}
#container .js body[style*=hidden] #navigation {
    z-index: 1002;
}

/* On desktop: hide toggle by default; checkNavOverflow() adds body.nav-overflow to reveal it.
   Mobile is unaffected — base style.css keeps #nav-toggle display:block at narrow widths. */
@media (min-width: 60rem) {
    #container #navigation_can #nav-toggle {
        display: none;
    }
    body.nav-overflow #container #navigation_can #nav-toggle {
        display: block;
        position: sticky!important;
    }
}

/* === Drawer mode — only active when JS detects nav overflow === */
body.nav-overflow #container #navigation {
    background: #f4f6f9;
    display: flex!important;
    flex-direction: column!important;
    max-width: 400px;
    overflow: hidden;
    padding: 0!important;
    position: fixed!important;
    top: 0!important;
    bottom: 0!important;
    right: -400px!important;
    transition: right 0.3s ease;
    width: 100%!important;
    z-index: 1003!important;
}
body.nav-overflow #container #navigation.opened {
    background: #f4f6f9;
    opacity: 1!important;
    right: 0!important;
    visibility: visible!important;
}
body.nav-overflow #container #navigation.closed {
    opacity: 0!important;
    visibility: hidden!important;
}
body.nav-overflow #container #navigation::before,
body.nav-overflow #container #navigation.opened::before {
    content: none;
    display: none;
    opacity: 0;
    visibility: hidden;
}

/* Nav list fills the middle — header/footer take their natural heights */
body.nav-overflow #container #navigation > ul {
    display: flex!important;
    flex: 1 1 auto!important;
    flex-direction: column!important;
    height: 100%!important;
    margin: 0!important;
    overflow-x: hidden!important;
    overflow-y: auto!important;
    padding: 0!important;
    width: 100%!important;
    gap: 0;
}

/* === Top-level and placeholder item reset === */
body.nav-overflow #container #nav li {
    display: block!important;
    height: auto!important;
    margin-left: 0!important;
}
body.nav-overflow #container #nav > li,
body.nav-overflow #container #nav > .nav_placeholder,
body.nav-overflow #container #nav > .nav_placeholder > ul > li {
    display: block!important;
    float: none!important;
    margin: 0!important;
    opacity: 1!important;
    padding: 0!important;
    position: relative!important;
    width: 100%!important;
}
body.nav-overflow #container #nav > .nav_placeholder {
    position: static!important;
}
body.nav-overflow #container #nav > .nav_placeholder > ul {
    background: #fff;
    box-shadow: none;
    display: block!important;
    left: auto!important;
    margin: 0!important;
    padding: 0!important;
    pointer-events: auto!important;
    position: static!important;
    right: auto!important;
    width: 100%!important;
    z-index: auto!important;
}
body.nav-overflow #container #nav > .nav_placeholder > ul:before,
body.nav-overflow #container #nav > .nav_placeholder > ul:after {
    content: none;
    display: none;
}
body.nav-overflow #container #nav > .nav_placeholder > ul li {
    background: transparent;
    flex: 0 0 auto!important;
    flex-grow: 0!important;
    text-align: left;
    width: 100%!important;
}

/* === Mega-menu sub-nav reset (must apply before nav opens, not scoped to .opened) ===
   The desktop mega-menu uses flex-flow:row-wrap on nav_placeholder > ul > li > ul
   and flex:1 0 50%; min-width:200px on items. Override without waiting for .opened. */
body.nav-overflow #container #nav > .nav_placeholder > ul > li > ul {
    background: color-mix(in srgb, var(--color-primary-blue, #21355a) 6%, #fff);
    display: block!important;
    flex: none!important;
    flex-flow: unset!important;
    flex-wrap: unset!important;
    margin: 0!important;
    min-width: 0!important;
    opacity: 1!important;
    padding: 0!important;
    pointer-events: auto!important;
    position: static!important;
    transition: none!important;
    visibility: visible!important;
    width: 100%!important;
}
/* Catch sub-items at any nesting depth within nav_placeholder (handles both
   nav_drop columns and nav_placeholder mega-menu column headers) */
body.nav-overflow #container #nav > .nav_placeholder > ul li ul li {
    border-left: 3px solid color-mix(in srgb, var(--color-medium-blue, #3d5f8a) 45%, #fff)!important;
    display: block!important;
    flex: none!important;
    flex-grow: 0!important;
    margin: 0 0 0 1.5rem!important;
    min-width: 0!important;
    padding: 0!important;
    width: 100%!important;
}
body.nav-overflow #container #nav > .nav_placeholder > ul li ul li > a {
    border-top: 1px solid color-mix(in srgb, var(--color-primary-blue, #21355a) 12%, #fff);
    color: var(--color-medium-blue, #3d5f8a)!important;
    display: block!important;
    font-size: 0.82rem!important;
    font-weight: 400!important;
    letter-spacing: 0.06em!important;
    line-height: 1.3!important;
    padding: 0.64rem 1.35rem!important;
    text-transform: uppercase!important;
    white-space: normal!important;
}
body.nav-overflow #container #nav > .nav_placeholder > ul li ul li:first-child > a {
    border-top: 0;
}
body.nav-overflow #container #nav > .nav_placeholder > ul li ul li.active > a,
body.nav-overflow #container #nav > .nav_placeholder > ul li ul li > a.active {
    background: color-mix(in srgb, var(--color-primary-blue, #21355a) 14%, #fff);
    font-weight: 800!important;
}
body.nav-overflow #container #nav > .nav_placeholder > ul li ul li > a:hover {
    background: color-mix(in srgb, var(--color-primary-blue, #21355a) 17%, #fff);
    color: var(--color-primary-blue, #21355a)!important;
}
body.nav-overflow #container #nav > .nav_placeholder > ul li ul li.active {
    border-left-color: var(--color-primary-blue, #21355a);
}

/* === Nav list background + reset === */
body.nav-overflow #container #navigation.opened #nav {
    background: #fff;
    list-style: none;
    padding: 0!important;
}
body.nav-overflow #container #navigation.opened #nav li,
body.nav-overflow #container #navigation.opened #nav ul {
    list-style: none;
}

/* === Top-level item borders === */
body.nav-overflow #container #navigation.opened #nav > li,
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li {
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--color-primary-blue, #21355a) 12%, #fff);
    margin: 0!important;
    padding: 0!important;
}
body.nav-overflow #container #navigation.opened #nav > li:first-child,
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li:first-child {
    border-top: 0;
}
body.nav-overflow #container #navigation.opened #nav > li + li::before,
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li + li::before {
    content: none;
    display: none;
}

/* === Top-level links === */
body.nav-overflow #container #navigation.opened #nav > li > a,
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li > a {
    align-items: center;
    background: none;
    border-radius: 0;
    display: flex!important;
    font-size: 0.92rem!important;
    font-weight: 600;
    justify-content: space-between;
    letter-spacing: 0.09em;
    line-height: 1.3;
    padding: 0.92rem 1.35rem!important;
    position: relative;
    text-decoration: none;
    text-shadow: none;
    text-transform: uppercase!important;
    transition: background 0.15s ease, color 0.15s ease;
}
body.nav-overflow #container #navigation.opened #nav > li > a:hover,
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li > a:hover {
    background: rgba(0, 0, 0, 0.04);
}
body.nav-overflow #container #navigation.opened #nav > li > a:active,
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li > a:active {
    background: rgba(0, 0, 0, 0.07);
}

/* === Active / current page === */
body.nav-overflow #container #navigation.opened #nav > li.active > a,
body.nav-overflow #container #navigation.opened #nav > li > a.active,
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li.active > a,
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li > a.active {
    background: color-mix(in srgb, var(--color-primary-blue, #21355a) 10%, #fff);
    color: var(--color-medium-blue, #3d5f8a);
}

/* === Dropdown chevron === */
body.nav-overflow #container #navigation.opened #nav > li > a.nav_drop::after,
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li > a.nav_drop::after {
    border-bottom: 2px solid currentColor;
    border-right: 2px solid currentColor;
    content: "";
    display: inline-block;
    flex-shrink: 0;
    height: 8px;
    margin-left: auto;
    opacity: 0.5;
    transform: rotate(45deg);
    width: 8px;
}
body.nav-overflow #container #navigation.opened #nav > li > a.nav_drop:hover::after,
body.nav-overflow #container #navigation.opened #nav > li > a.nav_drop:focus-visible::after,
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li > a.nav_drop:hover::after,
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li > a.nav_drop:focus-visible::after {
    content: "";
    opacity: 0.5;
    transform: rotate(45deg);
    transition: none;
}

/* === Sub-nav dropdowns — shown inline === */
body.nav-overflow #container #navigation.opened #nav > li > ul,
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li > ul {
    background: color-mix(in srgb, var(--color-primary-blue, #21355a) 6%, #fff);
    border-radius: 0;
    box-shadow: none!important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    display: block!important;
    margin: 0!important;
    min-width: 0!important;
    opacity: 1!important;
    padding: 0!important;
    position: static!important;
    transition: none!important;
    visibility: visible!important;
    width: 100%!important;
    max-width: 100%!important;
}
body.nav-overflow #container #nav li ul li ul,
body.nav-overflow #container #nav li ul li ul li ul {
    position: static!important;
    opacity: 1!important;
    visibility: visible!important;
    pointer-events: auto!important;
    box-shadow: none!important;
    transition: none!important;
}

/* === Sub-nav list items === */
body.nav-overflow #container #navigation.opened #nav > li > ul > li,
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li > ul > li {
    border-left: 3px solid color-mix(in srgb, var(--color-medium-blue, #3d5f8a) 45%, #fff);
    margin: 0 0 0 1.5rem!important;
    padding: 0!important;
    width: 100%!important;
}
body.nav-overflow #container #navigation.opened #nav > li > ul > li.active,
body.nav-overflow #container #navigation.opened #nav > li > ul > li:has(> a.active),
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li > ul > li.active,
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li > ul > li:has(> a.active) {
    border-left-color: var(--color-primary-blue, #21355a);
}

/* === Sub-nav links === */
body.nav-overflow #container #navigation.opened #nav > li > ul > li > a,
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li > ul > li > a {
    border-top: 1px solid color-mix(in srgb, var(--color-primary-blue, #21355a) 12%, #fff);
    /* !important matches the placeholder path: the palette engine's own
       navigation rules repaint plain colours */
    color: var(--color-medium-blue, #3d5f8a) !important;
    display: block!important;
    font-size: 0.92rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    line-height: 1.3;
    padding: 0.64rem 1.35rem!important;
    text-transform: uppercase;
    white-space: normal!important;
}
body.nav-overflow #container #navigation.opened #nav > li > ul > li:first-child > a,
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li > ul > li:first-child > a {
    border-top: 0;
}
body.nav-overflow #container #navigation.opened #nav > li > ul > li.active > a,
body.nav-overflow #container #navigation.opened #nav > li > ul > li > a.active,
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li > ul > li.active > a,
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li > ul > li > a.active {
    background: color-mix(in srgb, var(--color-primary-blue, #21355a) 14%, #fff);
    font-weight: 800;
}
body.nav-overflow #container #navigation.opened #nav > li > ul > li > a:hover,
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li > ul > li > a:hover {
    background: color-mix(in srgb, var(--color-primary-blue, #21355a) 17%, #fff);
    color: var(--color-primary-blue, #21355a) !important;
}
body.nav-overflow #container #navigation.opened #nav > li > ul > li > a:active,
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li > ul > li > a:active {
    background: color-mix(in srgb, var(--color-primary-blue, #21355a) 22%, #fff);
}

/* === nav_placeholder direct sub-items ===
   The rule at lines 188-204 treats .nav_placeholder > ul > li as top-level items
   (border-left:0, border-top separator, flex link). Its higher specificity beats the
   general #nav > li > ul > li border-left rule. Override here to render them as
   proper sub-nav items matching the #nav > li > ul > li pattern. */
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li {
    border-left: 3px solid color-mix(in srgb, var(--color-medium-blue, #3d5f8a) 45%, #fff);
    border-top: 0;
    margin: 0 0 0 1.5rem!important;
    padding: 0!important;
    width: 100%!important;
}
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li.active,
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li:has(> a.active) {
    border-left-color: var(--color-primary-blue, #21355a);
}
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li > a {
    border-top: 1px solid color-mix(in srgb, var(--color-primary-blue, #21355a) 12%, #fff);
    color: var(--color-medium-blue, #3d5f8a)!important;
    display: block!important;
    font-size: 0.92rem!important;
    font-weight: 400!important;
    letter-spacing: 0.06em!important;
    line-height: 1.3!important;
    padding: 0.64rem 1.35rem!important;
}
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li:first-child > a {
    border-top: 0;
}
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li.active > a,
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li > a.active {
    background: color-mix(in srgb, var(--color-primary-blue, #21355a) 14%, #fff)!important;
    color: var(--color-medium-blue, #3d5f8a)!important;
    font-weight: 800!important;
}
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li > a:hover {
    background: color-mix(in srgb, var(--color-primary-blue, #21355a) 17%, #fff)!important;
    color: var(--color-primary-blue, #21355a)!important;
}
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li > a:active {
    background: #ccd4e5!important;
}

/* === Contact button in nav list — promoted to footer === */
body.nav-overflow #container #navigation.opened #nav a.btn,
body.nav-overflow #container #navigation.opened #nav .btn {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: #1a2844;
    display: flex;
    justify-content: space-between;
    padding: 1.05rem 1.5rem;
    text-transform: uppercase;
}
body.nav-overflow #container #nav li.nav-contact-in-footer {
    display: none!important;
}

/* === Suppress desktop-only decorations (underline bar, hover arrows) ===
   Exclude .nav_drop so the chevron ::after rule above is not overridden. */
body.nav-overflow #container #navigation.opened #nav > li > a:not(.nav_drop)::after,
body.nav-overflow #container #navigation.opened #nav > .nav_placeholder > ul > li > a:not(.nav_drop)::after {
    content: none!important;
    display: none!important;
    width: 0!important;
}
body.nav-overflow #container #nav > li > a:before,
body.nav-overflow #container #nav > li:hover > a:before,
body.nav-overflow #container #nav > .nav_placeholder > ul > li > a:before,
body.nav-overflow #container #nav > .nav_placeholder > ul > li:hover > a:before {
    display: none!important;
    width: 0!important;
}
body.nav-overflow #container #navigation.opened #header_contact,
body.nav-overflow #container #navigation.opened .notification-contact {
    display: none!important;
}

/* === Close (X) button when drawer is open === */
body.nav-overflow #container #navigation.opened + #nav-toggle {
    margin-top: 0!important;
    position: fixed!important;
    right: 1.1rem!important;
    z-index: 1004!important;
}

/* === Drawer header (company branding) === */
body.nav-overflow #container #navigation .nav-drawer-header,
body.nav-overflow #container #navigation .nav-drawer-footer {
    display: block!important;
}
body.nav-overflow #container #navigation .nav-drawer-header {
    border-bottom: 1px solid color-mix(in srgb, var(--color-primary-blue, #21355a) 12%, #fff);
    padding: 1.25rem 3rem 1rem 1.5rem;
    width: 100%;
}
body.nav-overflow #container #navigation .nav-drawer-header .company-branding {
    display: block;
    text-align: left;
}
body.nav-overflow #container #navigation .nav-drawer-header .header_logo {
    display: block;
    text-align: left;
}
body.nav-overflow #container #navigation.opened .header_logo img {
    display: none!important;
}
body.nav-overflow #container #navigation .nav-drawer-header .company-name {
    color: var(--color-dark-blue, #1a2844);
    display: block;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.3;
    text-transform: none;
}
body.nav-overflow #container #navigation .nav-drawer-header .company-tagline {
    color: var(--color-medium-blue, #3d5f8a);
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    margin-top: 0.15rem;
    text-transform: uppercase;
}

/* === Drawer footer (phone + contact CTA) === */
body.nav-overflow #container #navigation .nav-drawer-footer {
    border-top: 1px solid color-mix(in srgb, var(--color-primary-blue, #21355a) 12%, #fff);
    margin-top: auto;
    padding: 1.25rem 1.5rem 1.5rem;
    width: 100%;
}
body.nav-overflow #container #navigation .nav-drawer-phone {
    margin-bottom: 0.6rem;
}
body.nav-overflow #container #navigation .nav-drawer-phone .phone-call {
    align-items: center;
    border: 2px solid var(--color-medium-blue, #3d5f8a);
    border-radius: 4px;
    color: var(--color-medium-blue, #3d5f8a);
    display: flex;
    font-size: 0.9rem;
    font-weight: 600;
    gap: 0.5rem;
    justify-content: center;
    letter-spacing: 0.05em;
    padding: 0.75rem 1rem;
    text-decoration: none;
    width: 100%;
}
body.nav-overflow #container #navigation .nav-drawer-phone .phone-call::before {
    align-items: center;
    content: "\f4b9";
    display: flex;
    flex-shrink: 0;
    font-family: "Ionicons";
    font-size: 21px;
    height: 21px;
    justify-content: center;
    width: 21px;
}
body.nav-overflow #container #navigation.opened .nav-drawer-contact a {
    background: var(--color-primary-blue, #21355a);
    border-radius: 5px;
    color: var(--box-text, #fff);
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    padding: 0.9rem 1rem;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 100%;
}
body.nav-overflow #container #navigation .nav-drawer-phone .phone-call:hover {
    background: color-mix(in srgb, var(--color-primary-blue, #21355a) 8%, transparent);
}
body.nav-overflow #container #navigation .nav-drawer-phone .phone-call:active {
    background: color-mix(in srgb, var(--color-primary-blue, #21355a) 15%, transparent);
}
body.nav-overflow #container #navigation.opened .nav-drawer-contact a:hover {
    background: var(--color-dark-blue, #1a2844);
}
body.nav-overflow #container #navigation.opened .nav-drawer-contact a:active {
    background: color-mix(in srgb, var(--color-dark-blue, #162038) 85%, #000);
}

/* === Horizontal mode — revert drawer styles when fewer than 5 nav items === */
@media (min-width: 60rem) {
    body:not(.nav-overflow) #container #navigation {
        background: transparent;
        height: auto;
        max-width: none;
    }
    body:not(.nav-overflow) #container #navigation > ul {
        flex: unset;
        height: auto;
        overflow-y: visible;
    }
    body:not(.nav-overflow) #container #nav > li {
        height: auto;
    }
    body:not(.nav-overflow) #container #nav > li > ul {
        position: absolute;
        background: #fff;
    }
    body:not(.nav-overflow) #container #nav > li:hover > a:before {
        width: unset;
    }
}

@media (min-width:60rem) {
    #container header #header_contact h4:first-child {
        margin-left: 0;
    }
    #container header #header_contact:before {
        box-shadow: none;
    }
    #container header #header_contact:after {
        box-shadow: none;
    }
    #container header #header_contact h4 {
        filter: invert(0);
        flex-grow: 0;
    }
    #container header #header_contact h4 strong a[data-call]:after {
        display: none;
    }
    #container header #header_contact h4 strong a {
        align-items: center;
        display: inline-block;
        font-size: 15px;
    }
    #container header #header_contact h4 strong {
        display: inline-block;
        overflow: hidden;
    }
}