/* ==========================================================
   HEADER.CSS — Camille Market Insight
   Announcement bar + transparent/sticky nav with dropdown
   Uses !important on layout rules to beat Astra specificity
   ========================================================== */

/* ── Kill any Astra nav that might bleed through ── */
#masthead, .ast-primary-header-bar,
.ast-desktop-header, .ast-mobile-header,
.astra-hfb-header { display: none !important; }

/* ── Announcement Bar ── */
.ann-bar {
    position:       fixed;
    top:            0;
    left:           0;
    right:          0;
    z-index:        201;
    background:     rgba(10,10,10,.22);
    backdrop-filter:blur(4px);
    color:          rgba(255,255,255,.75);
    text-align:     center;
    padding:        11px 20px;
    font-family:    var(--font-sans);
    font-size:      11px;
    font-weight:    300;
    letter-spacing: .16em;
    transition:     transform .3s ease, opacity .3s ease;
}
.ann-bar strong { color: #fff; font-weight: 600; }
.ann-bar a { color: #fff; text-decoration: underline; text-underline-offset: 3px; margin-left: 10px; }
.ann-bar--solid { background: var(--navy-dark); }
.ann-bar.is-hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; }

/* ── Primary Nav ── */
.site-nav {
    position:        fixed !important;
    left:            0;
    right:           0;
    z-index:         200;
    padding:         0 64px;
    height:          76px;
    display:         flex !important;
    align-items:     center !important;
    justify-content: space-between !important;
    transition:      background .35s ease, top .3s ease, box-shadow .3s ease;
}

.site-nav--hero {
    top:        0;
    background: #fff !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
}

.site-nav--solid {
    top:        0;
    background: #fff !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
}

.site-nav--hero.is-scrolled {
    top:        0 !important;
    background: #fff !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.12);
}

/* ── Logo ── */
.nav-logo-wrap {
    display:         flex !important;
    align-items:     center;
    text-decoration: none;
    flex-shrink:     0;
}
.nav-logo-wrap .custom-logo,
.nav-logo-wrap img,
.nav-logo-img {
    height:     60px !important;
    max-height: 60px !important;
    width:      auto !important;
    max-width:  180px !important;
    display:    block !important;
    object-fit: contain;
}

/* ── Desktop link wrapper ── */
.site-nav .nav-links {
    display:     flex !important;
    align-items: center;
    position:    static !important;
    width:       auto !important;
    height:      auto !important;
    background:  transparent !important;
    padding:     0 !important;
    transform:   none !important;
    box-shadow:  none !important;
    overflow:    visible !important;
}

/* ── Nav menu list ── */
.site-nav .nav__menu,
.site-nav ul.nav__menu {
    list-style:     none !important;
    display:        flex !important;
    align-items:    center !important;
    gap:            40px !important;
    margin:         0 !important;
    padding:        0 !important;
    flex-direction: row !important;
    background:     transparent !important;
}

/* ── Nav menu items ── */
.site-nav .nav__menu > .menu-item,
.site-nav .nav__menu > li {
    position:    relative !important;
    width:       auto !important;
    border:      none !important;
    padding:     0 !important;
    background:  transparent !important;
}

/* ── Nav links ── */
.site-nav .nav__menu > .menu-item > a,
.site-nav .nav__menu > li > a,
.nav-link {
    font-family:     var(--font-sans) !important;
    font-size:       10px !important;
    font-weight:     600 !important;
    letter-spacing:  .2em !important;
    text-transform:  uppercase !important;
    color:           #000 !important;
    text-decoration: none !important;
    position:        relative;
    transition:      color .25s;
    border:          none !important;
    padding:         0 !important;
    background:      transparent !important;
    display:         inline-block !important;
    width:           auto !important;
}
.site-nav .nav__menu > .menu-item > a::after,
.nav-link::after {
    content:    '';
    position:   absolute;
    bottom:     -3px;
    left:       0;
    width:      0;
    height:     .5px;
    background: var(--crimson);
    transition: width .3s;
}
.site-nav .nav__menu > .menu-item > a:hover,
.site-nav .nav__menu > .menu-item.current-menu-item > a,
.nav-link:hover { color: var(--crimson) !important; }
.site-nav .nav__menu > .menu-item > a:hover::after,
.nav-link:hover::after { width: 100%; }

/* ── Dropdown sub-menu — HIDDEN by default ── */
.site-nav .nav__menu .sub-menu,
.site-nav ul.nav__menu ul {
    position:    absolute !important;
    top:         calc(100% + .75rem) !important;
    left:        0 !important;
    min-width:   220px !important;
    background:  rgba(64,64,64,.97) !important;
    border:      .5px solid rgba(255,255,255,.08) !important;
    list-style:  none !important;
    padding:     .5rem 0 !important;
    margin:      0 !important;
    opacity:     0 !important;
    visibility:  hidden !important;
    transform:   translateY(-6px) !important;
    transition:  opacity .2s, transform .2s, visibility .2s;
    z-index:     9999 !important;
    flex-direction: column !important;
    gap:         0 !important;
    display:     block !important;
}
.site-nav .nav__menu .menu-item:hover > .sub-menu,
.site-nav .nav__menu .menu-item:focus-within > .sub-menu {
    opacity:    1 !important;
    visibility: visible !important;
    transform:  translateY(0) !important;
}

/* ── Sub-menu items ── */
.site-nav .nav__menu .sub-menu .menu-item,
.site-nav .nav__menu .sub-menu li {
    width:      100% !important;
    position:   static !important;
    padding:    0 !important;
    border:     none !important;
    background: transparent !important;
}
.site-nav .nav__menu .sub-menu .menu-item > a,
.site-nav .nav__menu .sub-menu li > a {
    color:          rgba(255,255,255,.7) !important;
    padding:        .55rem 1.1rem !important;
    display:        block !important;
    font-size:      10px !important;
    letter-spacing: .15em !important;
    text-transform: uppercase !important;
    transition:     color .2s, padding-left .2s;
    border:         none !important;
    background:     transparent !important;
}
.site-nav .nav__menu .sub-menu .menu-item > a::after { display: none !important; }
.site-nav .nav__menu .sub-menu .menu-item > a:hover { color: #fff !important; padding-left: 1.4rem !important; }

/* ── Dropdown chevron ── */
.nav-link--has-dropdown {
    display:     inline-flex !important;
    align-items: center !important;
    gap:         5px !important;
}
.nav-chevron {
    display:    inline-block;
    flex-shrink: 0;
    transition: transform .25s;
    position:   relative;
    top:        1px;
}
.menu-item:hover > .nav-link--has-dropdown .nav-chevron,
.menu-item:focus-within > .nav-link--has-dropdown .nav-chevron {
    transform: rotate(180deg);
}

/* ── CTA button ── */
.nav-cta {
    display:         inline-flex !important;
    align-items:     center;
    gap:             8px;
    font-family:     var(--font-sans) !important;
    font-size:       10px !important;
    font-weight:     600 !important;
    letter-spacing:  .18em !important;
    text-transform:  uppercase !important;
    background:      var(--crimson) !important;
    color:           #fff !important;
    padding:         12px 26px !important;
    text-decoration: none !important;
    flex-shrink:     0;
    transition:      background .3s, transform .3s;
    border:          none !important;
}
.nav-cta:hover { background: var(--crimson-dark) !important; transform: translateY(-2px); color: #fff !important; }

/* ── Hamburger — desktop: hidden ── */
.nav-hamburger {
    display:    none !important;
    background: none;
    border:     none;
    cursor:     pointer;
    padding:    4px;
    color:      #0a0a0a;
}

/* ── Mobile overlay elements — hidden on desktop ── */
.mob-nav-header,
.mob-nav-footer { display: none !important; }

/* ── Body offset — non-home pages ── */
body:not(.page-template-page-templates-page-home-php) {
    padding-top: 76px !important;
}

/* ── Tablet ── */
@media (max-width: 1100px) {
    .site-nav { padding: 0 28px !important; }
    .site-nav .nav__menu { gap: 24px !important; }
}

/* ── Mobile ── */
@media (max-width: 900px) {
    .ann-bar { display: none !important; }

    .site-nav--hero { top: 0 !important; }

    /* Full-screen overlay panel */
    .site-nav .nav-links {
        position:        fixed !important;
        top:             0 !important;
        left:            0 !important;
        right:           0 !important;
        bottom:          0 !important;
        inset:           0 !important;
        width:           100% !important;
        height:          100dvh !important;
        background:      #fff !important;
        padding:         0 !important;
        transform:       translateX(100%) !important;
        transition:      transform .35s cubic-bezier(.4,0,.2,1) !important;
        z-index:         999 !important;
        overflow:        hidden !important;
        box-shadow:      none !important;
        display:         flex !important;
        flex-direction:  column !important;
        align-items:     stretch !important;
        box-sizing:      border-box !important;
    }
    .site-nav .nav-links.is-open { transform: translateX(0) !important; }

    /* Overlay header row */
    .mob-nav-header {
        display:         flex !important;
        align-items:     center !important;
        justify-content: space-between !important;
        width:           100% !important;
        height:          76px !important;
        padding:         0 1.5rem !important;
        flex-shrink:     0 !important;
        border-bottom:   1px solid rgba(0,0,0,.1) !important;
        box-sizing:      border-box !important;
    }
    .mob-nav-logo {
        display:     flex !important;
        align-items: center !important;
    }
    .mob-nav-logo .nav-logo-img {
        height:    40px !important;
        max-height:40px !important;
        width:     auto !important;
    }
    .mob-nav-close {
        background:      none !important;
        border:          none !important;
        cursor:          pointer !important;
        padding:         8px !important;
        color:           #0a0a0a !important;
        display:         flex !important;
        align-items:     center !important;
        justify-content: center !important;
        line-height:     1 !important;
    }

    /* Nav links scroll area — grows to fill available space */
    .site-nav .nav__menu,
    .site-nav ul.nav__menu {
        flex-direction: column !important;
        align-items:    stretch !important;
        gap:            0 !important;
        flex:           1 !important;
        overflow-y:     auto !important;
        padding:        0 !important;
        margin:         0 !important;
        list-style:     none !important;
    }
    .site-nav .nav__menu > .menu-item,
    .site-nav .nav__menu > li {
        width:      100% !important;
        box-sizing: border-box !important;
        padding:    0 !important;
        background: transparent !important;
    }
    .site-nav .nav__menu > .menu-item > a,
    .site-nav .nav__menu > li > a {
        display:         block !important;
        padding:         1rem 1.5rem !important;
        font-size:       .9375rem !important;
        font-weight:     600 !important;
        color:           #000 !important;
        border-bottom:   1px solid rgba(0,0,0,.08) !important;
        letter-spacing:  .08em !important;
        text-decoration: none !important;
        transition:      color .15s ease, background .15s ease !important;
        width:           100% !important;
        box-sizing:      border-box !important;
    }
    .site-nav .nav__menu > .menu-item > a:hover,
    .site-nav .nav__menu > li > a:hover,
    .site-nav .nav__menu > .menu-item > a:active,
    .site-nav .nav__menu > li > a:active {
        color:      var(--crimson) !important;
        background: rgba(220,20,60,.06) !important;
    }

    /* Kill desktop underline pseudo-element on mobile */
    .site-nav .nav__menu > .menu-item > a::after { display: none !important; }

    /* Hide chevron on mobile — sub-menu is always visible */
    .nav-chevron { display: none !important; }

    /* Mobile sub-menu — show inline, full-width */
    .site-nav .nav__menu .sub-menu,
    .site-nav .nav__menu ul {
        position:   static !important;
        opacity:    1 !important;
        visibility: visible !important;
        transform:  none !important;
        background: rgba(0,0,0,.03) !important;
        padding:    0 !important;
        border:     none !important;
        box-shadow: none !important;
        display:    block !important;
        width:      100% !important;
        min-width:  0 !important;
        box-sizing: border-box !important;
    }
    .site-nav .nav__menu .sub-menu .menu-item,
    .site-nav .nav__menu .sub-menu li {
        width:      100% !important;
        box-sizing: border-box !important;
    }
    .site-nav .nav__menu .sub-menu .menu-item > a,
    .site-nav .nav__menu .sub-menu li > a {
        display:         block !important;
        color:           #555 !important;
        padding:         .65rem 1.5rem .65rem 2.5rem !important;
        font-size:       .8125rem !important;
        letter-spacing:  .06em !important;
        border-bottom:   1px solid rgba(0,0,0,.05) !important;
        transition:      color .15s ease, background .15s ease !important;
        width:           100% !important;
        box-sizing:      border-box !important;
    }
    .site-nav .nav__menu .sub-menu .menu-item > a:hover,
    .site-nav .nav__menu .sub-menu li > a:hover {
        color:      var(--crimson) !important;
        background: rgba(220,20,60,.06) !important;
    }

    /* Overlay footer — pinned CTA */
    .mob-nav-footer {
        display:        flex !important;
        flex-direction: column !important;
        gap:            .75rem !important;
        padding:        1.25rem 1.5rem !important;
        flex-shrink:    0 !important;
        border-top:     1px solid rgba(0,0,0,.08) !important;
    }
    .mob-nav-cta-btn {
        display:         block !important;
        width:           100% !important;
        text-align:      center !important;
        padding:         .95rem 1rem !important;
        background:      var(--crimson) !important;
        color:           #fff !important;
        font-family:     var(--font-sans) !important;
        font-weight:     600 !important;
        font-size:       .8125rem !important;
        letter-spacing:  .12em !important;
        text-transform:  uppercase !important;
        text-decoration: none !important;
        transition:      background .2s ease !important;
        box-sizing:      border-box !important;
    }
    .mob-nav-cta-btn:hover,
    .mob-nav-cta-btn:active { background: var(--crimson-dark) !important; }

    /* Lock body scroll while overlay is open */
    body.nav-open { overflow: hidden !important; }

    .nav-cta       { display: none !important; }
    .nav-hamburger { display: block !important; }
}