/**
 * Supplemental accessibility and responsive safeguards.
 *
 * Global design decisions belong in theme.json. Keep selectors low-specificity
 * so editor controls and user customizations can continue to override them.
 */

:where(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
	outline: 3px solid var(--wp--preset--color--ink);
	outline-offset: 3px;
	box-shadow: 0 0 0 5px var(--wp--preset--color--white);
}

@media (max-width: 30rem) {
	header :where(.wp-block-group.is-layout-flex) {
		gap: var(--wp--preset--spacing--xs);
	}

	header :where(.wp-block-site-logo) {
		flex: 1 1 auto;
		min-width: 0;
	}

	header :where(.wp-block-site-logo img) {
		width: auto;
		max-width: 100%;
		height: auto;
	}

	header :where(.wp-block-navigation) {
		flex: 0 0 auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	html:focus-within {
		scroll-behavior: auto;
	}

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

@media (forced-colors: active) {
	:where(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
		outline: 2px solid CanvasText;
		box-shadow: none;
	}
}