/*
 * Vogelklas Karel Schot — stylesheet van het thema.
 *
 * Alles wat theme.json wél kan (kleuren, letters, ruimte, knoppen, links)
 * staat daar en niet hier. Dit bestand is voor de rest: de reset en, vanaf
 * fase 2, de zijbalk, de doneer-knop en de blok-stijlen.
 *
 * Laadt op de site en in de blok-editor, zodat het beeld gelijk blijft.
 */

/* ---------- Reset ---------- */

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

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

/*
 * Een iframe krijgt wel de breedtebegrenzing, maar géén `height: auto`.
 * Een iframe heeft geen intrinsieke verhouding: `height: auto` laat hem
 * inzakken naar de standaardhoogte van 150px, ongeacht het height-attribuut
 * in de markering. De plattegrond op Contact (pagina 16) staat daarom op een
 * eigen hoogte van 600px, en de video-embeds houden hun 16:9 uit
 * responsive-embeds.
 */
iframe {
	max-width: 100%;
}

img {
	display: block;
}

/*
 * De focusrand: een dubbele ring, licht binnen en donker buiten.
 *
 * WAAROM NIET currentColor
 * Dat was de eerste opzet en die is thema-breed onbetrouwbaar. De rand wordt
 * búiten het element getekend, in de kleur die de tékst op dat moment heeft — en
 * die tekstkleur slaat bij focus juist om. theme.json zet `text: zand` op elke
 * knop in focus, dus een ghost-knop op de zand pagina kreeg een zand rand op een
 * zand achtergrond: onzichtbaar. Hetzelfde gold voor de sociale iconen in de
 * voettekst en voor de doneer-knop.
 *
 * WAAROM TWEE RINGEN EN NIET ÉÉN VASTE KLEUR
 * Eén kleur kan niet tegelijk werken op zand, op wit, op olijf en op een foto.
 * Twee ringen wel: welke ondergrond er ook achter zit, minstens één van de twee
 * steekt eraf, en tegen elkaar hebben ze 11:1. De box-shadow legt eerst een
 * ring van 2px zand tegen het element aan; outline-offset schuift de inkt rand
 * daar precies omheen.
 *
 * Gemeten contrasten (WCAG vraagt 3:1 voor een focusrand):
 *   inkt op zand 11,33:1 · inkt op wit 12,63:1 · zand op olijf 5,57:1 ·
 *   zand op rood 6,08:1 · zand op inkt 11,33:1.
 * Ter vergelijking, waarom één donkere ring niet genoeg is: inkt op olijf is
 * 2,03:1 en haalt de norm dus niet. Daar doet de zand ring het werk.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--inkt);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--wp--preset--color--zand);
}

/* ---------- Koptekst: balk op mobiel, vaste zijbalk vanaf 1000px ---------- */

/*
 * De koptekst (parts/header.html, klasse .vk-kop) staat vast op het scherm:
 * mobiel als witte balk bovenaan, vanaf 1000px als witte zijbalk links over
 * de volle hoogte. De rest van de pagina schuift precies evenveel op, zodat
 * er geen horizontale schuifbalk komt en niets onder de balk verdwijnt.
 *
 * Twee maten, allebei op één plek:
 *   --vk-balk-hoogte  hoogte van de mobiele balk;
 *   --vk-zijbalk      breedte van de zijbalk (260px, vanaf 1200px 340px).
 *
 * Het opschuiven gebeurt met margin op .wp-site-blocks, niet met padding op
 * body. De paginamarge van theme.json (useRootPaddingAwareAlignments) staat
 * namelijk als --wp--style--root--padding-* op body; die laten we met rust,
 * zodat alignfull-blokken hun negatieve marges houden en tot aan de
 * rechterrand blijven lopen.
 *
 * Ook de ruimte voor de mobiele balk is een margin en geen padding. WordPress
 * zet zelf `padding-top: var(--wp--style--root--padding-top)` op
 * .wp-site-blocks; zouden wij die padding overschrijven, dan verdwijnt een
 * bovenmarge die later in theme.json gezet wordt wél in de blok-editor maar
 * niet op de site. Met een margin blijft de regel van WordPress staan en komt
 * onze ruimte er netjes bovenop.
 */

:root {
	--vk-balk-hoogte: 60px;
	--vk-zijbalk: 0px;
	--vk-adminbalk: 0px;
}

/*
 * De hoogte van de adminbalk van WordPress, als één variabele voor het hele
 * thema: de koptekst hieronder en de zwevende doneer-knop verderop rekenen er
 * allebei mee. Nul voor bezoekers; alleen ingelogde beheerders zien de balk.
 *
 * Twee media queries zónder bovengrens, en niet een bereik met max-width. Een
 * bovengrens laat een gaatje bij een gebroken vensterbreedte (browserzoom op
 * Windows levert bijvoorbeeld 782,5px op), en dan zou er geen van beide gelden.
 * De regel vanaf 783px staat later in het bestand en wint dus vanaf daar.
 *
 * Beneden 600px is #wpadminbar geen vaste balk maar scrollt hij mee; daar mag
 * er dus niets bij, anders blijft er na het scrollen een leeg gat van 46px
 * boven de koptekst staan. Vandaar dat de variabele daar 0 blijft.
 */
