/**
 * Parking Scorecard 2026 — theme reset (INX-610).
 *
 * The INRIX header and footer need the theme's own stylesheets (app.min.css and
 * fonts.min.css), and those are global: their normalize rules, element defaults
 * and .btn component also match the bundle's markup, and win wherever the bundle
 * leaves a property unset or sets it less specifically. Measured against the
 * bundle rendered without them, they had shrunk the Cities table to 9.75px text,
 * enlarged body copy by 7%, forced the bundle's buttons to uppercase at a 270px
 * minimum (the overlapping Cities/Methodology pair), stripped link underlines
 * and clipped the chart SVGs.
 *
 * Each rule below mirrors one leaking theme rule: same selector, same
 * specificity, scoped to the bundle's DOM with a zero-specificity :where(), and
 * setting only the properties that leaked back to `revert-layer`. Load order
 * does the rest. inrix_psc_render() places this file AFTER the theme's
 * stylesheets, so it wins their ties, and BEFORE the bundle's, so the bundle wins
 * ours. The three values the bundle sets less specifically than the theme (the
 * charts' overflow, the search field's box-sizing and the buttons' focus ring)
 * are restated rather than reverted, since reverting them would skip past the
 * bundle to the browser.
 *
 * `revert-layer`, not `revert`: nothing on these pages uses cascade layers, so it
 * rolls straight back to presentational hints and then the browser's defaults.
 * `revert` skips the hints, which drops a table's default cellpadding and an
 * SVG's fill/stroke attributes along with the theme's rule.
 *
 * The scope never matches the INRIX chrome: header, footer, mobile menu, search
 * drawer, consent banner and admin bar are all excluded.
 *
 * Since INX-627 the bundle also carries its own css/host-guard.css, loaded last
 * among its stylesheets, which corrects the same class of leak from the inside.
 * The two agree. This file stays because it is scoped to the theme we actually
 * ship, and the e2e harness's leak check holds the result to zero either way.
 */

:where( body > :not( header.site-header, footer.site-footer, .site-menu-sm, .site-search, #onetrust-consent-sdk, #wpadminbar ) ) {

	/* body { font-size: 102%–107% } by breakpoint, inherited by everything below. */
	font-size: 1rem;

	/* a { text-decoration: none }; a { background-color; outline: 0 };
	   a, a:focus, a:hover { transition }. `&:is(a)` covers a link that is itself a
	   child of body, as the bundle's skip link is. */
	& a,
	&:is( a ) { background-color: revert-layer; outline: revert-layer; text-decoration: revert-layer; transition: revert-layer; }
	& a:focus,
	& a:hover,
	&:is( a ):focus,
	&:is( a ):hover { transition: revert-layer; }

	/* The .btn component: 18em minimum, uppercase, line-height 1, repositioned. */
	& .btn {
		appearance: revert-layer;
		line-height: revert-layer;
		min-width: revert-layer;
		position: revert-layer;
		text-align: revert-layer;
		text-transform: revert-layer;
		transition: revert-layer;
		vertical-align: revert-layer;
	}

	/* Normalize and form defaults. */
	& button,
	& input,
	& optgroup,
	& select,
	& textarea { color: revert-layer; font-size: revert-layer; margin: revert-layer; vertical-align: revert-layer; }
	& button,
	& input { line-height: revert-layer; overflow: revert-layer; }
	& [type="button"],
	& [type="reset"],
	& [type="submit"],
	& button { color: revert-layer; cursor: revert-layer; line-height: revert-layer; outline: revert-layer; padding: revert-layer; }
	& button,
	& input,
	& label,
	& select { cursor: revert-layer; }
	& input,
	& select,
	& textarea { display: revert-layer; outline: revert-layer; transition: revert-layer; width: revert-layer; }
	& label {
		color: revert-layer;
		display: revert-layer;
		font-family: revert-layer;
		font-size: revert-layer;
		font-weight: revert-layer;
		letter-spacing: revert-layer;
		margin: revert-layer;
		text-transform: revert-layer;
	}
	/* Restated: the bundle's border-box comes from its universal `*` rule, which
	   input[type="search"] outranks, so revert would land on content-box. */
	& input[type="search"] { appearance: revert-layer; box-sizing: border-box; }

	/* Tables. */
	& td,
	& th { padding: revert-layer; }
	& table td {
		font-size: revert-layer;
		line-height: revert-layer;
		padding: revert-layer;
		text-align: revert-layer;
		vertical-align: revert-layer;
	}
	& table th { font-size: revert-layer; padding: revert-layer; }
	& table thead { border-bottom: revert-layer; text-align: revert-layer; vertical-align: revert-layer; }
	& table tbody tr { border: revert-layer; }
	& table { border-collapse: revert-layer; border-spacing: revert-layer; max-width: revert-layer; }

	/* Copy. */
	& p { font-size: revert-layer; margin-top: revert-layer; margin-bottom: revert-layer; }
	& ol li { padding-bottom: revert-layer; }
	& code,
	& kbd,
	& pre,
	& samp { font-family: revert-layer; font-size: revert-layer; }
	& section { position: revert-layer; }

	/* SVG and media. */
	& embed,
	& figure,
	& iframe,
	& img,
	& object,
	& picture,
	& svg,
	& video { max-width: revert-layer; }
	/* Restated from viz.css `.viz { overflow: visible }`, which svg:not(:root)
	   outranks. Reverting would land on the browser's own `hidden`. */
	& svg.viz:not( :root ) { overflow: visible; }

	/* Restated from base.css's keyboard focus ring. The theme's
	   `.btn:focus { outline: none }` (0,2,0) outranks the bundle's
	   `a:focus-visible` (0,1,1), so a keyboard user tabbing onto any of the
	   bundle's buttons saw no ring at all. Reverting cannot reach the bundle's
	   value. This mirrors it at the theme's weight. */
	& .btn:focus-visible {
		outline: 2px solid var( --primary-bright );
		outline-offset: 3px;
		border-radius: 4px;
	}

	/* fonts.min.css's icon-font rule, which the bundle's sun/moon SVGs match by
	   class name (js/theme.js gives them icon-sun / icon-moon). Its font-family is
	   !important, so the mirror has to be too. Nothing else can outrank it. */
	& [class^="icon-"],
	& [class*=" icon-"] {
		speak: revert-layer;
		font-style: revert-layer;
		font-weight: revert-layer;
		font-variant: revert-layer;
		text-transform: revert-layer;
		line-height: revert-layer;
		-webkit-font-smoothing: revert-layer;
		font-family: revert-layer !important;
	}
}