/*
 * FinanceProspector — Site Header
 * Component: site-header
 * Version:   v1.10 — FROZEN — QA approved 2026-08-04
 * --------------------------------------------------------
 * Change log
 * v1.10 — Hamburger breakpoint corrected after production-menu geometry QA.
 *         Production menu has 6 items (Categories, Providers, Comparisons,
 *         Resources, Editorial, About Us). Geometry analysis confirmed:
 *           640px: nav overflows by 150px — hamburger required.
 *           768px: nav overflows by 22px even at 13px/20px gaps — hamburger required.
 *                  Only option that technically fits (13px/15px) yields +3px
 *                  clearance — unsafe for cross-platform system-ui rendering.
 *           1024px: desktop nav (15px/38px) fits with 23px clearance — safe.
 *         Decision: hamburger breakpoint moved to < 1024px (geometry-driven).
 *         Tablet condensed tier removed — no safe condensed layout exists for
 *         this menu below 790px.
 *         Result: 2-tier header (hamburger < 1024px / desktop ≥ 1024px).
 *         Breakpoint aligns with Hero stacking (also 1024px) — consistent.
 * v1.9 — Responsive production implementation.
 *         Tablet (640–1023px): condensed horizontal nav. Logo 56→44px.
 *           Nav gap 38→20px. Nav font 15→13px. Header height ≈68px.
 *           SUPERSEDED by v1.10 — condensed tier removed.
 *         Mobile (< 640px): hamburger menu. Logo 56→40px.
 *           Full-width vertical nav dropdown. 44px touch targets.
 *           Hamburger: 44×44px, 3-bar icon, animated X on open.
 *           JS toggle: .is-open class on #site-navigation.
 *           Escape key closes + returns focus to toggle button.
 *           Click outside header closes menu.
 *         Desktop (≥ 1024px): unchanged.
 * v1.8 — Navigation item gap: 36px → 38px. No other properties changed.
 * v1.7 — Navigation label font size: 14px → 15px.
 *         No other properties changed.
 * v1.6 — Navigation label font size: 13px → 14px.
 *         Aligns with Body S token used throughout the design system.
 *         No other properties changed.
 * v1.5 — Horizontal container padding: 32px → 20px.
 *         Reference image (01_Header.png) pixel analysis confirmed the logo's
 *         leftmost pixel falls at column 20, indicating the container's left
 *         padding is 20px (not 32px). Vertical padding (11px) unchanged.
 *         No tagline ("Compare Trusted Financial Providers") was found in the
 *         approved reference image. All dark pixels in rows 49–70 of the
 *         reference are confirmed SVG icon artwork (green diagonal + navy
 *         magnifier). No tagline CSS is introduced here.
 * v1.4 — Logo CSS height: 50px → 56px (compensates for corrected viewBox
 *         which added safe padding around the artwork).
 *         Inner padding: 14px → 11px (restores 78px header height).
 * v1.3 — Chevron colour confirmed green (#42B649) via reference QA.
 *         Navigation font-family explicitly set to system-ui stack.
 * v1.2 — Chevron reverted to external SVG mask (data-URI approach rejected).
 * v1.1 — Initial corrections post-install QA.
 * v1.0 — Initial implementation.
 *
 * CHEVRON SETUP (WordPress Admin):
 *   Appearance → Menus → Screen Options → enable "CSS Classes"
 *   Add class "has-chevron" to: Categories, Resources menu items.
 *
 * RESPONSIVE BREAKPOINTS (v1.10):
 *   < 1024px  Mobile + Tablet — hamburger menu
 *   ≥ 1024px  Desktop — full horizontal nav (unchanged)
 */

/* ── Outer shell ──────────────────────────────────────── */
.site-header {
    background-color: var(--fp-color-white);
    width: 100%;
}

