/* ─────────────────────────────────────────────────────────────────
   Block: header — COMPACT section header (W10-A6 rewrite)
   ----------------------------------------------------------------
   Pattern: top-of-page section header (NOT a full-bleed banner,
   NOT an image-bearing hero). Minimum vertical footprint, max impact.
   Tokens only: --ds-cta, --ds-paper, --ds-ink, --ds-trust,
                --ds-font-display (Anton), --ds-font-body (DM Sans),
                --ds-font-serif (Fraunces italic accents),
                --ds-space-*, --ds-radius*, --ds-fs-*.
   ───────────────────────────────────────────────────────────── */

.block-header {
    position: relative;
    isolation: isolate;
    background-color: var(--scheme-bg, var(--ds-paper));
    color: var(--scheme-fg, var(--ds-ink));
    font-family: var(--ds-font-body);
    overflow: hidden;
}

/* Compact (default) — minimum vertical footprint */
.block-header--compact {
    padding-block: var(--ds-space-6);
}
.block-header--comfortable {
    padding-block: var(--ds-space-8);
}

.block-header__inner {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: clamp(var(--ds-space-4), 4vw, var(--ds-space-7));
    position: relative;
    z-index: 1;
}

.block-header--align-center .block-header__inner {
    text-align: center;
}
.block-header--align-center .block-header__cta-row,
.block-header--align-center .block-header__chip-row {
    justify-content: center;
}

/* Eyebrow ----------------------------------------------------- */
.block-header__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);
    margin: 0 0 var(--ds-space-3) 0;
    font-family: var(--ds-font-body);
    /* SENIOR-T2: drop fallback that hardcoded 12px; resolves to 14px floor */
    font-size: var(--ds-fs-eyebrow);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--scheme-fg, var(--ds-ink));
}
.block-header__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ds-cta);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--ds-cta) 60%, transparent);
    animation: block-header-dot-pulse 2s ease-out infinite;
    flex-shrink: 0;
}

@keyframes block-header-dot-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ds-cta) 60%, transparent); }
    70%  { box-shadow: 0 0 0 8px color-mix(in srgb, var(--ds-cta) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ds-cta) 0%, transparent); }
}

/* Headline ---------------------------------------------------- */
.block-header__title {
    font-family: var(--ds-font-display);
    font-size: clamp(2rem, 4.5vw, 3.6rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    color: var(--scheme-fg, var(--ds-ink));
    margin: 0 0 var(--ds-space-3) 0;
    max-width: 22ch;
}
.block-header--align-center .block-header__title {
    margin-inline: auto;
}
.block-header__title em {
    font-family: var(--ds-font-serif, Georgia, serif);
    font-style: italic;
    font-weight: 400;
    color: var(--ds-cta);
    text-transform: none;
    letter-spacing: 0;
}

/* Subhead ---------------------------------------------------- */
.block-header__subtitle {
    font-family: var(--ds-font-body);
    /* SENIOR-T2: 18px AAA body floor */
    font-size: clamp(var(--ds-fs-body), 1.4vw, var(--ds-fs-body-lg));
    line-height: var(--ds-lh-body, 1.6);
    color: var(--scheme-fg-soft, var(--ds-ink));
    margin: 0 0 var(--ds-space-4) 0;
    max-width: 60ch;
}
.block-header--align-center .block-header__subtitle {
    margin-inline: auto;
}

/* Trust chip row --------------------------------------------- */
.block-header__chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-2) var(--ds-space-3);
    margin: 0 0 var(--ds-space-4) 0;
}
.block-header__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);
    padding: 8px 14px;
    border-radius: var(--ds-radius-pill, 999px);
    font-family: var(--ds-font-body);
    /* SENIOR-T2: 16px floor (was 13.6px) */
    font-size: var(--ds-fs-body-sm, 1rem);
    font-weight: 600;
    line-height: 1.3;
    /* WAVE3-F01 2026-05-08: bumped chip-bg mix from 8% → 12% so the chip
       surface separates clearly from the section bg on dark schemes (was
       ~1.1:1 surface contrast — borders barely saved it). Also pin the bg
       to be opaque against the section background by mixing onto scheme-bg
       rather than transparent. */
    background: color-mix(in srgb, var(--scheme-fg, var(--ds-ink)) 12%, var(--scheme-bg, var(--ds-paper)));
    color: var(--scheme-fg, var(--ds-ink));
    border: 1px solid color-mix(in srgb, var(--scheme-fg, var(--ds-ink)) 22%, transparent);
}
.block-header__chip--rating .block-header__chip-stars {
    color: var(--ds-cta);
    letter-spacing: 0.06em;
    font-size: 0.95em;
}
.block-header__chip-count {
    color: var(--scheme-fg-soft, var(--ds-ink));
    font-weight: 500;
}
.block-header__chip--verified .block-header__chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ds-trust, #2c7a3a);
    color: var(--ds-paper);
    font-size: 0.75em;
    font-weight: 700;
    flex-shrink: 0;
}

