/* Retrofit header state layer - ported from the deployment checklist
   (the export's main.css carries these; ours predates them).
   Three at-rest states, white once scrolled, 300ms ease. Logo swaps with state.

   BugZap #44: initial (teal) state applied GLOBALLY, not just the homepage.
               WITHDRAWN by Meeky 2026-08-05 once the design was updated again -
               see the D16 block below for what replaced it.
   BugZap #43: no drop-shadow in the initial state (shadow only once scrolled).
   BugZap #42: logo fixed at 150px wide, transparent background (SVGs cleaned).

   `body .site-header` beats the inline sticky-header style in header.php
   (specificity 0,1,1 vs 0,1,0). */

/* D16 / BugZap #106 - THREE header states, not one.

   #44 asked for the teal bar globally and this file used to implement exactly
   that (`body .site-header { background-color: #0F7E7C }` with no page
   carve-out). Meeky withdrew that on 2026-08-05 in #mm - "yes transparent
   float menu. They updated the Agentis design to that now" and "withdraw teal
   everywhere comment, as they updated the design again" - so the export now
   governs. Read off its cascade:

       body.home                 teal,        sticky, in flow
       body.has-hero-header      transparent, FIXED,  floating over the photo
       everything else           white,       sticky, in flow

   The state rules below are scoped with `:not(.is-scrolled)` rather than left
   to source order, so none of them can tie with the scrolled rule on
   specificity. `top` is deliberately NOT set on the fixed state: it would tie
   with `body.admin-bar .site-header { top: 32px }` at (0,2,1) and, because
   this file loads last, would win and slide the header under the admin bar
   for every logged-in editor. The sticky rule's own `top` carries over. */

body .site-header {
    transition: background-color 300ms ease, box-shadow 300ms ease;
    background-color: #ffffff;
    box-shadow: none;
}

body .site-header.is-scrolled {
    background-color: #ffffff;
    box-shadow: 0 6px 16px rgba(14, 27, 68, 0.18);
}

body.home .site-header:not(.is-scrolled) {
    background-color: #0F7E7C;
}

body.has-hero-header .site-header:not(.is-scrolled) {
    background-color: transparent;
}

/* Out of flow so the hero photo starts at y=0 and can spend the export's
   symmetric 150/150 padding - see blocks/page-header/page-header.css. */
body.has-hero-header .site-header {
    position: fixed;
    left: 0;
    right: 0;
}

/* ==========================================================================
   BugZap #234 - always-teal header, preview only.

   Christine: "the client is wanting to see what the header looks like staying
   teal at all times ... instead of it going to white it goes to teal full
   opacity, the fonts are white, the logo stays white." Plus: "please keep the
   code in case they want it reverted."

   Gated behind `?nav=teal` (see smith_nav_teal_preview_body_class in
   functions.php), so it changes nothing for real visitors until someone
   decides. Append the query string to ANY url to see it.

   Everything here is the hero/unscrolled treatment that already exists above,
   restated without the `:not(.is-scrolled)` and `:is(.home, .has-hero-header)`
   conditions - that IS the request: make the dark state unconditional. It has
   to beat `body .site-header.is-scrolled` (0,2,0 + element), hence the body
   prefix on each selector.

   To adopt permanently: drop the query-string gate in functions.php so the
   class is always present. To revert: delete this block and that function.
   ========================================================================== */
body.smith-nav-teal .site-header,
body.smith-nav-teal .site-header.is-scrolled {
    background-color: #0F7E7C !important;
}

/* The hero variant runs the header fixed and transparent so the photo starts
   at y=0. Teal is opaque, so it goes back to sticky/in-flow - otherwise the
   hero would sit underneath an opaque bar. */
body.smith-nav-teal.has-hero-header .site-header {
    position: sticky !important;
}

body.smith-nav-teal .site-logo__img--white { display: block !important; }
body.smith-nav-teal .site-logo__img--dark { display: none !important; }

body.smith-nav-teal .site-header .main-nav > ul > li > a,
body.smith-nav-teal .site-header .nav-menu > li > a,
body.smith-nav-teal .site-header .nav-menu > .menu-item > a {
    color: #ffffff !important;
}

/* Dropdown follows the teal state too, or it reverts to the white 220px card
   against a teal bar - the mismatch #232 was about. */