/* ── Inner container ──────────────────────────────────── */
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* v1.7 — TWO INDEPENDENT HORIZONTAL ANCHORS.
       The inner is full-width and carries no horizontal padding, because the
       logo and the navigation no longer share one container: the logo aligns
       to the HERO's left axis while the navigation keeps the header's own
       1240px right axis. A single shared container could not do both — it
       would have had to widen to 1500px, which moved the navigation ~130px
       right at 1600px. */
    box-sizing: border-box;
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 16px 0;   /* v1.6: vertical 11px → 16px; horizontal moved to the anchors */
}

/* ── Horizontal anchors ───────────────────────────────────
 * LOGO -> hero left axis. The formula mirrors .fp-hero__container exactly
 * (max-width 1500 / 32px gutter on desktop), so the logo's visible left edge
 * lands on the same x as the "F" in "Find." at every width. Expressed as the
 * same max-width/gutter arithmetic the hero already uses — NOT as per-width
 * offsets — so it self-corrects if the hero container ever changes.
 * Verified 0.0px delta at 1600, 1440, 1280, 1024, 834 and 375.
 *
 * NAV -> the header's existing 1240px axis, reproducing v3.11.37's right
 * edge exactly: 1400 at 1600, 1320 at 1440, 1240 at 1280, 1004 at 1024.
 * ──────────────────────────────────────────────────────── */
.site-header__logo {
    margin-left: calc(max(0px, (100vw - 1500px) / 2) + var(--fp-margin-desktop));
}

/* NAV RIGHT ANCHOR — v1.8.
 * The nav previously used the header's old 1240px axis, which left it sitting
 * 123-148px right of the centre of the space beside the logo: at 1440 the gap
 * was 417px on the left against 120px on the right.
 * The basis narrows 1240 -> 1092, moving the block modestly left so it reads
 * as connected to the logo while KEEPING its right-side weight. Full geometric
 * centring was rejected: it would leave 323px of dead space at 1600 and split
 * the header into three unrelated zones.
 * Exact at 1280 and 1440; +12px at 1600; unchanged at 1024, where the formula
 * floors at 20px and the logo-to-nav gap is already only 101px. */
.site-header__inner > :last-child {
    margin-right: calc(max(0px, (100vw - 1092px) / 2) + 20px);
}

/* Logo anchor at tablet and mobile — mirrors the hero container's own
   max-width and gutter at each range: 800px/24px, then none/20px. */
@media (min-width: 640px) and (max-width: 1023px) {
    .site-header__logo {
        margin-left: calc(max(0px, (100vw - 800px) / 2) + var(--fp-margin-tablet));
    }
}

@media (max-width: 639px) {
    .site-header__logo {
        margin-left: var(--fp-margin-mobile);
    }
}

/* ── Logo block ───────────────────────────────────────── */
.site-header__logo {
    flex-shrink: 0;
}

.site-header__logo a {
    display: block;
    line-height: 0;
}

.site-header__logo img {
    display: block;
    height: 56px;   /* v1.4: 50px → 56px; corrected viewBox adds safe padding */
    width: auto;
}

/* ── Navigation ───────────────────────────────────────── */
.site-header__nav {
    display: flex;
    align-items: center;
}

