/*
 * SudanConnect
 *
 * Alles komt uit theme.json. Geen losse hexcodes, alleen var(--wp--...).
 *
 * ── De vormtaal komt uit het logo ────────────────────────────────────────
 * Het merk is een kring van vier figuren die elkaar vasthouden en samen
 * ronddraaien: één groene, één rode, twee zwarte. Dat is de organisatie in
 * één beeld, en het is de bron van alles hieronder.
 *
 * Daaruit volgt de keuze die deze site zijn gezicht geeft: groen en rood
 * worden als paar gebruikt. Dat wordt normaal vermeden. Hier niet, want dat
 * paar ís het merk.
 *
 * De signatuur is de kwartslag. Elke sectiekop draagt een viervoudig merkje
 * dat om zijn as staat, en de kleur ervan wandelt met het scrollen mee door
 * de kring: groen, rood, inkt. Wie de pagina afgaat, gaat de kring rond.
 *
 * ── Uitlijning ───────────────────────────────────────────────────────────
 * Eén rail. Eén maximale breedte, één zijmarge, identiek voor de kop, elke
 * sectie en de voet. Vanaf 1000px hangt er links een goot waarin de aanhef
 * staat, zodat je de uitlijning niet alleen hebt maar ook ziet.
 *
 * Inhoud
 *   01  Basis en toegankelijkheid
 *   02  De rail
 *   03  De kwartslag
 *   04  Secties en ritme
 *   05  Kop
 *   06  Voet
 *   07  Knoppen en links
 *   08  Hero
 *   09  Kaarten
 *   10  Badges en labels
 *   11  Feitenlijst
 *   12  Artikel en leeskolom
 *   13  Evenement en aanmelden
 *   14  Formulieren en nieuwsbrief
 *   15  Paginering, zoeken, leeg
 *   16  Mediaqueries
 */

/* == 01 Basis en toegankelijkheid ========================================== */

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

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

body {
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

:where(h1, h2, h3, h4, h5, h6) {
	color: inherit;
	text-wrap: balance;
	/* Vangnet voor een samenstelling die breder is dan de kolom. Breekt alleen
	   als het echt niet past, dus een normale kop verandert er niet van. */
	overflow-wrap: break-word;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--groen);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Tapdoelen van 44px. Links in lopende tekst zijn uitgezonderd: WCAG 2.2
   SC 2.5.8 zondert die uit, en 44px hoge links in een alinea zetten de
   regelafstand op hol. */
:where(a, button, [role="button"], input[type="submit"]) {
	min-height: var(--wp--custom--tap--maat);
}

:where(p, li, dd) a,
.sc-lees a {
	min-height: 0;
}

@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;
	}
}

.sc-verborgen {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Arabisch staat een maat groter dan de Latijnse tekst ernaast. Het schrift
   heeft meer hoogte nodig voor dezelfde leesbaarheid. */
[lang="ar"] {
	font-family: var(--wp--preset--font-family--arabisch);
	font-size: 1.24em;
	line-height: 1.95;
}

[dir="rtl"] {
	text-align: right;
}

/* == 02 De rail ============================================================ */

/*
 * De enige container op deze site. Kop, elke sectie en voet gebruiken hem
 * ongewijzigd, dus alles begint op dezelfde x. Dat was het probleem: elke
 * sectie bracht zijn eigen marge mee en niets lijnde uit.
 */
.sc-rail {
	width: 100%;
	max-width: var(--wp--custom--rail--max);
	margin-inline: auto;
	padding-inline: var(--wp--custom--rail--pad);
}

/*
 * De goot. Vanaf 1000px staat links een kolom waarin de aanhef hangt: het
 * merkje, de eyebrow en de kop. De inhoud begint daardoor op elke sectie op
 * precies dezelfde plek, en die lijn is zichtbaar in plaats van alleen
 * aanwezig.
 */
.sc-blok {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

.sc-blok__aanhef {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.sc-blok__aanhef h2,
.sc-blok__aanhef h1 {
	margin: 0;
	max-width: 18ch;
}

.sc-blok__inhoud {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	min-width: 0;
}

/* == 03 De kwartslag ======================================================= */

:root {
	--sc-slag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='%23000'%3E%3Crect x='8.7' y='1.2' width='2.6' height='5.8' rx='1.3'/%3E%3Crect x='8.7' y='1.2' width='2.6' height='5.8' rx='1.3' transform='rotate(90 8 8)'/%3E%3Crect x='8.7' y='1.2' width='2.6' height='5.8' rx='1.3' transform='rotate(180 8 8)'/%3E%3Crect x='8.7' y='1.2' width='2.6' height='5.8' rx='1.3' transform='rotate(270 8 8)'/%3E%3C/g%3E%3C/svg%3E");
}

/* Vier capsules om één as, zoals de vier figuren in het logo. Dit merkje
   staat bij elke sectiekop en is het enige sieraad op de site. */
.sc-eyebrow {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--wp--preset--color--groen-diep);
}

.sc-eyebrow::before {
	content: "";
	width: 17px;
	height: 17px;
	flex: none;
	background-color: currentColor;
	-webkit-mask-image: var(--sc-slag);
	mask-image: var(--sc-slag);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/*
 * De kleur wandelt door de kring. Elke opeenvolgende sectie krijgt de
 * volgende kleur uit het logo, zodat het merk meeloopt met het scrollen.
 */
main > .sc-sectie:nth-of-type(3n + 1) .sc-eyebrow {
	color: var(--wp--preset--color--groen-diep);
}

main > .sc-sectie:nth-of-type(3n + 2) .sc-eyebrow {
	color: var(--wp--preset--color--henna);
}

main > .sc-sectie:nth-of-type(3n + 3) .sc-eyebrow {
	color: var(--wp--preset--color--inkt);
}

/* Op donkere grond blijft alleen wit leesbaar. Deze regel staat na de cyclus
   zodat hij wint. */
.sc-donker .sc-eyebrow,
main > .sc-sectie.sc-donker .sc-eyebrow,
.sc-nieuwsbrief .sc-eyebrow {
	color: var(--wp--preset--color--wit);
}

/*
 * De naad tussen twee vlakken: een tweekleurige lijn die in het midden
 * samenkomt. Groen van links, rood van rechts. Dat is wat de organisatie
 * doet, en dit is de enige plek waar het letterlijk staat.
 */
.sc-naad {
	width: 100%;
	height: 3px;
	border: 0;
	margin: 0;
	background-image: linear-gradient(
		to right,
		var(--wp--preset--color--groen) 0%,
		var(--wp--preset--color--groen) 50%,
		var(--wp--preset--color--henna) 50%,
		var(--wp--preset--color--henna) 100%
	);
}

/* == 04 Secties en ritme =================================================== */

/*
 * Volle-breedte banen sluiten op elkaar aan, zonder tussenruimte.
 *
 * WordPress zet uit `styles.spacing.blockGap` een margin-block-start op elk
 * volgend kind. Tussen twee banen levert dat een strook van 26 pixels op waar
 * de paginakleur doorheen schijnt. Tegen de donkere kop en voet is dat een
 * zichtbare streep: precies het "niet aangesloten" dat opviel.
 *
 * Elke baan draagt zijn eigen binnenmarge, dus tussenruimte is hier niet nodig
 * en niet gewenst.
 */
/*
 * WordPress zet uit de flow-opmaak een margin-block-start op elk kind behalve
 * het eerste. In een rij die ik zelf met flex uitlijn duwt die marge het tweede
 * kind omlaag: het menu stond 13 pixels lager dan het logo terwijl de rij op
 * centreren stond. Vandaar dat deze marge overal uit gaat waar ik de uitlijning
 * zelf regel.
 */
.sc-kop__binnen > *,
.sc-voet__raster > *,
.sc-voet__slot > *,
.sc-blok > *,
.sc-blok__aanhef > *,
.sc-blok__inhoud > *,
.sc-raster > *,
.sc-hero__binnen > *,
.wp-site-blocks > *,
main > *,
.wp-block-post-content > *,
.sc-hero,
.sc-sectie,
.sc-sectie--strook,
.sc-nieuwsbrief,
.sc-artikel,
.sc-pagina,
.sc-evenement__kop {
	margin-block: 0;
}

.sc-sectie {
	padding-block: var(--wp--preset--spacing--70);
}

.sc-sectie--kort {
	padding-block: var(--wp--preset--spacing--60);
}

.sc-sectie--wit {
	background-color: var(--wp--preset--color--wit);
}

.sc-donker {
	background-color: var(--wp--preset--color--inkt);
	color: var(--wp--preset--color--wit);
}

.sc-donker a {
	color: var(--wp--preset--color--wit);
}

.sc-inleiding {
	max-width: 58ch;
	margin: 0;
	font-size: var(--wp--preset--font-size--lead);
	color: var(--wp--preset--color--grijs);
}

.sc-donker .sc-inleiding {
	color: rgba(255, 255, 255, 0.82);
}

/*
 * Twee regels die onder een verklaring horen: de hashtags waarmee de campagne
 * te volgen is, en de medeondertekenaars. Ze staan onder de tekst en horen niet
 * mee te lezen als lopende alinea.
 */
.sc-hashtags {
	font-weight: 600;
	color: var(--wp--preset--color--groen-diep);
	overflow-wrap: anywhere;
}

.sc-ondertekening {
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: 1px solid var(--wp--custom--lijn--licht);
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--grijs);
}

/*
 * Het raster regelt de ruimte met `gap`. WordPress zet daarnaast een
 * margin-block-start op elk kind behalve het eerste, uit blockGap. In een grid
 * telt die marge er bovenop, en omdat de eerste hem niet krijgt begon kaart 1
 * 26 pixels hoger dan kaart 2 en 3. Vandaar de reset.
 */
.sc-raster {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
	align-items: stretch;
}

.sc-raster > * {
	margin-block: 0;
}

/* == 05 Kop ================================================================ */

/*
 * De kop is licht, en dat is een correctie.
 *
 * Het logo is grotendeels zwart. Op een donkere balk verdween het letterlijk,
 * en dat was de klacht: het logo was er wel maar niet te zien. Op zand staat
 * het er weer, en groot.
 */
header.wp-block-template-part:has(> .sc-kop) {
	position: sticky;
	top: 0;
	z-index: 40;
}

.sc-kop {
	background-color: var(--wp--preset--color--zand);
	border-block-end: 2px solid var(--wp--preset--color--inkt);
}

.sc-kop__binnen {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	min-height: 72px;
	padding-block: 12px;
}

/*
 * Het merk: de kring als beeld, de naam als échte tekst ernaast. Het
 * woordmerk in het PNG was op kleine maat onleesbaar; live tekst is op elke
 * dichtheid scherp en een schermlezer leest gewoon de naam.
 */
/*
 * Het merk is één vector: kring en woordmerk in één bestand. Eerder stond hier
 * een PNG met de naam als losse tekst ernaast; dat was op een retinascherm niet
 * scherp en het viel bij het schalen uit elkaar.
 */
.sc-merk {
	--sc-merk-hoogte: 40px;

	display: inline-flex;
	align-items: center;
	gap: calc(var(--sc-merk-hoogte) * 0.27);
	min-height: var(--wp--custom--tap--maat);
	color: var(--wp--preset--color--inkt);
	text-decoration: none;
}

/*
 * De kring is een vector in de HTML; het zwart erin staat op currentColor en
 * erft dus de kleur hierboven. Op de donkere voet is dat crème.
 */
.sc-merk__kring {
	display: block;
	width: auto;
	height: var(--sc-merk-hoogte);
	flex: none;
}

/*
 * De naam in em van de kringhoogte, zodat merk en naam altijd in verhouding
 * blijven. 0.525 komt uit de bronafbeelding: daar is het woordmerk iets meer
 * dan de helft van de kringhoogte.
 */
.sc-merk__naam {
	font-size: calc(var(--sc-merk-hoogte) * 0.525);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1;
	white-space: nowrap;
}

/* Geen hover-kleur op het merk: een logo dat van kleur verandert leest als een
   ander logo. De link is al herkenbaar aan de cursor en aan de focusrand. */
.sc-merk--licht {
	color: var(--wp--preset--color--zand);
}

.sc-menu {
	gap: var(--wp--preset--spacing--30);
}

.sc-menu .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--tap--maat);
	padding-block: 0;
	font-weight: 600;
	text-decoration: none;
	color: var(--wp--preset--color--inkt);
}

