/* ==========================================================================
   Header & Navigation
   ========================================================================== */

/* -- Wrapper ------------------------------------------------------------ */
.header-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    transition: background-color 0.2s, box-shadow 0.2s;
    pointer-events: none; /* let clicks pass through to nav siblings below */
}

/* Containers also pass through — only restore on actual interactive elements */
.site-header,
.scrolled-bar {
    pointer-events: none;
}

.site-header > *,
.scrolled-bar > * {
    pointer-events: auto;
}

/* Sticky state — triggers when JS adds .scrolled */
.header-wrap.scrolled {
    position: fixed;
    background-color: rgba(31, 54, 105, 0.97);
    /*
     * backdrop-filter intentionally omitted: it creates a new containing block
     * for position:fixed children (per CSS spec + Safari behaviour), which
     * breaks the mobile nav drawer height. Solid opacity compensates visually.
     * The barReveal animation also avoids transform for the same reason.
     */
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
    border-bottom: 2px solid var(--color-red);
    animation: barReveal 0.3s ease;
}

@keyframes barReveal {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* -- Primary bar (logo + hamburger only — nav lives outside <header>) ------- */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;
    max-width: var(--max-width);
    margin: 0 auto;
    width: 100%;
    padding-left: 40px;
    padding-right: 40px;
}

/* Hide primary bar when scrolled; show scrolled-bar instead */
.header-wrap.scrolled .site-header {
    display: none;
}

/* -- Desktop nav (outside <header>, overlays header area via fixed position) */
/*
 * The nav is a sibling of <header class="header-wrap"> in the DOM so no
 * header CSS (display, visibility, backdrop-filter, transforms) can affect it.
 * On desktop it floats fixed over the right side of the header row.
 * On desktop+scrolled the adjacent-sibling rule hides it (compact bar takes over).
 */
@media (min-width: 1025px) {
    .main-nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 101; /* above header-wrap (100) so nav links are on top and clickable */
        display: flex;
        justify-content: flex-end;
        max-width: var(--max-width);
        margin: 0 auto;
        padding-right: 40px;
        pointer-events: none; /* pass clicks through empty left portion */
    }

    .main-nav > ul {
        pointer-events: auto;
    }

    /* Hide desktop nav when header is scrolled — compact bar replaces it */
    .header-wrap.scrolled + .main-nav {
        display: none;
    }

    /* Desktop drawer — slide-in when scrolled bar hamburger is clicked */
    .header-wrap.scrolled ~ .main-nav.open {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: 320px;
        max-width: 85vw;
        background-color: var(--color-white);
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
        padding: 80px 24px 24px;
        overflow-y: auto;
        z-index: 200;
        pointer-events: auto;
        transform: none;
        transition: none; /* desktop drawer appears instantly; JS handles open state */
    }

    .header-wrap.scrolled ~ .main-nav.open > ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        pointer-events: auto;
    }

    .header-wrap.scrolled ~ .main-nav.open > ul > li > a {
        display: block;
        padding: 14px 0;
        font-size: 16px;
        line-height: 1.4;
        color: var(--color-navy);
        border-bottom: 1px solid var(--color-light);
        white-space: normal;
    }

    .header-wrap.scrolled ~ .main-nav.open > ul > li > a > span::after {
        display: none;
    }

    .header-wrap.scrolled ~ .main-nav.open .submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border-top: none;
        border-radius: 0;
        background: transparent;
        padding: 0 0 8px 16px;
        display: none;
    }

    .header-wrap.scrolled ~ .main-nav.open .has-submenu.submenu-open > .submenu {
        display: block;
    }

    .header-wrap.scrolled ~ .main-nav.open .submenu li a {
        color: var(--color-navy);
        padding: 10px 0;
        border-bottom: 1px solid var(--color-light);
    }

    .header-wrap.scrolled ~ .main-nav.open .submenu li a:hover {
        background: transparent;
        color: var(--color-red);
    }

    .header-wrap.scrolled ~ .main-nav.open .nav-cta-group--mobile {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin: 24px 0 0;
    }

}

/* -- Scrolled compact bar ----------------------------------------------- */
.scrolled-bar {
    display: none;
    align-items: center;
    gap: 16px;
    padding: 8px 40px;
    max-width: var(--max-width);
    margin: 0 auto;
    width: 100%;
}

.header-wrap.scrolled .scrolled-bar {
    display: flex;
}

.scrolled-bar-menu {
    display: flex; /* shown on all screen sizes inside the scrolled bar */
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    width: 34px;
    height: 30px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.scrolled-bar-menu:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.06);
}

.scrolled-bar-menu svg {
    fill: currentColor;
}

.scrolled-bar-right {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-right: auto; /* push hamburger to the far right */
}

.scrolled-bar-cta {
    display: inline-flex;
    align-items: center;
    padding: 6px 18px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-white);
    background: var(--color-red);
    border-radius: 100px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s, transform 0.2s;
}

.scrolled-bar-cta:hover {
    background: #c71f23;
    color: var(--color-white);
    transform: translateY(-1px);
    box-shadow: 0 0 20px rgba(233, 38, 43, 0.45);
}