@media screen and (min-width: 600px) {
	body.admin-bar {
		--vk-adminbalk: 46px;
	}
}

@media screen and (min-width: 783px) {
	body.admin-bar {
		--vk-adminbalk: 32px;
	}
}

/*
 * Ankerlinks (de skip-link bovenaan, en de vanginstructies op Dier gevonden)
 * moeten niet achter de vaste balk landen.
 */
html {
	scroll-padding-top: var(--vk-balk-hoogte);
}

.vk-kop {
	position: fixed;
	/* Onder de adminbalk; zie --vk-adminbalk hierboven. Nul voor bezoekers. */
	top: var(--vk-adminbalk);
	left: 0;
	right: 0;
	z-index: 900;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	height: var(--vk-balk-hoogte);
	padding: 0 20px;
	/* Uit het oude ontwerp (style-small.css). */
	box-shadow: 0 0 20px rgba(50, 50, 50, 0.10);
}

/* De blokopmaak zet marge tussen de kinderen; in een balk willen we die niet. */
.vk-kop > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.wp-site-blocks {
	margin-top: var(--vk-balk-hoogte);
}

/*
 * WordPress zet om elk template-part een omhulsel — hier <header>. Dat blijft
 * als leeg element in de stroom staan, want de koptekst zelf is fixed. De
 * blokopmaak zet er vervolgens blockGap (24px) tussen dat lege omhulsel en het
 * blok erna, waardoor de inhoud 24px lager begint dan --vk-balk-hoogte doet
 * vermoeden. Die ene marge halen we weg; de rest van de blockGap blijft staan.
 *
 * De selector hangt bewust aan de rol van de koptekst en niet aan een positie
 * zoals :first-child + *: hij moet "het blok direct ná de koptekst" betekenen,
 * wat dat blok ook is. Komt er later iets tussen de koptekst en main — de
 * doneer-knop, een banner — dan verliest dát blok de marge en niet per ongeluk
 * het verkeerde.
 *
 * De rol komt uit WordPress zelf en niet uit het template: het omhulsel van een
 * template-part krijgt de tag van zijn gebied, en het gebied van deze part
 * staat in theme.json onder templateParts ("header"). Nagemeten met een
 * template-part-blok zonder tagName én zonder area: het omhulsel blijft
 * <header class="wp-block-template-part">. Er hoeft in een nieuw template dus
 * niets te worden onthouden; de voettekst valt er niet onder, want die krijgt
 * om dezelfde reden <footer>.
 */
.wp-site-blocks > header.wp-block-template-part + * {
	margin-block-start: 0;
}

/* Het logo: in de balk op ooghoogte, in de zijbalk over de volle breedte. */
.vk-kop .vk-logo {
	margin: 0;
}

/* Zonder dit blijft er onder het plaatje een restje regelhoogte staan. */
.vk-kop .vk-logo a {
	display: block;
}

/*
 * De verhouding van het logobestand (400 bij 200). Daarmee weet de browser de
 * maat al voordat het plaatje binnen is en verspringt de pagina niet.
 */
.vk-logo img {
	aspect-ratio: 400 / 200;
}

.vk-kop .vk-logo img {
	height: 40px;
	width: auto;
}

/*
 * Het logo bovenin de mobiele overlay. Het navigatieblok haalt zijn inhoud uit
 * de navigatiepost en laat daar geen afbeelding tussen, dus staat het logo in
 * parts/header.html een tweede keer, in de groep .vk-kop__overlay-logo.
 *
 * WAAR HET STAAT, EN WAAROM DAT NIET MET CSS ALLEEN KAN
 * assets/js/overlay-logo.js verhuist die groep bij het laden van de pagina naar
 * binnen in de dialoog van het navigatieblok, als eerste kind van de inhoud van
 * de overlay. Dat moest, want daarbuiten was de link met Tab niet te bereiken
 * (de dialoog heeft aria-modal en een focusval) en scrolde hij niet mee met de
 * overlay, waardoor hij op een kort scherm over de menu-items heen kwam te
 * liggen. Zie de uitleg in dat bestand.
 *
 * Daardoor is hier geen position: fixed, geen z-index en geen aparte
 * adminbalk-verrekening meer nodig: het logo staat gewoon in de stroom van de
 * overlay.
 *
 * De groep is standaard verborgen en wordt alleen zichtbaar op zijn nieuwe plek
 * én met de overlay open. Die twee voorwaarden dekken alle drie de standen af:
 * zonder JavaScript blijft de groep in de balk staan en dus verborgen; vanaf
 * 1000px staat dezelfde container als zijbalk open, en daar hoort geen tweede
 * logo onder het eerste.
 */