.sc-menu .wp-block-navigation-item__content:hover,
.sc-menu .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--groen-diep);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

/*
 * De hamburger is een tapdoel van 44px, maar alleen daar waar hij hoort.
 *
 * Hier stond eerst `display: flex` zonder mediaquery. Die regel won van de
 * regel van WordPress die de knop op een breed scherm verbergt, waardoor de
 * hamburger náást het uitgeklapte menu bleef staan: het menu viel op een
 * tweede regel en de kop werd 158px in plaats van 72px.
 *
 * 600px is het breekpunt dat WordPress zelf aanhoudt voor overlayMenu mobile.
 */
@media (max-width: 599px) {
	.sc-menu .wp-block-navigation__responsive-container-open {
		display: flex;
		align-items: center;
		justify-content: center;
		width: var(--wp--custom--tap--maat);
		min-width: var(--wp--custom--tap--maat);
		height: var(--wp--custom--tap--maat);
		color: var(--wp--preset--color--inkt);
	}
}

.sc-menu .wp-block-navigation__responsive-container-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--wp--custom--tap--maat);
	min-width: var(--wp--custom--tap--maat);
	height: var(--wp--custom--tap--maat);
	color: var(--wp--preset--color--wit);
}

.sc-menu .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--60) var(--wp--custom--rail--pad);
}

.sc-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--kop-3);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--wit);
}

/* == 06 Voet =============================================================== */

.sc-voet {
	background-color: var(--wp--preset--color--inkt);
	color: var(--wp--preset--color--wit);
	padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
}

.sc-voet__raster {
	display: grid;
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}

.sc-voet h2 {
	margin: 0 0 6px;
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.62);
}

.sc-voet a {
	color: var(--wp--preset--color--wit);
	text-decoration: none;
}

.sc-voet a:hover,
.sc-voet a:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

.sc-voet .sc-merk {
	--sc-merk-hoogte: 44px;
}

.sc-voet__lijst {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-voet__lijst li {
	margin: 0;
}

.sc-voet__lijst a {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--tap--maat);
	font-weight: 500;
}

.sc-op-donker {
	color: rgba(255, 255, 255, 0.82);
}

/*
 * KvK en rekeningnummer. Een definitielijst en geen alinea: het zijn paren van
 * een naam en een waarde, en zo leest een schermlezer ze ook voor.
 */
.sc-voet__gegevens {
	display: grid;
	gap: 10px;
	margin: 4px 0 0;
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1.5;
}

.sc-voet__gegevens dt {
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.62);
}

.sc-voet__gegevens dd {
	margin: 2px 0 0;
	color: rgba(255, 255, 255, 0.82);
}

.sc-voet__slot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--60);
	padding-block-start: var(--wp--preset--spacing--40);
	border-block-start: 1px solid var(--wp--custom--lijn--op-donker);
	font-size: var(--wp--preset--font-size--klein);
	color: rgba(255, 255, 255, 0.62);
}

.sc-voet__slot p {
	margin: 0;
}

.sc-socials {
	display: flex;
	gap: 10px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.sc-socials .wp-social-link {
	width: var(--wp--custom--tap--maat);
	height: var(--wp--custom--tap--maat);
	margin: 0;
	background-color: var(--wp--custom--vlak--op-donker);
	border-radius: var(--wp--custom--radius--klein);
	transition: background-color var(--wp--custom--overgang);
}

.sc-socials .wp-social-link:hover {
	background-color: var(--wp--custom--vlak--op-donker-hover);
}

.sc-socials .wp-social-link a {
	padding: 12px;
}

/* == 07 Knoppen en links =================================================== */

.wp-block-button__link,
.sc-knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--wp--custom--tap--maat);
	padding: 13px 28px;
	border-radius: var(--wp--custom--radius--pil);
	background-color: var(--wp--preset--color--groen-diep);
	color: var(--wp--preset--color--wit);
	font-weight: 700;
	text-decoration: none;
	transition: background-color var(--wp--custom--overgang), color var(--wp--custom--overgang);
}

.wp-block-button__link:hover,
.sc-knop:hover,
.sc-knop:focus-visible {
	background-color: var(--wp--preset--color--inkt);
	color: var(--wp--preset--color--wit);
}

.is-style-outline > .wp-block-button__link {
	border: 2px solid currentColor;
	background-color: transparent;
	color: var(--wp--preset--color--inkt);
}

.is-style-outline > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--inkt);
	color: var(--wp--preset--color--zand);
}

.sc-donker .is-style-outline > .wp-block-button__link,
.sc-hero .is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--wit);
}

.sc-donker .is-style-outline > .wp-block-button__link:hover,
.sc-hero .is-style-outline > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--wit);
	color: var(--wp--preset--color--inkt);
}

/* Link met een pijl. De pijl komt uit ::after, niet uit de tekst: een
   schermlezer hoeft "pijl naar rechts" niet te horen. */
.sc-pijl,
.sc-pijl a {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-weight: 700;
	text-decoration: none;
	color: var(--wp--preset--color--groen-diep);
}

.sc-pijl::after,
.sc-pijl a::after {
	content: "";
	width: 19px;
	height: 10px;
	flex: none;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 10' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5h16M13 1l4 4-4 4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 10' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5h16M13 1l4 4-4 4'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	transition: transform var(--wp--custom--overgang);
}

.sc-pijl:hover::after,
.sc-pijl a:hover::after {
	transform: translateX(4px);
}

.sc-pijl:hover,
.sc-pijl a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

.sc-donker .sc-pijl,
.sc-donker .sc-pijl a,
.sc-nieuwsbrief .sc-pijl a {
	color: var(--wp--preset--color--wit);
}

.sc-terug {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: var(--wp--custom--tap--maat);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 700;
	text-decoration: none;
}

.sc-terug::before {
	content: "";
	width: 17px;
	height: 10px;
	flex: none;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 10' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 5H2M6 1 2 5l4 4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 10' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 5H2M6 1 2 5l4 4'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* == 08 Hero =============================================================== */

/*
 * De hero draagt een foto met een verloop eroverheen.
 *
 * Het verloop loopt van links donker naar rechts open. Zo blijft de tekst links
 * volledig leesbaar terwijl de foto rechts zichtbaar blijft, en hoeft er geen
 * dekkend vlak over het hele beeld.
 */
.sc-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--wp--preset--color--inkt);
	color: var(--wp--preset--color--wit);
	padding-block: var(--wp--preset--spacing--80);
}

.sc-hero__foto {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 60% 40%;
}

.sc-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(100deg, var(--wp--preset--color--inkt) 0%, rgba(18, 16, 14, 0.94) 34%, rgba(18, 16, 14, 0.62) 62%, rgba(18, 16, 14, 0.42) 100%),
		linear-gradient(to top, rgba(18, 16, 14, 0.7) 0%, rgba(18, 16, 14, 0) 45%);
}

/*
 * De hero draagt alleen typografie.
 *
 * Hier stond een grote, vage kring uit het logo op de achtergrond. Op het
 * scherm werd dat een vlak in plaats van een vorm: het merk is te dicht
 * getekend om op die schaal en die dekking als beeld te lezen. Een sieraad dat
 * niet leesbaar is, is ruis. Weg dus.
 *
 * De signatuur zit in de naad hieronder en in de kwartslag bij elke sectiekop.
 * Dat is preciezer en het zegt iets.
 */
.sc-hero::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 4px;
	z-index: 1;
	background-image: linear-gradient(
		to right,
		var(--wp--preset--color--groen) 0%,
		var(--wp--preset--color--groen) 50%,
		var(--wp--preset--color--henna) 50%,
		var(--wp--preset--color--henna) 100%
	);
}

.sc-hero__binnen {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--40);
}

.sc-hero__kop {
	max-width: 15ch;
	margin: 0;
	font-size: var(--wp--preset--font-size--hero);
	line-height: 0.97;
	letter-spacing: -0.04em;
}

/* Eén woord in het groen van het logo. Niet de hele kop: dan is het geen
   accent meer maar een kleurvlak. */
.sc-hero__kop em {
	font-style: normal;
	color: var(--wp--preset--color--groen);
}

.sc-hero__kort {
	max-width: 44ch;
	margin: 0;
	font-size: var(--wp--preset--font-size--lead);
	color: rgba(255, 255, 255, 0.86);
}

.sc-hero__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
}

/* De strook onder de hero: drie feiten, zonder opsmuk. */
/*
 * De drie kernwoorden onder de hero.
 *
 * Dit was een flexrij met `flex: 1 1 200px`, dus de kolommen kregen een breedte
 * naar hun inhoud en stonden niet onder elkaar uitgelijnd. Een grid met drie
 * gelijke kolommen doet dat wel. De eerste kolom heeft geen linkerpadding, zodat
 * hij precies op de rail begint; de scheidingslijnen zitten in de gap.
 */
.sc-strook {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	background-color: var(--wp--preset--color--wit);
	border-block-end: 1px solid var(--wp--custom--lijn--licht);
}