.scrolled-bar-phone {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-white);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s;
}

.scrolled-bar-phone svg {
    fill: currentColor;
    flex-shrink: 0;
}

.scrolled-bar-phone:hover {
    color: var(--color-red);
}

/* -- Logo --------------------------------------------------------------- */
.logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.logo img {
    width: 300px;
    height: auto;
}

/* -- Desktop nav -------------------------------------------------------- */
.main-nav > ul {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-nav > ul > li {
    position: relative;
}

.main-nav > ul > li > a {
    display: block;
    padding: 0 14px;
    font-size: 15px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    line-height: 60px;
    transition: color 0.2s ease;
}

/* Animated underline on hover/active */
.main-nav > ul > li > a > span {
    position: relative;
}

.main-nav > ul > li > a > span::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-red);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.25s ease;
}

.main-nav > ul > li > a:hover > span::after,
.main-nav > ul > li.active > a > span::after,
.main-nav > ul > li.current-menu-item > a > span::after,
.main-nav > ul > li.current-menu-ancestor > a > span::after {
    transform: scaleX(1);
    transform-origin: left;
}

.main-nav > ul > li > a:hover {
    color: var(--color-white);
}

.main-nav > ul > li.active > a,
.main-nav > ul > li.current-menu-item > a,
.main-nav > ul > li.current-menu-ancestor > a {
    color: var(--color-white);
    font-weight: 500;
}

/* Dropdown arrows */
.has-submenu > a::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    margin-left: 5px;
    vertical-align: middle;
    opacity: 0.6;
}

/* -- Dropdown menus ----------------------------------------------------- */
.has-submenu {
    position: relative;
}

.submenu {
    list-style: none;
    padding: 6px 0;
    margin: 0;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--color-navy);
    border-top: 2px solid var(--color-red);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    z-index: 20;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.has-submenu:hover > .submenu,
.has-submenu:focus-within > .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.submenu li a {
    display: block;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.submenu li a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-white);
}

/* -- Mobile toggle ------------------------------------------------------ */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--color-white);
    cursor: pointer;
    padding: 10px;
    font-size: 24px;
    line-height: 1;
    z-index: 30;
}

.menu-toggle svg {
    width: 1.2em;
    height: 1.2em;
    fill: currentColor;
}

.menu-toggle .icon-close {
    display: none;
}

.menu-toggle.active .icon-close {
    display: block;
}

.menu-toggle.active .icon-menu {
    display: none;
}

/* -- CTA group (inside the nav drawer) ---------------------------------- */
.nav-cta-group--mobile {
    display: none; /* shown via media query (mobile) or desktop drawer rule */
}

.nav-cta-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 18px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-white) !important;
    background: var(--color-red);
    border-radius: 100px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s, transform 0.2s;
}

.nav-cta-btn:hover {
    background: #c71f23;
    transform: translateY(-1px);
    box-shadow: 0 0 20px rgba(233, 38, 43, 0.45);
}

.nav-phone-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-navy) !important;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s;
}

.nav-phone-btn svg {
    fill: currentColor;
    flex-shrink: 0;
}

.nav-phone-btn:hover {
    color: var(--color-red) !important;
}

/* -- Spacer for fixed header on non-hero pages -------------------------- */
body {
    padding-top: 0;
}

/* -- Mobile Styles ------------------------------------------------------ */
@media (max-width: 1024px) {
    .menu-toggle {
        display: block;
    }

    .main-nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 320px;
        max-width: 85vw;
        background-color: var(--color-white);
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
        padding: 80px 24px 24px;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.35s var(--ease-out);
        z-index: 200; /* above header-wrap z-index:100 */
    }

    .main-nav.open {
        transform: translateX(0);
    }

    .main-nav > ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .main-nav > ul > li > a {
        padding: 14px 0;
        font-size: 16px;
        line-height: 1.4;
        color: var(--color-navy);
        border-bottom: 1px solid var(--color-light);
    }

    .main-nav > ul > li > a:hover {
        color: var(--color-red);
    }

    .main-nav > ul > li > a > span::after {
        display: none;
    }

    .submenu {
        position: static;
        box-shadow: none;
        border-top: none;
        border-radius: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        padding: 0 0 8px 16px;
        display: none;
        background: transparent;
    }

    .has-submenu.submenu-open > .submenu {
        display: block;
    }

    .submenu li a {
        color: var(--color-navy);
        padding: 10px 0;
        border-bottom: 1px solid var(--color-light);
    }

    .submenu li a:hover {
        background: transparent;
        color: var(--color-red);
    }

    /* Mobile CTA group */
    .nav-cta-group--mobile {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 16px;
        margin: 24px 0 0;
        padding: 16px 0;
        border-top: 1px solid var(--color-light);
    }

    /* Scrolled-bar: hide menu-toggle (we already have it in primary bar) */
    .scrolled-bar-menu {
        display: flex; /* keep visible for slide-nav trigger */
    }

    /* Mobile overlay */
    .nav-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 15;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s;
    }

    .nav-overlay.visible {
        opacity: 1;
        visibility: visible;
    }
}