/**
 * Opmaak van de databank-onderdelen.
 * De kleuren komen uit theme.json; hier staan alleen vormen en verhoudingen,
 * zodat het thema van kleur kan wisselen zonder dat dit bestand mee hoeft.
 */

:root {
	--wmogids-inkt: var(--wp--preset--color--inkt, #1b2a28);
	--wmogids-petrol: var(--wp--preset--color--petrol, #14514b);
	--wmogids-amber: var(--wp--preset--color--amber, #b3660f);
	--wmogids-zand: var(--wp--preset--color--zand, #faf6f0);
	--wmogids-papier: var(--wp--preset--color--papier, #ffffff);
	--wmogids-rand: var(--wp--preset--color--rand, #e3dace);
	--wmogids-gedempt: var(--wp--preset--color--gedempt, #63736f);
	--wmogids-straal: 14px;
	--wmogids-schaduw: 0 1px 2px rgb(27 42 40 / 6%), 0 8px 24px -12px rgb(27 42 40 / 18%);
}

/* ---------- zoekformulier ---------- */

.wmogids-zoek {
	background: var(--wmogids-papier);
	border: 1px solid var(--wmogids-rand);
	border-radius: var(--wmogids-straal);
	padding: clamp(1.25rem, 3vw, 1.75rem);
	box-shadow: var(--wmogids-schaduw);
}

.wmogids-zoek__label {
	display: block;
	font-size: 1.125rem;
	font-weight: 600;
	margin-bottom: 0.625rem;
}

.wmogids-zoek__rij {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.wmogids-zoek__veld {
	flex: 1 1 16rem;
	min-width: 0;
	font: inherit;
	font-size: 1.0625rem;
	padding: 0.75rem 0.875rem;
	border: 2px solid var(--wmogids-rand);
	border-radius: 10px;
	background: var(--wmogids-papier);
	color: inherit;
}

.wmogids-zoek__veld:focus-visible,
.wmogids-filter:focus-visible {
	outline: 3px solid var(--wmogids-petrol);
	outline-offset: 2px;
}

.wmogids-knop {
	font: inherit;
	font-weight: 600;
	padding: 0.75rem 1.5rem;
	border: 0;
	border-radius: 10px;
	background: var(--wmogids-petrol);
	color: #fff;
	cursor: pointer;
}

.wmogids-knop:hover {
	background: color-mix(in srgb, var(--wmogids-petrol) 85%, black);
}

.wmogids-zoek__hint {
	margin: 0.75rem 0 0;
	font-size: 0.9375rem;
	color: var(--wmogids-gedempt);
}

/* ---------- kerncijferkaarten ---------- */

.wmogids-kerncijfers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1rem;
}

.wmogids-kaart {
	background: var(--wmogids-papier);
	border: 1px solid var(--wmogids-rand);
	border-radius: var(--wmogids-straal);
	padding: 1.25rem;
}

.wmogids-kaart__titel {
	margin: 0 0 0.5rem;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--wmogids-gedempt);
}

.wmogids-kaart__groot {
	margin: 0;
	font-size: clamp(1.375rem, 3vw, 1.75rem);
	font-weight: 700;
	line-height: 1.15;
	color: var(--wmogids-petrol);
}

.wmogids-kaart__tot {
	font-size: 0.875em;
	font-weight: 400;
	color: var(--wmogids-gedempt);
	padding: 0 0.25rem;
}

.wmogids-kaart__onder {
	margin: 0.625rem 0 0;
	font-size: 0.9375rem;
}

.wmogids-kaart__bron {
	margin: 0.375rem 0 0;
	font-size: 0.8125rem;
	color: var(--wmogids-gedempt);
}

/* ---------- ranglijst ---------- */

.wmogids-ranglijst {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.4375rem;
}

.wmogids-ranglijst__rij {
	display: grid;
	grid-template-columns: minmax(7rem, 11rem) 1fr auto;
	align-items: center;
	gap: 0.75rem;
	font-size: 1rem;
}

.wmogids-ranglijst__naam {
	text-decoration: none;
	color: inherit;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wmogids-ranglijst__naam:hover {
	text-decoration: underline;
}

.wmogids-ranglijst__balk {
	display: block;
	height: 0.625rem;
	border-radius: 999px;
	background: var(--wmogids-rand);
	overflow: hidden;
}

.wmogids-ranglijst__vulling {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--wmogids-petrol);
}

.wmogids-ranglijst__bedrag {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	white-space: nowrap;
}

/* ---------- tabel ---------- */

.wmogids-tabel-balk {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.875rem;
}

.wmogids-filter {
	flex: 1 1 18rem;
	font: inherit;
	padding: 0.625rem 0.8125rem;
	border: 2px solid var(--wmogids-rand);
	border-radius: 10px;
	background: var(--wmogids-papier);
}

.wmogids-tabel-telling {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--wmogids-gedempt);
}

.wmogids-tabel-scroll {
	/* Met 342 rijen hangt een horizontale schuifbalk onderaan de tabel, en dus
	   buiten beeld: je moet eerst de hele pagina af om hem te kunnen gebruiken.
	   Door de hoogte te begrenzen staan beide schuifbalken altijd binnen bereik. */
	max-height: min(70vh, 40rem);
	overflow: auto;
	overscroll-behavior: contain;
	border: 1px solid var(--wmogids-rand);
	border-radius: var(--wmogids-straal);
	background: var(--wmogids-papier);
}

/* De gemeentenaam blijft staan tijdens het horizontaal schuiven, anders weet je
   halverwege niet meer welke rij je leest. */
.wmogids-tabel tbody th[scope="row"],
.wmogids-tabel thead th:first-child {
	position: sticky;
	left: 0;
	background: var(--wmogids-papier);
	z-index: 1;
	box-shadow: 1px 0 0 var(--wmogids-rand);
}

.wmogids-tabel thead th:first-child {
	z-index: 3;
}

.wmogids-tabel tbody tr:nth-child(even) th[scope="row"] {
	background: color-mix(in srgb, var(--wmogids-zand) 55%, var(--wmogids-papier));
}

.wmogids-tabel tbody tr:hover th[scope="row"] {
	background: color-mix(in srgb, var(--wmogids-petrol) 6%, var(--wmogids-papier));
}

.wmogids-tabel {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.wmogids-tabel th,
.wmogids-tabel td {
	padding: 0.625rem 0.875rem;
	text-align: left;
	border-bottom: 1px solid var(--wmogids-rand);
	vertical-align: top;
}

.wmogids-tabel thead th {
	position: sticky;
	top: 0;
	background: var(--wmogids-zand);
	border-bottom: 2px solid var(--wmogids-rand);
	white-space: nowrap;
	z-index: 1;
}

.wmogids-tabel thead button {
	font: inherit;
	font-weight: 600;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: inherit;
	text-align: inherit;
}

.wmogids-tabel thead button small {
	font-weight: 400;
	font-size: 0.75rem;
	color: var(--wmogids-gedempt);
}

.wmogids-tabel thead th[aria-sort] button::after {
	content: " ▾";
}

.wmogids-tabel thead th[aria-sort="ascending"] button::after {
	content: " ▴";
}

.wmogids-tabel tbody tr:nth-child(even) {
	background: color-mix(in srgb, var(--wmogids-zand) 55%, transparent);
}

.wmogids-tabel tbody tr:hover {
	background: color-mix(in srgb, var(--wmogids-petrol) 6%, transparent);
}

.wmogids-tabel__getal {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.wmogids-tabel a {
	color: var(--wmogids-petrol);
	font-weight: 500;
}

.wmogids-leeg {
	color: var(--wmogids-gedempt);
	cursor: help;
}

.wmogids-tabel--smal {
	border: 1px solid var(--wmogids-rand);
	border-radius: var(--wmogids-straal);
	overflow: hidden;
	background: var(--wmogids-papier);
}

/* ---------- gemeentepagina ---------- */

.wmogids-context {
	font-size: 1.0625rem;
	color: var(--wmogids-gedempt);
	border-left: 4px solid var(--wmogids-rand);
	padding-left: 1rem;
	margin-bottom: 2rem;
}

.wmogids-veld {
	background: var(--wmogids-papier);
	border: 1px solid var(--wmogids-rand);
	border-radius: var(--wmogids-straal);
	padding: clamp(1.125rem, 3vw, 1.625rem);
	margin-bottom: 1rem;
}

.wmogids-veld__kop {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1rem;
}

.wmogids-veld__titel {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.3;
}

.wmogids-veld__bedrag {
	margin: 0;
	font-size: clamp(1.5rem, 4vw, 2rem);
	font-weight: 700;
	line-height: 1;
	color: var(--wmogids-petrol);
	font-variant-numeric: tabular-nums;
}

.wmogids-veld__eenheid {
	display: block;
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--wmogids-gedempt);
	text-align: right;
	margin-top: 0.25rem;
}

.wmogids-veld__uitleg {
	margin: 0.75rem 0 1.25rem;
	color: var(--wmogids-gedempt);
}

.wmogids-meter__spoor {
	position: relative;
	height: 0.5rem;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--wmogids-rand), var(--wmogids-petrol));
}

.wmogids-meter__punt {
	position: absolute;
	top: 50%;
	width: 1.125rem;
	height: 1.125rem;
	border-radius: 50%;
	background: var(--wmogids-papier);
	border: 3px solid var(--wmogids-petrol);
	transform: translate(-50%, -50%);
}

.wmogids-meter--hoger .wmogids-meter__punt {
	border-color: var(--wmogids-petrol);
}

.wmogids-meter--lager .wmogids-meter__punt {
	border-color: var(--wmogids-amber);
}

.wmogids-meter__uitersten {
	display: flex;
	justify-content: space-between;
	font-size: 0.8125rem;
	color: var(--wmogids-gedempt);
	margin-top: 0.375rem;
}

.wmogids-veld__oordeel {
	margin: 0.75rem 0 0;
	font-size: 0.9375rem;
}

.wmogids-bron {
	margin-top: 1rem;
	border-top: 1px solid var(--wmogids-rand);
	padding-top: 0.75rem;
	font-size: 0.9375rem;
}

.wmogids-bron summary {
	cursor: pointer;
	font-weight: 500;
	color: var(--wmogids-petrol);
}

.wmogids-citaat {
	margin: 0.75rem 0;
	padding: 0.75rem 1rem;
	background: var(--wmogids-zand);
	border-left: 3px solid var(--wmogids-amber);
	border-radius: 0 8px 8px 0;
	font-size: 0.9375rem;
	font-style: italic;
	color: var(--wmogids-inkt);
}

.wmogids-melding {
	background: var(--wmogids-zand);
	border: 1px solid var(--wmogids-rand);
	border-left: 4px solid var(--wmogids-amber);
	border-radius: var(--wmogids-straal);
	padding: 1.25rem 1.5rem;
}

.wmogids-melding h2 {
	margin-top: 0;
	font-size: 1.125rem;
}

.wmogids-melding p:last-child {
	margin-bottom: 0;
}

.wmogids-bronnenlijst {
	margin-top: 2rem;
	font-size: 0.9375rem;
}

.wmogids-bronnenlijst h2 {
	font-size: 1.125rem;
}

.wmogids-noot {
	font-size: 0.875rem;
	color: var(--wmogids-gedempt);
}

@media (max-width: 40rem) {
	.wmogids-ranglijst__rij {
		grid-template-columns: 1fr auto;
	}

	.wmogids-ranglijst__balk {
		grid-column: 1 / -1;
		order: 3;
	}
}

/* ---------- verloop tussen twee jaargangen ---------- */

.wmogids-verloop {
	margin: -0.75rem 0 1.25rem;
	font-size: 0.9375rem;
	padding-left: 0.75rem;
	border-left: 3px solid var(--wmogids-rand);
}

.wmogids-verloop--omhoog {
	border-left-color: var(--wmogids-petrol);
}

.wmogids-verloop--omlaag,
.wmogids-verloop--gelijk {
	border-left-color: var(--wmogids-amber);
	color: var(--wmogids-inkt);
}

.wmogids-nadruk {
	font-weight: 700;
}

/* ---------- rekenhulp eigen bijdrage ---------- */

.wmogids-rekenhulp {
	background: var(--wmogids-papier);
	border: 1px solid var(--wmogids-rand);
	border-radius: var(--wmogids-straal);
	padding: clamp(1.25rem, 3vw, 1.875rem);
	box-shadow: var(--wmogids-schaduw);
}

.wmogids-waarschuwing {
	margin: 0 0 1.5rem;
	padding: 0.875rem 1.125rem;
	background: color-mix(in srgb, var(--wmogids-amber) 9%, var(--wmogids-papier));
	border-left: 4px solid var(--wmogids-amber);
	border-radius: 0 8px 8px 0;
	font-size: 0.9375rem;
}

.wmogids-rekenhulp__formulier {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.wmogids-veldgroep__label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.5rem;
}

.wmogids-keuze {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.25rem 0;
	cursor: pointer;
}

.wmogids-keuze input {
	width: 1.125rem;
	height: 1.125rem;
	accent-color: var(--wmogids-petrol);
}

.wmogids-invoer {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	border: 2px solid var(--wmogids-rand);
	border-radius: 10px;
	padding: 0.5rem 0.75rem;
	background: var(--wmogids-papier);
}

.wmogids-invoer:focus-within {
	border-color: var(--wmogids-petrol);
	outline: 2px solid color-mix(in srgb, var(--wmogids-petrol) 30%, transparent);
}

.wmogids-invoer input {
	flex: 1 1 auto;
	min-width: 0;
	font: inherit;
	font-variant-numeric: tabular-nums;
	border: 0;
	background: none;
	padding: 0.25rem 0;
	color: inherit;
}

.wmogids-invoer input:focus {
	outline: none;
}

.wmogids-invoer__na {
	font-size: 0.875rem;
	color: var(--wmogids-gedempt);
	white-space: nowrap;
}

.wmogids-hulptekst {
	margin: 0.4375rem 0 0;
	font-size: 0.875rem;
	color: var(--wmogids-gedempt);
}

.wmogids-uitkomst {
	display: block;
	margin-top: 1.75rem;
	padding-top: 1.5rem;
	border-top: 2px solid var(--wmogids-rand);
}

.wmogids-uitkomst__bedrag {
	margin: 0;
	font-size: clamp(2.25rem, 7vw, 3.25rem);
	font-weight: 700;
	line-height: 1;
	color: var(--wmogids-petrol);
	font-variant-numeric: tabular-nums;
}

.wmogids-uitkomst__eenheid {
	display: block;
	font-size: 0.9375rem;
	font-weight: 400;
	color: var(--wmogids-gedempt);
	margin-top: 0.375rem;
}

.wmogids-uitkomst__nu {
	margin: 0.875rem 0 0;
	font-size: 1rem;
}

.wmogids-rekenstappen {
	margin: 0.75rem 0;
	padding-left: 1.25rem;
	font-size: 0.9375rem;
	font-variant-numeric: tabular-nums;
}

.wmogids-rekenstappen li {
	margin-bottom: 0.25rem;
}

.wmogids-melding--rustig {
	margin-top: 1.5rem;
	border-left-color: var(--wmogids-petrol);
}

.wmogids-melding--rustig h3 {
	margin: 0 0 0.5rem;
	font-size: 1.0625rem;
}

.wmogids-melding--rustig ul {
	margin: 0;
	padding-left: 1.25rem;
	font-size: 0.9375rem;
}

.wmogids-melding--rustig li {
	margin-bottom: 0.3125rem;
}

/* ---------- groepen op de gemeentepagina ---------- */

.wmogids-groep {
	margin-bottom: 2.5rem;
}

.wmogids-groep__kop {
	margin-bottom: 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--wmogids-rand);
}

.wmogids-groep__titel {
	margin: 0;
	font-size: 1.375rem;
}

.wmogids-veld__titel {
	font-size: 1.25rem;
}

.wmogids-groep__uitleg {
	margin: 0.375rem 0 0;
	font-size: 0.9375rem;
	color: var(--wmogids-gedempt);
}

.wmogids-tabel-titel {
	margin: 2rem 0 0.625rem;
	font-size: 1.25rem;
}

.wmogids-tabel-omhulsel + .wmogids-tabel-omhulsel {
	margin-top: 0.5rem;
}

/* ---------- meerjarige reeks ---------- */

.wmogids-verloop-blok {
	display: grid;
	grid-template-columns: minmax(9rem, 20rem) 1fr;
	align-items: center;
	gap: 1rem 1.25rem;
	margin: 0 0 1.25rem;
	padding: 0.875rem 1rem;
	background: var(--wmogids-zand);
	border-radius: 10px;
	border-left: 4px solid var(--wmogids-rand);
}

.wmogids-verloop-blok--stil,
.wmogids-verloop-blok--achter {
	border-left-color: var(--wmogids-amber);
}

.wmogids-verloop-blok--voor {
	border-left-color: var(--wmogids-petrol);
}

.wmogids-verloop-blok__tekst {
	margin: 0;
	font-size: 0.9375rem;
}

.wmogids-reeks {
	margin: 0;
}

.wmogids-reeks__grafiek {
	display: block;
	width: 100%;
	height: 3.5rem;
	overflow: visible;
}

.wmogids-reeks__lijn {
	stroke: var(--wmogids-petrol);
	stroke-width: 2;
	stroke-linejoin: round;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

.wmogids-reeks__punt {
	fill: var(--wmogids-petrol);
	opacity: 0.55;
}

.wmogids-reeks__punt.is-nu {
	opacity: 1;
	stroke: var(--wmogids-papier);
	stroke-width: 2;
}

.wmogids-verloop-blok--stil .wmogids-reeks__lijn,
.wmogids-verloop-blok--achter .wmogids-reeks__lijn {
	stroke: var(--wmogids-amber);
}

.wmogids-verloop-blok--stil .wmogids-reeks__punt,
.wmogids-verloop-blok--achter .wmogids-reeks__punt {
	fill: var(--wmogids-amber);
}

.wmogids-reeks__as {
	display: flex;
	justify-content: space-between;
	font-size: 0.75rem;
	color: var(--wmogids-gedempt);
	margin-top: 0.25rem;
	font-variant-numeric: tabular-nums;
}

.wmogids-negatief {
	color: var(--wmogids-amber);
	font-weight: 600;
}

@media (max-width: 40rem) {
	.wmogids-verloop-blok {
		grid-template-columns: 1fr;
	}
}

.wmogids-verloop-blok--sprong {
	border-left-color: var(--wmogids-petrol);
}

.wmogids-verloop-blok--sprong .wmogids-reeks__lijn {
	stroke: var(--wmogids-petrol);
	stroke-dasharray: none;
}

/* ---------- vergelijker ---------- */

.wmogids-vergelijker {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	align-items: end;
	gap: 1rem;
	background: var(--wmogids-papier);
	border: 1px solid var(--wmogids-rand);
	border-radius: var(--wmogids-straal);
	padding: 1.25rem;
	margin-bottom: 1.5rem;
}

.wmogids-vergelijker label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.4375rem;
}

.wmogids-vergelijker select {
	width: 100%;
	font: inherit;
	padding: 0.6875rem 0.8125rem;
	border: 2px solid var(--wmogids-rand);
	border-radius: 10px;
	background: var(--wmogids-papier);
	color: inherit;
}

.wmogids-vergelijktabel th[scope="row"] small {
	display: block;
	font-weight: 400;
	font-size: 0.8125rem;
	color: var(--wmogids-gedempt);
}

.wmogids-positief {
	color: var(--wmogids-petrol);
	font-weight: 600;
}

.wmogids-download {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
}

.wmogids-download .wmogids-knop {
	text-decoration: none;
	display: inline-block;
}

@media (max-width: 46rem) {
	.wmogids-vergelijker {
		grid-template-columns: 1fr;
	}
}

/* ---------- afdrukken ---------- */
/* De bezoeker neemt dit mee naar het keukentafelgesprek. Dan moeten de
   bedragen erop staan, de bron erbij, en de navigatie eraf. */

@media print {
	.wmogids-kop,
	.wmogids-voet,
	.wmogids-menu,
	.wmogids-zoek,
	.wmogids-kruimels,
	.wp-block-buttons,
	.wmogids-download {
		display: none !important;
	}

	.wmogids-veld,
	.wmogids-groep {
		break-inside: avoid;
		box-shadow: none;
	}

	.wmogids-veld {
		border: 1px solid #999;
		margin-bottom: 0.5rem;
		padding: 0.75rem;
	}

	/* Uitklapbare bronvermelding staat op papier gewoon open. */
	.wmogids-bron[open] > summary,
	.wmogids-bron > summary {
		list-style: none;
	}

	.wmogids-bron > *:not(summary) {
		display: block !important;
	}

	/* De link achter een bron is op papier onzichtbaar; zet hem er voluit bij. */
	.wmogids-bron a::after {
		content: " (" attr(href) ")";
		font-size: 0.75rem;
		word-break: break-all;
	}

	.wmogids-verloop-blok {
		background: none;
		border-left: 3px solid #999;
	}

	body {
		background: #fff;
		font-size: 11pt;
	}
}

/* ---------- acties en doorloop ---------- */

.wmogids-acties {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 2rem 0 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--wmogids-rand);
}

.wmogids-acties .wmogids-knop {
	text-decoration: none;
}

.wmogids-knop--rustig {
	background: transparent;
	color: var(--wmogids-petrol);
	box-shadow: inset 0 0 0 2px var(--wmogids-petrol);
}

.wmogids-knop--rustig:hover {
	background: color-mix(in srgb, var(--wmogids-petrol) 8%, transparent);
}

.wmogids-acties .wmogids-noot {
	flex: 1 1 16rem;
	margin: 0;
}

.wmogids-buren {
	margin-top: 2rem;
	font-size: 0.9375rem;
}

.wmogids-buren h2 {
	font-size: 1.0625rem;
	margin-bottom: 0.5rem;
}

.wmogids-buren ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem 0.875rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---------- collectief vervoerstelsel ---------- */

.wmogids-veld--stelsel {
	border-left: 4px solid var(--wmogids-petrol);
}

.wmogids-tarieflijst {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	display: grid;
	gap: 0.375rem;
	max-width: 26rem;
}

.wmogids-tarieflijst li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.4375rem 0.75rem;
	background: var(--wmogids-zand);
	border-radius: 8px;
	font-size: 0.9375rem;
}

.wmogids-tarieflijst strong {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.wmogids-stelselmerk {
	font-size: 0.8125rem;
	color: var(--wmogids-gedempt);
	font-style: italic;
	white-space: nowrap;
}

.wmogids-legenda {
	flex: 1 1 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
	margin: 0;
	font-size: 0.8125rem;
	color: var(--wmogids-gedempt);
}

.wmogids-legenda strong {
	color: var(--wmogids-inkt);
	font-weight: 600;
}

/* ---------- de vier ingangen ---------- */

.wmogids-situaties {
	margin-bottom: 3rem;
}

.wmogids-situaties__kop {
	margin: 0 0 0.375rem;
	font-size: clamp(1.375rem, 3vw, 1.75rem);
}

.wmogids-situaties__inleiding {
	margin: 0 0 1.5rem;
	color: var(--wmogids-gedempt);
}

.wmogids-situatielijst {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
}

.wmogids-situatie {
	display: flex;
	flex-direction: column;
	background: var(--wmogids-papier);
	border: 1px solid var(--wmogids-rand);
	border-top: 4px solid var(--wmogids-petrol);
	border-radius: var(--wmogids-straal);
	padding: 1.25rem 1.375rem 1.125rem;
}

.wmogids-situatie__vraag {
	margin: 0 0 0.5rem;
	font-size: 1.1875rem;
	line-height: 1.3;
}

.wmogids-situatie__inleiding {
	margin: 0 0 1rem;
	font-size: 0.9375rem;
	color: var(--wmogids-gedempt);
}

.wmogids-situatie__bedragen {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	display: grid;
	gap: 0.375rem;
}

.wmogids-situatie__bedragen li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 0.75rem;
	padding: 0.5rem 0.75rem;
	background: var(--wmogids-zand);
	border-radius: 8px;
}

.wmogids-situatie__wat {
	font-size: 0.9375rem;
}

.wmogids-situatie__bedragen strong {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--wmogids-petrol);
}