/*
 * De doos loopt door tot de buitenrand van de rail, en de buitenste cellen
 * krijgen de railmarge als padding. Zo heeft élke cel evenveel lucht aan zijn
 * linkerkant, en begint de tekst van de eerste cel toch precies op de lijn waar
 * de rest van de pagina begint.
 *
 * Zonder dat had de eerste cel padding 0 tegen 26px bij de andere twee, en
 * plakte "Cultuur" tegen de rand van het witte vlak.
 */
.sc-strook {
	margin-inline: calc(var(--wp--custom--rail--pad) * -1);
}

.sc-strook li {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	border-inline-start: 1px solid var(--wp--custom--lijn--licht);
}

.sc-strook li:first-child {
	border-inline-start: 0;
	padding-inline-start: var(--wp--custom--rail--pad);
}

.sc-strook li:last-child {
	padding-inline-end: var(--wp--custom--rail--pad);
}

/*
 * "Gemeenschap" liep zes pixels buiten zijn kolom op 768 pixels.
 *
 * De strook heeft altijd drie gelijke kolommen; op een tablet is dat 256 pixels
 * per stuk en daar past het langste van de drie woorden net niet in op 25
 * pixels. Afbreken is hier geen optie: dit zijn drie losse kernwoorden, geen
 * lopende tekst, en "Gemeen-schap" over twee regels leest als een fout.
 *
 * Daarom schaalt de letter mee tot de kolom breed genoeg is. Onder- en
 * bovengrens zijn de bestaande maten uit theme.json, dus de strook blijft in
 * dezelfde toonladder.
 *
 * Let op bij het nameten: die twee maten zijn zelf al vloeiend, dus dit is een
 * clamp om twee clamps heen. Vanaf ongeveer 1024 pixels wint de bovengrens en
 * is er niets veranderd aan wat er stond; daaronder zakt het woord terug naar
 * de maat eronder. Gemeten: 21,6px op 768 en 31px op 1280.
 */
.sc-strook__kop {
	font-size: clamp(
		var(--wp--preset--font-size--kop-4),
		2.5vw,
		var(--wp--preset--font-size--kop-3)
	);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.04;
	overflow-wrap: break-word;
}

.sc-strook__uitleg {
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--grijs);
}

/*
 * wp:post-template zet elke post in een <li>. Dat <li> is het rasteritem, niet
 * de kaart erin. Zonder deze regel rekt het item wel mee maar de kaart niet, en
 * eindigt een rij kaarten op verschillende hoogtes.
 */
.sc-raster > li,
.sc-raster > .wp-block-post {
	display: flex;
	margin: 0;
}

.sc-raster > li > .sc-kaart,
.sc-raster > .wp-block-post > .sc-kaart {
	flex: 1 1 auto;
}

/* == 09 Kaarten ============================================================ */

/*
 * Geen zachte schaduw en geen zachte hoeken: dat is de standaardkaart die op
 * elke site staat. Hier is het een vlak met een rand van 2px in inkt, die bij
 * hover naar groen springt.
 */
.sc-kaart {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background-color: var(--wp--preset--color--wit);
	border: 2px solid var(--wp--preset--color--inkt);
	border-radius: var(--wp--custom--radius--basis);
	transition: border-color var(--wp--custom--overgang), transform var(--wp--custom--overgang);
}

.sc-kaart:hover {
	border-color: var(--wp--preset--color--groen);
	transform: translateY(-3px);
}

.sc-kaart__beeld {
	margin: 0;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background-color: var(--wp--preset--color--groen-zacht);
}

.sc-kaart__beeld img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sc-kaart__tekst {
	flex-wrap: nowrap;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 10px;
	padding: var(--wp--preset--spacing--40);
}

/*
 * Niets in de kaart rekt mee met de hoogte.
 *
 * WordPress zet op elk flex-blok `flex-wrap: wrap`. In een kolom betekent dat:
 * past de inhoud niet in de hoogte, dan begint er een tweede kolom naast de
 * eerste. Met een label dat te hoog was gebeurde dat ook, en dan staat de
 * titel in een strook van 255 pixels naast het woord "Verklaringen".
 */
.sc-kaart__tekst > * {
	flex: 0 0 auto;
}

/*
 * Nederlands plakt woorden aan elkaar. "Marketingcommissie" is 257 pixels breed
 * en de kop in een kaart is er 223: het woord stak dwars door de rand van de
 * kaart heen zodra er drie naast elkaar staan, vanaf 1180 pixels. Dat is niet te
 * zien op de vier breedtes die de veeg meet, want de pagina zelf schuift er niet
 * van.
 *
 * `hyphens: auto` breekt het op de juiste plek en zet er een koppelteken bij:
 * "Marketing-commissie". Dat werkt omdat de pagina `lang="nl-NL"` draagt.
 * `overflow-wrap` is het vangnet voor een woord waar geen afbreekpatroon voor
 * bestaat, bijvoorbeeld een naam of een adres.
 */
.sc-kaart__kop {
	margin: 0;
	font-size: var(--wp--preset--font-size--kop-4);
	line-height: 1.16;
	hyphens: auto;
	overflow-wrap: break-word;
}

.sc-kaart__kop a {
	color: inherit;
	text-decoration: none;
}

/* De hele kaart is het tapdoel. De koplink zelf is maar 26px hoog; dat haalt
   de 44 niet en op een telefoon is mikken op twee regels tekst vervelend. */
.sc-kaart__kop a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
}

.sc-kaart__tekst > .sc-label,
.sc-kaart__actie {
	position: relative;
	z-index: 1;
}

/*
 * De link om de kaartafbeelding moet een blok zijn.
 *
 * Als inline element is hij zo hoog als één regel, 24 pixels, terwijl de foto
 * erin 172 hoog is. Dat viel nooit op omdat geen enkel blogbericht een
 * uitgelichte afbeelding had; zodra de eerste er een kreeg was het tapdoel
 * ineens 275 bij 24.
 *
 * En hij staat apart, niet meer in de lijst hierboven. Daar stond hij eerst
 * wel, en toen kregen het label en de knop er ook `height: 100%` bij. Het
 * label werd zo hoog als de hele kaart en duwde de titel driehonderd pixels
 * naar beneden.
 */
.sc-kaart__beeld a {
	position: relative;
	z-index: 1;
	display: block;
	height: 100%;
}

.sc-kaart:has(.sc-kaart__kop a:focus-visible) {
	outline: 3px solid var(--wp--preset--color--groen);
	outline-offset: 3px;
}

.sc-kaart__kop a:focus-visible {
	outline: none;
}

.sc-kaart__meta {
	margin: 0;
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 600;
	color: var(--wp--preset--color--grijs);
}

.sc-kaart__kort {
	margin: 0;
	color: var(--wp--preset--color--inkt);
}

.sc-kaart__actie {
	margin: auto 0 0;
	padding-block-start: 6px;
}

/* Het datumblok op een evenementkaart. */
.sc-datum {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 58px;
	min-height: 58px;
	flex: none;
	padding: 6px 4px;
	background-color: var(--wp--preset--color--inkt);
	color: var(--wp--preset--color--wit);
	border-radius: var(--wp--custom--radius--klein);
	line-height: 1.06;
}

.sc-datum__maand {
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--wp--preset--color--groen);
}

.sc-datum__dag {
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -0.03em;
}

.sc-datum--leeg .sc-datum__dag {
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 700;
}

/* Op een evenementkaart staat het datumblok naast de kop, op elke breedte. */
.sc-kaart--evenement .sc-kaart__tekst {
	display: grid;
	grid-template-columns: 58px minmax(0, 1fr);
	column-gap: 14px;
	row-gap: 10px;
	align-items: start;
}

.sc-kaart--evenement .sc-datum {
	grid-row: span 2;
}

.sc-kaart--evenement .sc-kaart__kop,
.sc-kaart--evenement .sc-kaart__meta {
	grid-column: 2;
}

.sc-kaart--evenement .sc-kaart__kort,
.sc-kaart--evenement .sc-badges,
.sc-kaart--evenement .sc-kaart__actie {
	grid-column: 1 / -1;
}

/* == 10 Badges en labels =================================================== */

.sc-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-badge {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 4px 11px;
	border-radius: var(--wp--custom--radius--pil);
	background-color: var(--wp--preset--color--zand);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	color: var(--wp--preset--color--inkt);
}

.sc-badge--groen {
	background-color: var(--wp--preset--color--groen-zacht);
	color: var(--wp--preset--color--groen-diep);
}

.sc-badge--rood {
	background-color: var(--wp--preset--color--henna-zacht);
	color: var(--wp--preset--color--henna);
}

.sc-label {
	margin: 0;
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--groen-diep);
}

/* Buiten een kaart is dit een losse link en heeft hij zijn eigen tapruimte
   nodig. Een <a> die inline blijft trekt zich niets aan van min-height, dus
   inline-flex is hier geen opmaak maar een vereiste. */
.sc-label a {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--tap--maat);
	color: inherit;
	text-decoration: none;
}

.sc-label a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.sc-kaart .sc-label a {
	min-height: 0;
	padding-block: 3px;
}

/* == 11 Feitenlijst ======================================================== */

/* Een raster met een rand van 1px ertussen, gemaakt met gap op een donkere
   ondergrond. Geen losse randen die dubbel gaan tellen. */
.sc-feiten {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: var(--wp--preset--color--inkt);
	border: 2px solid var(--wp--preset--color--inkt);
	border-radius: var(--wp--custom--radius--basis);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 175px), 1fr));
}

.sc-feiten__rij {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: var(--wp--preset--spacing--30);
	background-color: var(--wp--preset--color--wit);
}

.sc-feiten dt {
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--wp--preset--color--groen-diep);
}

.sc-feiten dd {
	margin: 0;
	font-weight: 600;
	line-height: 1.4;
}

/*
 * De rekeninggegevens op de donatiepagina. Zelfde kader als de feitenlijst van
 * een evenement, maar één kolom per rij: een IBAN mag nooit over twee regels
 * afbreken, en dat gebeurt in een smalle kolom wel.
 */
.sc-rekening {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: var(--wp--preset--color--inkt);
	border: 2px solid var(--wp--preset--color--inkt);
	border-radius: var(--wp--custom--radius--basis);
}

.sc-rekening__rij {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: var(--wp--preset--spacing--30);
	background-color: var(--wp--preset--color--wit);
}

.sc-rekening dt {
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--wp--preset--color--groen-diep);
}

.sc-rekening dd {
	margin: 0;
	font-weight: 600;
	line-height: 1.4;
}

