/**
 * Base: reset + typografie. Mobile-first vanaf ±360px, opgebouwd vanuit
 * mobiel (geen desktop-CSS die naderhand wordt "verkleind").
 */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var( --font-body );
	font-size: var( --font-size-base );
	line-height: var( --line-height-base );
	color: var( --text-primary );
	background: var( --surface );
	overflow-x: hidden; /* vangnet; primaire fix is geen componenten breder dan viewport */
}

img, picture, video, svg {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Reserveer ruimte o.b.v. width/height-attributen om CLS te voorkomen (§28/§29). */
img:not( [width] ) { height: auto; }

h1, h2, h3, h4, h5, h6 {
	font-family: var( --font-heading );
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 var( --space-3 );
	color: var( --text-primary );
}

h1 { font-size: clamp( 1.625rem, 1.4rem + 1.2vw, 2.5rem ); }
h2 { font-size: clamp( 1.375rem, 1.2rem + 0.9vw, 1.875rem ); }
h3 { font-size: clamp( 1.125rem, 1.05rem + 0.4vw, 1.375rem ); }

p { margin: 0 0 var( --space-4 ); }

a {
	color: var( --brand-primary );
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
a:hover { text-decoration: none; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button {
	font-family: inherit;
	font-size: inherit;
	cursor: pointer;
}

input, select, textarea {
	font-family: inherit;
	font-size: 1rem; /* voorkomt iOS auto-zoom bij focus */
}

/* Focus altijd zichtbaar houden (WCAG 2.2 AA, §33). */
:focus-visible {
	outline: 3px solid var( --brand-primary );
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 1px, 1px, 1px, 1px );
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: var( --space-2 );
	background: var( --brand-primary );
	color: var( --text-on-primary );
	padding: var( --space-3 ) var( --space-4 );
	border-radius: var( --radius-sm );
	z-index: 1000;
	transition: top var( --transition-fast );
}
.skip-link:focus {
	top: var( --space-2 );
}