/* Petty's 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));
	}
}

/* Dark and photo grounds use the inverse focus ring. */
:where(.is-style-section-deep, .is-style-section-accent, .wp-block-cover) :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;
	}
}