/* -- Header v1 (Bug Out) -------------------------------------- */
/* Co-located, scoped under .hdr.v1. Tokens declared at top; only  */
/* semantic tokens consumed. px->rem = px / 18.                    */
:root:has(.hdr.v1) {
    --hdr-lg-sp: 50;
    --hdr-lg-sp-lpt: 30;
    --hdr-nv-sp: 34;
    --hdr-nv-sp-lpt: 10;
}

.hdr.v1 {

    /* Hide the empty center top-hat slot when nothing fills it */
    .third.itm:not(:has(> *)) {
        display: none;
    }

    /* Allow the logo to overflow below the header bottom edge */
    overflow: visible;

    /* Text wordmark fallback (no logo SVG yet) — heavy display lockup.
       Uses the display-font tokens directly (NOT the .fnt_t-big class) so it
       gets the Archivo heavy face + tracking without inheriting fnt_t-big's
       hero-scale size or the title-fit script. Size is fixed to the artifact's
       ~42px lockup. No custom font — only framework font tokens. */
    .hdr-wordmark {
        display: block;
        font-family: var(--fnt-t-big-ff);
        font-weight: var(--fnt-t-big-w);
        letter-spacing: var(--fnt-t-big-ls);
        text-transform: var(--fnt-t-big-tt);
        line-height: 1;
        white-space: nowrap;
        color: var(--text-color);   /* near-black ink; the <a> would otherwise tint it rust */
    }

    /* Rust period to echo the artifact's square accent dot after the wordmark */
    .hdr-wordmark-dot {
        color: var(--link-color);
    }

    .lg-bx {
        overflow: visible;
        padding-bottom: 0;
    }

    .tp-lg {
        padding-bottom: 0;
        position: relative;
        z-index: 2;
    }

    /* Announcement bar — near-black strip. In primary-light a single flip only
       reaches lime, so the bar is a .lk-bg nested in a .lk-bg wrapper (lands at
       primary-dark) and paints --background directly (no .bg-bx inner-surface). */
    .ann-bnr {
        background-color: var(--background);   /* near-black via nested .lk-bg */
        color: var(--text-color);              /* light ink (was provided by .bg-bx) */

        /* Left: dot-separated service-area list */
        .ann-locs {
            display: flex;
            align-items: center;
            gap: 0.444rem;   /* 8px */
            white-space: nowrap;
        }

        .ann-dot {
            width: 0.222rem;   /* 4px */
            height: 0.222rem;
            border-radius: 50%;
            background-color: currentColor;
            flex: 0 0 auto;
        }

        /* Center: open-today hours with a lime status dot */
        .ann-hours {
            gap: 0.444rem;   /* 8px */
            white-space: nowrap;
        }

        .ann-status {
            width: 0.444rem;   /* 8px square, artifact */
            height: 0.444rem;
            background-color: var(--accent);
            flex: 0 0 auto;
        }

        /* Right: lime EMERGENCY pill + phone */
        .ann-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.444rem 0.889rem;   /* 8px 16px */
            border-radius: 1.333rem;       /* 24px pill */
            background-color: var(--accent);
            color: var(--text);            /* near-black ink on lime */
            white-space: nowrap;
        }

        .ann-phone {
            text-decoration: none;
            opacity: 1;
            white-space: nowrap;
        }

        .ann-cta-lbl {
        }

        li {
            strong {
            }

            a {
                text-decoration: underline;
                opacity: .8;
            }
        }

        .sl_sa-edg {
            --sl-sa-pd-mtp: 1.5;
            position: relative;
            padding-left: calc(var(--sl-sa-s) * var(--sl-sa-pd-mtp));
            padding-right: calc(var(--sl-sa-s) * var(--sl-sa-pd-mtp));
        }

        [data-role="arrows"] {
            position: absolute;
            width: calc(100% - ((calc(var(--sl-sa-s) * var(--sl-sa-pd-mtp)) * 2) - 1rem));
            top: 50%;
            left: calc((var(--sl-sa-s) * var(--sl-sa-pd-mtp)) - .5rem);
            z-index: 1;
            margin-top: 0;
            justify-content: space-between;
            transform: translateY(-50%);
        }
    }

    &.no-ovp .tp-lg {
        margin-block: 0;
    }

    /* -- Center nav list (cream row) -------------------------------------- */
    .hdr-nav-list {
        gap: 0.667rem;   /* 12px between items */
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .hdr-nav-list a {
        display: inline-flex;
        align-items: center;
        padding: 0.444rem 0.667rem;   /* 8px 12px, artifact nav item */
        border-radius: var(--bdr-rds-crd, 0.444rem);
        color: var(--text-color);
        text-decoration: none;
        white-space: nowrap;
    }

    @media (hover: hover) and (pointer: fine) {
        .hdr-nav-list a:hover,
        .hdr-nav-list a:focus-visible {
            color: var(--link-color);
        }
    }

    /* -- Bug-icon marquee strip (near-black bg, row of lime bug icons) ---- */
    /* Paint with the dark-palette tokens directly (--dk-bg near-black, --dk-accent
       lime) so it is scope-independent — nested data-colors did not reliably
       override --background here. Still framework tokens, no raw hex. */
    .hdr-bugstrip {
        position: relative;
        z-index: 1;
        overflow: hidden;
        background-color: var(--background);        /* near-black var(--lt-txt) */
        padding-block: 0.889rem;               /* ~16px */
    }

    /* Bug strip: a flat flex row repeating a 3-bug group of BugStrip* theme
       elements (swappable inline SVGs). currentColor → lime var(--accent); the
       strip's overflow:hidden clips the overflow. Uniform 3.4rem gap (≈ the old
       tile's bug spacing); bug groups carry the same gap so spacing is even
       across group boundaries. */
    .hdr-bugstrip-row {
        display: flex;
        align-items: center;
        gap: 3.4rem;
        height: 2.33rem;   /* 41.94px */
        color: var(--accent);   /* lime var(--lt-accent) — drives currentColor */
    }

    .hdr-bugstrip-grp {
        display: flex;
        align-items: center;
        gap: 3.4rem;
        flex: 0 0 auto;
    }

    .hdr-bugstrip-row svg {
        display: block;
        height: 2.33rem;   /* 41.94px — full strip height */
        width: auto;       /* width follows each bug's viewBox aspect ratio */
    }

    @media screen and (min-width: 1280px) {
        .tp-lg {
            margin-block: -2.05rem -1.89rem;
        }

        /* Keep the last flyout from overflowing the viewport */
        .nv > ul > li:last-child .fly-nv {
            left: auto;
            right: 0;
        }

        .ann-bnr {
            font-size: 0.722rem;   /* 13px ÷18 — artifact announcement text */

            .alt-itm {
                min-width: 29%;
            }
        }

        .hdr-wordmark {
            font-size: 2.35rem;   /* ~42px ÷18 — matches the artifact wordmark */
        }
    }

    @media screen and (max-width: 1279px) {
        .ann-bnr {
            .fit.itm {
                margin-top: 0 !important;
            }
        }
    }
}