.sc-rekening__iban {
	display: inline-block;
	font-size: var(--wp--preset--font-size--kop-4);
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

/* == 12 Artikel en leeskolom =============================================== */

.sc-artikel,
.sc-pagina {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
}

.sc-artikel__kop,
.sc-pagina__kop {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-block-end: var(--wp--preset--spacing--50);
}

.sc-artikel__kop h1,
.sc-pagina__kop h1 {
	max-width: 20ch;
	margin: 0;
}

.sc-artikel__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin: 0;
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 600;
	color: var(--wp--preset--color--grijs);
}

.sc-artikel__meta > * {
	margin: 0;
}

.sc-artikel__beeld {
	margin-block-end: var(--wp--preset--spacing--50);
}

.sc-artikel__beeld img {
	width: 100%;
	border-radius: var(--wp--custom--radius--basis);
}

/* De leeskolom. Regels blijven onder de 66 tekens, ook op een breed scherm. */
.sc-lees {
	max-width: var(--wp--custom--lees--breedte);
}

.sc-lees > * {
	margin-block: 0;
}

.sc-lees > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.sc-lees > h2 {
	margin-block-start: var(--wp--preset--spacing--60);
}

.sc-lees > h3 {
	margin-block-start: var(--wp--preset--spacing--50);
}

.sc-lees blockquote {
	margin-inline: 0;
	padding-inline-start: var(--wp--preset--spacing--30);
	border-inline-start: 3px solid var(--wp--preset--color--groen);
	font-size: var(--wp--preset--font-size--lead);
}

.sc-lees img {
	border-radius: var(--wp--custom--radius--klein);
}

.sc-kort {
	max-width: 52ch;
	margin: 0;
}

/* == 13 Evenement en aanmelden ============================================= */

.sc-evenement__kop {
	background-color: var(--wp--preset--color--inkt);
	color: var(--wp--preset--color--wit);
	padding-block: var(--wp--preset--spacing--60);
}

.sc-evenement__kop .sc-terug,
.sc-evenement__kop .sc-kort {
	color: var(--wp--preset--color--wit);
}

.sc-evenement__kop h1 {
	max-width: 18ch;
	margin: 16px 0;
}

.sc-aanmelden {
	margin-block-start: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--wit);
	border: 2px solid var(--wp--preset--color--inkt);
	border-radius: var(--wp--custom--radius--basis);
}

.sc-aanmelden h2 {
	margin-block: 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--kop-3);
}

.sc-aanmelden--dicht {
	background-color: var(--wp--preset--color--zand);
	border-style: dashed;
	border-color: var(--wp--custom--lijn--licht);
}

.sc-aanmelden--dicht p {
	margin: 0;
	color: var(--wp--preset--color--grijs);
}

.sc-aanmelden__krap {
	margin-block: 0 var(--wp--preset--spacing--30);
	font-weight: 700;
	color: var(--wp--preset--color--henna);
}

/* == 14 Formulieren en nieuwsbrief ========================================= */

.fluentform .ff-el-input--label label {
	margin-block-end: 6px;
	font-weight: 700;
	color: inherit;
}

.fluentform .ff-el-form-control {
	width: 100%;
	min-height: var(--wp--custom--tap--maat);
	padding: 12px 14px;
	border: 2px solid var(--wp--custom--lijn--licht);
	border-radius: var(--wp--custom--radius--klein);
	background-color: var(--wp--preset--color--wit);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--basis);
	color: var(--wp--preset--color--inkt);
}

.fluentform .ff-el-form-control:focus {
	border-color: var(--wp--preset--color--groen);
	outline: 3px solid var(--wp--preset--color--groen);
	outline-offset: 1px;
}

.fluentform .ff-btn-submit {
	min-height: var(--wp--custom--tap--maat);
	padding: 13px 28px;
	border: 0;
	border-radius: var(--wp--custom--radius--pil);
	background-color: var(--wp--preset--color--groen-diep);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--basis);
	font-weight: 700;
	color: var(--wp--preset--color--wit);
	cursor: pointer;
}

.fluentform .ff-btn-submit:hover {
	background-color: var(--wp--preset--color--inkt);
}

.fluentform .ff-el-is-error .ff-el-form-control {
	border-color: var(--wp--preset--color--henna);
}

.fluentform .error-text,
.fluentform .text-danger {
	color: var(--wp--preset--color--henna);
}

.sc-nieuwsbrief {
	background-color: var(--wp--preset--color--groen-diep);
	color: var(--wp--preset--color--wit);
	padding-block: var(--wp--preset--spacing--70);
}

/* De ruimte onder deze kop komt uit de row-gap van het blok. Een eigen
   ondermarge maakt de rasterrij hoger dan de kop, en dan zakt de eyebrow
   ernaast een paar pixels mee. */
.sc-nieuwsbrief h2 {
	max-width: 17ch;
	margin-block: 0;
}

.sc-nieuwsbrief__belofte {
	max-width: 46ch;
	margin-block: 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--lead);
	color: rgba(255, 255, 255, 0.9);
}

.sc-nieuwsbrief a {
	color: var(--wp--preset--color--wit);
}

.sc-nieuwsbrief .fluentform .ff-el-input--label label {
	color: var(--wp--preset--color--wit);
}

/*
 * De knop stond in groen-diep op een groen-diepe sectie: onzichtbaar.
 *
 * Fluent Forms schrijft de knopkleur als inline style in de HTML, uit de
 * instellingen van het formulier. Inline wint van een stylesheet, dus hier is
 * !important geen luiheid maar de enige manier om er zonder plugin-instelling
 * overheen te gaan.
 */
.sc-nieuwsbrief .fluentform .ff-btn-submit {
	background-color: var(--wp--preset--color--wit) !important;
	color: var(--wp--preset--color--groen-diep) !important;
}

.sc-nieuwsbrief .sc-knop {
	background-color: var(--wp--preset--color--wit);
	color: var(--wp--preset--color--groen-diep);
}

.sc-nieuwsbrief .fluentform .ff-btn-submit:hover {
	background-color: var(--wp--preset--color--inkt) !important;
	color: var(--wp--preset--color--wit) !important;
}

/*
 * Eén e-mailveld hoeft niet over de volle breedte. Op een breed scherm staan
 * het veld en de knop naast elkaar; daaronder onder elkaar.
 */
.sc-nieuwsbrief__formulier,
.sc-voet__formulier {
	max-width: 460px;
}

/*
 * Veld en knop naast elkaar. Fluent Forms zet ze in losse .ff-el-group's onder
 * elkaar; met flex op het formulier en flex-grow op de eerste groep staan ze op
 * één regel, met de knop op zijn eigen breedte.
 */
/*
 * Fluent Forms zet de velden in een <fieldset> binnen het <form>. Flex op het
 * formulier raakt daardoor alleen die fieldset, en daarbinnen stapelt alles
 * gewoon door. De fieldset is dus de plek waar de flex hoort.
 */
.sc-nieuwsbrief__formulier .frm-fluent-form > fieldset {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 10px;
	margin: 0;
	padding: 0;
	border: 0;
}

.sc-nieuwsbrief__formulier .frm-fluent-form > fieldset > .ff-el-group {
	flex: 1 1 240px;
	margin-bottom: 0;
}

.sc-nieuwsbrief__formulier .frm-fluent-form > fieldset > .ff-el-group:last-of-type,
.sc-nieuwsbrief__formulier .frm-fluent-form > fieldset > .ff_submit_btn_wrapper {
	flex: 0 0 auto;
	margin-bottom: 0;
}

.sc-nieuwsbrief .sc-knop:hover,
.sc-nieuwsbrief .sc-knop:focus-visible {
	background-color: var(--wp--preset--color--inkt);
	color: var(--wp--preset--color--wit);
}

.sc-nieuwsbrief .fluentform .ff-btn-submit:hover {
	background-color: var(--wp--preset--color--inkt);
	color: var(--wp--preset--color--wit);
}

.sc-voet__nieuwsbrief .sc-knop {
	background-color: var(--wp--preset--color--groen);
}

/* == 15 Paginering, zoeken, leeg =========================================== */

.sc-paginering {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--50);
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: 2px solid var(--wp--preset--color--inkt);
}

.sc-paginering a,
.sc-paginering span {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--tap--maat);
	padding-inline: 10px;
	font-weight: 700;
	text-decoration: none;
}

.sc-zoek .wp-block-search__inside-wrapper {
	gap: 8px;
	border: 0;
}

.sc-zoek .wp-block-search__input {
	min-height: var(--wp--custom--tap--maat);
	padding: 11px 14px;
	border: 2px solid var(--wp--custom--lijn--licht);
	border-radius: var(--wp--custom--radius--klein);
	background-color: var(--wp--preset--color--wit);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--basis);
}

.sc-zoek .wp-block-search__button {
	min-height: var(--wp--custom--tap--maat);
	padding-inline: 22px;
	border: 0;
	border-radius: var(--wp--custom--radius--pil);
	background-color: var(--wp--preset--color--groen-diep);
	color: var(--wp--preset--color--wit);
	font-weight: 700;
	cursor: pointer;
}

/*
 * Een lege staat is een uitnodiging, geen mededeling. Vandaar het kader en de
 * knop: er is altijd iets wat je wél kunt doen.
 */
.sc-leeg {
	max-width: 56ch;
	margin: 0;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	border: 2px dashed var(--wp--custom--lijn--licht);
	border-radius: var(--wp--custom--radius--basis);
	font-size: var(--wp--preset--font-size--lead);
	color: var(--wp--preset--color--grijs);
}

.sc-leeg > * {
	margin-block: 0;
}

.sc-leeg > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.sc-lijst {
	display: flex;
	flex-direction: column;
}

.sc-lijst__rij {
	padding-block: var(--wp--preset--spacing--30);
	border-block-end: 1px solid var(--wp--custom--lijn--licht);
}

.sc-lijst__rij h2 {
	margin-block: 0 4px;
}

.sc-lijst__rij p {
	margin: 0;
	color: var(--wp--preset--color--grijs);
}

.sc-leegpagina {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	max-width: 52ch;
}

.sc-leegpagina h1 {
	margin: 0;
}

/* == 16 Mediaqueries ======================================================= */

/*
 * Er zijn er twee, en dat is met opzet. De opbouw gebruikt clamp en grid met
 * auto-fit, dus de rest schaalt zonder breekpunt.
 */

