/* The Dark Meeple base layer: focus ring, selection, reduced motion, scroll offsets.
   Token variables only (raw values: 0, 1px hairlines). Loaded on the front end and in the editor. */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--wp--custom--border--focus) solid var(--wp--preset--color--focus);
	outline-offset: var(--wp--custom--border--focus-offset);
}

::selection {
	background: var(--wp--preset--color--signature-2);
	color: var(--wp--preset--color--contrast);
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

:target,
[id^="comment-"],
#reviews {
	scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wp--custom--layout--header-height-mobile) + var(--wp--preset--spacing--40));
}

@media (min-width: 1024px) {
	:target,
	[id^="comment-"],
	#reviews {
		scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wp--custom--layout--header-height) + var(--wp--preset--spacing--40));
	}
}

@media (max-width: 600px) {
	:target,
	[id^="comment-"],
	#reviews {
		scroll-margin-top: calc(var(--wp--custom--layout--header-height-mobile) + var(--wp--preset--spacing--40));
	}
}

/* Headings use Archivo at its expanded width (theme.json has no font-stretch; the token is --wp--custom--font-stretch--heading). */
:where(h1, h2, h3, h4, h5, h6, .wp-block-site-title, .wp-block-post-title, .wp-block-query-title, .is-style-round-badge) {
	font-stretch: var(--wp--custom--font-stretch--heading);
}

/* Dark grounds use the inverse focus ring; the yellow accent ground and the light hero keep the dark one. */
:where(.is-style-section-deep, .is-style-tile, .is-style-banner-dark) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline-color: var(--wp--preset--color--focus-inverse);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}
