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

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

    /* Phone number — drop desktop from the 2.722rem default to 2rem */
    .fnt_phn {
        --fnt-phn-s: 2rem;
    }

    > .bg-bx {
        /* Capture the inner panel's bg so descendants (e.g. flyouts) can
           reference it without the .bg-bx .bg-bx --inner-theme reset. */
        --hdr-pnl-bg: var(--inner-theme);
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

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

    @media screen and (width >= 1280px) {
        /* 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));
    }
}

/* ── Red top nav (brand accent #880d19) ───────────────────────────
   The header stays in the primary-dark color context so its text, links,
   logo and dividers keep their legible light treatment; we only repaint
   the bar itself with the brand red. Both the wrapper and the inner panel
   are set so the bar reads solid red regardless of corner rounding. */
.hdr.v2,
.hdr.v2 > .bg-bx.lk-bg {
    background-color: var(--lt-accent); /* #880d19 */
}

/* CTA button: a red button would vanish against the red bar, so make it
   white with red text, inverting to a deeper crimson on hover. */
.hdr.v2 .btn.v1 {
    --btn-bg: #ffffff;
    --btn-clr: var(--lt-accent); /* #880d19 */
}

.hdr.v2 .btn.v1:is(:hover, :focus-visible) {
    --btn-bg: #6f1318; /* deeper crimson — distinct from the bar */
    --btn-clr: #ffffff;
    background-color: var(--btn-bg);
    color: var(--btn-clr);
}