@media (min-width: 1000px) {
	/* De goot. Vanaf hier hangt de aanhef links naast de inhoud en zie je dat
	   elke sectie op dezelfde lijn begint. */
	.sc-blok {
		grid-template-columns: var(--wp--custom--rail--goot) minmax(0, 1fr);
		column-gap: var(--wp--preset--spacing--50);
	}

	/*
	 * De aanhef stond 22 pixels boven de kop ernaast, en het merkje stond op een
	 * eigen regel boven het woord. Dat las als scheef. Nu staan merkje en woord
	 * op één regel, en zet de padding de tekst op dezelfde hoogte als de eerste
	 * regel van de kop: die begint iets onder de bovenkant van zijn eigen doos,
	 * omdat de regelhoogte groter is dan de letterhoogte.
	 */
	.sc-blok__aanhef {
		padding-block-start: 26px;
	}

	/*
	 * De aanhef staat verticaal gecentreerd tegenover de kop ernaast, niet
	 * tegenover de hele kolom eronder.
	 *
	 * Daarvoor moet de kop in dezelfde rasterrij staan als de aanhef. De
	 * inhoudkolom krijgt `display: contents`, zodat haar kinderen zelf
	 * rasteritems worden: de kop komt in rij 1 naast de aanhef, de rest zakt
	 * naar de rijen eronder. De onderlinge ruimte komt dan uit row-gap in
	 * plaats van uit de flexbox die er niet meer is.
	 *
	 * De goot is 156px omdat het langste woord dat vraagt. "AANKOMEND" is in
	 * kleinkapitaal met spatiëring ongeveer 121 pixels; in de oude goot van 92px
	 * liep dat over de kolom heen en bleef er visueel nog geen tien pixels over
	 * tot de kop.
	 */
	.sc-blok {
		grid-template-columns: var(--wp--custom--rail--goot) minmax(0, 1fr);
		column-gap: var(--wp--preset--spacing--50);
		row-gap: var(--wp--preset--spacing--40);
		align-items: start;
	}

	.sc-blok__inhoud {
		display: contents;
	}

	.sc-blok__inhoud > * {
		grid-column: 2;
	}

	.sc-blok__inhoud > :first-child {
		grid-row: 1;
	}

	.sc-blok__aanhef {
		grid-column: 1;
		grid-row: 1;
		align-self: center;
		padding-block-start: 0;
	}

	.sc-blok__aanhef .sc-eyebrow {
		flex-direction: row;
		align-items: center;
		gap: 9px;
		line-height: 1.35;
		text-wrap: balance;
	}

	/* De kop van een blok springt de goot in, zodat hij op de rand van de goot
	   begint en de tekst eronder netjes uitlijnt. */
	.sc-blok--breed {
		grid-template-columns: minmax(0, 1fr);
	}

	.sc-hero::after {
		opacity: 0.26;
	}
}

@media (max-width: 640px) {
	/* De strook onder de hero wordt een kolom; drie kolommen van 100px leest
	   niemand. */
	.sc-strook {
		grid-template-columns: minmax(0, 1fr);
	}

	.sc-strook li,
	.sc-strook li:first-child,
	.sc-strook li:last-child {
		padding-inline: var(--wp--custom--rail--pad);
		padding-block: var(--wp--preset--spacing--40);
		border-inline-start: 0;
		border-block-start: 1px solid var(--wp--custom--lijn--licht);
	}

	.sc-strook li:first-child {
		border-block-start: 0;
	}
}


/* == 17 Redactienotitie ==================================================== */

/*
 * Een notitie voor de redactie, duidelijk als zodanig herkenbaar. Deze hoort
 * niet op een publieke site te staan; qc/veeg.mjs telt ze en docs/BLOCKED.md
 * houdt bij welke er nog open staan.
 */
.sc-nog-doen {
	padding: var(--wp--preset--spacing--30);
	border-inline-start: 4px solid var(--wp--preset--color--henna);
	background-color: var(--wp--preset--color--henna-zacht);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 600;
	color: var(--wp--preset--color--henna);
}


/* == 18 Beeld in secties =================================================== */

@media (max-width: 780px) {
	/* Op een telefoon staat de tekst over de volle breedte van de foto. Een
	   verloop van links naar rechts helpt dan niet; van onder naar boven wel. */
	.sc-hero::before {
		background-image: linear-gradient(
			to top,
			var(--wp--preset--color--inkt) 0%,
			rgba(18, 16, 14, 0.92) 42%,
			rgba(18, 16, 14, 0.72) 78%,
			rgba(18, 16, 14, 0.55) 100%
		);
	}

	.sc-hero__foto {
		object-position: 58% 34%;
	}
}

/* Een foto naast een tekstblok. Het beeld staat op de rechterhelft en houdt
   dezelfde verhouding als een kaart, zodat het ritme van de pagina klopt. */
.sc-beeldblok {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

.sc-beeldblok__foto {
	margin: 0;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--basis);
	aspect-ratio: 3 / 2;
}

.sc-beeldblok__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 780px) {
	.sc-beeldblok {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: var(--wp--preset--spacing--50);
		align-items: center;
	}
}

.sc-beeldblok__tekst > * {
	margin-block: 0;
}

.sc-beeldblok__tekst > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.sc-beeldblok__tekst p {
	max-width: var(--wp--custom--lees--breedte);
}


/* == 19 Beeld in de paginakop ============================================== */

/*
 * Elke archiefkop draagt een foto met hetzelfde verloop als de hero, zodat de
 * pagina's niet als kale zwarte balken beginnen. Het pad komt als variabele uit
 * functions.php; een stylesheet kan de themamap niet zelf opbouwen.
 */
/* De klasse heet sc-kop-beeld en staat op de secties met sc-sectie--kort. Een
   selector die ook sc-sectie--kop eiste greep nergens, want die klasse bestaat
   niet op deze pagina's. */
.sc-kop-beeld {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

/*
 * De foto hoort op de sectie zelf, niet op een ::before met een negatieve
 * z-index. Zo'n pseudo-element valt achter de eigen achtergrondkleur van de
 * sectie, en die is inkt: de foto was er wel maar volledig bedekt.
 */
.sc-kop-beeld {
	background-image: var(--sc-kop-foto);
	background-size: cover;
	background-position: center 42%;
}

.sc-kop-beeld > * {
	position: relative;
	z-index: 1;
}

.sc-kop-beeld::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: linear-gradient(
		100deg,
		var(--wp--preset--color--inkt) 0%,
		rgba(18, 16, 14, 0.94) 38%,
		rgba(18, 16, 14, 0.68) 70%,
		rgba(18, 16, 14, 0.5) 100%
	);
}

.sc-kop-beeld--blog { --sc-kop-foto: var(--sc-foto-markt); }
.sc-kop-beeld--agenda { --sc-kop-foto: var(--sc-foto-bijeenkomst); }
.sc-kop-beeld--meedoen { --sc-kop-foto: var(--sc-foto-landschap); }
.sc-kop-beeld--over { --sc-kop-foto: var(--sc-foto-nijl); }
.sc-kop-beeld--contact { --sc-kop-foto: var(--sc-foto-minaret); }
.sc-kop-beeld--doneren { --sc-kop-foto: var(--sc-foto-woestijn); }

@media (max-width: 780px) {
	.sc-kop-beeld::after {
		background-image: linear-gradient(
			to top,
			var(--wp--preset--color--inkt) 0%,
			rgba(18, 16, 14, 0.93) 46%,
			rgba(18, 16, 14, 0.74) 100%
		);
	}
}

/* == 20 Nieuwsbrief, opgeruimd ============================================= */

/*
 * Fluent Forms zet bij een verplicht veld een rode ster en een informatie-icoon
 * naast het label. Bij één e-mailveld met een duidelijk label voegt dat niets
 * toe en het oogt rommelig. Weg ermee; de validatie blijft gewoon werken.
 *
 * De ster komt uit een ::after op de labelwikkel, het icoon uit een los div.
 * Allebei apart uitzetten, en met !important omdat de plugin-stylesheet later
 * in de pagina staat dan deze.
 */
.sc-nieuwsbrief__formulier .ff-el-tooltip,
.sc-voet__formulier .ff-el-tooltip {
	display: none !important;
}

/* De ster hangt aan het label zelf, niet aan de wikkel eromheen. */
.sc-nieuwsbrief__formulier .ff-el-is-required > label:after,
.sc-nieuwsbrief__formulier .ff-el-is-required > label:before,
.sc-voet__formulier .ff-el-is-required > label:after,
.sc-voet__formulier .ff-el-is-required > label:before {
	content: none !important;
}

.sc-nieuwsbrief__formulier .ff-el-input--label label,
.sc-voet__formulier .ff-el-input--label label {
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 700;
}

.sc-nieuwsbrief__formulier .ff-el-form-control {
	border: 0;
}

/* In de voet staat het formulier onder elkaar; daar is de kolom te smal voor
   een veld en een knop naast elkaar. */
/* In de voet is de kolom te smal voor een veld en een knop naast elkaar. */
.sc-voet__formulier .frm-fluent-form > fieldset {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	margin: 0;
	padding: 0;
	border: 0;
}

.sc-voet__formulier .ff-el-group {
	margin-bottom: 0;
}

.sc-voet__formulier .ff-btn-submit {
	width: 100%;
}

/* De links in de voet stonden op 44px hoog elk, waardoor de kolom uit elkaar
   viel. Een lijst met vijf items leest beter wat dichter op elkaar; het tapdoel
   blijft gehaald doordat de link de volle kolombreedte pakt. */
.sc-voet__lijst a {
	min-height: 36px;
	padding-block: 4px;
}



/* == 22 Melding bij een bijeenkomst ======================================== */

/*
 * Een bijeenkomst die niet doorging hoort dat bovenaan te zeggen, niet
 * halverwege de tekst. Rood is hier op zijn plek: dit is precies het soort
 * bericht waarvoor die kleur bewaard is.
 */
.sc-melding {
	display: flex;
	gap: 12px;
	margin-block: 0 var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30);
	background-color: var(--wp--preset--color--henna-zacht);
	border-inline-start: 4px solid var(--wp--preset--color--henna);
	border-radius: var(--wp--custom--radius--klein);
	font-weight: 600;
	color: var(--wp--preset--color--henna);
}


/* De makerregel in de voet. Zelfde maat en kleur als de rest van de slotregel,
   zodat hij meedoet in plaats van om aandacht te vragen. */
.sc-maker {
	margin: 0;
}

.sc-maker span {
	font-style: normal;
}


/* == 23 Ademruimte in de paginakop ========================================= */

/*
 * De inleiding plakte tegen de titel. Een kop van 58 pixels met een regel
 * eronder van 19 heeft ruimte nodig, anders lezen ze als één blok.
 */
.sc-sectie--kort > .sc-rail > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.sc-sectie--kort .sc-eyebrow + h1,
.sc-sectie--kort .sc-eyebrow + h2 {
	margin-block-start: var(--wp--preset--spacing--20);
}

.sc-sectie--kort h1 + .sc-inleiding,
.sc-sectie--kort h1 + .sc-kort {
	margin-block-start: var(--wp--preset--spacing--30);
}


