/* Reset + basis */

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

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

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--font-size);
	line-height: var(--regelhoogte);
	color: var(--kleur-tekst);
	background: var(--kleur-achtergrond);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-kop);
	line-height: 1.15;
	margin: 0 0 var(--ruimte-s);
	text-wrap: balance;
}

h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
h4 { font-size: var(--h4); }
h5 { font-size: var(--h5); }
h6 { font-size: var(--h6); }

p { margin: 0 0 var(--ruimte-s); }

a { color: var(--kleur-link); text-decoration: underline; text-underline-offset: 2px; }
a:hover, a:focus { color: var(--kleur-link-hover); }

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

ul, ol { padding-left: 1.25rem; }

/* Layout */
.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

.site-main { min-height: 40vh; padding-block: 0 var(--ruimte-l); }

/* Knoppen - stijl komt uit de variabelen */
.btn,
button.btn,
input[type="submit"] {
	display: inline-block;
	padding: var(--btn-padding);
	border: 0;
	border-radius: var(--btn-radius);
	background: var(--btn-bg);
	color: var(--btn-tekst);
	font-weight: var(--btn-font-weight);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.btn:hover, .btn:focus { background: var(--btn-bg-hover); color: var(--btn-tekst); }

.btn--secundair { --btn-bg: var(--kleur-secundair); --btn-tekst: var(--kleur-zwart); }
.btn--accent { --btn-bg: var(--kleur-accent); --btn-bg-hover: #b60510; }
.btn--outline {
	background: transparent;
	color: var(--kleur-primair);
	box-shadow: inset 0 0 0 2px currentColor;
}

/* Formulieren */
input, select, textarea {
	font: inherit;
	padding: 0.65rem 0.85rem;
	border: 1px solid var(--kleur-lijn);
	border-radius: var(--btn-radius);
	background: var(--kleur-wit);
	color: var(--kleur-tekst);
	max-width: 100%;
}

:focus-visible { outline: 3px solid var(--kleur-accent); outline-offset: 2px; }

/* Grid voor overzichten */
.post-grid {
	display: grid;
	gap: var(--ruimte-m);
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.card { background: var(--kleur-wit); border-radius: var(--radius); overflow: hidden; }
.card__media img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.card__body { padding: var(--ruimte-s); }
.card__title { font-size: var(--h3); margin-bottom: var(--ruimte-xs); }
.card__title a { text-decoration: none; color: inherit; }

/* ------------------------------------------------------------ Kruimelpad */
.kruimelpad {
	background: transparent;
	font-size: 0.85rem;
}

.kruimelpad__lijst {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.6rem;
	list-style: none;
	margin: 0;
	padding: 1.1rem 0 0;
}

.kruimelpad__item { display: flex; align-items: center; gap: 0.6rem; color: var(--kleur-tekst-zacht); }
.kruimelpad__item + .kruimelpad__item::before { content: "\203A"; color: var(--kruimelpad-chevron, currentColor); font-size: var(--kruimelpad-chevron-maat, 1.35em); line-height: 1; }
.kruimelpad a { color: inherit; text-decoration: none; }
.kruimelpad a:hover { color: var(--kleur-primair); text-decoration: underline; }
.kruimelpad [aria-current="page"] { color: var(--kleur-tekst); font-weight: 600; }
.kruimelpad__home { display: inline-flex; align-items: center; }
.kruimelpad__huis { width: var(--kruimelpad-home-icoon, 16px); height: var(--kruimelpad-home-icoon, 16px); }

/* ------------------------------------------------------------ Paginakop */
/* Paginatitel en introtekst staan links, over de volle containerbreedte. */
.paginakop {
	max-width: none;
	margin: 0 0 var(--ruimte-l);
	text-align: left;
}
.paginakop__intro { max-width: 60ch; }

.paginakop__intro { color: var(--kleur-tekst-zacht); }
.paginakop__knop { margin-top: var(--ruimte-s); }

/* ------------------------------------------------------------ Sponsorpagina */
.sectie--sponsorpagina { padding-block: var(--ruimte-l); }

.sponsorgroep + .sponsorgroep { margin-top: var(--ruimte-l); }

.sponsorgroep__kop {
	font-size: var(--h3);
	text-align: center;
	margin-bottom: var(--ruimte-m);
	padding-bottom: var(--ruimte-xs);
	border-bottom: 3px solid var(--kleur-secundair);
}

.sponsorraster {
	display: grid;
	gap: var(--ruimte-s);
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.sponsorgroep--hoofdsponsor .sponsorraster {
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: var(--ruimte-m);
}

.sponsorkaart {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 130px;
	padding: var(--ruimte-s);
	background: var(--kleur-wit);
	border: 1px solid var(--kleur-lijn);
	border-radius: var(--radius);
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

a.sponsorkaart:hover { box-shadow: var(--schaduw); transform: translateY(-2px); }

.sponsorgroep--hoofdsponsor .sponsorkaart { min-height: 170px; }

.sponsorkaart__logo { max-height: 90px; width: auto; max-width: 100%; object-fit: contain; }
.sponsorgroep--hoofdsponsor .sponsorkaart__logo { max-height: 120px; }
.sponsorkaart__naam { font-weight: 600; text-align: center; }

/* Toegankelijkheid */
.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;
}

.skip-link:focus {
	position: fixed; top: 8px; left: 8px; z-index: 999;
	width: auto; height: auto; clip: auto;
	padding: 0.75rem 1rem; background: var(--kleur-wit);
}

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

/* =========================================================================
   Geen horizontale schuifbalk

   Een versiering die even buiten de rechterrand valt (de Mug die komt
   invliegen, een bannerkaart die uitsteekt) mag de pagina niet breder maken.
   overflow-x: clip knipt dat af zonder een schuifgebied te maken, dus de
   plakkende header en de scrollanimaties blijven gewoon werken. Anders dan
   overflow: hidden, dat die twee wel breekt.
   ========================================================================= */

html {
	overflow-x: clip;
}