.wmogids-situatie__bedragen small {
	display: block;
	font-weight: 400;
	font-size: 0.75rem;
	color: var(--wmogids-gedempt);
	text-align: right;
}

.wmogids-situatie__stelsel,
.wmogids-situatie__leeg {
	margin: 0 0 1rem;
	padding: 0.6875rem 0.875rem;
	background: var(--wmogids-zand);
	border-left: 3px solid var(--wmogids-amber);
	border-radius: 0 8px 8px 0;
	font-size: 0.9375rem;
}

/* De voorwaarde hoort visueel bij het bedrag erboven: zonder de urendrempel
   zegt het bedrag niets. Daarom geen eigen blok maar een onderregel. */
.wmogids-situatie__voorwaarde {
	margin: -0.375rem 0 1rem;
	font-size: 0.875rem;
	color: var(--wmogids-gedempt);
	line-height: 1.5;
}

.wmogids-situatie__bron {
	font-size: 0.8125rem;
	white-space: nowrap;
}

/* Juist waar geen bedrag staat, zit de informatie die nergens anders te
   vinden is. Die krijgt daarom nadruk in plaats van een streepje. */
.wmogids-situatie__geenbedrag {
	margin: 0 0 1rem;
	padding: 0.875rem 1rem;
	background: color-mix(in srgb, var(--wmogids-amber) 7%, var(--wmogids-papier));
	border: 1px solid color-mix(in srgb, var(--wmogids-amber) 25%, transparent);
	border-radius: 10px;
}