.vk-kop__overlay-logo {
	display: none;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .vk-kop__overlay-logo {
	display: block;
	/* Lucht tussen het logo en het eerste menu-item, zoals in het oude ontwerp. */
	margin-bottom: 30px;
}

/*
 * 100 bij 50. De maat staat op het plaatje zelf en niet op de groep: de regel
 * voor het logo in de balk (40px hoog) geldt ook hier, want deze groep zit ook
 * na de verhuizing nog in .vk-kop.
 */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .vk-kop__overlay-logo .vk-logo img {
	width: 100px;
	height: auto;
}

@media screen and (min-width: 1000px) {
	:root {
		--vk-zijbalk: 260px;
	}

	/* Geen vaste balk meer boven de inhoud, dus ook niets af te trekken. */
	html {
		scroll-padding-top: 0;
	}

	.vk-kop {
		right: auto;
		bottom: 0;
		width: var(--vk-zijbalk);
		height: auto;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
		padding: 0;
		overflow-y: auto;
	}

	.vk-kop .vk-logo img {
		width: 100%;
		height: auto;
	}

	.wp-site-blocks {
		margin-top: 0;
		margin-left: var(--vk-zijbalk);
	}
}

@media screen and (min-width: 1200px) {
	:root {
		--vk-zijbalk: 340px;
	}
}


/* ---------- De zwevende doneer-knop ---------- */

/*
 * De part parts/doneer-knop.html (klasse .vk-doneer) staat vast rechtsboven in
 * beeld. De knop zelf — rand, kleuren, de veer — staat in
 * assets/css/blok-button.css bij de blokstijl `doneer`; hier staat alleen waar
 * hij hangt en hoe hij op mobiel compacter wordt.
 *
 * De hoogte van de adminbalk komt uit --vk-adminbalk, dezelfde variabele die de
 * koptekst hierboven gebruikt. Eén mechanisme voor één maat: zo kunnen er geen
 * twee regels om dezelfde `top` vechten en klopt de knop ook bij een gebroken
 * vensterbreedte nog met de balk.
 */

/*
 * Mobiel: onder de vaste balk in plaats van erin. De balk is maar 60px hoog en
 * heeft rechts al de vogel-menuknop van 44px staan; een tweede knop ernaast
 * wordt op 320px een gedrang. Onder de balk hangen is bovendien te bewijzen:
 * de knop begint waar de balk ophoudt, dus overlappen kan niet.
 *
 * Vanaf 1000px is de koptekst een zijbalk links en is de bovenrand vrij; daar
 * staat de knop op 20px van boven en rechts, zoals in het oude thema
 * (style.css regel 332).
 */
.vk-doneer {
	position: fixed;
	top: calc(var(--vk-adminbalk) + var(--vk-balk-hoogte) + 8px);
	right: 10px;
	/*
	 * Boven de inhoud, onder de koptekst. 890 en niet iets boven de 100000 van
	 * de menu-overlay: die overlay zit ín .vk-kop, en .vk-kop heeft zelf
	 * z-index 900 en dus een eigen stapelcontext. Alles daarbinnen — de
	 * overlay, het logo erin — wordt tegen de rest van de pagina afgewogen als
	 * die ene 900. Een knop op 950 zou dus niet onder de overlay verdwijnen
	 * maar er dwars overheen komen te liggen. Nagemeten met de overlay open.
	 *
	 * De koptekst zelf komt nergens over de knop heen: de balk is 60px hoog en
	 * de knop begint daaronder; vanaf 1000px staat de koptekst links en de knop
	 * rechts.
	 */
	z-index: 890;
	margin: 0;
	transition: opacity 0.4s ease-in-out, visibility 0s;
}

/* De knopblokken eromheen zetten zelf ruimte; in een zwever willen we die niet. */
.vk-doneer .wp-block-buttons {
	margin: 0;
	gap: 0;
}

/*
 * COMPACTER OP MOBIEL — alleen het woord, geen veer.
 *
 * Het oude thema verborg de knop onder 800px. Dit thema toont hem juist, want
 * mobiele bezoekers doneren met iDEAL. Compacter maken kan op twee manieren:
 * de veer houden en het woord weglaten, of andersom. Het wordt het woord dat
 * blijft: een veertje zonder tekst leest niemand als "doneren", en dan is de
 * knop wel klein maar niet meer bruikbaar. Het woord draagt de oproep, de veer
 * is versiering.
 *
 * Wat er verder afgaat: de lettergrootte van normaal naar klein en de
 * binnenruimte van 20px naar 12px. De 44px hoogte blijft staan — dat is het
 * raakvlak, daar mag niets vanaf.
 *
 * Het gewicht van deze selectors (0,4,0) ligt met opzet één klasse boven dat van
 * blok-button.css (0,3,0). Zo winnen ze op gewicht en niet op laadvolgorde;
 * wp_enqueue_block_style() mag zijn CSS namelijk ook inline zetten, en dan ligt
 * die volgorde niet vast.
 */
.vk-doneer .wp-block-button.is-style-doneer > .wp-block-button__link {
	padding: 0 12px;
	font-size: var(--wp--preset--font-size--klein);
}

.vk-doneer .wp-block-button.is-style-doneer > .wp-block-button__link::before {
	display: none;
}

/*
 * De part laat een leeg omhulsel in de stroom achter, want de knop zelf zweeft.
 * De blokopmaak zet daar blockGap onder, waardoor de inhoud 24px lager begint
 * dan de koptekst-regel hierboven bedoelt. Dezelfde marge, dezelfde reden: weg
 * ermee.
 *
 * De selector eist met opzet de hele keten koptekst → doneer-knop → inhoud, en
 * niet alleen "wat er na de doneer-knop komt". Reden: de regel gaat ervan uit
 * dat het blok erna zijn bovenmarge kan missen, en dat klopt alleen bovenaan de
 * pagina, waar de koptekst er toch al vast overheen ligt. Zou de part ergens
 * anders staan — de knop zweeft, dus onderaan een template tussen de inhoud en
 * de voettekst is net zo goed te verdedigen — dan zou de voettekst stil zijn
 * ruimte kwijtraken. Zo geldt de regel alleen in de stand waarvoor hij bedoeld
 * is, en verandert er niets als fase 3 de part elders zet.
 */
.wp-site-blocks > header.wp-block-template-part + .wp-block-template-part:has(> .vk-doneer) + * {
	margin-block-start: 0;
}

/*
 * SINDS 3.1 STAAT ER IETS TUSSEN DE KNOP EN <main> — EN DAT MOET DEZELFDE
 * MARGE KWIJT.
 *
 * De regel hierboven pakt "het eerste blok na de doneer-knop", wat dat blok ook
 * is. Tot 3.0 was dat altijd <main>. In 3.1 dragen de sjablonen de band die
 * voorheen in de pagina-inhoud stond: templates/front-page.html zet de
 * hero-cover tussen de knop en <main>, templates/page-beeld.html de beeldband
 * uit de uitgelichte afbeelding. Die twee vangen de regel hierboven nu af, en
 * <main> krijgt daarna gewoon de blockGap van .wp-site-blocks — een gat van
 * 24px tussen de foto en de eerste tekst, waar het oude ontwerp er geen heeft.
 *
 * Deze regel zet die marge weg. Hij noemt de twee blokken bij naam in plaats
 * van "wat er na de band ook komt", zodat hij alleen geldt waar de band
 * daadwerkelijk tegen de inhoud aan hoort te sluiten.
 *
 * MET ÉN ZONDER BAND
 * core/post-featured-image rendert een lege string zonder uitgelichte
 * afbeelding (wp-includes/blocks/post-featured-image.php: `if ( ! $featured_image )
 * return '';`). Er staat dan helemaal geen element tussen de knop en <main>,
 * valt <main> weer onder de regel hierboven, en klopt het allebei.
 */
.wp-site-blocks > .wp-block-cover.vk-hero + main,
.wp-site-blocks > .wp-block-post-featured-image.is-style-beeldband + main {
	margin-block-start: 0;
}

/*
 * Verborgen zolang de hero in beeld is; assets/js/doneer-knop.js zet de klasse.
 * Zonder JavaScript komt die klasse er nooit en blijft de knop dus staan.
 *
 * visibility hoort erbij: alleen opacity 0 laat de knop met Tab bereikbaar en
 * met de muis klikbaar, en dat is een knop die er niet staat. De vertraging op
 * visibility laat het wegvagen eerst afmaken.
 */
.vk-doneer--weg {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease-in-out, visibility 0s linear 0.4s;
}

@media (prefers-reduced-motion: reduce) {
	.vk-doneer,
	.vk-doneer--weg {
		transition: none;
	}
}

@media screen and (min-width: 1000px) {
	.vk-doneer {
		top: calc(var(--vk-adminbalk) + 20px);
		right: 20px;
	}

	/* Vanaf hier is er ruimte zat: de hele knop, veer en al. */
	.vk-doneer .wp-block-button.is-style-doneer > .wp-block-button__link {
		padding: 0 20px;
		font-size: var(--wp--preset--font-size--normaal);
	}

	.vk-doneer .wp-block-button.is-style-doneer > .wp-block-button__link::before {
		display: block;
	}
}

/* ---------- De voettekst ---------- */

/*
 * parts/footer.html, klasse .vk-voet. Vier blokken naast elkaar op desktop,
 * onder elkaar op mobiel — dat doet het kolommenblok zelf, dus staat er hier
 * geen enkele media query voor.
 *
 * Met opzet géén achtergrondkleur: in het oude thema had #footer er ook geen en
 * viel hij dus terug op het zand van body (style.css regel 65). De olijf balk
 * uit het skelet van fase 1 was een plaatshouder, geen ontwerp.
 *
 * Koppen olijf, links inkt — style.css regels 1926 en 1931.
 */

/*
 * De ruimte tussen de vier blokken. Het oude thema zette er 60px tussen op
 * brede schermen en 30px op smalle (style.css regel 1900, style-large.css
 * regel 316); ruimtestap 50 loopt precies van 30 naar 60px mee met de
 * vensterbreedte. Dezelfde maat geldt onder elkaar op mobiel, want dan wordt
 * het de ruimte tussen de rijen.
 */
.vk-voet .vk-voet__kolommen {
	gap: var(--wp--preset--spacing--50);
}

/*
 * Het kolommenblok lijnt de lijstjes al uit; de opsommingstekens en de inspring
 * die de browser er standaard bij zet, moeten weg. De marges niet: die komen
 * van de blokopmaak en houden de vier koppen op dezelfde afstand van hun lijst.
 */
.vk-voet .vk-voet__lijst {
	padding-left: 0;
	list-style: none;
}

/*
 * Links in de voettekst zijn inkt en niet olijf, met een streep eronder die pas
 * bij hover kleur krijgt. Zo verspringt er niets: de streep staat er altijd al,
 * alleen doorzichtig. Uit style.css regel 1931.
 *
 * Het gewicht (0,1,1 voor de gewone staat, 0,2,1 voor hover) ligt boven dat van
 * theme.json, dat zijn linkregels in :where() zet en daarmee op 0,1,0 uitkomt.
 */
.vk-voet a {
	color: var(--wp--preset--color--inkt);
	border-bottom: 1px solid transparent;
	text-decoration: none;
}

.vk-voet a:hover,
.vk-voet a:focus {
	color: var(--wp--preset--color--inkt);
	border-bottom-color: currentColor;
	text-decoration: none;
}

/*
 * Het adresblok is een <address>; browsers zetten die standaard cursief.
 *
 * De lijst zit er één groep dieper in dan bij de andere drie blokken, en kreeg
 * daardoor de ruimte tussen blokken twee keer: één keer om de groep en één keer
 * om de lijst erin. De binnenste gaat eruit, zodat de vier koppen op dezelfde
 * afstand van hun lijst staan.
 */
.vk-voet .vk-voet__adres {
	font-style: normal;
}

.vk-voet .vk-voet__adres > * {
	margin-block-start: 0;
}

/*
 * De drie sociale netwerken: een rondje van 40px met een inkt omtrek op niets,
 * bij hover inkt gevuld met een zand tekening. Uit style.css regel 1947.
 *
 * De blokstijl "alleen logo" haalt de vlakken en de binnenruimte van WordPress
 * zelf al weg; wat overblijft is het rondje eromheen. De klasse staat twee keer
 * in de selector, zodat deze regels op gewicht winnen van de core-stylesheet
 * van het blok.
 */
.vk-voet__social.vk-voet__social {
	gap: 5px;
}

.vk-voet__social.vk-voet__social .wp-social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--wp--preset--color--inkt);
	border-radius: 50%;
	background-color: transparent;
	color: var(--wp--preset--color--inkt);
	transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out;
}

