/*
 * Herbruikbare onderdelen: knoppen, kaarten, tegels, chips, formuliervelden,
 * meldingen en paginering.
 *
 * Elk aanklikbaar element haalt minimaal 44 bij 44 pixels. WCAG 2.2 vraagt om
 * 24 bij 24; 44 is de maat waarop een duim het ook echt raakt.
 */

.knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--r2);
	min-height: var(--raakvlak);
	padding: var(--r2) var(--r5);
	border: var(--randdikte) solid transparent;
	border-radius: var(--radius);
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.knop--primair {
	background: var(--kleur-primair);
	color: var(--kleur-op-primair);
}

.knop--primair:hover {
	background: var(--kleur-primair-donker);
	color: var(--kleur-op-primair);
}

.knop--stil {
	background: transparent;
	border-color: var(--kleur-rand);
	color: var(--kleur-tekst);
}

.knop--stil:hover {
	background: var(--kleur-primair-licht);
	border-color: var(--kleur-primair);
	color: var(--kleur-primair-donker);
}

/* Kaarten */

.kaart {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--kleur-vlak);
	border: var(--randdikte) solid var(--kleur-rand);
	border-radius: var(--radius-groot);
	box-shadow: var(--schaduw-zacht);
	transition: box-shadow 0.16s ease, transform 0.16s ease;
}

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

.sectie--nieuws .kaart,
.sectie--wijk .kaart {
	background: var(--kleur-grond);
}

.kaart__beeld img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.kaart__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--r2);
	padding: var(--r4) var(--r5) var(--r5);
}

.kaart__meta,
.kaart__straten {
	display: flex;
	align-items: center;
	gap: var(--r2);
	margin: 0;
	color: var(--kleur-tekst-zacht);
	font-size: var(--maat-klein);
}

.kaart__straten {
	margin-top: auto;
	padding-top: var(--r2);
}

.kaart__titel {
	margin: 0;
	font-size: var(--maat-h3);
}

.kaart__titel a {
	color: var(--kleur-tekst);
	text-decoration: none;
}

/* De hele kaart aanklikbaar maken, maar de link blijft het echte doel voor het
   toetsenbord en de schermlezer. */
.kaart__titel a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.kaart__tekst {
	margin: 0;
	color: var(--kleur-tekst-zacht);
}

/* Tegels */

.tegel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--r3);
	min-height: var(--raakvlak);
	padding: var(--r4);
	background: var(--kleur-vlak);
	border: var(--randdikte) solid var(--kleur-rand);
	border-radius: var(--radius);
	color: var(--kleur-tekst);
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.sectie--wijk .tegel {
	background: var(--kleur-grond);
}

.tegel:hover {
	background: var(--kleur-primair-licht);
	border-color: var(--kleur-primair);
	color: var(--kleur-primair-donker);
}

.tegel__titel {
	font-weight: 600;
}

.tegel__pijl {
	flex: none;
	opacity: 0.55;
}

/* Chips */

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--r2);
}

.chip {
	display: inline-flex;
	align-items: center;
	min-height: var(--raakvlak);
	padding: var(--r2) var(--r4);
	background: var(--kleur-vlak);
	border: var(--randdikte) solid var(--kleur-rand);
	border-radius: 999px;
	color: var(--kleur-tekst);
	text-decoration: none;
}

.chip--aan {
	background: var(--kleur-primair);
	border-color: var(--kleur-primair);
	color: var(--kleur-op-primair);
	font-weight: 600;
}

/* Formulier */

.formulier {
	max-width: var(--breedte-smal);
	margin-top: var(--r5);
}

.formulier__form {
	display: grid;
	gap: var(--r4);
	padding: var(--r5);
	background: var(--kleur-vlak);
	border: var(--randdikte) solid var(--kleur-rand);
	border-radius: var(--radius-groot);
}

.veld {
	display: grid;
	gap: var(--r2);
}

.veld__label {
	font-weight: 600;
}

.veld__optioneel {
	color: var(--kleur-tekst-zacht);
	font-weight: 400;
}