.wmogids-situatie__geenbedrag h4 {
	margin: 0 0 0.3125rem;
	font-size: 1rem;
}

.wmogids-situatie__geenbedrag p {
	margin: 0;
	font-size: 0.9375rem;
}

.wmogids-situatie__stappen {
	margin-top: auto;
	padding-top: 0.75rem;
	border-top: 1px solid var(--wmogids-rand);
	font-size: 0.9375rem;
}

.wmogids-situatie__stappen summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--wmogids-petrol);
}

.wmogids-situatie__stappen ol {
	margin: 0.75rem 0 0;
	padding-left: 1.25rem;
	display: grid;
	gap: 0.5rem;
}

@media print {
	.wmogids-situatie__stappen[open] ol,
	.wmogids-situatie__stappen ol {
		display: grid !important;
	}

	.wmogids-situatie {
		break-inside: avoid;
	}
}

.wmogids-onderbouwing {
	margin: 0 0 1.5rem;
	padding-top: 1.5rem;
	border-top: 2px solid var(--wmogids-rand);
}

.wmogids-onderbouwing__kop {
	margin: 0 0 0.375rem;
	font-size: clamp(1.375rem, 3vw, 1.75rem);
}

.wmogids-onderbouwing__uitleg {
	margin: 0;
	color: var(--wmogids-gedempt);
	font-size: 0.9375rem;
	max-width: 62ch;
}

