/**
 * Signals Scorecard 2026 — INRIX integration layer (INX-576 / INX-579)
 *
 * STRUCTURAL ONLY: the layout / z-index / sizing / ADA fixes required once the
 * INRIX site header sits on top of the vendored microsite. Theme-INDEPENDENT
 * and brand-INDEPENDENT, so BOTH templates load it:
 *   - blended  /signals-scorecard/        (this + the branding layer)
 *   - pure     /signals-scorecard-clean/  (this only — vendor's own colors kept)
 * Colors/gradients/map-blend live in signals-scorecard-2026-inrix.css (branding).
 *
 * Loaded after the vendored CSS so it wins on equal specificity. Kept in the
 * theme (not the bundle) so it survives re-vendoring.
 *
 * @package Inrix
 */

:root {
  --ssc-chrome-h: 8em; /* pre-JS estimate; measured live by signals-scorecard-2026-inrix.js */
}

/* Lift the INRIX header above the section nav (z 50) so its dropdowns win. */
.site-header { z-index: 51; }

/* Microsite section nav: shipped as a fixed overlay; make it sticky so it flows
   below the INRIX header and pins on scroll, admin-bar aware. */
.ssc-section-nav { position: sticky; inset: auto; top: 0; }
body.admin-bar .ssc-section-nav { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .ssc-section-nav { top: 46px; } }

/* `clip` (not `hidden`) keeps position:sticky working under app.min.css's
   body,html{overflow-x:hidden} while still clipping horizontal overflow. */
html, body { overflow-x: clip; }

/* Scroll-pinned map + GSAP scene layering, beneath the sticky header. */
.map-sticky        { overflow: visible; }
.scene--map-pinned { z-index: 0; }
.scene             { z-index: 1; }
#scene-grade       { z-index: 2; }

/* Hide the progress dot for the closing CTA. "Keep going / ready to explore" is
   the journey's destination, not a scrollytelling step — and as the last 100vh
   section before the short footer, its top can't reach GSAP's 'top 40%'
   activation line, so the dot never highlights (clicking it still scrolls
   there). Rather than leave a nav item that never activates, drop it. Lives here
   (not the bundle) so it survives re-vendoring; applies to both templates. */
.scroll-progress .dot[data-target="scene-closing"] { display: none; }

/* Hero fits the first viewport below the chrome (header + section nav + admin
   bar, measured live). dvh tracks the mobile address bar. */
.scene--hero {
  min-height: calc(100dvh - var(--ssc-chrome-h, 8em));
  padding-top: clamp(var(--space-4), 5vh, var(--space-6));
  padding-bottom: clamp(var(--space-3), 4vh, var(--space-5));
}
.hero-headline .hh-figure { margin-bottom: clamp(var(--space-3), 2vh, var(--space-6)); }
.scene--hero .scroll-cue {
  bottom: 1em;
  background-color: var(--primary-soft);
  padding: .5em 1em;
  border-radius: 5em;
  backdrop-filter: blur(6px) brightness(1.3);
}

/* ── ADA: skip link + visible keyboard focus (use theme vars → adapt) ─── */
.ssc-skip-link {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100000;
  margin: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--bg);
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
  border: 2px solid var(--primary);
  border-radius: var(--radius-sm);
  transform: translateY(-160%);
  transition: transform var(--dur-fast, 180ms) ease;
}
.ssc-skip-link:focus { transform: translateY(0); }

.ssc-section-nav a:focus-visible,
.scene--hero .scroll-cue:focus-visible,
.scroll-progress .dot:focus-visible,
#app a:focus-visible,
#app button:focus-visible,
#app select:focus-visible,
#app input:focus-visible,
#app [tabindex]:focus-visible {
  /* --primary-bright is a branding token; fall back to the vendor --primary on
     the pure template, which doesn't load the branding layer. */
  outline: 3px solid var(--primary-bright, var(--primary));
  outline-offset: 2px;
  border-radius: 3px;
}

/* ── Reduced motion (ADA) — supplements the bundle's JS motion gate. ─── */
@media (prefers-reduced-motion: reduce) {
  .scene,
  .scene--map-pinned,
  #app [data-animate] {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}