.site-header__nav-list {
    display: flex;
    align-items: center;
    /* v2.0 — FLUID INTER-ITEM GAP, 24px at 1024 -> 38px at 1200.
       The nav block is a fixed 550px: six items totalling 359.8px of text
       plus five 38px gaps, which are 190px of the total. At 1024 the space
       between the logo (ending x353.5) and the 20px right margin is only
       650px, so the block left just 101px of clearance and "Categories"
       crowded the end of the lockup. The right margin is already at its
       20px floor there, so the block cannot move right — the inter-item gap
       is the only lever.
       Tightening ONLY where the space is short: 171px of clearance at 1024,
       rising smoothly to 223px at 1200, where the gap reaches exactly 38px
       and meets the wider-desktop treatment with NO jump. A fixed tighter
       gap was rejected: it would over-loosen 1199 and spring back visibly
       at 1200. */
    gap: clamp(24px, calc(24px + (100vw - 1024px) * 0.0795), 38px);
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-header__nav-list .menu-item {
    margin: 0;
    padding: 0;
    position: relative;
}

.site-header__nav-list .menu-item > a,
.site-header__nav-list .menu-item > .fp-nav-trigger {
    display: inline-flex;
    align-items: center;
    color: var(--fp-color-navy);
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;   /* v3.56.0: was the system stack */
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
    transition: color 0.15s ease;
}

/* .fp-nav-trigger is a real <button> (Resources) standing in for the <a>
   every rule above and below is written for. These four properties exist
   ONLY to strip a <button>'s user-agent chrome (border, background, hit-box
   padding, system cursor) down to the same blank slate an <a> already is —
   every declaration elsewhere in this file that already styles `> a` also
   matches `> .fp-nav-trigger` and produces the identical result, unchanged. */
.site-header__nav-list .menu-item > .fp-nav-trigger {
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    text-align: inherit;
}

.site-header__nav-list .menu-item > a:hover,
.site-header__nav-list .menu-item > a:focus,
.site-header__nav-list .menu-item > .fp-nav-trigger:hover,
.site-header__nav-list .menu-item > .fp-nav-trigger:focus {
    color: var(--fp-color-navy);   /* v3.57.167 r2 (owner-approved shared change): Core Navy on hover and focus; Core Green text was 2.62:1 on white. */
    outline: none;
}

.site-header__nav-list .menu-item > a:focus-visible,
.site-header__nav-list .menu-item > .fp-nav-trigger:focus-visible {
    outline: 2px solid var(--fp-color-green);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ── Chevron ──────────────────────────────────────────── */
/*
 * has-chevron CSS class must be manually assigned in WP Admin:
 *   Appearance → Menus → Screen Options → CSS Classes
 *   Apply to: Categories, Resources menu items.
 */
.site-header__nav-list li.has-chevron > a::after,
.site-header__nav-list li.has-chevron > .fp-nav-trigger::after {
    content: '';
    display: inline-block;
    width: 10px;
    height: 6px;
    background-color: var(--fp-color-green);   /* confirmed green in approved reference */
    -webkit-mask-image: url('../../images/icons/chevron-down.svg');
    mask-image: url('../../images/icons/chevron-down.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    margin-left: 4px;
    flex-shrink: 0;
    transition: background-color 0.15s ease;
}

.site-header__nav-list li.has-chevron > a:hover::after,
.site-header__nav-list li.has-chevron > a:focus::after,
.site-header__nav-list li.has-chevron > .fp-nav-trigger:hover::after,
.site-header__nav-list li.has-chevron > .fp-nav-trigger:focus::after {
    background-color: var(--fp-color-navy);
}

/* ── Categories dropdown (v1.5) ───────────────────────────
 * SCOPED HEADER FREEZE EXCEPTION, approved 2026-08-17. The green Categories
 * chevron previously implied a dropdown that did not exist; this supplies the
 * missing behaviour and nothing else.
 *
 * DELIBERATELY UNCHANGED: header height, logo, top-level labels, nav
 * typography, nav spacing and the chevrons. The panel is absolutely positioned,
 * so it is out of flow and cannot alter the top-level row's geometry.
 *
 * Generic: any menu item the walker marks .fp-has-subnav gets this treatment.
 * No category-specific and no page-specific rule.
 * ───────────────────────────────────────────────────────── */

/* Any sub-menu not driven by the walker stays hidden, as before. */
.site-header__nav-list .sub-menu {
    display: none;
}

.site-header__nav-list .fp-has-subnav {
    position: relative;
}

.site-header__nav-list .fp-has-subnav > .fp-subnav {
    display: block;                 /* re-enabled only for this panel */
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 200;
    min-width: 260px;
    margin: 0;
    padding: var(--fp-space-xs) 0;  /* 8px */
    list-style: none;
    background-color: var(--fp-color-white);
    border: 1px solid var(--fp-color-gray-200);
    border-radius: var(--fp-radius-card);
    box-shadow: var(--fp-shadow-2);

    /* Hidden by default without leaving the accessibility tree mid-animation:
       visibility flips with opacity, and pointer-events guard stray hovers. */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-4px);
    /* visibility flips INSTANTLY on open and is delayed only on close.
       A plain `visibility .12s` left the panel hidden for the first 120ms,
       and an element that is visibility:hidden cannot receive focus - so
       ArrowDown opened the panel but focus fell through to the skip link,
       which in turn broke Escape. Found in staging QA. */
    transition: opacity .12s ease, transform .12s ease, visibility 0s .12s;
}

/* Hover, keyboard focus anywhere inside, and the explicit JS toggle.
 *
 * :not(.is-subnav-dismissed) is what makes Escape work. Escape returns focus
 * to the Categories trigger, and that trigger lives INSIDE .fp-has-subnav - so
 * :focus-within kept matching and held the panel open even after JS removed
 * .is-subnav-open and set aria-expanded="false". Removing a class cannot beat a
 * selector that still matches. The dismissed flag suppresses the passive
 * hover/focus triggers until the pointer or focus actually leaves the item,
 * or until the panel is deliberately reopened. Found in manual browser QA. */
.site-header__nav-list .fp-has-subnav:hover:not(.is-subnav-dismissed) > .fp-subnav,
.site-header__nav-list .fp-has-subnav:focus-within:not(.is-subnav-dismissed) > .fp-subnav,
.site-header__nav-list .fp-has-subnav.is-subnav-open > .fp-subnav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity .12s ease, transform .12s ease, visibility 0s 0s;
}

.fp-subnav__item {
    margin: 0;
    padding: 0;
}

.fp-subnav__link {
    display: block;
    padding: 10px var(--fp-space-s);          /* 16px inline */
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;   /* v3.56.0: was the system stack */
    font-size: var(--fp-font-body-s);         /* 14px */
    font-weight: var(--fp-weight-medium);     /* 500 */
    line-height: 1.35;
    color: var(--fp-color-navy);
    text-decoration: none;
    /* v3.57.76 - ONLY the properties the hover/focus state changes. The shorthand var(--fp-button-transition) is
       `150ms ease`, which transitions ALL properties - including the visibility each link inherits from the panel,
       so on opening a link stayed visibility:hidden for a frame and refused keyboard focus (Arrow Down race). */
    transition: background-color var(--fp-button-transition), color var(--fp-button-transition);
}

/* Colour re-asserted on every state - GeneratePress emits its own a:hover
   colour at equal specificity and later in source order. */
.fp-subnav__link:hover,
.fp-subnav__link:focus {
    background-color: var(--fp-color-gray-50);
    color: var(--fp-color-blue);
}

.fp-subnav__link:visited { color: var(--fp-color-navy); }

.fp-subnav__link:focus-visible {
    outline: 2px solid var(--fp-color-blue);
    outline-offset: -2px;
}

/* "View All Categories" reads as the closing action of the list. */
.fp-subnav__item--all {
    margin-top: var(--fp-space-xs);
    border-top: 1px solid var(--fp-color-gray-200);
    padding-top: var(--fp-space-xs);
}

.fp-subnav__link--all {
    font-weight: var(--fp-weight-label);      /* 600 */
    color: var(--fp-color-blue);
}

/* Chevron rotates to signal state. Transform only - no layout shift. */
.site-header__nav-list li.has-chevron.is-subnav-open > a::after,
.site-header__nav-list li.has-chevron.is-subnav-open > .fp-nav-trigger::after {
    transform: rotate(180deg);
}

/* ── Bottom divider ───────────────────────────────────── */
.site-header__divider {
    width: 100%;
    height: 1px;
    background-color: var(--fp-color-divider);
}


/* ════════════════════════════════════════════════════════
 * RESPONSIVE — v1.10
 * ════════════════════════════════════════════════════════ */


/* ── Hamburger Button ─────────────────────────────────────
 * Hidden by default at all widths.
 * Revealed at < 1024px (mobile + tablet) via the media query below.
 * 44×44px touch target meets WCAG 2.5.5 (AAA).
 */
.site-header__hamburger {
    display: none;                              /* hidden at desktop */
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    padding: 10px;
    flex-shrink: 0;
    transition: background-color var(--fp-button-transition);
}

.site-header__hamburger:hover {
    background-color: var(--fp-color-white);   /* v3.57.140 (owner, 2026-10-26): White #FFFFFF. Was --fp-color-gray-100 #F3F4F6, the light grey that stays on after a tap */
}

/* v3.57.140 r4 (owner, 2026-10-27): keyboard focus keeps a white background. The parent theme's button:focus paints
   #3F4047, on which the navy bars measured 1.02:1; the 2px blue outline below is unchanged. */
.site-header__hamburger:focus {
    background-color: var(--fp-color-white);
}

.site-header__hamburger:focus-visible {
    outline: 2px solid var(--fp-color-blue);
    outline-offset: -2px;   /* v3.57.170 r3: was 2px, clipped by the viewport edge the button sits against */
    border-radius: 8px;
}

/* Three-bar icon */
.site-header__hamburger-bars {
    display: flex;
    flex-direction: column;
    gap: 5px;
    pointer-events: none;
}

.site-header__hamburger-bar {
    display: block;
    width: 20px;
    height: 2px;
    background-color: var(--fp-color-navy);
    border-radius: 1px;
    transition: transform 0.20s ease, opacity 0.20s ease;
}

/* Animated → X when menu is open */
[aria-expanded="true"] .site-header__hamburger-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
[aria-expanded="true"] .site-header__hamburger-bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
[aria-expanded="true"] .site-header__hamburger-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


/* ── Mobile + Tablet: < 1024px ────────────────────────────
 * Hamburger toggle pattern applies to ALL viewports below desktop.
 * This replaces the v1.9 condensed tablet tier, which was removed
 * after production-menu geometry QA showed the 6-item nav overflows
 * at 768px under any reasonable condensed configuration.
 *
 * Geometry summary:
 *   640px: nav needs 531px, space available 381px → −150px overflow.
 *   768px: nav needs 531px, space available 509px → −22px overflow.
 *           Only 13px/15px-gap option fits (+3px) — unsafe cross-platform.
 *   1024px: desktop nav (15px/38px) needs 683px, space 706px → +23px ✓
 *
 * #site-navigation is hidden by default; revealed via .is-open class,
 * which the inline JS in site-header.php toggles on button click.
 *
 * Layout: .site-header__inner uses flex-wrap so the nav (order:3)
 * falls below the logo + hamburger row naturally.
 */
@media (max-width: 1023px) {

    /* Allow logo row and nav to stack */
    .site-header__inner {
        flex-wrap: wrap;
        align-items: center;
    }

    /* Logo — compact for sub-desktop */
    .site-header__logo img {
        height: 44px;          /* 44px at tablet; preserves aspect ratio */
    }

    /* Show hamburger */
    .site-header__hamburger {
        display: flex;
    }

    /* Nav container — hidden until .is-open */
    .site-header__nav {
        display: none;
        width: 100%;
        order: 3;              /* below the logo + hamburger row */
    }

    .site-header__nav.is-open {
        display: block;
    }

    /* Vertical nav list */
    .site-header__nav-list {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 6px 0 12px;
    }

    .site-header__nav-list .menu-item {
        width: 100%;
        position: static;      /* remove desktop relative positioning */
    }

    /* Full-width links with 44px minimum touch target */
    .site-header__nav-list .menu-item > a,
    .site-header__nav-list .menu-item > .fp-nav-trigger {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 12px 4px;
        min-height: 44px;
        font-size: 15px;       /* full desktop size — legible at all widths */
        border-bottom: 1px solid var(--fp-color-gray-200);
        white-space: normal;   /* allow wrap on very narrow viewports */
    }

    .site-header__nav-list .menu-item:last-child > a {
        border-bottom: none;
    }

    /* Chevron: hidden on items that have no panel behind them, but KEPT on the
       Categories item now that it opens a real dropdown - an affordance that
       does something should be visible. */
    .site-header__nav-list li.has-chevron > a::after,
    .site-header__nav-list li.has-chevron > .fp-nav-trigger::after {
        display: none;
    }

    .site-header__nav-list li.has-chevron.fp-has-subnav > a::after,
    .site-header__nav-list li.has-chevron.fp-has-subnav > .fp-nav-trigger::after {
        display: inline-block;
        margin-left: var(--fp-space-xs);
    }

    /* ── Categories dropdown, mobile ──────────────────────
     * Inside the hamburger the panel expands INLINE rather than floating:
     * a floating panel inside a full-width vertical menu would overlay the
     * items beneath it. Collapsed by default; the same JS toggle opens it. */
    .site-header__nav-list .fp-has-subnav > .fp-subnav {
        position: static;
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background-color: var(--fp-color-gray-50);
        transform: none;
        transition: none;

        /* Collapsed without display:none, so the panel stays scriptable and
           its state stays truthful to aria-expanded. */
        max-height: 0;
        overflow: hidden;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Hover must NOT open it on mobile - only the explicit toggle. */
    .site-header__nav-list .fp-has-subnav:hover > .fp-subnav {
        max-height: 0;
    }

    .site-header__nav-list .fp-has-subnav.is-subnav-open > .fp-subnav,
    .site-header__nav-list .fp-has-subnav:focus-within:not(.is-subnav-dismissed) > .fp-subnav {
        max-height: 60vh;
        overflow-y: auto;
        transform: none;
    }

    .fp-subnav__link {
        padding: 12px var(--fp-space-l);   /* indented under the parent item */
        min-height: 44px;                  /* touch target, matches the nav */
        display: flex;
        align-items: center;
        font-size: 15px;                   /* matches mobile nav sizing */
    }

    .fp-subnav__item--all {
        margin-top: 0;
        border-top: 1px solid var(--fp-color-gray-200);
        padding-top: 0;
    }
}

/* ── Compact header: desktop width, navigation does not fit ──
 * v3.57.170 r3 (owner, Work's no-wrap requirement): the script in site-header.php adds .fp-nav-compact when the six items cannot sit on one row beside the logo at the
 * current text spacing, zoom and font. These are the rules above, with the logo left at its desktop size. No font, logo, link or text-spacing setting is changed. */
:where(.site-header.fp-nav-compact) .site-header__inner {
    flex-wrap: wrap;
    align-items: center;
}
:where(.site-header.fp-nav-compact) .site-header__hamburger {
    display: flex;
}
:where(.site-header.fp-nav-compact) .site-header__nav {
    display: none;
    width: 100%;
    order: 3;
}
:where(.site-header.fp-nav-compact) .site-header__nav.is-open {
    display: block;
}
:where(.site-header.fp-nav-compact) .site-header__nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 6px 0 12px;
}
:where(.site-header.fp-nav-compact) .site-header__nav-list .menu-item {
    width: 100%;
    position: static;
}
:where(.site-header.fp-nav-compact) .site-header__nav-list .menu-item > a,
:where(.site-header.fp-nav-compact) .site-header__nav-list .menu-item > .fp-nav-trigger {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 4px;
    min-height: 44px;
    font-size: 15px;
    border-bottom: 1px solid var(--fp-color-gray-200);
    white-space: normal;
}
:where(.site-header.fp-nav-compact) .site-header__nav-list .menu-item:last-child > a {
    border-bottom: none;
}
:where(.site-header.fp-nav-compact) .site-header__nav-list li.has-chevron > a::after,
:where(.site-header.fp-nav-compact) .site-header__nav-list li.has-chevron > .fp-nav-trigger::after {
    display: none;
}
:where(.site-header.fp-nav-compact) .site-header__nav-list li.has-chevron.fp-has-subnav > a::after,
:where(.site-header.fp-nav-compact) .site-header__nav-list li.has-chevron.fp-has-subnav > .fp-nav-trigger::after {
    display: inline-block;
    margin-left: var(--fp-space-xs);
}
:where(.site-header.fp-nav-compact) .site-header__nav-list .fp-has-subnav > .fp-subnav {
    position: static;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background-color: var(--fp-color-gray-50);
    transform: none;
    transition: none;
    max-height: 0;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
:where(.site-header.fp-nav-compact) .site-header__nav-list .fp-has-subnav:hover > .fp-subnav {
    max-height: 0;
}
:where(.site-header.fp-nav-compact) .site-header__nav-list .fp-has-subnav.is-subnav-open > .fp-subnav,
:where(.site-header.fp-nav-compact) .site-header__nav-list .fp-has-subnav:focus-within:not(.is-subnav-dismissed) > .fp-subnav {
    max-height: 60vh;
    overflow-y: auto;
    transform: none;
}
:where(.site-header.fp-nav-compact) .fp-subnav__link {
    padding: 12px var(--fp-space-l);
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: 15px;
}
:where(.site-header.fp-nav-compact) .fp-subnav__item--all {
    margin-top: 0;
    border-top: 1px solid var(--fp-color-gray-200);
    padding-top: 0;
}


/* Tighter logo at mobile (<640px) */
@media (max-width: 639px) {
    .site-header__logo img {
        height: 40px;
    }
}


/* ── Desktop guard: hamburger hidden, nav always visible at ≥ 1024px ──
 * !important prevents .is-open from leaking across a resize event.
 * The JS resize listener in site-header.php also closes the menu,
 * but CSS provides a hard fallback.
 */
@media (min-width: 1024px) {
    :where(.site-header:not(.fp-nav-compact)) .site-header__hamburger {
        display: none !important;
    }
    :where(.site-header:not(.fp-nav-compact)) .site-header__nav {
        display: flex !important;
    }
    /* v3.57.160 r5 (Work 2026-10-30): with increased text spacing the six items no longer fit beside the logo, and About Us ran past the viewport at 1024. The list may now
       wrap, and only when it must: at ordinary spacing it fits on one row and nothing moves. Nothing is hidden, clipped or resized; each dropdown still opens under its item. */
    .site-header__logo { flex-shrink: 0; }
    .site-header__nav { min-width: 0; }
    :where(.site-header:not(.fp-nav-compact)) .site-header__nav-list { flex-wrap: wrap; row-gap: 8px; }
    /* v3.57.170 r2: the row keeps 24px from the logo; if it cannot, the header goes compact (r3). */
    :where(.site-header:not(.fp-nav-compact)) .site-header__inner { column-gap: 24px; }
}

/* v3.57.170 r3 - measures text changes while the desktop list is hidden. Takes no space; site-header.php creates it. */
.site-header__nav-probe {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
}
.site-header__nav-probe > span {
    display: inline-block;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
}

/* v3.57.140 r8 (owner, 2026-10-27): dropdown page names (Categories / Resources sub-menu links) Medium Gray #6B7280 in their
   resting and visited states. Hover and focus keep the blue colour swap and gray-50 background; the 2px blue focus-visible
   outline, the closing "View All" action (blue), the top-level tabs (navy), sizes and weights are unchanged. */
.fp-subnav__link:not(.fp-subnav__link--all):not(:hover):not(:focus) { color: var(--fp-color-gray-500); }