/*
 * De link vult het hele rondje, zodat niet alleen de tekening van 20px
 * aanklikbaar is. De ronde hoek erbij, anders tekent de focusrand een vierkant
 * om een cirkel.
 */
.vk-voet__social.vk-voet__social .wp-social-link a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0;
	border-bottom: 0;
	border-radius: 50%;
	color: inherit;
}

/*
 * Het raakvlak wordt 44px, de cirkel blijft 40px.
 *
 * Twee eisen spraken elkaar tegen: het oude ontwerp tekent een rondje van 40px
 * (style.css regel 1947) en het plan eist overal een raakvlak van minstens
 * 44x44. Een cirkel van 44px zou het beeld veranderen, een raakvlak van 40px
 * de eis breken. Met een onzichtbaar vlak over de link heen kan het allebei.
 *
 * De rondjes staan 45px uit elkaar (40 + 5 tussenruimte), dus twee raakvlakken
 * van 44px raken elkaar net niet: 22 + 22 = 44 tegen 45 hart-op-hart.
 */
.vk-voet__social.vk-voet__social .wp-social-link a::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
}

/*
 * De binnenste ring van de focusrand terugzetten. WordPress zet in de
 * core-stylesheet van het blok `box-shadow: none` op deze link
 * (wp-includes/blocks/social-links/style.css regel 9-13), en dat weegt zwaarder
 * dan de :where()-reset bovenaan dit bestand. De inkt buitenrand komt er wel
 * doorheen — op zand is die op zichzelf al ruim zichtbaar — maar dan zou dit
 * ene element als enige een halve focusrand hebben.
 */