/* ------------------------------------------------------------------ */
/* De hulpwijzer                                                       */
/* ------------------------------------------------------------------ */

/* Eén vraag per scherm, groot genoeg om met een duim te raken en met
   genoeg rust eromheen dat er geen twijfel is waar je moet kijken. De
   doelgroep leest dit vaak op een telefoon, soms met iemand die meekijkt. */
.wmogids-wijzer {
	max-width: 40rem;
	margin: 0 auto 2rem;
}

.wmogids-wijzer__voortgang {
	margin: 0 0 0.375rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wmogids-gedempt);
}

.wmogids-wijzer__vraag {
	margin: 0 0 0.5rem;
	font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
	line-height: 1.25;
}

.wmogids-wijzer__uitleg {
	margin: 0 0 1.25rem;
	color: var(--wmogids-gedempt);
	line-height: 1.6;
}

/* --- zoeken naar de gemeente --- */

.wmogids-wijzer__zoekrij {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.375rem;
}

.wmogids-wijzer__zoek label {
	display: block;
	font-weight: 600;
	font-size: 0.9375rem;
}

.wmogids-wijzer__zoek input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.75rem 0.875rem;
	font-size: 1.0625rem;
	border: 2px solid var(--wmogids-rand);
	border-radius: var(--wmogids-straal);
	background: var(--wmogids-papier);
	color: var(--wmogids-inkt);
}

