/* ==========================================================================
   Droomwand — basis: reset, typografie, focus, lay-outhulpjes
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background: var(--bg);
	color: var(--fg);
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-hoogte) + var(--sp-4));
}

body {
	margin: 0;
	min-height: 100dvh;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	font-weight: var(--fw-normaal);
	line-height: var(--lh-basis);
}

.page-shell {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
}

.site-main {
	flex: 1 0 auto;
}

/* --- Koppen --- */
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: var(--fw-medium);
	line-height: var(--lh-kop);
	letter-spacing: var(--ls-strak);
	text-wrap: balance;
}

h1 { font-size: var(--fs-4xl); line-height: var(--lh-strak); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5, h6 { font-size: var(--fs-base); }

p {
	margin: 0 0 var(--sp-4);
	text-wrap: pretty;
}

p:last-child {
	margin-bottom: 0;
}

/* --- Links --- */
a {
	color: inherit;
	text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
	text-underline-offset: 0.18em;
	transition: color var(--duur-snel) var(--ease);
}

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

/* --- Media --- */
img,
svg,
video,
canvas {
	max-width: 100%;
	display: block;
}

img {
	height: auto;
}

figure {
	margin: 0;
}

/* --- Formulierelementen: erven de letter --- */
button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button,
[role="button"],
summary {
	cursor: pointer;
}

button:disabled,
input:disabled,
textarea:disabled {
	opacity: 0.5;
	cursor: default;
}

/* --- Lijsten --- */
ul, ol {
	margin: 0 0 var(--sp-4);
	padding-left: var(--sp-5);
}

.lijst-kaal {
	list-style: none;
	margin: 0;
	padding: 0;
}

hr {
	border: 0;
	border-top: 1px solid var(--border);
	margin: var(--sp-8) 0;
}

blockquote {
	margin: var(--sp-6) 0;
	padding-left: var(--sp-5);
	border-left: 2px solid var(--sand);
	color: var(--muted);
	font-family: var(--font-display);
	font-size: var(--fs-md);
}

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

table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-sm);
}

th, td {
	padding: var(--sp-3) var(--sp-2);
	border-bottom: 1px solid var(--border);
	text-align: left;
}

th {
	color: var(--muted);
	font-weight: var(--fw-medium);
}

/* --- Focus: altijd zichtbaar, nooit weggehaald --- */
:focus-visible {
	outline: var(--ring-breedte) solid var(--ring);
	outline-offset: var(--ring-afstand);
	border-radius: var(--r-sm);
}

/* Muisklikken laten geen ring achter, toetsenbordgebruik wel. */
:focus:not(:focus-visible) {
	outline: none;
}

#inhoud:focus {
	outline: none;
}

/* --- Alleen voor schermlezers --- */
.schermlezer,
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --- Skip-link --- */
.skip-link {
	position: absolute;
	top: var(--sp-2);
	left: var(--sp-2);
	z-index: var(--z-overlay);
	transform: translateY(-200%);
	display: inline-flex;
	align-items: center;
	min-height: var(--raak);
	padding: 0 var(--sp-4);
	border-radius: var(--r-md);
	background: var(--accent);
	color: var(--accent-fg);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	text-decoration: none;
	box-shadow: var(--shadow-2);
	transition: transform var(--duur) var(--ease);
}

.skip-link:focus {
	transform: translateY(0);
	color: var(--accent-fg);
}

/* --- Containers --- */
.wrap {
	width: var(--wrap);
	margin-inline: auto;
}

.wrap-sm {
	width: var(--wrap-smal);
	margin-inline: auto;
}

.wrap-lg {
	width: var(--wrap-breed);
	margin-inline: auto;
}

.section {
	width: var(--wrap);
	margin-inline: auto;
	padding-block: var(--sp-10);
}

.section-smal {
	padding-block: var(--sp-8);
}

.band {
	border-block: 1px solid var(--border);
	background: var(--bg-elevated);
}

/*
 * :not(body) is bewust: WordPress zet altijd zelf een class "page" op
 * <body> voor elke vaste pagina (body_class()), naast onze eigen ".page"
 * op het artikel/wrapper-element voor deze padding. Zonder deze uitsluiting
 * krijgt <body> (die via .page-shell display:flex heeft) ook deze padding,
 * en schuift de plakkende sitekop zichtbaar naar beneden.
 */
.page:not(body) {
	padding-block: var(--sp-9) var(--sp-11);
}

.page-kop {
	margin-bottom: var(--sp-7);
}

.page-kop h1 {
	margin-top: var(--sp-2);
}

/* --- Tekststijlen --- */
.kicker {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-kicker);
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--muted);
}

.lead {
	font-size: var(--fs-md);
	line-height: var(--lh-ruim);
	max-width: 36rem;
}

.muted { color: var(--muted); }
.subtle { color: var(--subtle); }
.display { font-family: var(--font-display); }
.tekst-midden { text-align: center; }
.nowrap { white-space: nowrap; }

.num {
	font-family: var(--font-display);
	font-size: var(--fs-xl);
	color: var(--subtle);
	line-height: 1;
}

/* --- Lopende tekst uit de editor --- */
.prose > * + * {
	margin-top: var(--sp-4);
}

.prose h2 {
	margin-top: var(--sp-8);
	font-size: var(--fs-2xl);
}

.prose h3 {
	margin-top: var(--sp-7);
}

.prose ul,
.prose ol {
	padding-left: var(--sp-5);
}

.prose li + li {
	margin-top: var(--sp-2);
}

.prose img {
	border-radius: var(--r-lg);
}

/* --- Rasters --- */
.grid-2,
.grid-3,
.grid-4 {
	display: grid;
	gap: var(--sp-4);
}

.grid-3,
.grid-4 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sp-4);
}

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin-top: var(--sp-6);
}

@media (min-width: 40rem) {
	.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
	.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.section { padding-block: var(--sp-12); }
}

/* --- Beweging blijft terughoudend en is uitschakelbaar --- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

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