.vk-voet__social.vk-voet__social .wp-social-link a:focus-visible {
	box-shadow: 0 0 0 2px var(--wp--preset--color--zand);
}

.vk-voet__social.vk-voet__social .wp-social-link svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.vk-voet__social.vk-voet__social .wp-social-link:hover,
.vk-voet__social.vk-voet__social .wp-social-link:focus-within {
	background-color: var(--wp--preset--color--inkt);
	color: var(--wp--preset--color--zand);
}

@media (prefers-reduced-motion: reduce) {
	.vk-voet__social.vk-voet__social .wp-social-link {
		transition: none;
	}
}

/*
 * De afsluitende regel: 60px lucht, een olijf streep, en rechts het jaartal.
 * Uit style.css regel 1911. Randen kan een blok niet zelf zetten, vandaar hier.
 *
 * De regel is een rij van drie alinea's — "©", het jaartal, de naam — omdat
 * alleen het jaartal uit PHP komt en een binding op `content` de héle alinea
 * vervangt. Zie parts/footer.html en het commentaar bij de bindings in
 * functions.php. Met een kleine tussenruimte leest het als één zin.
 */
.vk-voet .vk-voet__copyright {
	margin-block-start: 60px;
	padding-top: 10px;
	border-top: 1px solid var(--wp--preset--color--olijf);
	gap: 0.35em;
}