.wmogids-wijzer__zoek input:focus-visible {
	outline: 3px solid var(--wmogids-petrol);
	outline-offset: 1px;
}

.wmogids-wijzer__leeg {
	margin: 1rem 0 0;
	padding: 0.75rem 0.875rem;
	background: var(--wmogids-zand);
	border-left: 3px solid var(--wmogids-amber);
	border-radius: 0 8px 8px 0;
}

/* --- keuzelijsten --- */

.wmogids-wijzer__treffers,
.wmogids-wijzer__keuzes {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.625rem;
}

.wmogids-wijzer__treffers a,
.wmogids-wijzer__keuzes a {
	display: block;
	padding: 0.9375rem 2.5rem 0.9375rem 1rem;
	background: var(--wmogids-papier);
	border: 2px solid var(--wmogids-rand);
	border-radius: var(--wmogids-straal);
	text-decoration: none;
	color: inherit;
	position: relative;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.wmogids-wijzer__treffers a::after,
.wmogids-wijzer__keuzes a::after {
	content: "";
	position: absolute;
	right: 1.125rem;
	top: 50%;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid var(--wmogids-petrol);
	border-bottom: 2px solid var(--wmogids-petrol);
	transform: translateY(-65%) rotate(-45deg);
}

.wmogids-wijzer__treffers a:hover,
.wmogids-wijzer__keuzes a:hover,
.wmogids-wijzer__treffers a:focus-visible,
.wmogids-wijzer__keuzes a:focus-visible {
	border-color: var(--wmogids-petrol);
	transform: translateX(2px);
}

.wmogids-wijzer__keuzes strong,
.wmogids-wijzer__treffers strong {
	display: block;
	font-size: 1.0625rem;
	line-height: 1.35;
}

.wmogids-wijzer__keuzes span,
.wmogids-wijzer__treffers span {
	display: block;
	margin-top: 0.1875rem;
	font-size: 0.9375rem;
	color: var(--wmogids-gedempt);
	line-height: 1.5;
}

.wmogids-wijzer__terug {
	margin: 1.5rem 0 0;
	font-size: 0.9375rem;
}

/* --- de uitkomst --- */

.wmogids-wijzer__blok {
	margin: 1.75rem 0 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--wmogids-rand);
}