/* CTA row ---------------------------------------------------- */
.block-header__cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-3);
    margin: 0 0 var(--ds-space-2) 0;
}
.block-header__cta-primary,
.block-header__cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-2);
    padding: 0.875rem 1.5rem;
    border-radius: var(--ds-radius, 8px);
    /* SENIOR-T2: 48px AARP floor; primary overridden below */
    min-height: var(--ds-touch-target, 48px);
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-body, 1.125rem);
    font-weight: 700;
    letter-spacing: 0.005em;
    text-decoration: none;
    transition: background var(--ds-duration-fast, 150ms) var(--ds-ease, ease),
                color var(--ds-duration-fast, 150ms) var(--ds-ease, ease),
                transform var(--ds-duration-fast, 150ms) var(--ds-ease, ease);
}
.block-header__cta-primary {
    background: var(--ds-cta);
    /* WAVE3-F01 2026-05-08: was var(--scheme-fg, #fff) which on .scheme-paper
       resolved to ink (dark text on orange CTA, ~3.x:1). The CTA orange
       surface is a constant; foreground should not track section scheme.
       Use --ds-cta-fg per doctrine Pattern C. */
    color: var(--ds-cta-fg, #fff);
    border: 1.5px solid var(--ds-cta);
    /* SENIOR-T2: AARP primary CTA = 56px tall, 20px font */
    min-height: var(--ds-touch-target-primary, 56px);
    padding: 1rem 1.75rem;
    font-size: var(--ds-fs-body-lg, 1.25rem);
}
.block-header__cta-primary:hover,
.block-header__cta-primary:focus-visible {
    background: var(--ds-cta-dk, #bb4d0d);
    border-color: var(--ds-cta-dk, #bb4d0d);
    /* WAVE3-F01: same — constant white on darker orange. */
    color: var(--ds-cta-fg, #fff);
    transform: translateY(-1px);
    text-decoration: none;
}
.block-header__cta-secondary {
    background: transparent;
    /* WAVE3-F01 2026-05-08: Pattern D — border tracks color via currentColor
       so any scheme rebind (e.g. inside a Pattern-B card) automatically
       updates the border in lock-step with the text. */
    color: var(--scheme-fg, var(--ds-ink));
    border: 1.5px solid currentColor;
}
.block-header__cta-secondary:hover,
.block-header__cta-secondary:focus-visible {
    background: var(--scheme-fg, var(--ds-ink));
    color: var(--scheme-bg, var(--ds-paper));
    border-color: var(--scheme-fg, var(--ds-ink));
    text-decoration: none;
}
.block-header__cta-arrow {
    display: inline-block;
    transition: transform var(--ds-duration-fast, 150ms) var(--ds-ease, ease);
}
.block-header__cta-primary:hover .block-header__cta-arrow {
    transform: translateX(3px);
}

.block-header a:focus-visible,
.block-header__cta-primary:focus-visible,
.block-header__cta-secondary:focus-visible {
    /* SENIOR-T2: high-contrast dual-color focus ring */
    outline: none;
    box-shadow: var(--ds-focus-ring, 0 0 0 3px var(--ds-cta), 0 0 0 5px rgba(255,255,255,.95));
}

/* CTA helper text -------------------------------------------- */
.block-header__cta-helper {
    font-family: var(--ds-font-body);
    /* SENIOR-T2: drop fallback that hardcoded 14px; let token resolve to 16px */
    font-size: var(--ds-fs-body-sm);
    font-weight: 500;
    color: var(--scheme-fg, var(--ds-ink));
    margin: var(--ds-space-2) 0 0 0;
    letter-spacing: 0.01em;
}

/* Responsive -------------------------------------------------- */
@media (max-width: 768px) {
    .block-header--compact { padding-block: var(--ds-space-5); }
    .block-header--comfortable { padding-block: var(--ds-space-6); }
    .block-header__title { font-size: clamp(1.75rem, 7vw, 2.6rem); max-width: 100%; }
    .block-header__cta-row { flex-direction: column; align-items: stretch; gap: var(--ds-touch-spacing, 8px); }
    /* SENIOR-T2: keep mobile primary at AARP 56px, secondary 48px */
    .block-header__cta-primary { width: 100%; min-height: var(--ds-touch-target-primary, 56px); }
    .block-header__cta-secondary { width: 100%; min-height: var(--ds-touch-target, 48px); }
}

/* Reduced motion --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .block-header__dot { animation: none; }
    .block-header__cta-primary,
    .block-header__cta-secondary,
    .block-header__cta-arrow { transition: none; }
    .block-header__cta-primary:hover { transform: none; }
    .block-header__cta-primary:hover .block-header__cta-arrow { transform: none; }
}

/* ─────────────────────────────────────────────────────────────────
   SWEEP-A1 (2026-05-08) — Header module mobile polish
   1. Sticky CTA bottom-clearance: at ≤900px the global #acme-sticky-cta
      bar covers the helper text + chip row at the bottom of the header.
      Reserve --ds-sticky-cta-clearance (96px) so older readers (45-70+)
      can see the rating + helper line ("48hr quote, written estimate").
   2. Narrow-width overflow guard: long Anton-display titles ("CONSTRUCTION
      QUOTES THAT DON'T BLOW YOUR BUDGET") were pushing 320-360px viewports
      because Anton is condensed-but-not-shrinkable. Add overflow-wrap +
      hyphens so the title yields when the viewport is narrower than its
      content box.
   3. Secondary CTA contrast: --scheme-fg ink on cream paper renders the
      "See pricing tiers" outline at AA+ but the 1.5px stroke can fade
      against the radial-gradient sheen on some monitors. Lock the border
      width to a hairline and add focus-ring fallback when the dual-color
      ring isn't supported.
   ───────────────────────────────────────────────────────────── */
.block-header__title,
.block-header__subtitle,
.block-header__cta-helper {
    overflow-wrap: anywhere;
    word-break: break-word;
}
.block-header__title {
    /* SWEEP-A1: enable hyphens only on the long display headline; keeps
       sentence-case body unhyphenated. */
    hyphens: auto;
    -webkit-hyphens: auto;
}
.block-header__chip-row {
    /* SWEEP-A1: prevent rating/verified pills from forcing horizontal
       scroll on 320-360px viewports. */
    max-width: 100%;
}
.block-header__chip {
    max-width: 100%;
    overflow-wrap: anywhere;
}
/* SWEEP-A1: secondary CTA contrast hardening — ensure the outline remains
   a solid 1.5px and the inner color stays at ink on paper backgrounds.
   WAVE3-F01: drop hardcoded border-color override (Pattern D — currentColor
   handles border via the rule above). */
.block-header__cta-secondary {
    border-width: 1.5px;
    color: var(--scheme-fg, var(--ds-ink));
}
/* SWEEP-A1: focus-ring fallback when --ds-focus-ring isn't loaded yet
   (FOUC during initial paint on slow 3G ICP devices). */
.block-header__cta-primary:focus-visible,
.block-header__cta-secondary:focus-visible {
    outline-offset: 3px;
}

@media (max-width: 900px) {
    .block-header {
        padding-bottom: calc(var(--ds-space-5, 1.5rem) + var(--ds-sticky-cta-clearance, 96px));
    }
}

/* ────────────────────────────────────────────────────────────
   Navbar touch-target + sticky behavior (retained from prior versions)
   ──────────────────────────────────────────────────────────── */
.navbar-toggler {
    min-height: 48px;
    min-width: 48px;
    padding: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.navbar a:focus-visible,
.navbar .btn:focus-visible,
.navbar-toggler:focus-visible {
    outline: 2px solid var(--ds-cta);
    outline-offset: 4px;
}

/* ─────────────────────────────────────────────────────────────────
   F2 (2026-05-08) — Site-chrome / header polish
   Audit: A4 mobile-senior-ux + A5 SEO/perf
   1. Header phone link (#acme-nav-call) — lift computed font-size
      from ~11.8px (.9rem on a navbar with cascade quirks) to 18px
      (var(--ds-fs-body)) and clamp min-height to 48px tap target.
   2. Bootstrap .btn-success Login button — override the brand-green
      to ember --ds-cta so re-skinning doesn't leak green chrome.
   3. Header social-icon style: parity with footer if any social
      <a>s ever land in the navbar (defensive — none today).
   ───────────────────────────────────────────────────────────── */

/* 1. Phone link — bump to AARP body-floor (18px) with 48px tap target. */
#acme-nav-call,
.site-header #acme-nav-call,
.navbar #acme-nav-call {
    /* F2: 11.8px → 18px (var(--ds-fs-body)). Computed via !important to
       beat the .9rem rule in acme-polish.css. */
    font-size: var(--ds-fs-body, 1.125rem) !important;
    min-height: var(--ds-touch-target, 48px) !important;
    padding: .55rem 1.1rem !important;
    line-height: 1.2 !important;
    letter-spacing: 0.005em !important;
}
#acme-nav-call svg {
    /* keep icon proportional */
    width: 18px !important;
    height: 18px !important;
}
/* Mobile: keep the desktop tap target intact when the nav-call is shown. */
@media (max-width: 991px) {
    #acme-nav-call {
        min-height: var(--ds-touch-target, 48px) !important;
        font-size: var(--ds-fs-body, 1.125rem) !important;
    }
}

/* Also harden any plain tel: link in the navbar (defensive). */
.navbar a[href^="tel:"],
.site-header a[href^="tel:"] {
    font-size: var(--ds-fs-body, 1.125rem) !important;
    min-height: var(--ds-touch-target, 48px);
    display: inline-flex;
    align-items: center;
    padding: 0 .25rem;
    line-height: 1.2;
}

/* 2. Bootstrap btn-success Login override — replace brand green with --ds-cta.
   Source: user/config/themes/inspiration.yaml additional_buttons[].class = btn-success. */
.site-header .btn-success,
header .btn-success,
.navbar .btn-success,
.navbar-nav .btn-success {
    /* POLISH3 2026-05-08: --ds-cta (#e36218) + white text @ 14 px = 3.84:1 fails WCAG AA-normal.
       Switch to --ds-cta-aa (= --ds-cta-dk #bb4d0d) which gives 4.91:1 vs white @ 14 px. */
    background: var(--ds-cta-aa, #bb4d0d) !important;
    border-color: var(--ds-cta-aa, #bb4d0d) !important;
    color: var(--ds-cta-fg, #fff) !important;
    box-shadow: var(--ds-shadow-cta, 0 6px 18px rgba(187, 77, 13, 0.32)) !important;
    min-height: var(--ds-touch-target, 48px);
    padding: .55rem 1.1rem;
    font-weight: 700;
    font-size: var(--ds-fs-body-sm, 1rem);
}
.site-header .btn-success:hover,
.site-header .btn-success:focus,
header .btn-success:hover,
header .btn-success:focus,
.navbar .btn-success:hover,
.navbar .btn-success:focus {
    /* POLISH3 2026-05-08: hover stays slightly darker than --ds-cta-aa for affordance.
       WAVE3-F01 2026-05-08: introduced --ds-cta-aa-hover token reference;
       hex retained as fallback only. If brand CTA-aa shifts in future,
       hover tracks via the token. */
    background: var(--ds-cta-aa-hover, #9b3f0a) !important;
    border-color: var(--ds-cta-aa-hover, #9b3f0a) !important;
    color: var(--ds-cta-fg, #fff) !important;
}
.site-header .btn-success:focus-visible,
.navbar .btn-success:focus-visible {
    outline: 2px solid var(--ds-cta);
    outline-offset: 3px;
}

/* 3. Header social-icon parity — scoped (defensive; navbar has none today). */
.site-header__social-link,
.navbar .social-link,
.navbar a[class*="social"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--ds-touch-target-secondary, 48px);
    min-height: var(--ds-touch-target-secondary, 48px);
    padding: 12px;
    border-radius: var(--ds-radius-sm, 8px);
}

/* ─────────────────────────────────────────────────────────────────
   T4-NAVBAR (2026-05-08) — Top navigation layout polish
   ----------------------------------------------------------------
   Goals (per A-FRONT audit + senior-UX review):
     - Compact navbar height: 72-80px desktop, 64px mobile.
     - Edge-rhythm: padding-inline clamp(16px, 5vw, 32px); brand-to-nav
       gap clamp(24px, 4vw, 48px). No 8px-from-edge text on mobile.
     - Subtle bottom rule (1px var(--ds-rule)) — already set in
       acme-polish.css; confirmed below.
     - Toggler 48×48 tap target with 24×24 icon (AARP / WCAG floor).
     - Sticky-top safe (z-index already governed by acme-polish.css L573).
   Coordinates with: F2 (phone link, login btn, sticky CTA z-index) —
   none of those rules touched here.
   ───────────────────────────────────────────────────────────── */

/* Outer nav — edge-rhythm + height floor.  Bootstrap's .navbar default
   is `padding: .5rem 1rem`; we override only padding-inline (so the
   vertical rhythm in F2/W10 remains intact) and lock min-height. */
.site-header__nav,
.navbar.site-header__nav {
    padding-inline: clamp(16px, 5vw, 32px);
    padding-block: 12px;
    min-height: 72px;
}
@media (min-width: 992px) {
    .site-header__nav,
    .navbar.site-header__nav {
        min-height: 76px;
    }
}
@media (max-width: 575px) {
    .site-header__nav,
    .navbar.site-header__nav {
        min-height: 64px;
        padding-block: 10px;
    }
}

/* Inner container — pull off Bootstrap's hard 1140px ceiling so the
   brand and links breathe on 1280px+ screens, while keeping the same
   gutter behavior. */
.site-header__nav > .container {
    max-width: 1280px;
    padding-inline: 0; /* gutter now handled by .site-header__nav */
    gap: clamp(24px, 4vw, 48px);
}

/* Brand → nav-list spacing on desktop.  Bootstrap puts navbar-nav
   inside .navbar-collapse; .ml-auto handles right-alignment, but on
   wider screens we want a guaranteed minimum gap so the wordmark
   doesn't kiss the first nav link. */
@media (min-width: 992px) {
    .site-header__nav .navbar-brand {
        margin-right: clamp(24px, 4vw, 48px);
    }
}

/* Toggler — 48×48 tap target, 24×24 icon glyph (AARP minimum). */
.site-header__nav .navbar-toggler,
.navbar .navbar-toggler {
    min-width: 48px;
    min-height: 48px;
    width: 48px;
    height: 48px;
    padding: 12px;
    border-radius: var(--ds-radius-sm, 8px);
    border: 1px solid var(--ds-rule, transparent) !important;
}
.site-header__nav .navbar-toggler-icon,
.navbar .navbar-toggler-icon {
    width: 24px;
    height: 24px;
    background-size: 24px 24px;
}

/* Brand image fallback safety — if T1-LOGO+IMG's <img> loads, lock
   to spec; if it fails, the wordmark pseudo-elements in
   acme-polish.css render the "Kiosk VFX" text.

   WAVE3-F01 2026-05-08: clamp brand image width on narrow viewports so
   the wordmark/logo never pushes the navbar past the viewport edge at
   320-375px. Browser audit (wave2) flagged "DIV.container [338>323]"
   overflow on every page — the brand was the load-bearing element.
   Apply max-width: min(180px, 40vw) so the brand collapses to ~150px
   at 375px and ~128px at 320px, leaving room for the toggler. The
   .navbar-brand parent gets min-width: 0 + flex-shrink: 1 so flex
   children can collapse below their intrinsic size. */
.site-header__nav .navbar-brand-img,
.navbar .navbar-brand-img,
.site-header__nav .navbar-brand img,
.navbar .navbar-brand img {
    max-height: 40px;
    max-width: min(180px, 40vw);
    width: auto;
    height: auto;
}
.site-header__nav .navbar-brand,
.navbar .navbar-brand {
    min-width: 0;
    flex-shrink: 1;
    overflow: hidden;
    /* keep wordmark on a single line so flex-shrink can collapse it */
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Reduced-motion guard for the nav-link hover transition added in
   acme-polish.css. */
@media (prefers-reduced-motion: reduce) {
    .navbar-light .navbar-nav .nav-link {
        transition: none !important;
    }
}