.vk-voet .vk-voet__copyright > p {
	margin-block: 0;
}

/* ---------- ANBI-badge ---------- */

/*
 * De badge is een part en staat alleen in templates/page-doneren.html, niet in
 * templates/index.html.
 *
 * Tot 3.0 hoorde hier ook de bodemband bij; die is sinds 3.1 een bouwsteen en
 * staat in assets/css/blok-image.css.
 *
 * De maat staat hier en niet op de <img>, om dezelfde reden als bij het logo —
 * zie de binding vogelklas/thema-bestand in functions.php
 * (vogelklas_binding_bestanden() en vogelklas_binding_thema_bestand()).
 * aspect-ratio houdt de plek vrij zolang het plaatje nog niet binnen is,
 * zodat de pagina niet verspringt.
 */

/*
 * DE ANBI-BADGE — zweeft rechtsboven, alleen op de doneren-pagina.
 *
 * Uit style-large.css regel 7 (#content #anbi): vast rechtsboven op 20px van de
 * hoek, 76 bij 60. Die stylesheet gold alleen vanaf 800px; onder die breedte
 * was de badge in het oude thema een lege, onzichtbare link. Dit thema toont
 * hem overal — een ANBI-keurmerk is juist op een donatiepagina informatie die
 * een bezoeker wil zien — maar mobiel onder de vaste balk in plaats van erin,
 * om dezelfde reden als bij de doneer-knop hierboven: in een balk van 60px met
 * de vogel-menuknop erin is geen plek.
 *
 * De maten en de plek van de doneer-knop worden hergebruikt (--vk-adminbalk,
 * --vk-balk-hoogte). Ze botsen nooit: templates/page-doneren.html is het enige
 * template met de ANBI-badge, en juist daar staat de doneer-knop niet.
 */
.vk-anbi {
	position: fixed;
	top: calc(var(--vk-adminbalk) + var(--vk-balk-hoogte) + 8px);
	right: 10px;
	/* Zelfde laag als de doneer-knop; zie de uitleg daar over z-index 890. */
	z-index: 890;
	margin: 0;
}

/* Zonder dit blijft er onder het plaatje een restje regelhoogte staan — zelfde
   reden als bij het logo in de koptekst hierboven. */
.vk-anbi a {
	display: block;
}

/* Het ware formaat van anbi.png: 76 bij 60. */
.vk-anbi img {
	width: 76px;
	aspect-ratio: 76 / 60;
}

/*
 * De part laat, net als de doneer-knop, een leeg omhulsel in de stroom achter.
 * Dezelfde marge, dezelfde reden, dezelfde keten — zie de uitgebreide uitleg
 * bij .vk-doneer hierboven.
 */
.wp-site-blocks > header.wp-block-template-part + .wp-block-template-part:has(> .vk-anbi) + * {
	margin-block-start: 0;
}

@media screen and (min-width: 1000px) {
	.vk-anbi {
		top: calc(var(--vk-adminbalk) + 20px);
		right: 20px;
	}
}

/* ---------- De 93 klassieke berichten ---------- */