.wmogids-wijzer__blok h3 {
	margin: 0 0 0.75rem;
	font-size: 1.125rem;
}

/* De toon van een oordeel is af te lezen aan de kleur van de rand, zodat
   iemand die scant meteen ziet waar een drempel zit. Kleur is nooit het
   enige signaal: de tekst zegt het ook. */
.wmogids-wijzer__oordeel {
	margin: 0 0 0.75rem;
	padding: 0.75rem 0.9375rem;
	border-left: 4px solid var(--wmogids-rand);
	border-radius: 0 8px 8px 0;
	background: var(--wmogids-zand);
	line-height: 1.6;
}

.wmogids-wijzer__oordeel--goed { border-left-color: var(--wmogids-petrol); }
.wmogids-wijzer__oordeel--let_op { border-left-color: var(--wmogids-amber); }

.wmogids-wijzer__bedragen {
	list-style: none;
	margin: 0 0 0.75rem;
	padding: 0;
}

.wmogids-wijzer__bedragen li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--wmogids-rand);
}

.wmogids-wijzer__bedragen strong {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.wmogids-wijzer__bedragen small {
	display: block;
	font-weight: 400;
	font-size: 0.8125rem;
	color: var(--wmogids-gedempt);
	text-align: right;
}

.wmogids-wijzer__bron,
.wmogids-wijzer__herkomst,
.wmogids-wijzer__bewaar {
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
	color: var(--wmogids-gedempt);
	line-height: 1.5;
}

.wmogids-wijzer__stappen {
	margin: 0;
	padding-left: 1.25rem;
	line-height: 1.6;
}

.wmogids-wijzer__stappen li {
	margin-bottom: 0.6875rem;
}

/* --- contact: het antwoord waar de hele wijzer op uitkomt --- */

.wmogids-wijzer__contact {
	padding: 1.25rem;
	background: var(--wmogids-zand);
	border: 2px solid var(--wmogids-petrol);
	border-radius: var(--wmogids-straal);
}

.wmogids-wijzer__gegevens {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.375rem 1rem;
	margin: 0;
}

.wmogids-wijzer__gegevens dt {
	font-weight: 600;
	font-size: 0.9375rem;
}

.wmogids-wijzer__gegevens dd {
	margin: 0;
	overflow-wrap: anywhere;
}

.wmogids-wijzer__gegevens a {
	font-weight: 600;
}

.wmogids-wijzer__blok--slot p:first-child {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin: 0;
}

@media (max-width: 30rem) {
	.wmogids-wijzer__zoekrij { flex-direction: column; }
	.wmogids-wijzer__gegevens { grid-template-columns: 1fr; gap: 0 0; }
	.wmogids-wijzer__gegevens dd { margin-bottom: 0.5rem; }
}

@media print {
	.wmogids-wijzer__terug,
	.wmogids-wijzer__blok--slot { display: none; }
	.wmogids-wijzer__contact { border-color: #000; }
}

/* Op de gemeentepagina staat alles; de wijzer is de weg erdoorheen voor wie
   met een vraag komt in plaats van met belangstelling. */
.wmogids-situaties__wijzer {
	margin: 0 0 1.5rem;
}

/* ------------------------------------------------------------------ */
/* Wat de gemeente niet vergoedt                                       */
/* ------------------------------------------------------------------ */

/* Bewust rustig vormgegeven. Dit is de enige plek waar ooit een
   commerciële verwijzing komt te staan, en dan moet de pagina er niet
   uitzien als een winkel. */
.wmogids-zelf {
	margin: 2.5rem 0;
	padding-top: 2rem;
	border-top: 1px solid var(--wmogids-rand);
}

.wmogids-zelf__kop {
	margin: 0 0 0.5rem;
	font-size: 1.375rem;
}

.wmogids-zelf__inleiding {
	margin: 0 0 1.25rem;
	line-height: 1.6;
}

.wmogids-zelf__lijst {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	display: grid;
	gap: 1rem;
}

.wmogids-zelf__item {
	padding: 0.9375rem 1rem;
	background: var(--wmogids-zand);
	border-radius: var(--wmogids-straal);
}

.wmogids-zelf__item h3 {
	margin: 0 0 0.375rem;
	font-size: 1rem;
}

.wmogids-zelf__citaat {
	margin: 0;
	padding-left: 0.875rem;
	border-left: 3px solid var(--wmogids-rand);
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--wmogids-gedempt);
}

/* De vermelding staat direct bij de link, niet onderaan de pagina: de
   bezoeker moet in één oogopslag zien dat er een vergoeding tegenover
   staat. Daarom geen klein grijs regeltje maar leesbare tekst. */
.wmogids-zelf__partner {
	margin: 0.75rem 0 0;
}

.wmogids-zelf__melding {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--wmogids-gedempt);
}

