/* ── Header v2 ──────────────────────────────────────────────── */

.hdr.v2 {
    --hdr-nv-sp: 50;
    --hdr-nv-sp-lpt: 20;

    --hdr-lg-mx-wd: 400;
    --hdr-lg-mx-wd-clc: calc((var(--hdr-lg-mx-wd-mbl) * 1px) + (var(--hdr-lg-mx-wd) - var(--hdr-lg-mx-wd-mbl)) * ((var(--vw_) - 320px) / (1920 - 320)));

    /* v2 has no inner .bg-bx panel — the .hdr.v2 element is the visible header,
       painted with --background by [data-colors]. Expose that as --hdr-pnl-bg
       so descendant flyouts always match the header bg, regardless of the
       configured `colors` value. */
    --hdr-pnl-bg: var(--background);

    border-top-left-radius: 0;
    border-top-right-radius: 0;

    .tp-lg {
        margin-right: 0;
    }

    &.lt-bg li.active > a.clr-swp {
        color: var(--link-color);
    }
    &.lt-bg li.active li.active a {
        color: var(--link-hover);
    }

    @media screen and (width >= 1280px) {
        .hdr-row {
            display: flex;
        }

        /* Align last flyout to the right to prevent overflow */
        .nv > ul > li:last-child .fly-nv {
            left: auto;
            right: 0;
        }
    }
}

.overlap:has(.hdr.v2) {
    z-index: 2;

    + section {
        margin-bottom: calc(-1 * var(--bdr-rds));
    }
}