/**
 * Parking Scorecard 2026 — INRIX integration layer (INX-604 / INX-605 / INX-627).
 *
 * The HOST side of the integration, and only that: how the INRIX masthead, the
 * scorecard's section nav and the WP admin bar fit together. No colour, no type,
 * no branding. The client's design and palette stay as delivered.
 *
 * Since INX-627 this follows the client's host contract (their docs/embedding.md,
 * reference copy in the bundle's _host/). Rules 1–4 are theirs. Everything this
 * file used to correct inside the bundle has moved into it (the hero's height,
 * the skip link, focus rings, the empty annotation footer, overflow-x: clip,
 * reduced motion), so do not re-add those here. In particular, a
 * .scene--hero min-height would subtract the chrome twice.
 *
 * ENQUEUED AFTER the scorecard's own stylesheets (via wp_head), which several of
 * the bundle's same-specificity corrections depend on.
 */

/* ── 1 · Our nav is a section nav, not a masthead (client) ─────────────
 * Standalone the scorecard's nav is fixed, as the only chrome on the page. Under
 * the INRIX masthead it becomes a sticky section nav, taking its place in the
 * flow. It sticks BELOW fixed chrome (the admin bar), not at 0. A sticky top: 0
 * slides under the bar, and then --chrome-h overclaims the coverage.
 * --psc-nav-top is published by assets/js/parking-scorecard-2026-inrix.js.
 */
.psc-section-nav {
	position: sticky;
	top: var( --psc-nav-top, 0px );
	inset-inline: auto;
}

/* ── 2 · The chrome tokens (client) ─────────────────────────────────────
 * --chrome-h: PINNED chrome only (the admin bar plus our sticky nav), at any
 *   scroll position. Every scene gives this up and every snap stop lands below it.
 *   NOT the INRIX masthead, which scrolls away.
 * --chrome-flow-h: IN-FLOW chrome above the scorecard (masthead plus nav), which
 *   pushes the hero down at rest.
 * Both are measured live by the integration JS; the fallbacks are settled
 * measurements for first paint. --chrome-overlay-h is derived by the bundle and
 * must not be set here.
 */
:root {
	--chrome-h: var( --psc-chrome-h, 109px );
	--chrome-flow-h: var( --psc-chrome-flow-h, 145px );
}

/* ── 3 · overflow: the silent one (client) ──────────────────────────────
 * app.min.css sets `overflow-x: hidden` on html and body, which makes them
 * scroll containers, and position: sticky then sticks to them instead of the
 * viewport. The bundle already declares `clip`; this holds it should the enqueue
 * order ever change. Never `hidden`.
 */
html,
body {
	overflow-x: clip;
}

/* ── 4 · Masthead treatment ─────────────────────────────────────────────
 * The one piece of styling that is the host's. Content passing under the nav is
 * softened rather than read through sharply, as on the Signals Scorecard. Once
 * the page has moved, the bundle turns the nav opaque, which would leave the blur
 * nothing to act on. So hold the same colour but let 20% through (INX-605). The
 * client's reference keeps the nav opaque; this is the reviewed INRIX treatment.
 * color-mix keeps it theme-aware, and the plain var() is its fallback.
 */
.psc-section-nav {
	-webkit-backdrop-filter: blur( 3px );
	backdrop-filter: blur( 3px );
}
:root[data-scrolled='true'] .psc-section-nav {
	background: var( --bg );
	background: color-mix( in srgb, var( --bg ) 80%, transparent );
}

/* ── The INRIX masthead's stacking ──────────────────────────────────────
 * The bundle puts its section nav at z-index 50 and its popovers at 60. The
 * INRIX masthead is the site-wide navigation, so its dropdowns must win against
 * anything the page below opens. app.min.css gives it 10, which loses to both.
 */
.site-header { z-index: 61; }

/* The bundle's skip link stacks at --z-popover (60), which suited it as the only
   chrome. Here it appears over the masthead, which the rule above puts at 61, and
   over the WP admin bar (99999) for an editor, so it would surface underneath
   both. It must be the first thing a keyboard user sees. */
.psc-skip-link { z-index: 100000; }

/* ── The section nav's link row on narrow screens (INX-610) ─────────────
 * At 1120px and below the bundle gives the section links a row of their own,
 * each held at a 44px minimum, and that row is pinned over every scene. 2em
 * (26px, above WCAG 2.2's 24px target minimum) gives the height back to the
 * content on a phone. The nav is measured live, so --chrome-h and the snap stops
 * follow on their own.
 */
@media ( max-width: 1120px ) {
	.psc-section-nav nav a { min-height: 2em; }
}

/* ── The INRIX masthead's mobile buttons (INX-610) ──────────────────────
 * Below the theme's large breakpoint (65em) app.min.css makes the masthead's
 * search and menu buttons `position: fixed`, so on ordinary pages they float over
 * the content once the masthead has scrolled away. Here they floated over the
 * section nav's own actions instead: its theme toggle and, from tablet width, its
 * report button. Anchored in the masthead, they leave with it, as the whole
 * masthead already does at desktop widths. They never go fixed.
 */
body.parking-scorecard-microsite .site-header__search-mobile,
body.parking-scorecard-microsite .site-header__menu-toggle {
	position: absolute;
}

/* So hold the page still while the INRIX menu is open. A scroll that ran on past
   the menu drawer would otherwise carry the menu button, the drawer's only close
   control, away with the masthead. The drawer (section.site-menu-sm) is its own
   scroll container, so a menu taller than the screen still scrolls. This is set
   on the root, not body: rule 3's clip on html keeps body's overflow from
   reaching the viewport. */
html:has( body.parking-scorecard-microsite.js-menu--is-open ) { overflow: hidden; }