/* ==========================================================================
   BASE — reset, typografie, links, media. Geen merkwaarden: alles via tokens.
   Mobiel-first: alle basiswaarden zijn de mobiele waarden.
   ========================================================================== */

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

/* Standaard WP-utility, hier zelf gedefinieerd: het thema draait volledig
   op eigen header.php/footer.php en leunt niet op Astra's CSS voor
   basisdingen als dit. Verborgen voor ogen, bereikbaar voor schermlezers. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

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

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

body {
	font-family: var(--wvs-font-tekst);
	font-size: var(--wvs-fs-body);
	font-weight: var(--wvs-gewicht-tekst);
	line-height: var(--wvs-lh-body);
	color: var(--wvs-body-kleur);
	background-color: var(--wvs-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-wrap: break-word;
}

/* --- Koppen ------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
.entry-title,
.wvs-kop {
	font-family: var(--wvs-font-kop);
	font-weight: var(--wvs-gewicht-kop);
	line-height: var(--wvs-lh-kop);
	letter-spacing: var(--wvs-ls-kop);
	color: var(--wvs-kop-kleur);
	margin: 0 0 var(--wvs-ruimte-4);
	text-wrap: balance;
}

h1, .entry-title { font-size: var(--wvs-fs-h1); }
h2 { font-size: var(--wvs-fs-h2); margin-top: var(--wvs-ruimte-7); }
h3 { font-size: var(--wvs-fs-h3); margin-top: var(--wvs-ruimte-6); }
h4 { font-size: var(--wvs-fs-h4); margin-top: var(--wvs-ruimte-5); }
h5, h6 { font-size: var(--wvs-fs-body); margin-top: var(--wvs-ruimte-5); }

h1:first-child, h2:first-child, h3:first-child, h4:first-child { margin-top: 0; }

/* Introzin onder een H1 */
.wvs-lead {
	font-size: var(--wvs-fs-lead);
	line-height: 1.6;
	color: var(--wvs-body-kleur);
}

p { margin: 0 0 var(--wvs-ruimte-4); }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: var(--wvs-gewicht-sterk); color: var(--wvs-kop-kleur); }

small { font-size: var(--wvs-fs-klein); }

/* --- Links -------------------------------------------------------------- */

a {
	color: var(--wvs-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color var(--wvs-overgang);
}

a:hover,
a:focus { color: var(--wvs-accent-hover); }

/* Zichtbare toetsenbordfocus — toegankelijkheid, in beide modi */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wvs-accent);
	outline-offset: 2px;
	border-radius: var(--wvs-radius-klein);
}

::selection {
	background: var(--wvs-accent);
	color: var(--wvs-accent-contrast);
}

/* --- Lijsten ------------------------------------------------------------ */

ul, ol { margin: 0 0 var(--wvs-ruimte-4); padding-left: 1.25rem; }
li { margin-bottom: var(--wvs-ruimte-2); }
li:last-child { margin-bottom: 0; }

ul li::marker { color: var(--wvs-accent); }

/* --- Media -------------------------------------------------------------- */

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

figure { margin: 0 0 var(--wvs-ruimte-5); }

figcaption {
	font-size: var(--wvs-fs-klein);
	color: var(--wvs-tekst-zacht);
	margin-top: var(--wvs-ruimte-2);
}

/* --- Citaat en scheiding ------------------------------------------------ */

blockquote {
	margin: var(--wvs-ruimte-6) 0;
	padding: var(--wvs-ruimte-4) var(--wvs-ruimte-5);
	border-left: 3px solid var(--wvs-accent);
	background: var(--wvs-bg-zacht);
	border-radius: 0 var(--wvs-radius-vlak) var(--wvs-radius-vlak) 0;
	font-size: var(--wvs-fs-lead);
	color: var(--wvs-kop-kleur);
}

blockquote cite {
	display: block;
	margin-top: var(--wvs-ruimte-3);
	font-size: var(--wvs-fs-klein);
	font-style: normal;
	color: var(--wvs-tekst-zacht);
}

hr {
	border: 0;
	height: 1px;
	background: var(--wvs-rand);
	margin: var(--wvs-sectie) 0;
}

/* --- Tabellen ----------------------------------------------------------- */

table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--wvs-ruimte-5);
	font-size: var(--wvs-fs-body);
}

th, td {
	padding: var(--wvs-ruimte-3) var(--wvs-ruimte-4);
	border-bottom: 1px solid var(--wvs-rand);
	text-align: left;
	vertical-align: top;
}

th {
	font-family: var(--wvs-font-kop);
	font-weight: var(--wvs-gewicht-kop);
	color: var(--wvs-kop-kleur);
	background: var(--wvs-bg-zacht);
}

/* Tabellen scrollbaar op mobiel in plaats van geplet */
.wvs-tabel-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- Code --------------------------------------------------------------- */

code, kbd, pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
}

code {
	background: var(--wvs-bg-vlak);
	padding: 0.15em 0.4em;
	border-radius: var(--wvs-radius-klein);
	color: var(--wvs-kop-kleur);
}

/* --- Hulpklassen -------------------------------------------------------- */

.wvs-visueel-verborgen {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.wvs-tekst-accent { color: var(--wvs-accent); }
.wvs-tekst-donker { color: var(--wvs-kop-kleur); }