/*
 * De berichten zijn nooit in blokken omgezet: hun post_content is nog gewone
 * HTML uit de oude editor, met `alignleft`, `alignright`, `aligncenter` en
 * `[caption]`-omhulsels erin. templates/single.html toont die inhoud in
 * core/post-content en dat blok is er niet op gebouwd. Wat hier staat, is wat
 * er nodig is om die inhoud te laten renderen zoals hij bedoeld was.
 *
 * WAAROM post-content over de volle breedte staat
 * Het beeldband-blok dat local/scripts/migratie/berichten.php vóór de inhoud
 * zet, heeft `align: full` en moet dus tot aan de schermrand kunnen lopen.
 * Dat kan alleen als core/post-content zelf ook de volle breedte heeft; een
 * alignfull-blok wordt nooit breder dan zijn eigen omhulsel. Vandaar
 * `{"align":"full"}` op het post-content-blok in de templates.
 *
 * WAT DAT KOST, EN HOE HET HIERONDER WORDT TERUGBETAALD
 * De opmaak "constrained" van WordPress houdt gewone alinea's op 660px in het
 * midden, maar laat zwevende afbeeldingen (`alignleft`/`alignright`) met opzet
 * los — die gaan naar de rand van hun omhulsel. Nu dat omhulsel de volle
 * breedte heeft, zou een foto met `alignleft` een halve tekstkolom links van
 * de tekst komen te hangen. De twee regels hieronder zetten hem terug tegen de
 * tekstkolom aan: precies de helft van wat het omhulsel breder is dan de
 * tekst. Op een smal scherm is dat verschil nul en gebeurt er niets.
 *
 * Nagemeten op bericht 4631 (alignleft) en 653 (alignright met [caption])
 * naast https://www.vogelklas.nl.
 */
.wp-block-post-content.alignfull > .alignleft,
.wp-block-post-content.alignfull > .wp-caption.alignleft {
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2));
}

.wp-block-post-content.alignfull > .alignright,
.wp-block-post-content.alignfull > .wp-caption.alignright {
	margin-right: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2));
}

/*
 * De oude editor schreef `[caption]` uit als een <div class="wp-caption"> met
 * een vaste breedte in een style-attribuut en een <p class="wp-caption-text">
 * eronder. Dat omhulsel kent WordPress in een blok-thema niet meer, dus staan
 * de maten hier.
 *
 * `max-width: 100%` is er om de vaste breedte uit het style-attribuut te
 * temmen: op een telefoon staat daar zomaar 640px.
 */
.wp-block-post-content .wp-caption {
	max-width: 100%;
}

.wp-block-post-content .wp-caption img {
	width: 100%;
	height: auto;
}

.wp-block-post-content .wp-caption-text {
	margin-block: 0.5em 0;
	color: var(--wp--preset--color--grijs);
	font-size: var(--wp--preset--font-size--klein);
	text-align: center;
}

/*
 * De zwevers zelf. De reset bovenaan dit bestand zet `img { display: block }`,
 * wat de oude inline-afbeeldingen zou kunnen raken; met `float` is dat geen
 * probleem, want een zwevend element is toch al een blok. De marges zijn die
 * van de oude editor (style.css van WordPress zelf, 1em/1.5em).
 */
.wp-block-post-content .alignleft {
	float: left;
	margin-right: 1.5em;
	margin-bottom: 1em;
}

.wp-block-post-content .alignright {
	float: right;
	margin-left: 1.5em;
	margin-bottom: 1em;
}

.wp-block-post-content .aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/*
 * Een zwever mag niet uit de tekst hangen op een smal scherm: onder 640px komt
 * hij gewoon boven de tekst te staan, over de volle kolombreedte.
 */
@media screen and (max-width: 639px) {
	.wp-block-post-content .alignleft,
	.wp-block-post-content .alignright {
		float: none;
		margin-left: 0;
		margin-right: 0;
	}
}

/*
 * De galerij van de oude editor ([gallery], 8 berichten) is een <div
 * class="gallery"> met <dl class="gallery-item">'s erin. WordPress levert daar
 * zelf een stukje CSS voor mee, maar alleen in klassieke thema's; in een
 * blok-thema moet het hier staan.
 */
.wp-block-post-content .gallery {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin-block: var(--wp--preset--spacing--30);
}

.wp-block-post-content .gallery .gallery-item {
	flex: 1 1 140px;
	margin: 0;
	text-align: center;
}

.wp-block-post-content .gallery .gallery-icon img {
	width: 100%;
	height: auto;
}

.wp-block-post-content .gallery .gallery-caption {
	margin: 0.5em 0 0;
	color: var(--wp--preset--color--grijs);
	font-size: var(--wp--preset--font-size--klein);
}

/*
 * Een zwever hangt uit zijn omhulsel; zonder dit loopt de volgende alinea of
 * de knoppenrij eronder er stil omheen.
 */
.wp-block-post-content::after {
	content: "";
	display: table;
	clear: both;
}

/* ==========================================================================
   Fase 4b — de opmaak van de pagina-inhoud
   ========================================================================== */