/* == 25 Het artikel ======================================================== */

/*
 * Een artikel is één gecentreerde leeskolom. De kop staat gecentreerd boven de
 * tekst, met de categorie als pil erboven en een metaregel eronder. Dat leest
 * rustiger dan een linksuitgelijnde kop met losse regels eromheen: het oog
 * heeft één beginpunt.
 */
/*
 * De rail blijft de rail, ook hier. Een smallere .sc-rail zou de linkerrand van
 * het artikel 180 pixels naar binnen schuiven ten opzichte van de kop en de
 * voet, en dan lijnt de pagina niet meer uit. De leeskolom wordt daarom binnen
 * de rail gecentreerd in plaats van de rail zelf te versmallen.
 */
.sc-artikel__kop,
.sc-artikel .sc-lees,
.sc-artikel__beeld {
	max-width: 820px;
	margin-inline: auto;
}

.sc-artikel__kop {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin-block-end: var(--wp--preset--spacing--50);
	text-align: center;
}

.sc-artikel__kop h1 {
	max-width: 17ch;
	margin: 0;
}

/* De categorie als pil met een stip ervoor, zoals een label op een omslag. */
.sc-pil {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	min-height: 36px;
	padding: 8px 17px;
	border-radius: var(--wp--custom--radius--pil);
	background-color: var(--wp--preset--color--groen-zacht);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--groen-diep);
}

.sc-pil::before {
	content: "";
	width: 7px;
	height: 7px;
	flex: none;
	border-radius: 50%;
	background-color: var(--wp--preset--color--groen);
}

.sc-pil a {
	color: inherit;
	text-decoration: none;
	min-height: 0;
}

.sc-pil a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/*
 * Datum en leestijd, met een icoontje ervoor en een stip ertussen. Die stip is
 * een vormpje uit CSS en geen leesteken in de tekst: een middenpunt in de HTML
 * wordt voorgelezen door een schermlezer en botst met TONE-OF-VOICE §5.
 */
.sc-artikelmeta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 16px;
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 600;
	color: var(--wp--preset--color--grijs);
}

.sc-artikelmeta__item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.sc-artikelmeta__item + .sc-artikelmeta__item::before {
	content: "";
	width: 4px;
	height: 4px;
	margin-inline-end: 9px;
	border-radius: 50%;
	background-color: var(--wp--custom--lijn--licht);
}

.sc-artikelmeta__item::after {
	content: "";
	order: -1;
	width: 15px;
	height: 15px;
	flex: none;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.sc-artikelmeta__item--datum::after {
	-webkit-mask-image: var(--sc-icoon-agenda);
	mask-image: var(--sc-icoon-agenda);
}

.sc-artikelmeta__item--klok::after {
	-webkit-mask-image: var(--sc-icoon-klok);
	mask-image: var(--sc-icoon-klok);
}

:root {
	--sc-icoon-agenda: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'%3E%3Crect x='2' y='3' width='12' height='11' rx='2'/%3E%3Cpath d='M2 6.5h12M5.5 1.5v3M10.5 1.5v3'/%3E%3C/svg%3E");
	--sc-icoon-klok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.2'/%3E%3Cpath d='M8 4.4V8l2.6 1.6'/%3E%3C/svg%3E");
}

/* De leeskolom staat in het midden en de eerste alinea draagt de kern. */
.sc-artikel .sc-lees {
	max-width: min(68ch, 820px);
}

.sc-artikel .sc-lees > p:first-of-type {
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 500;
	color: var(--wp--preset--color--inkt);
}

.sc-artikel .sc-lees > h2 {
	margin-block-start: var(--wp--preset--spacing--70);
	font-size: var(--wp--preset--font-size--kop-3);
}

.sc-artikel .sc-lees > h3 {
	margin-block-start: var(--wp--preset--spacing--60);
}

.sc-artikel__beeld {
	margin-block-end: var(--wp--preset--spacing--60);
}

/* == 26 Kleinere correcties ================================================ */

/* Het aanmeldblok in een sectie staat al onder een alinea; de marge van 64px
   die het als los blok krijgt is daar te veel. */
.sc-blok__inhoud .sc-aanmelden {
	margin-block-start: 0;
}

/* De ster en het informatie-icoon horen nergens bij een formulier van deze
   site. Ze stonden alleen uit bij de nieuwsbrief; nu overal. */
.fluentform .ff-el-tooltip {
	display: none !important;
}

.fluentform .ff-el-is-required > label:after,
.fluentform .ff-el-is-required > label:before {
	content: none !important;
}


/* == 27 Sociale kanalen =================================================== */

/*
 * WordPress geeft elk kanaal zijn eigen merkkleur via `color` op de link; de
 * SVG erft die met `fill: currentColor`. Op een donkere chip werd TikTok
 * daardoor zwart op zwart, en de drie samen lazen als losse plaatjes in plaats
 * van als één rij.
 *
 * Hier krijgen ze de vormtaal van de kaarten: een rand van 2px in inkt, en bij
 * aanraking keert het om. Op een donkere ondergrond precies andersom.
 *
 * !important is hier geen luiheid: de regel van WordPress staat per kanaal en
 * komt later in de pagina.
 */
.wp-block-social-links .wp-social-link {
	width: var(--wp--custom--tap--maat);
	height: var(--wp--custom--tap--maat);
	margin: 0;
	border-radius: var(--wp--custom--radius--klein);
	transition: background-color var(--wp--custom--overgang), color var(--wp--custom--overgang);
}

.wp-block-social-links .wp-social-link a {
	padding: 11px;
}

.wp-block-social-links .wp-social-link svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

/* Op een lichte ondergrond: omlijnd, met de inkt van de tekst. */
main .wp-block-social-links:not(.sc-socials) .wp-social-link {
	background-color: transparent;
	border: 2px solid var(--wp--preset--color--inkt);
	color: var(--wp--preset--color--inkt) !important;
}

main .wp-block-social-links:not(.sc-socials) .wp-social-link:hover,
main .wp-block-social-links:not(.sc-socials) .wp-social-link:focus-within {
	background-color: var(--wp--preset--color--inkt);
	border-color: var(--wp--preset--color--inkt);
	color: var(--wp--preset--color--wit) !important;
}

/* In de voet: gevuld vlakje, witte glyph. */
.sc-socials .wp-social-link {
	background-color: var(--wp--custom--vlak--op-donker);
	border: 0;
	color: var(--wp--preset--color--wit) !important;
}

.sc-socials .wp-social-link:hover,
.sc-socials .wp-social-link:focus-within {
	background-color: var(--wp--preset--color--groen);
	color: var(--wp--preset--color--wit) !important;
}

.wp-block-social-links {
	gap: 10px;
}


/* == 28 Merkkit ============================================================ */

.sc-kit-logos {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}

.sc-kit-logo {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
}

.sc-kit-logo__vlak {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Vaste hoogte, geen minimum: anders wordt het gestapelde logo twee pixels
	   hoger dan de rest en staan de bijschriften niet op één lijn. */
	height: 148px;
	padding: var(--wp--preset--spacing--40);
	border: 2px solid var(--wp--preset--color--inkt);
	border-radius: var(--wp--custom--radius--basis);
	background-color: var(--wp--preset--color--wit);
}

.sc-kit-logo--donker .sc-kit-logo__vlak {
	background-color: var(--wp--preset--color--inkt);
}

.sc-kit-logo__vlak img {
	max-width: 100%;
	max-height: 86px;
}

.sc-kit-logo figcaption {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--grijs);
}

.sc-kit-logo figcaption strong {
	font-size: var(--wp--preset--font-size--basis);
	color: var(--wp--preset--color--inkt);
}

.sc-kit-logo figcaption .sc-pijl {
	margin-block-start: 4px;
	font-size: var(--wp--preset--font-size--klein);
}

.sc-kit-regel {
	max-width: 62ch;
	padding: var(--wp--preset--spacing--30);
	border-inline-start: 3px solid var(--wp--preset--color--groen);
	background-color: var(--wp--preset--color--zand);
	color: var(--wp--preset--color--inkt);
}

.sc-kit-kleuren {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.sc-kit-kleur {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 10px;
	border: 2px solid var(--wp--custom--lijn--licht);
	border-radius: var(--wp--custom--radius--basis);
	background: none;
	font: inherit;
	text-align: start;
	cursor: pointer;
	transition: border-color var(--wp--custom--overgang);
}

.sc-kit-kleur:hover,
.sc-kit-kleur.is-gekopieerd {
	border-color: var(--wp--preset--color--groen);
}

.sc-kit-kleur__vlak {
	width: 52px;
	height: 52px;
	flex: none;
	border-radius: var(--wp--custom--radius--klein);
	background-color: var(--sc-staal);
	box-shadow: inset 0 0 0 1px var(--wp--custom--lijn--licht);
}

.sc-kit-kleur__tekst {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--grijs);
}

.sc-kit-kleur__tekst strong {
	font-size: var(--wp--preset--font-size--basis);
	color: var(--wp--preset--color--inkt);
}

.sc-kit-kleur__tekst code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--groen-diep);
}

/* De bevestiging na het kopiëren. Vast onderin, buiten de leesrichting. */
.sc-kit-melding {
	position: fixed;
	left: 50%;
	bottom: 22px;
	z-index: 60;
	margin: 0;
	padding: 10px 20px;
	transform: translateX(-50%);
	border-radius: var(--wp--custom--radius--pil);
	background-color: var(--wp--preset--color--inkt);
	color: var(--wp--preset--color--wit);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 600;
}

.sc-kit-letters {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	align-items: center;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.sc-kit-letters__groot {
	margin: 0;
	/* Op één regel: "Aa Bb Cc" over twee regels leest als een fout, niet als een
	   proef. De bovengrens is daarop gekozen, niet op de grootste maat die past. */
	font-size: clamp(44px, 6.2vw, 72px);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.1;
	white-space: nowrap;
}

.sc-kit-letters__lijst {
	display: grid;
	gap: 0;
	margin: 0;
}

.sc-kit-letters__lijst > div {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	padding-block: 12px;
	border-block-start: 1px solid var(--wp--custom--lijn--licht);
}

.sc-kit-letters__lijst > div:first-child {
	border-block-start: 0;
}

.sc-kit-letters__lijst dt {
	min-width: 130px;
	font-weight: 700;
}

.sc-kit-letters__lijst dd {
	margin: 0;
	color: var(--wp--preset--color--grijs);
}

/* == 29 Doneren met iDEAL ================================================== */

.sc-gift {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin-block: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40);
	border: 2px solid var(--wp--custom--lijn--licht);
	border-radius: var(--wp--custom--radius--basis);
	background-color: var(--wp--preset--color--wit);
}

