/*
 * Trustbridge reset.
 *
 * Everything here lives in the `trustbridge-reset` cascade layer. Unlayered CSS
 * outranks a layer regardless of specificity, and WordPress emits every one of
 * its stylesheets unlayered — core block CSS, the theme.json global styles,
 * per-block inline styles, section styles. So this file can only ever beat the
 * *browser's* defaults; it can never beat a design token.
 *
 * That is the point. It is a floor, not an override, and it stays correct no
 * matter what order WordPress decides to print stylesheets in. (style.css
 * currently prints last, after global styles — a reset placed there would
 * quietly outrank theme.json.)
 *
 * Rules that have to beat a *core* default are the opposite job and live in
 * style.css, under "Core block defaults we now own".
 *
 * Deliberately absent: anything aesthetic. No type scale, no colour, no
 * font-smoothing — `antialiased` renders text lighter, and DESIGN.md's contrast
 * ratios are measured against normal rendering. Headings keep the browser's
 * sizes until DESIGN.md's `omitted` typography tokens exist; zeroing them here
 * would flatten every heading to body size with nothing to replace it.
 */

@layer trustbridge-reset {

	/* One box model. */
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	:root {
		/*
		 * Light only. Without this, a viewer whose OS is in dark mode gets
		 * browser-darkened form controls, scrollbars and canvas — colours that
		 * appear nowhere in DESIGN.md and that no token can reach.
		 */
		color-scheme: light;
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}

	/*
	 * Spacing is blockGap and the spacing scale. Nothing inherits a margin from
	 * the user agent.
	 *
	 * Lists keep their padding, and therefore their markers and indent —
	 * core/list has no CSS of its own for either and relies on the browser.
	 */
	body,
	h1, h2, h3, h4, h5, h6,
	p, blockquote, figure, figcaption,
	dl, dd, ol, ul, pre, hr, fieldset {
		margin: 0;
	}

	/*
	 * The HTML spec's suggested rendering gives `hr` `color: gray` of its own,
	 * so `currentColor` on a separator resolves to grey rather than to the text
	 * colour around it — a cool grey, which DESIGN.md rules out outright, and
	 * one no token can reach because it never inherits.
	 */
	hr {
		color: inherit;
	}

	/* Media never overflows its container. */
	img, svg, video, canvas, audio, iframe, embed, object {
		max-width: 100%;
	}

	img, video {
		height: auto;
	}

	iframe {
		border: 0;
	}

	fieldset {
		border: 0;
		padding: 0;
		/* Otherwise a fieldset refuses to shrink as a flex or grid child. */
		min-width: 0;
	}

	legend {
		padding: 0;
	}

	/* Form controls inherit our typography instead of the operating system's. */
	input, button, textarea, select, optgroup {
		font: inherit;
		color: inherit;
		letter-spacing: inherit;
	}

	textarea {
		resize: vertical;
	}

	/*
	 * Strip the platform's button chrome. Buttons the design system has already
	 * styled are untouched — `.wp-element-button` takes its ground, padding and
	 * radius from theme.json, which is unlayered and therefore wins. What this
	 * catches is a button nobody has styled yet, which should read as unstyled
	 * rather than borrow the OS's grey bevel.
	 */
	button,
	[type="button"],
	[type="reset"],
	[type="submit"] {
		padding: 0;
		border: 0;
		background-color: transparent;
		color: inherit;
		text-align: inherit;
		cursor: pointer;
	}

	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

	/*
	 * WCAG 2.2 SC 2.3.3. Important declarations invert layer order, so an
	 * `!important` in the first layer beats an `!important` anywhere else,
	 * unlayered core CSS included. This is the one place that inversion is
	 * wanted, and the only `!important` in the theme.
	 */
	@media (prefers-reduced-motion: reduce) {

		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
			scroll-behavior: auto !important;
		}
	}
}