/*
 * base/reset.css — minimal normalisation.
 *
 * WordPress and theme.json already handle most of this. Only add rules here
 * that genuinely apply to every page, and never anything design-specific.
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

img,
svg,
video,
iframe {
	max-width: 100%;
}

img,
svg,
video {
	height: auto;
}

/* Respect the visitor's motion preference for everything we animate. */
@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;
	}
}

/* Visible focus ring for keyboard users, on top of whatever a block sets. */
:where( a, button, input, select, textarea, summary, [tabindex] ):focus-visible {
	outline: 2px solid var( --wp--preset--color--primary );
	outline-offset: 2px;
}

/*
 * Anything sticky should stop under the site header. In-page anchor links
 * (e.g. Lead Gen's "On This Page") scroll smoothly; the reduced-motion block
 * above turns that back off.
 */
html {
	scroll-padding-top: var( --fcs-header-offset, 6rem );
	scroll-behavior: smooth;
}

/* Screen-reader-only text, for icon-only controls. */
.fcs-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}