.wmogids-zelf__bron,
.wmogids-zelf__nuance {
	margin: 0.75rem 0 0;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--wmogids-gedempt);
}

.wmogids-zelf__nuance {
	padding: 0.6875rem 0.875rem;
	background: var(--wmogids-papier);
	border-left: 3px solid var(--wmogids-amber);
	border-radius: 0 8px 8px 0;
	color: var(--wmogids-inkt);
}

/* De juridische verwijzingen in de voettekst: aanwezig en vindbaar, maar niet
   luider dan de inhoud waar mensen voor komen. */
.wmogids-juridisch {
	margin: 0.75rem 0 0;
	font-size: 0.875rem;
}

.wmogids-juridisch a {
	display: inline-block;
	margin-right: 1rem;
	white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Uitklapkoppen groot genoeg om te raken                              */
/* ------------------------------------------------------------------ */

/* Gemeten op een telefoon van 375 breed: deze koppen waren 25 pixels hoog.
   Dat is de knop waarmee iemand het stappenplan opent, en het is precies de
   doelgroep die dat met een onvaste hand doet. De richtlijn is 44 pixels;
   daar zitten we nu ruim boven, en de extra ruimte maakt ook zichtbaarder
   dat er iets uit te klappen valt. */
.wmogids-bron > summary,
.wmogids-situatie__stappen > summary {
	display: block;
	min-height: 44px;
	padding: 0.6875rem 0.5rem 0.6875rem 0;
	line-height: 1.4;
}

/* Het driehoekje van de browser verdwijnt bij display:block, dus zetten we
   er zelf een terug. Zonder markering ziet niemand dat het uitklapt. */
.wmogids-bron > summary::before,
.wmogids-situatie__stappen > summary::before {
	content: "";
	display: inline-block;
	width: 0.45rem;
	height: 0.45rem;
	margin-right: 0.5rem;
	vertical-align: 0.1em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform 0.15s ease;
}

.wmogids-bron[open] > summary::before,
.wmogids-situatie__stappen[open] > summary::before {
	transform: rotate(45deg);
}

.wmogids-bron > summary::-webkit-details-marker,
.wmogids-situatie__stappen > summary::-webkit-details-marker {
	display: none;
}

/* Het telefoonnummer en het mailadres in het contactblok zijn geen gewone
   links in een zin: het zijn de knoppen waar de hele wijzer op uitloopt.
   Gemeten op een telefoon waren ze 22 pixels hoog. Iemand die belt omdat het
   thuis niet meer gaat, moet dat niet twee keer hoeven proberen. */
.wmogids-wijzer__gegevens dd > a {
	display: inline-block;
	min-height: 44px;
	padding: 0.625rem 0.75rem;
	margin: -0.625rem -0.75rem;
	border-radius: var(--wmogids-straal);
	line-height: 1.5;
}

.wmogids-wijzer__gegevens dd > a[href^="tel:"] {
	font-size: 1.25rem;
	font-weight: 700;
}

.wmogids-wijzer__gegevens dd > a:hover,
.wmogids-wijzer__gegevens dd > a:focus-visible {
	background: var(--wmogids-papier);
}

@media (max-width: 30rem) {
	/* Op een telefoon is bellen de handeling; geef die de volle breedte zodat
	   hij niet te missen is. */
	.wmogids-wijzer__gegevens dd > a[href^="tel:"] {
		display: block;
		margin: 0;
		text-align: center;
		background: var(--wmogids-papier);
		border: 2px solid var(--wmogids-petrol);
	}
}

/* ------------------------------------------------------------------ */
/* Het gemeenteregister                                                */
/* ------------------------------------------------------------------ */

/* Een register om je eigen gemeente in aan te wijzen, niet een tabel om
   in te studeren. Kolommen die meelopen met de schermbreedte, zodat het
   op een telefoon één rij wordt en op een breed scherm vier. */
.wmogids-gemeentelijst {
	margin: 1.5rem 0;
}

.wmogids-gemeentelijst__provincie {
	margin-bottom: 2rem;
	break-inside: avoid;
}

.wmogids-gemeentelijst__provincie h2 {
	margin: 0 0 0.5rem;
	padding-bottom: 0.375rem;
	font-size: 1.125rem;
	border-bottom: 2px solid var(--wmogids-rand);
}

.wmogids-gemeentelijst ul {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 1;
	column-gap: 1.5rem;
}

@media (min-width: 30rem) { .wmogids-gemeentelijst ul { columns: 2; } }
@media (min-width: 48rem) { .wmogids-gemeentelijst ul { columns: 3; } }
@media (min-width: 64rem) { .wmogids-gemeentelijst ul { columns: 4; } }

.wmogids-gemeentelijst li {
	break-inside: avoid;
}

/* Ruim genoeg om met een duim te raken; het is de enige handeling op
   deze pagina. */
.wmogids-gemeentelijst a {
	display: block;
	min-height: 44px;
	padding: 0.625rem 0.5rem;
	line-height: 1.4;
	border-radius: 6px;
	text-decoration: none;
}

.wmogids-gemeentelijst a:hover,
.wmogids-gemeentelijst a:focus-visible {
	background: var(--wmogids-zand);
	text-decoration: underline;
}

/* De verwijzing naar de uitleg op de voorpagina. */
.wmogids-watis {
	margin: 1rem 0 0;
	font-size: 0.9375rem;
}

/* Doorverwijzing naar pagina's die niet meer in het hoofdmenu staan, op de
   plek waar de vraag opkomt in plaats van bovenaan het scherm. */
.wmogids-verderlezen {
	margin: 0 0 1.5rem;
	padding: 0.75rem 1rem;
	background: var(--wmogids-zand);
	border-radius: var(--wmogids-straal);
	font-size: 0.9375rem;
}

/* ================================================================== */
/* De voorpagina: kort, groot, en de vraag bovenaan                    */
/* ================================================================== */

/* De voorpagina had 785 woorden en vier verhalende secties onder de
   zoekbalk. Goed materiaal, maar wie hier binnenkomt heeft een probleem
   en geen belangstelling. De letters zijn nu groter en er staat minder;
   de verhalen staan op de pagina's waar ze thuishoren. */

.wmogids-hero {
	padding: clamp(2rem, 1rem + 5vw, 4.5rem) 0 clamp(1.5rem, 1rem + 3vw, 3rem);
	text-align: center;
}

.wmogids-hero__kop {
	margin: 0 0 0.75rem;
	font-size: clamp(2rem, 1.3rem + 3.4vw, 3.5rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
}

/* Bewust groot: dit is de zin die iemand moet lezen voordat hij besluit
   of deze site over hem gaat. Onder de 19px op een telefoon haakt de
   doelgroep af. */
.wmogids-hero__lead {
	margin: 0 auto 2rem;
	max-width: 34rem;
	font-size: clamp(1.1875rem, 1.05rem + 0.7vw, 1.4375rem);
	line-height: 1.55;
	color: var(--wmogids-gedempt);
}

.wmogids-sectie {
	padding: clamp(2rem, 1.25rem + 3.5vw, 3.5rem) 0;
}

.wmogids-sectie--papier {
	background: var(--wmogids-zand);
}

.wmogids-sectie__kop {
	margin: 0 0 0.5rem;
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem);
	line-height: 1.2;
}

.wmogids-sectie__lead {
	margin: 0 0 1.75rem;
	font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);
	line-height: 1.6;
	color: var(--wmogids-gedempt);
}

