/**
 * Base
 *
 * Document defaults, focus, and reduced-motion.
 * Tokens live in theme.json. Do not add hex colors here.
 */

:where(html) {
	scroll-behavior: smooth;
}

/*
 * H1–H3 scale behind the heading-1 / heading-2 / heading-3 presets (theme.json).
 * Desktop above 1024px, tablet 768–1024px, mobile below 768px.
 */
:root {
	--bnf-heading-1-size: 2.5rem;
	--bnf-heading-2-size: 1.75rem;
	--bnf-heading-3-size: 1.375rem;
}

@media (max-width: 1024px) {
	:root {
		--bnf-heading-1-size: 2.25rem;
		--bnf-heading-2-size: 1.625rem;
		--bnf-heading-3-size: 1.3125rem;
	}
}

@media (max-width: 767px) {
	:root {
		--bnf-heading-1-size: 1.875rem;
		--bnf-heading-2-size: 1.5rem;
		--bnf-heading-3-size: 1.25rem;
	}
}

:where(.wp-site-blocks *:focus-visible),
:where(a:focus-visible),
:where(button:focus-visible),
:where(.wp-element-button:focus-visible),
:where(input:focus-visible),
:where(select:focus-visible),
:where(textarea:focus-visible) {
	outline: 2px solid var(--wp--preset--color--bnf-forest-dark);
	outline-offset: 3px;
}

:where(a),
:where(.wp-element-button),
:where(button) {
	transition:
		color var(--wp--custom--motion--fast) var(--wp--custom--motion--easing),
		background-color var(--wp--custom--motion--fast) var(--wp--custom--motion--easing),
		border-color var(--wp--custom--motion--fast) var(--wp--custom--motion--easing),
		box-shadow var(--wp--custom--motion--fast) var(--wp--custom--motion--easing);
}

@media (prefers-reduced-motion: reduce) {
	html:focus-within {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
}