.sc-gift__bedragen {
	margin: 0;
	padding: 0;
	border: 0;
}

.sc-gift__legenda {
	margin-block-end: 10px;
	padding: 0;
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--wp--preset--color--groen-diep);
}

/* Vier keuzes naast elkaar, ook op 360px. Een raster en geen flexbox: zo zijn
   ze even breed en springt "Anders" niet uit de rij. */
.sc-gift__keuzes {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
}

/* Het bolletje zelf blijft in de toetsenbordvolgorde staan, maar is niet te
   zien: het label eromheen is de knop. clip-path in plaats van display:none,
   want een verborgen radio is voor een schermlezer niet meer te bedienen. */
.sc-gift__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

.sc-gift__knop {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--wp--custom--tap--maat);
	padding: 10px 6px;
	border: 2px solid var(--wp--custom--lijn--licht);
	border-radius: var(--wp--custom--radius--klein);
	background-color: var(--wp--preset--color--wit);
	font-size: var(--wp--preset--font-size--basis);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--wp--custom--overgang), border-color var(--wp--custom--overgang);
}

.sc-gift__knop:hover {
	border-color: var(--wp--preset--color--groen);
}

.sc-gift__radio:checked + .sc-gift__knop {
	border-color: var(--wp--preset--color--groen-diep);
	background-color: var(--wp--preset--color--groen-diep);
	color: var(--wp--preset--color--wit);
}

.sc-gift__radio:focus-visible + .sc-gift__knop {
	outline: 3px solid var(--wp--preset--color--groen);
	outline-offset: 3px;
}

.sc-gift__veld {
	display: grid;
	gap: 6px;
}

/* Het eigen bedrag hoort pas thuis als "Anders" gekozen is. Zonder JavaScript,
   met de stand van de radio als schakelaar.

   Deze twee regels staan bewust ná .sc-gift__veld en niet ervoor. Ze hebben
   allemaal één klasse, dus dezelfde specificiteit, en dan wint de laatste. Toen
   .sc-gift__veld er nog onder stond, kreeg het eigen bedrag display:grid en
   stond het veld meteen open. */
.sc-gift__veld--eigen {
	display: none;
	margin-block-start: var(--wp--preset--spacing--30);
}

.sc-gift__bedragen:has(#sc-gift-anders:checked) .sc-gift__veld--eigen {
	display: grid;
}

.sc-gift__veld label {
	font-weight: 700;
}

.sc-gift__veld input {
	width: 100%;
	min-height: var(--wp--custom--tap--maat);
	padding: 12px 14px;
	border: 2px solid var(--wp--custom--lijn--licht);
	border-radius: var(--wp--custom--radius--klein);
	background-color: var(--wp--preset--color--wit);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--basis);
	color: var(--wp--preset--color--inkt);
}

.sc-gift__veld input:focus {
	border-color: var(--wp--preset--color--groen);
	outline: 3px solid var(--wp--preset--color--groen);
	outline-offset: 1px;
}

.sc-gift__verzend {
	min-height: var(--wp--custom--tap--maat);
	padding: 14px 28px;
	border: 0;
	border-radius: var(--wp--custom--radius--pil);
	background-color: var(--wp--preset--color--groen-diep);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--basis);
	font-weight: 700;
	color: var(--wp--preset--color--wit);
	cursor: pointer;
	transition: background-color var(--wp--custom--overgang);
}

.sc-gift__verzend:hover {
	background-color: var(--wp--preset--color--inkt);
}

/* Het lokaas voor robots. Buiten beeld, en niet met display:none: een invulveld
   dat niet bestaat wordt ook niet ingevuld. */
.sc-gift__val {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.sc-gift__melding {
	margin-block: 0 var(--wp--preset--spacing--30);
	padding: 14px 16px;
	border-inline-start: 4px solid var(--wp--preset--color--henna);
	border-radius: var(--wp--custom--radius--klein);
	background-color: var(--wp--preset--color--zand);
	font-weight: 600;
}

.sc-gift__hoevaak {
	margin: 0;
	padding: 0;
	border: 0;
}

/* Eenmalig plus de aangezette intervallen. Twee kolommen en niet vier: de
   woorden zijn hier lang ("Maandelijks", "Per kwartaal") en die passen op
   360px niet naast elkaar in vieren. */
.sc-gift__keuzes--vaak {
	grid-template-columns: repeat(2, 1fr);
}

/* De ster bij een verplicht veld. In het rood, want dat is de enige plek waar
   die kleur op deze pagina iets te melden heeft. */
.sc-gift__ster {
	color: var(--wp--preset--color--henna);
	font-weight: 700;
}

.sc-gift__uitleg {
	display: block;
	margin-block-start: 8px;
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1.5;
	color: var(--wp--preset--color--grijs);
}

.sc-gift__veld .sc-gift__uitleg {
	margin-block-start: 0;
}

.sc-gift__veld textarea {
	width: 100%;
	min-height: 88px;
	padding: 12px 14px;
	border: 2px solid var(--wp--custom--lijn--licht);
	border-radius: var(--wp--custom--radius--klein);
	background-color: var(--wp--preset--color--wit);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--basis);
	line-height: 1.5;
	color: var(--wp--preset--color--inkt);
	resize: vertical;
}

.sc-gift__veld textarea:focus {
	border-color: var(--wp--preset--color--groen);
	outline: 3px solid var(--wp--preset--color--groen);
	outline-offset: 1px;
}

/* Op 360px staan de keuzes krap. Vanaf 480px mag er lucht tussen, en passen
   ook vier langere woorden naast elkaar. */
@media (min-width: 480px) {
	.sc-gift__keuzes {
		gap: 10px;
	}

	.sc-gift__keuzes--vaak {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* == 30 De uitslag van een gift =========================================== */

.sc-uitslag {
	max-width: var(--wp--custom--lees--breedte);
}

.sc-uitslag > p {
	margin-block: 0 var(--wp--preset--spacing--30);
}

/*
 * Ruim boven de knoppen. Ze staan aan het eind van een bericht dat iemand eerst
 * uitleest; daar hoort een adempauze tussen en niet de gewone alinea-afstand.
 *
 * De selector is `.sc-uitslag > .sc-uitslag__knoppen` en niet alleen de klasse.
 * De regel erboven, `.sc-uitslag > p`, telt een klasse plus een elementnaam en
 * is daarmee specifieker; die zette de bovenmarge terug op nul en er bleef
 * 18 pixels over. Dezelfde val als bij het eigen bedrag in het donatieformulier,
 * en hij is met meten gevonden en niet met kijken.
 */
.sc-uitslag > .sc-uitslag__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-block-start: var(--wp--preset--spacing--60);
}

/* De tweede knop is de uitweg, niet de bedoeling. Een lijn in plaats van een
   vlak, zodat het oog eerst bij de eerste blijft hangen. */
.sc-knop--leeg {
	border: 2px solid var(--wp--preset--color--inkt);
	background-color: transparent;
	color: var(--wp--preset--color--inkt);
}

.sc-knop--leeg:hover,
.sc-knop--leeg:focus-visible {
	background-color: var(--wp--preset--color--inkt);
	color: var(--wp--preset--color--zand);
}

/* Op 360px staan twee knoppen naast elkaar te krap. Dan onder elkaar, en over
   de volle breedte: makkelijker te raken met een duim. */
@media (max-width: 419px) {
	.sc-uitslag__knoppen {
		flex-direction: column;
		align-items: stretch;
	}
}

/* == 31 Open plekken als brede regels ===================================== */

/*
 * De vacatures stonden in een raster van drie kaarten. Dat werkte niet.
 *
 * Bij drie kolommen is een kaart 279 pixels breed, en dat is smaller dan op een
 * tablet. "Marketingcommissie" past daar niet in en moest met `hyphens` worden
 * afgebroken. Als brede regel is dat probleem er niet: er is altijd ruimte.
 * En je leest een lijstje sneller af dan een raster, want je oog hoeft maar één
 * kolom te volgen.
 */
.sc-plekken {
	display: grid;
	gap: 12px;
}

/*
 * De lijst breekt uit de tekstkolom naar de volle rail.
 *
 * De kop en de eyebrow blijven in de indeling van de site staan, met het
 * opschrift in de zijkolom. De regels zelf hebben die inspringing niet nodig en
 * lezen juist beter over de hele breedte: dan staan de feiten links en de knop
 * rechts écht uit elkaar, in plaats van tegen elkaar aan.
 *
 * Dit kan met `grid-column` en niet met een negatieve marge, omdat `.sc-blok`
 * vanaf 1000px een raster van twee kolommen is en `.sc-blok__inhoud` daar op
 * `display: contents` staat: de lijst is dan zélf een rasteritem. Over allebei
 * de kolommen zetten is dus exact, en gaat niet mis als de goot ooit verandert.
 */
@media (min-width: 1000px) {
	.sc-blok__inhoud > .sc-plekken,
	.sc-blok .sc-plekken {
		grid-column: 1 / -1;
	}
}

.sc-plek {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--wit);
	border: 2px solid var(--wp--preset--color--inkt);
	border-radius: var(--wp--custom--radius--basis);
	transition: border-color var(--wp--custom--overgang), transform var(--wp--custom--overgang);
}

.sc-plek:hover {
	border-color: var(--wp--preset--color--groen);
	transform: translateY(-2px);
}

.sc-plek__tekst {
	display: flex;
	flex-direction: column;
	gap: 9px;
	min-width: 0;
}

.sc-plek__kop {
	margin: 0;
	font-size: var(--wp--preset--font-size--kop-4);
	line-height: 1.16;
	overflow-wrap: break-word;
}

.sc-plek__kop a {
	color: inherit;
	text-decoration: none;
}

/* De hele regel is het tapdoel. */
.sc-plek__kop a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
}

.sc-plek:has(.sc-plek__kop a:focus-visible) {
	outline: 3px solid var(--wp--preset--color--groen);
	outline-offset: 3px;
}

.sc-plek__kop a:focus-visible {
	outline: none;
}

.sc-plek__feiten {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 0;
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 600;
	color: var(--wp--preset--color--grijs);
}

/* Het merkteken komt uit een masker en niet uit de tekst: zo leest een
   schermlezer geen "klok" tussen twee gewone woorden door. */
/* Bovenaan uitlijnen en niet centreren: een feit dat over twee regels loopt
   zette het merkteken anders tussen die regels in, en dan lijkt het bij geen van
   beide te horen. De marge zet het op de hoogte van de eerste regel. */
.sc-plek__feit {
	display: inline-flex;
	align-items: flex-start;
	gap: 7px;
}