/* --- de vijf ingangen als kaarten --- */

.wmogids-ingangen {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.875rem;
	grid-template-columns: 1fr;
}

@media (min-width: 34rem) {
	.wmogids-ingangen { grid-template-columns: repeat(2, 1fr); }
	/* De vijfde staat alleen op een rij; die mag de volle breedte nemen
	   in plaats van half leeg naast niets te staan. */
	.wmogids-ingangen li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.wmogids-ingangen a {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	min-height: 64px;
	height: 100%;
	padding: 1rem 2.25rem 1rem 1rem;
	background: var(--wmogids-papier);
	border: 2px solid var(--wmogids-rand);
	border-radius: var(--wmogids-straal);
	text-decoration: none;
	color: inherit;
	position: relative;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.wmogids-ingangen a::after {
	content: "";
	position: absolute;
	right: 1rem;
	top: 50%;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid var(--wmogids-petrol);
	border-bottom: 2px solid var(--wmogids-petrol);
	transform: translateY(-65%) rotate(-45deg);
}

.wmogids-ingangen a:hover,
.wmogids-ingangen a:focus-visible {
	border-color: var(--wmogids-petrol);
	transform: translateY(-2px);
}

.wmogids-ingangen__icoon {
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	color: var(--wmogids-petrol);
}

.wmogids-ingangen__vraag {
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.35;
}

/* --- de spreiding: elke stip een gemeente --- */

.wmogids-spreiding {
	margin: 0 0 1.5rem;
}

.wmogids-spreiding__figuur {
	display: block;
	width: 100%;
	height: auto;
}

.wmogids-spreiding__as {
	stroke: var(--wmogids-rand);
	stroke-width: 2;
}

.wmogids-spreiding__stip {
	fill: var(--wmogids-petrol);
	opacity: 0.55;
}

.wmogids-spreiding__mediaan {
	stroke: var(--wmogids-amber);
	stroke-width: 2.5;
	stroke-dasharray: 5 4;
}

.wmogids-spreiding__merk {
	font-size: 20px;
	font-weight: 600;
	fill: var(--wmogids-gedempt);
}

.wmogids-spreiding figcaption {
	margin-top: 0.625rem;
	font-size: 0.9375rem;
	color: var(--wmogids-gedempt);
	line-height: 1.5;
}

/* Op een klein scherm wordt de figuur smal en worden de stippen onleesbaar
   dicht op elkaar. Dan is de bijschrift het beeld en mag de figuur wat
   hoger, zodat de stippen uit elkaar blijven. */
@media (max-width: 30rem) {
	.wmogids-spreiding__figuur { min-height: 130px; }
	.wmogids-spreiding__merk { font-size: 26px; }
}

/* De secties op de voorpagina hadden geen ruimte aan de zijkant, waardoor de
   kaarten op een telefoon tegen de schermrand aan lagen. Gemeten: linkerkant
   op 0 pixels. */
.wmogids-hero,
.wmogids-sectie {
	padding-left: clamp(1rem, 0.5rem + 2vw, 2rem);
	padding-right: clamp(1rem, 0.5rem + 2vw, 2rem);
}

/* De kaarten waren 136 pixels hoog terwijl de tekst er 46 was. Ze werden
   uitgerekt tot de hoogte van de rij, en dat gaf een pagina die op een
   telefoon eindeloos doorliep. Laat ze meegroeien met hun inhoud; de
   ondergrens houdt ze groot genoeg om te raken. */
.wmogids-ingangen a {
	height: auto;
	align-items: flex-start;
	padding-top: 0.875rem;
	padding-bottom: 0.875rem;
}

.wmogids-ingangen__icoon {
	margin-top: 0.0625rem;
}

/* Het pictogram staat in de kop en niet ernaast, zodat het meeschuift als de
   tekst over twee regels loopt. */
.wmogids-situatie__vraag {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
}

.wmogids-situatie__icoon {
	flex: 0 0 auto;
	width: 1.5rem;
	height: 1.5rem;
	margin-top: 0.125rem;
	color: var(--wmogids-petrol);
}