body.smith-nav-teal .nav-menu .sub-menu {
    background-color: #0F7E7C !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}
body.smith-nav-teal .nav-menu .sub-menu a { color: #ffffff !important; }
body.smith-nav-teal .nav-menu .sub-menu a:hover,
body.smith-nav-teal .nav-menu .sub-menu a:focus {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #f0b200 !important;
}
body.smith-nav-teal .nav-menu .sub-menu .current-menu-item > a,
body.smith-nav-teal .nav-menu .sub-menu .current_page_item > a {
    color: #f0b200 !important;
}

/* Logo swap: the white logo rides the two dark-background states (teal on the
   homepage, transparent over a hero photo); the dark logo rides the white
   at-rest state and the scrolled state everywhere. */
.site-logo__img--white { display: none; }
body:is(.home, .has-hero-header) .site-header:not(.is-scrolled) .site-logo__img--white { display: block; }
body:is(.home, .has-hero-header) .site-header:not(.is-scrolled) .site-logo__img--dark { display: none; }

/* BugZap #42: 150px-wide nav logo at desktop (SVG ratio 250:79 -> 150x47).

   History: this file previously forced 250px, written from a reading of #42 as
   asking for a 250x80 lockup. The ticket text actually specifies
   clamp(150px, 7.81vw + 72.5px, 185px), which is what figma-mobile-v4.css:2018
   already ships - so the override was fighting the canonical rule and the
   deployed logo measured 250x79, 65px over the ticket's own cap.

   Meeky settled it in #mm on 2026-08-03: "the Agentis design site has 150px width
   logo, so match that one." That is a flat 150px, i.e. the LOW end of the
   ticket's clamp rather than its 185px cap - the reference build wins over the
   written range. Kept as an override (not a deletion) because deleting this
   would hand control back to the clamp and yield 185px at >=1440px.

   figma-mobile-v4.css sizes the logo with width: var(--hdr-logo-w) !important;
   this file loads last, so overriding the :root variable wins cleanly. */
@media (min-width: 992px) {
    :root { --hdr-logo-w: 150px; }
    body .site-logo__img { width: 150px; } /* fallback if the layer is absent */
}

/* Teal-state nav colour.

   TOP-LEVEL LINKS ONLY. This deliberately uses the child combinator, the way
   figma-mobile-v4.css writes its own nav rules (`.nav-menu > li > a`). The
   earlier descendant form (`.nav-menu a`) also matched `.sub-menu a`, which
   painted every dropdown link white on the white dropdown panel - invisible.

   BugZap #125 (2026-08-06) corrects the premise underneath that comment. The
   export does NOT render a white card in both states: in the hero state it
   paints the whole panel teal and turns the links white. The dropdown rules
   below now do the same, so the child combinator above is still correct (the
   sub-menu gets its own explicit colour) but the panel is no longer white. */
body:is(.home, .has-hero-header) .site-header:not(.is-scrolled) .main-nav > ul > li > a,
body:is(.home, .has-hero-header) .site-header:not(.is-scrolled) .nav-menu > li > a,
body:is(.home, .has-hero-header) .site-header:not(.is-scrolled) .nav-menu > .menu-item > a {
    color: #ffffff;
}

/* ---- BugZap #125: "dropdown on teal at top of page" -----------------------

   Christine, /business-leadership/ y151. Ours rendered the FOCUS AREAS
   dropdown as a stark white 220px card floating on the teal hero. Read out of
   the export's CSSOM on 2026-08-06 (export home tab, header markup is
   identical on every page):

     body.home / body.has-hero-header, .site-header:not(.is-scrolled)
       .sub-menu          background #0f7e7c; box-shadow 0 10px 30px rgba(0,0,0,.2)
       .sub-menu a        #ffffff
       .sub-menu a:hover  background rgba(255,255,255,.1); colour #f0b200
       current item       #f0b200, and the ::before bullet #f0b200

   The panel width difference (ours 220, export 182) was our own explicit
   min-width: 220px on `.nav-menu .sub-menu` in main.css. The export declares
   min-width: 160px and lets the longest label ("Public Affairs") size the
   card; adopting the same declaration reproduces 182px exactly rather than
   hard-coding it.

   This also settles the disagreement noted in the previous revision of this
   file: figma-desktop-shared.css already forced #f0b200 on the unscrolled
   current item, and we were overriding it back to teal because gold on white
   is ~1.9:1. With the panel teal the export's gold is correct and legible, so
   the override is removed and the shared rule is simply allowed to win.

   Scrolled / non-hero pages are untouched - the panel stays a white card with
   teal links there, exactly as before.

   Measured after (staging, innerWidth 1512): panel 182x130, background
   rgb(15,126,124); Business #f0b200 with a gold bullet, Lifestyle and Public
   Affairs #ffffff. Identical to the export.
   ------------------------------------------------------------------------- */
body:is(.home, .has-hero-header) .site-header:not(.is-scrolled) .nav-menu .sub-menu {
    min-width: 160px;
    background-color: #0f7e7c;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
body:is(.home, .has-hero-header) .site-header:not(.is-scrolled) .nav-menu .sub-menu a {
    color: #ffffff;
}
body:is(.home, .has-hero-header) .site-header:not(.is-scrolled) .nav-menu .sub-menu a:hover,
body:is(.home, .has-hero-header) .site-header:not(.is-scrolled) .nav-menu .sub-menu a:focus {
    background-color: rgba(255, 255, 255, 0.1);
    color: #f0b200;
}
body:is(.home, .has-hero-header) .site-header:not(.is-scrolled) .nav-menu .sub-menu .current-menu-item > a,
body:is(.home, .has-hero-header) .site-header:not(.is-scrolled) .nav-menu .sub-menu .current_page_item > a {
    color: #f0b200;
}
body:is(.home, .has-hero-header) .site-header:not(.is-scrolled) .nav-menu .sub-menu .current-menu-item > a::before,
body:is(.home, .has-hero-header) .site-header:not(.is-scrolled) .nav-menu .sub-menu .current_page_item > a::before {
    background-color: #f0b200;
}

/* Hamburger bars go white on teal (they're spans with background-color). */
body:is(.home, .has-hero-header) .site-header:not(.is-scrolled) .menu-toggle span {
    background-color: #ffffff;
}

/* .btn--cta (gold fill, navy text) reads fine on both teal and white -
   left untouched. */

/* Nav tracking: 0.06em, matching the Agentis design export. THIS SUPERSEDES D9.
   D9 read the Smith Style Guide as calling for 0.12em and overrode the natural
   cascade - which already produced 0.06em - to get there. Christine, 2026-08-05:
   "please follow font sizing of Agentis design", widened by Matt to tracking as well,
   reverses that. Measured on the deployed export: nav links render 17px /
   weight 500 / line-height 22.1px / letter-spacing 1.02px = 0.06em. Ours
   already matched on size, weight and line-height; tracking was the sole
   divergence, at 2.04px on 4 elements against the export's 4.
   The rule is kept rather than deleted so the value is stated explicitly where
   D9 used to override it, and so the child combinators keep `.sub-menu` links
   out of scope. See docs/DECISIONS.md D20. */
body .site-header .nav-menu > li > a,
body .site-header .nav-menu > .menu-item > a,
body .site-header .main-nav > ul > li > a {
    letter-spacing: 0.06em !important;
}

/* BugZap #106: active top-level item keeps a distinct treatment on the teal bar.

   The teal-state colour rule above uses `.nav-menu > li > a` with no carve-out
   for the current item, so it flattened the active link to plain white along
   with every other link. The only thing left marking the current page was the
   teal underline inherited from figma-desktop-shared.css - the label itself
   was indistinguishable from its neighbours.

   Gold is the value the layer itself specifies for the unscrolled/teal state
   ("Teal (unscrolled) header: active-page dot + label go gold for contrast",
   figma-desktop-shared.css:655). That rule was scoped to `.sub-menu` only, but
   its stated rationale is contrast against teal, which applies identically to
   the top-level bar. It is also what the Agentis design reference renders on
   top-level links (measured rgb(240,178,0) on /expertise/).

   Underline is deliberately left alone - box-shadow is untouched, so the
   active item now carries BOTH the gold label and the teal underline.

   Specificity: adding .current-* takes this to (0,5,2) vs the white rule's
   (0,4,2), so it wins without needing !important. */
body:is(.home, .has-hero-header) .site-header:not(.is-scrolled) .main-nav > ul > li.current-menu-item > a,
body:is(.home, .has-hero-header) .site-header:not(.is-scrolled) .main-nav > ul > li.current-menu-ancestor > a,
body:is(.home, .has-hero-header) .site-header:not(.is-scrolled) .main-nav > ul > li.current_page_item > a,
body:is(.home, .has-hero-header) .site-header:not(.is-scrolled) .nav-menu > .menu-item.current-menu-item > a,
body:is(.home, .has-hero-header) .site-header:not(.is-scrolled) .nav-menu > .menu-item.current-menu-ancestor > a,
body:is(.home, .has-hero-header) .site-header:not(.is-scrolled) .nav-menu > .menu-item.current_page_item > a {
    color: #f0b200;
}