.sc-plek__feit::before {
	content: "";
	width: 15px;
	height: 15px;
	margin-block-start: 2px;
	flex: none;
	background-color: var(--wp--preset--color--groen-diep);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.sc-plek__feit--klok::before {
	-webkit-mask-image: var(--sc-teken-klok);
	mask-image: var(--sc-teken-klok);
}

.sc-plek__feit--plek::before {
	-webkit-mask-image: var(--sc-teken-plek);
	mask-image: var(--sc-teken-plek);
}

.sc-plek__feit--datum::before {
	-webkit-mask-image: var(--sc-teken-datum);
	mask-image: var(--sc-teken-datum);
	background-color: var(--wp--preset--color--henna);
}

.sc-plek__kort {
	margin: 0;
	max-width: 62ch;
	color: var(--wp--preset--color--inkt);
}

.sc-plek__actie {
	margin: 0;
}

/* Geen knop maar de vorm van een knop: de link zit op de kop en ligt over de
   hele regel. Zie de toelichting in weergave.php. */
.sc-plek__knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--wp--custom--tap--maat);
	padding: 12px 24px;
	border-radius: var(--wp--custom--radius--pil);
	background-color: var(--wp--preset--color--groen-diep);
	color: var(--wp--preset--color--wit);
	font-weight: 700;
	white-space: nowrap;
	transition: background-color var(--wp--custom--overgang);
}

.sc-plek:hover .sc-plek__knop {
	background-color: var(--wp--preset--color--inkt);
}

/* Op 360px staat de knop onder de tekst en over de volle breedte: makkelijker
   te raken met een duim, en er is geen ruimte voor twee kolommen. */
.sc-plek__actie .sc-plek__knop {
	width: 100%;
}

/*
 * Vanaf 720px past de knop naast de tekst, zoals in het voorbeeld: feiten
 * links, knop rechts, allebei verticaal gecentreerd.
 */
@media (min-width: 720px) {
	.sc-plek {
		flex-direction: row;
		align-items: center;
		gap: var(--wp--preset--spacing--40);
		padding-block: var(--wp--preset--spacing--30);
	}

	.sc-plek__tekst {
		flex: 1 1 auto;
	}

	.sc-plek__actie {
		flex: none;
	}

	.sc-plek__actie .sc-plek__knop {
		width: auto;
	}
}

/* == Het archief: bijeenkomsten die geweest zijn ========================== */

/*
 * Brede regels in plaats van kaarten.
 *
 * Het kaartenraster is drie kolommen van ruim driehonderd pixels. Daar past een
 * titel als "Imagine Peace: het ongeziene zichtbaar maken" niet in: die viel
 * uiteen over vier regels, en met dertien bijeenkomsten onder elkaar werd het
 * een stapel afgebroken koppen. Een regel over de volle breedte heeft ruim het
 * dubbele, dus de meeste titels passen op één regel.
 */
.sc-terugblik__jaar {
	margin: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--kop-4);
	color: var(--wp--preset--color--grijs);
	letter-spacing: 0.06em;
}

.sc-terugblik__jaar:first-child {
	margin-block-start: 0;
}

.sc-terugblikken {
	display: grid;
	gap: 12px;
}

/* Zie de toelichting bij .sc-plekken: de lijst breekt uit de tekstkolom naar de
   volle rail, zodat de feiten links en de knop rechts echt uit elkaar staan. */
@media (min-width: 1000px) {
	.sc-blok__inhoud > .sc-terugblik__jaar,
	.sc-blok .sc-terugblik__jaar,
	.sc-blok__inhoud > .sc-terugblikken,
	.sc-blok__inhoud > .sc-paginering--archief,
	.sc-blok .sc-paginering--archief,
	.sc-blok .sc-terugblikken {
		grid-column: 1 / -1;
	}
}

.sc-terugblik {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--wit);
	border: 2px solid var(--wp--preset--color--inkt);
	border-radius: var(--wp--custom--radius--basis);
	transition: border-color var(--wp--custom--overgang), transform var(--wp--custom--overgang);
}

.sc-terugblik:hover {
	border-color: var(--wp--preset--color--groen);
	transform: translateY(-2px);
}

.sc-terugblik__beeld {
	flex: none;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--klein, 8px);
	background-color: var(--wp--preset--color--zand);
}

/*
 * Bijna al het beeld in het archief is een flyer, en die zijn staand. Vandaar
 * twee dingen:
 *
 * - `object-position: center top`. Een staande flyer in een liggend kader
 *   bijsnijden vanuit het midden hakt de kop eraf, en juist daar staat waar het
 *   over gaat. Vanaf de bovenkant snijden houdt de titel heel.
 * - Op een breed scherm is het kader zelf staand (3:4). Dan valt er nauwelijks
 *   iets weg. Op een smal scherm ligt het kader, want een staande flyer over de
 *   volle breedte duwt de tekst een half scherm naar beneden.
 */
.sc-terugblik__beeld img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	aspect-ratio: 16 / 10;
}

.sc-terugblik__tekst {
	display: flex;
	flex-direction: column;
	gap: 9px;
	min-width: 0;
}

.sc-terugblik__kop {
	margin: 0;
	font-size: var(--wp--preset--font-size--kop-4);
	line-height: 1.16;
	overflow-wrap: break-word;
}

.sc-terugblik__kop a {
	color: inherit;
	text-decoration: none;
}

/* De hele regel is het tapdoel, net als bij een open plek. */
.sc-terugblik__kop a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
}

.sc-terugblik:has(.sc-terugblik__kop a:focus-visible) {
	outline: 3px solid var(--wp--preset--color--groen);
	outline-offset: 3px;
}

.sc-terugblik__kop a:focus-visible {
	outline: none;
}

.sc-terugblik__kort {
	margin: 0;
	color: var(--wp--preset--color--grijs);
}

.sc-terugblik__actie {
	margin: 0;
}

.sc-terugblik__actie .sc-plek__knop {
	width: 100%;
}

.sc-terugblik:hover .sc-plek__knop {
	background-color: var(--wp--preset--color--inkt);
}

/*
 * Vanaf 700px naast elkaar: beeld, tekst, knop. Daaronder blijft alles gestapeld,
 * want op 360px is er geen ruimte voor drie kolommen en is een knop over de volle
 * breedte makkelijker te raken met een duim.
 */
@media (min-width: 700px) {
	.sc-terugblik {
		flex-direction: row;
		align-items: center;
		gap: var(--wp--preset--spacing--40);
	}

	.sc-terugblik__beeld {
		width: 150px;
	}

	.sc-terugblik__beeld img {
		aspect-ratio: 3 / 4;
	}

	.sc-terugblik__tekst {
		flex: 1 1 auto;
	}

	.sc-terugblik__actie {
		flex: none;
	}

	.sc-terugblik__actie .sc-plek__knop {
		width: auto;
	}
}

.sc-plek__feit--kaartje::before {
	-webkit-mask-image: var(--sc-teken-kaartje);
	mask-image: var(--sc-teken-kaartje);
}

/* De standregel in het midden van de paginering. Grijs, want het is geen knop:
   hij vertelt alleen waar je bent. */
.sc-paginering__stand {
	color: var(--wp--preset--color--grijs);
	font-weight: 600;
}

/*
 * Een zin die eruit springt in een artikel.
 *
 * Geen blockquote: het is geen citaat van iemand anders maar de eigen zin waar
 * het stuk om draait. Groen en niet rood, want rood is in dit merk het accent
 * voor urgentie en niet voor nadruk. Zie CLAUDE.md §5.
 */
.sc-uitgelicht {
	margin-block: var(--wp--preset--spacing--40);
	padding-inline-start: var(--wp--preset--spacing--30);
	border-inline-start: 4px solid var(--wp--preset--color--groen);
	font-size: var(--wp--preset--font-size--groot, 1.25rem);
	font-weight: 600;
	line-height: 1.42;
}

/*
 * De paginering van het archief in drie gelijke vakken.
 *
 * `space-between` werkte niet: op de eerste pagina is er geen knop Recenter, en
 * het lege element dat daarvoor in de plaats komt is nul pixels breed. Dan
 * schuift "Pagina 1 van 2" naar links terwijl hij in het midden hoort. Met een
 * raster van 1fr, auto, 1fr staat de stand altijd precies in het midden en
 * plakken de knoppen aan de randen, of ze er nu allebei zijn of niet.
 *
 * Alleen voor deze pager en niet voor die van de blog: dat is een blok van
 * WordPress dat een ontbrekende knop helemaal weglaat in plaats van er ruimte
 * voor te laten, en dan klopt een raster van drie juist niet meer.
 */
.sc-paginering--archief {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
}

.sc-paginering--archief > :first-child {
	justify-self: start;
}

.sc-paginering--archief > :last-child {
	justify-self: end;
}

.sc-plek__feit--mensen::before {
	-webkit-mask-image: var(--sc-teken-mensen);
	mask-image: var(--sc-teken-mensen);
}

/*
 * Het beeldvlak van een blogkaart zonder uitgelichte afbeelding.
 *
 * Schuine strepen in twee zachte merkkleuren. Zo houdt elke kaart dezelfde
 * verhouding en blijft een rij even hoog, ook als er één kaart met foto tussen
 * staat. Het patroon is bewust flauw: het is achtergrond, geen mededeling.
 */
.sc-kaart__beeld--leeg {
	background-color: var(--wp--preset--color--zand);
	background-image: repeating-linear-gradient(
		135deg,
		var(--wp--preset--color--groen-zacht) 0 14px,
		var(--wp--preset--color--zand) 14px 28px
	);
}

/*
 * De vergrootknop van de lightbox.
 *
 * WordPress zet hem standaard op twintig bij twintig pixels. Dat is te klein om
 * met een duim te raken; §8, punt 1 vraagt om minstens 44 bij 44. De knop wordt
 * dus groter, niet alleen zijn raakvlak: een onzichtbaar vergroot gebied zou hier
 * over de foto heen liggen en de lightbox openen waar je hem niet ziet.
 */
.wp-lightbox-container button.lightbox-trigger {
	width: var(--wp--custom--tap--maat);
	height: var(--wp--custom--tap--maat);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--wp--custom--radius--klein, 8px);
}

.wp-lightbox-container button.lightbox-trigger svg {
	width: 20px;
	height: 20px;
}

/* En de sluitknop in de overlay zelf, die staat standaard op 40 bij 40. */
.wp-lightbox-overlay .wp-lightbox-close-button,
.wp-lightbox-overlay .close-button {
	width: var(--wp--custom--tap--maat);
	height: var(--wp--custom--tap--maat);
	min-width: var(--wp--custom--tap--maat);
	min-height: var(--wp--custom--tap--maat);
}