/*
 * WAAROM EEN BAND IN DE PAGINA-INHOUD TOT DE SCHERMRAND LOOPT — EN WAAROM HIER
 * GEEN REGEL VOOR NODIG IS.
 *
 * Tot 3.0 zat elke pagina in één buitenste groep (`patterns/pagina-*.php`, met
 * `templateLock: contentOnly`) en droeg díé groep de rekensom hieronder. Sinds
 * 3.1 is er geen buitenste groep meer: de blokken staan rechtstreeks in
 * `core/post-content`. Dat blok staat in alle sjablonen als
 * `{"align":"full","layout":{"type":"constrained"}}` en neemt de rol van die
 * groep één op één over.
 *
 * DE KETTING, VAN BUITEN NAAR BINNEN
 * `<main>` is constrained en krijgt daarom van WordPress de klasse
 * `has-global-padding` (wp-includes/block-supports/layout.php, bij
 * `useRootPaddingAwareAlignments`), en daarmee de kantlijn van de site als
 * binnenruimte. `core/post-content` is óók constrained en krijgt diezelfde
 * klasse, plus `alignfull`. Die twee samen zijn precies wat nodig is:
 *
 *   - `.has-global-padding > .alignfull` geeft post-content een negatieve
 *     buitenmarge zo groot als de kantlijn, zodat het blok tot de rand van
 *     `<main>` loopt;
 *   - `.has-global-padding { padding-inline: … }` geeft post-content diezelfde
 *     kantlijn terug als binnenruimte, zodat gewone tekst niet tegen de rand
 *     plakt;
 *   - en een `alignfull`-kind daarbinnen krijgt op zijn beurt weer die
 *     negatieve marge en komt dus precies op de schermrand uit.
 *
 * DE UITZONDERING DIE DIT MOGELIJK MAAKT
 * WordPress zet de binnenruimte van een gestápelde `has-global-padding` normaal
 * op 0 en de negatieve marge van zijn `alignfull`-kinderen ook — anders zou
 * elke laag opnieuw een kantlijn optellen. Die regel staat in
 * wp-includes/class-wp-theme-json.php (r. 4239 en 4241) en zondert
 * `:not(.wp-block-block, .alignfull)` uit. `core/post-content` staat in onze
 * sjablonen op `align: full` en valt dus binnen die uitzondering: hij houdt
 * zijn binnenruimte en zijn kinderen hun negatieve marge. Haal `align: full`
 * van post-content af en alle banden komen een kantlijn te ver naar binnen te
 * staan. Laat dat attribuut dus staan zoals het is.
 */

/*
 * EEN RIJ DIE OP EEN TELEFOON NIET HOEFT
 *
 * Op "Dier gevonden" staat dezelfde rij snelkoppelingen boven alle vier de
 * delen. Op een breed scherm helpt dat: je springt van deel naar deel zonder
 * terug te scrollen. Op een telefoon staan die vier knoppen onder elkaar en is
 * elke herhaling een halve schermlengte die je moet doorscrollen om bij de
 * tekst te komen. De eerste rij blijft dus staan, de andere drie niet.
 *
 * `display: none` en niet alleen visueel verbergen: de rij is een herhaling van
 * iets wat al bovenaan de pagina staat, dus een schermlezer heeft er ook niets
 * aan.
 *
 * De klassenaam staat er drie keer. Dat is geen slordigheid: de rij is een
 * knoppenblok, en dat krijgt van WordPress zelf `display: flex` mee via
 * `.wp-block-buttons.is-layout-flex` — twee klassen, en die regel wordt ná
 * deze stylesheet in de pagina gezet. Eén of twee klassen weegt dus even zwaar
 * of lichter en verliest; drie wint. Nagemeten op de testpagina.
 */
@media screen and (max-width: 799px) {
	.vk-verberg-mobiel.vk-verberg-mobiel.vk-verberg-mobiel {
		display: none;
	}
}

/* ---------- Het formulier van VFB Pro ---------- */

/*
 * VFB Pro brengt zijn eigen structuur en zijn eigen opmaak mee. Die laten we
 * staan; hier gaat het alleen om de twee plekken waar het formulier anders
 * oogt dan de rest van de site: de verzendknop en de rand om een veld dat de
 * toetsenbordfocus heeft. Verder niets overschrijven — een update van de
 * plugin mag geen kapotte indeling opleveren.
 *
 * De knop krijgt dezelfde ghost-vorm als elke andere knop in het thema
 * (theme.json, elements.button); die regels hangen aan `.wp-element-button` en
 * raken een VFB-knop dus niet. Ze staan hier één keer letterlijk.
 */
.vfbp-form .vfb-form-control:focus {
	border-color: var(--wp--preset--color--olijf);
}

.vfbp-form button[type="submit"] {
	background: transparent;
	border: 2px solid var(--wp--preset--color--olijf);
	border-radius: 4px;
	color: var(--wp--preset--color--olijf);
	cursor: pointer;
	font-size: var(--wp--preset--font-size--normaal);
	font-weight: 700;
	line-height: 1.2;
	padding: 0.6rem 1.4rem;
	text-decoration: none;
}

.vfbp-form button[type="submit"]:hover,
.vfbp-form button[type="submit"]:focus {
	background: var(--wp--preset--color--olijf);
	color: var(--wp--preset--color--zand);
}