/**
 * Toegankelijkheid: reduced motion, contrast-vangnetten, grote touch targets
 * zijn al in components.css/header-footer.css verwerkt via --tap-target-min.
 */

@media ( prefers-reduced-motion: reduce ) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* Zorg dat interactieve elementen nooit kleiner zijn dan de aanbevolen
   44x44px tap target, ook wanneer content dat niet vanzelf oplevert. */
button, a.btn, input[type="checkbox"], input[type="radio"] {
	min-width: var( --tap-target-min );
	min-height: var( --tap-target-min );
}
input[type="checkbox"], input[type="radio"] {
	width: 1.15rem;
	height: 1.15rem;
	min-width: 1.15rem;
	min-height: 1.15rem;
	margin: 0;
}

/* Kleur is nooit de enige informatiedrager: voorraadstatus/badges hebben ook
   tekst (zie template-parts), hier zorgen we voor voldoende contrast-fallback. */
::selection {
	background: var( --brand-primary );
	color: #fff;
}