.veld input[type="text"],
.veld input[type="email"],
.veld input[type="tel"],
.veld input[type="url"],
.veld select,
.veld textarea,
.zoekformulier__veld {
	width: 100%;
	min-height: var(--raakvlak);
	padding: var(--r2) var(--r3);
	background: var(--kleur-grond);
	border: var(--randdikte) solid var(--kleur-rand);
	border-radius: var(--radius);
	color: inherit;
	font: inherit;
}

.veld textarea {
	min-height: 9rem;
	resize: vertical;
}

.veld__akkoord {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--r3);
	align-items: start;
	padding: var(--r3);
	background: var(--kleur-grond);
	border: var(--randdikte) solid var(--kleur-rand);
	border-radius: var(--radius);
}

.veld__akkoord input {
	width: 1.35rem;
	height: 1.35rem;
	margin-top: 0.2rem;
}

.veld__fout {
	margin: 0;
	color: var(--kleur-accent-donker);
	font-size: var(--maat-klein);
	font-weight: 600;
}

.veld [aria-invalid="true"] {
	border-color: var(--kleur-accent-donker);
	border-width: 2px;
}

/* Het honingpotveld hoort onzichtbaar te zijn, maar niet met display none op de
   input zelf: dat herkennen bots juist. */
.hvc-honing {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.melding {
	margin-bottom: var(--r4);
	padding: var(--r4);
	border-left: 4px solid var(--kleur-primair);
	border-radius: var(--radius);
	background: var(--kleur-primair-licht);
	color: var(--kleur-tekst);
}

.melding--fout {
	border-left-color: var(--kleur-accent-donker);
	background: color-mix(in srgb, var(--kleur-accent) 12%, var(--kleur-vlak));
}

/* Zoeken */

.zoekformulier {
	display: grid;
	gap: var(--r2);
	max-width: var(--breedte-smal);
	margin-block: var(--r5);
}

.zoekformulier__label {
	font-weight: 600;
}

.zoekformulier__rij {
	display: flex;
	gap: var(--r2);
}

/* Paginering en kruimels */

.kruimels {
	margin-bottom: var(--r5);
	color: var(--kleur-tekst-zacht);
	font-size: var(--maat-klein);
}

.kruimels ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--r2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.kruimels li + li::before {
	content: "/";
	margin-right: var(--r2);
	opacity: 0.5;
}

.kruimels a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

.pagination {
	margin-top: var(--r6);
}

.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--r2);
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--raakvlak);
	min-height: var(--raakvlak);
	padding-inline: var(--r3);
	background: var(--kleur-vlak);
	border: var(--randdikte) solid var(--kleur-rand);
	border-radius: var(--radius);
	color: var(--kleur-tekst);
	text-decoration: none;
}

.page-numbers.current {
	background: var(--kleur-primair);
	border-color: var(--kleur-primair);
	color: var(--kleur-op-primair);
	font-weight: 600;
}

/* Leegte */

.leeg {
	max-width: var(--breedte-smal);
	padding: var(--r6);
	background: var(--kleur-vlak);
	border: var(--randdikte) dashed var(--kleur-rand);
	border-radius: var(--radius-groot);
	text-align: center;
}

.leeg--klein {
	padding: var(--r5);
	text-align: left;
}

.leeg__tekst {
	font-size: var(--maat-groot);
}

.leeg__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: var(--r3);
	justify-content: center;
}

/* Lopende tekst */

.prose > * + * {
	margin-top: var(--r4);
}

.prose h2 {
	margin-top: var(--r6);
}

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

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

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

.prose blockquote {
	margin: 0;
	padding-left: var(--r4);
	border-left: 3px solid var(--kleur-primair);
	color: var(--kleur-tekst-zacht);
	font-style: italic;
}

.prose table {
	width: 100%;
	border-collapse: collapse;
}

.prose th,
.prose td {
	padding: var(--r2) var(--r3);
	border-bottom: var(--randdikte) solid var(--kleur-rand);
	text-align: left;
}