/* Vestjes Kermis — sitestijlen. (c) TwistedMinds, Gerry Uytdenhouwen — 2026-08-27 */

:root {
	--vk-max: 1280px;                /* breedte waarop de illustratie stopt met groeien */
	--vk-header-ratio: 3.1068;       /* 1280 / 412, gemeten op de geleverde header-asset */
	--vk-footer-ratio: 2.194;        /* 3368 / 1535 */

	/* Stelknoppen voor hoeveel de inhoud in de illustraties schuift. Op verzoek
	   van de klant (2026-09-03): de tekst mag hoger beginnen en verder in de
	   voetillustratie doorlopen, zodat het beeld links en rechts van de inhoud
	   staat in plaats van eronder.

	   Boven is een fractie, geen vaste pixelmaat. De speling tussen de onderkant
	   van het wordmerk en de eerste tekst is zelf evenredig met de illustratie:
	   63px op 1280, maar 39px op 782. Een vaste 50px eraf haalt liet de tekst
	   tussen 782 en 1024px dwars door de confetti lopen. Als fractie blijft de
	   speling op elke breedte gelijk.
	   Omrekenen: fractie = gewenste px / 412 (de gerenderde hoogte van de
	   headerillustratie op de ontwerpbreedte van 1280px).
	     40px -> 0.0971   50px -> 0.1214   60px -> 0.1456   70px -> 0.1699

	   Onder mag wel een vaste pixelmaat: de middelste 690px van de
	   voetillustratie is de bovenste 227px leeg, en op geen enkele geteste
	   breedte (375 t/m 1600) komt de inhoud in de buurt van die grens. */
	--vk-inzet-boven: 0.1214;   /* = 50px op 1280px breed */

	/* Extra inzet in de VOET op ruime schermen (klant, 2026-09-04): vanaf 1024px
	   mag de inhoud 50px verder in de voetillustratie zakken dan --vk-inzet-onder
	   hierboven al doet. Niet als hard breekpunt maar inlopend, zodat er geen
	   sprong zit bij het slepen van het venster. De ramp start op 781px en is op
	   1024px volledig; 0.2058 = 50 / (1024 - 781).
	   Gevolg voor de overlap met de illustratie: 58px op 782, 83px op 900,
	   103px op 1024 en 97px vanaf 1280 -- ruim binnen de lege zone, die op
	   1280px 227px diep is. */
	--vk-extra-onder: clamp(0px, (100vw - 781px) * 0.2058, 50px);
	--vk-inzet-onder: 100px;
}

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

/* ---- achtergrondlagen -------------------------------------------------- */
/* De illustratie loopt door achter de content; de tekst begint binnen de
   bovenste illustratie. Daarom staat dit op body en niet op losse banden. */

body {
	position: relative;
	background-color: var(--wp--preset--color--wit);
	background-image:
		image-set(
			url("../assets/img/header@1x.webp") 1x,
			url("../assets/img/header@1.5x.webp") 1.5x,
			url("../assets/img/header@2x.webp") 2x),
		image-set(
			url("../assets/img/footer@1x.webp") 1x,
			url("../assets/img/footer@1.5x.webp") 1.5x,
			url("../assets/img/footer@2x.webp") 2x);
	background-position: center top, center bottom;
	background-repeat: no-repeat, no-repeat;
	background-size: min(100%, var(--vk-max)) auto, min(100%, var(--vk-max)) auto;
	min-height: 100vh;

	/* De achtergrond van body wordt door de browser doorgegeven aan het canvas
	   en dus uitgelijnd tegen html, niet tegen body zelf. Zonder flow-root
	   ontsnapt de bovenmarge van .vk-footer onderaan uit body en eindigt body
	   24px hoger dan html -- de illustratie hangt dan aan een onderrand die
	   body niet heeft. Alles wat zich absoluut tegen body positioneert (de
	   vermelding rechtsonder) staat er dan 24px naast.
	   flow-root sluit die marge in zonder de paginahoogte te veranderen. */
	display: flow-root;
}

/* De maskergrens overlapt 1px met de illustratie. Zonder die overlap valt er
   bij oneven vensterbreedtes een witte haarlijn: de achtergrondafbeelding wordt
   gecentreerd op een halve pixel, de maskergrens rondt de andere kant op, en in
   dat kolommetje schildert geen van beide. */
/* ---- randaanvulling boven 1280px --------------------------------------- */
/* De header-illustratie loopt met 95% dekking tot de beeldrand. Zonder deze
   vlakken zie je daar een verticale knip zodra het venster breder is dan
   --vk-max. De kleuren zijn de randkleur van de illustratie, gecomposit
   over wit gemeten. */

body::before {
	content: "";
	position: absolute;
	left: 0; right: 0;
	z-index: -1;
	pointer-events: none;
	top: 0;
	height: calc(min(100vw, var(--vk-max)) / var(--vk-header-ratio));
	background: linear-gradient(180deg,
		#7BB2CC 0%, #9FCEE2 20%, #C8E3EA 40%,
		#E1F6F8 60%, #F1FBFC 80%, #FFFFFF 100%);
	-webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(50% - var(--vk-max) / 2 + 1px), transparent calc(50% - var(--vk-max) / 2 + 1px), transparent calc(50% + var(--vk-max) / 2 - 1px), #000 calc(50% + var(--vk-max) / 2 - 1px));
	mask-image: linear-gradient(90deg, #000 0, #000 calc(50% - var(--vk-max) / 2 + 1px), transparent calc(50% - var(--vk-max) / 2 + 1px), transparent calc(50% + var(--vk-max) / 2 - 1px), #000 calc(50% + var(--vk-max) / 2 - 1px));
}

/* ---- content ----------------------------------------------------------- */

main {
	position: relative;
	z-index: 1;
	padding-block-start: calc(min(100%, var(--vk-max)) / var(--vk-header-ratio) * (0.82 - var(--vk-inzet-boven)));
	padding-block-end: calc(min(100%, var(--vk-max)) / var(--vk-footer-ratio) * 1.05 - var(--vk-inzet-onder) - var(--vk-extra-onder));
}

/* ---- woordmerk: kliklaag naar de homepage ------------------------------ */

/* Het woordmerk zit in de achtergrondafbeelding van body, dus er is geen
   element om aanklikbaar te maken. core/site-title levert al een link naar de
   homepage met de sitenaam als toegankelijke naam; die leggen we hier
   onzichtbaar over het woordmerk heen.

   De maten zijn fracties, geen pixels: de illustratie schaalt mee tot
   --vk-max, dus dit volgt dezelfde formule als body::before.
   Gemeten in assets/img/header@1x.webp (1280x412), blauw #2350A9:
   het woordmerk beslaat x 326..942, y 71..248. Omgerekend:
     breedte 617/1280 = 0.4820   top 71/412 = 0.1723   hoogte 178/412 = 0.4320
   Het optische midden ligt 6px links van het beeldmidden: -6/1280 = -0.0047. */
.vk-woordmerk {
	position: absolute;
	top: 0;
	left: 50%;
	/* Breedte tegen 100%, niet 100vw: 100vw telt de schuifbalk mee terwijl de
	   achtergrondafbeelding met min(100%, --vk-max) geschaald wordt. Met 100vw
	   liep de kliklaag 7px uit de pas bij een venster smaller dan --vk-max. */
	width: calc(min(100%, var(--vk-max)) * 0.4820);
	/* De afstand van bovenaf staat bewust in padding en niet in margin.
	   WordPress zet zelf `:root :where(.is-layout-flow) > :first-child
	   { margin-block-start: 0 }` -- specificiteit 0,2,0 door :first-child, en
	   die verslaat een enkele klasse. De kliklaag IS het eerste kind van
	   .vk-header, dus een margin-top hier werd stil op 0 gezet.
	   Een percentage in padding rekent, net als in margin, tegen de BREEDTE
	   van het blok -- ook verticaal. Zo schaalt de afstand mee zonder 100vw.
	   71/412 van de beeldhoogte = 0.1723 / 3.1068 van de beeldbreedte. */
	padding: calc(min(100%, var(--vk-max)) * 0.05546) 0 0 0;
	/* -(halve breedte) - 6px optische verschuiving = -(0.4820/2) - 0.0047 */
	margin: 0 0 0 calc(min(100%, var(--vk-max)) * -0.2457);
	z-index: 2;
}

.vk-woordmerk a {
	display: block;
	width: 100%;
	/* 617 x 178 is het gemeten kader van het woordmerk; de hoogte volgt uit de
	   breedte zodat er nergens een verticale eenheid aan te pas komt. */
	aspect-ratio: 617 / 178;
	/* de tekst blijft bestaan voor schermlezers, maar staat buiten beeld */
	text-indent: -200vw;
	overflow: hidden;
	white-space: nowrap;
	border-radius: 0.5rem;
}

/* De link is onzichtbaar, dus toetsenbordgebruikers hebben de omranding nodig
   om te zien waar de focus staat. */
.vk-woordmerk a:focus-visible {
	outline: 3px solid var(--wp--preset--color--rood);
	outline-offset: 4px;
}

/* ---- welkom-pill ------------------------------------------------------- */

.vk-pill {
	position: absolute;
	top: calc(min(100vw, var(--vk-max)) * 0.014);
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	/* asymmetrisch: tekst staat 2px lager dan gecentreerd, totale hoogte blijft gelijk */
	padding: 0.443em 1.1em 0.157em;
	border-radius: 999px;
	background: var(--wp--preset--gradient--kermisrood);
	color: var(--wp--preset--color--wit);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	z-index: 3;
}

/* flow-root: .vk-header is zelf 0px hoog (alle kinderen staan absolute/
   fixed) en heeft zonder eigen BFC geen grip op de margin-top van main --
   die margin collapt er dan doorheen en ontsnapt buiten body (gemeten:
   body.getBoundingClientRect().top werd 24 i.p.v. 0). */
.vk-header { position: relative; display: flow-root; }

/* Onzichtbaar ankerpunt op de onderrand van de header-illustratie, voor
   nav.js (IntersectionObserver). .vk-header zelf is 0px hoog (alle kinderen
   staan absolute/fixed), dus een percentage-top zoals bij body::before werkt
   hier niet -- dat rekent tegen de (0px) hoogte van .vk-header, niet tegen
   de breedte. Zelfde formule als de gerenderde hoogte van de illustratie
   (breedte / beeldverhouding), met 100vw in plaats van 100% om diezelfde
   reden -- vergelijk .vk-menuknop hierboven, die dat om dezelfde reden doet. */
.vk-header-einde {
	position: absolute;
	top: calc(min(100vw, var(--vk-max)) / var(--vk-header-ratio));
	left: 0;
	width: 0; height: 0;
	margin: 0; /* zelfde is-layout-flow margin-lek als bij .vk-overlay/.vk-paneel hierboven */
}

@media (max-width: 600px) {
	.vk-pill { font-size: 0.7rem; padding: 0.25em 0.8em; }
}

/* Onder tabletbreedte (781px, dezelfde drempel als de programmakolommen --
   zie de toelichting bij .is-style-programmarij hieronder) is de illustratie
   te laag om de pil boven het logo te laten passen (17px ruimte, pil 20px
   hoog). De pil verhuist naar onder de illustratie, gecentreerd boven de
   introtekst. main krijgt extra padding-block-start zodat de tekst niet
   tegen de pil botst -- de marge is opgebouwd uit bestaande spacing-tokens
   (40 = ruimte boven de pil, 70 = pil zelf + ruimte eronder), geen nieuw
   getal verzonnen. */
@media (max-width: 781px) {
	/* De pil zakt onder het wordmerk in plaats van erboven -- daar is op smalle
	   schermen te weinig ruimte. 0.604 is de onderkant van het wordmerk, gemeten
	   in header@2x.webp als fractie van de headerhoogte. */
	.vk-pill {
		top: calc(min(100vw, var(--vk-max)) / var(--vk-header-ratio) * 0.604 + 33px);
	}

	main {
		padding-block-start: calc(min(100%, var(--vk-max)) / var(--vk-header-ratio) + var(--wp--preset--spacing--50));
	}
}

/* ---- menuknop ---------------------------------------------------------- */

.vk-menuknop {
	position: absolute;
	top: calc(min(100vw, var(--vk-max)) * 0.024);
	right: max(1rem, calc(50vw - var(--vk-max) / 2 + 1.5rem));
	width: 3.25rem; height: 2.5rem;
	display: grid; place-items: center;
	margin: 0; /* zelfde is-layout-flow margin-lek als bij .vk-overlay/.vk-paneel/.vk-header-einde hierboven */
	padding: 0; border: 0; border-radius: 0.5rem;
	background: var(--wp--preset--gradient--kermisrood);
	cursor: pointer;
	z-index: 5;
}

.vk-menuknop__streepjes,
.vk-menuknop__streepjes::before,
.vk-menuknop__streepjes::after {
	display: block;
	width: 1.5rem; height: 2px;
	border-radius: 2px;
	background: var(--wp--preset--color--wit);
}

.vk-menuknop__streepjes { position: relative; }
.vk-menuknop__streepjes::before,
.vk-menuknop__streepjes::after { content: ""; position: absolute; left: 0; }
.vk-menuknop__streepjes::before { top: -0.4rem; }
.vk-menuknop__streepjes::after  { top:  0.4rem; }

.vk-menuknop:focus-visible { outline: 3px solid var(--wp--preset--color--blauw); outline-offset: 3px; }

/* zwevende variant zodra de header uit beeld is */
body.vk-knop-zwevend .vk-menuknop {
	position: fixed;
	top: 1rem;
	box-shadow: 0 2px 10px rgb(0 0 0 / 0.25);
}

/* ---- paneel ------------------------------------------------------------ */

.vk-overlay {
	position: fixed; inset: 0;
	margin: 0; /* .vk-header is-layout-flow anders krijgt elk direct kind margin-block: 24px 0 mee */
	background: rgb(0 0 0 / 0.45);
	opacity: 0;
	transition: opacity 0.25s ease;
	z-index: 8;
}

.vk-paneel {
	position: fixed; top: 0; right: 0; bottom: 0;
	margin: 0; /* zie .vk-overlay hierboven */
	box-sizing: border-box;
	width: min(340px, 85vw);
	padding: 4rem 2rem 2rem;
	background: var(--wp--preset--color--wit);
	box-shadow: -4px 0 20px rgb(0 0 0 / 0.2);
	transform: translateX(100%);
	transition: transform 0.25s ease;
	z-index: 9;
	overflow-y: auto;
}

body.vk-menu-open .vk-overlay { opacity: 1; }
body.vk-menu-open .vk-paneel  { transform: translateX(0); }
body.vk-menu-open             { overflow: hidden; }

.vk-paneel ul { list-style: none; margin: 0; padding: 0; }
.vk-paneel li + li { margin-top: 0.25rem; }

/* Het navigatieblok van core is een flex-kolom met gap --wp--style--block-gap
   (24px). In het smalle paneel is dat veel te ruim; de afstand tussen de items
   komt hier van .vk-paneel li + li hierboven, zoals in het ontwerp. */
.vk-paneel .wp-block-navigation,
.vk-paneel .wp-block-navigation__container,
.vk-paneel .wp-block-page-list { gap: 0; }

.vk-paneel a {
	display: block;
	padding: 0.6rem 0;
	color: var(--wp--preset--color--tekst);
	font-weight: 500;
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--grijs);
}

.vk-paneel a:hover,
.vk-paneel a:focus-visible { color: var(--wp--preset--color--rood); }

.vk-sluit {
	position: absolute; top: 0.75rem; right: 1rem;
	width: 2.5rem; height: 2.5rem;
	border: 0; background: none;
	font-size: 2rem; line-height: 1;
	color: var(--wp--preset--color--tekst);
	cursor: pointer;
}

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

/* ---- slideshow ---------------------------------------------------------- */

/* Swiper levert het gedrag; hier alleen de huisstijl eroverheen. */

.vk-slideshow {
	position: relative;
	padding-block-end: 2.5rem;   /* ruimte voor de bolletjes */
}

.vk-slideshow__item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: auto;
	text-align: center;
}

.vk-slideshow__beeld {
	display: block;
	width: 100%;
	height: 200px;
	object-fit: contain;
	object-position: center;
}

.vk-slideshow__naam {
	margin: 0.4rem 0 0;
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--tekst);
}

/* de vergrootknop mag geen knop lijken */
.vk-slideshow__vergroot {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
}

.vk-slideshow__vergroot:focus-visible,
.vk-slideshow a:focus-visible {
	outline: 3px solid var(--wp--preset--color--blauw);
	outline-offset: 3px;
}

/* pijlen en bolletjes in de huisstijl */
.vk-slideshow .swiper-button-prev,
.vk-slideshow .swiper-button-next {
	width: 2.5rem;
	height: 2.5rem;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--gradient--kermisrood);
	color: var(--wp--preset--color--wit);
	box-shadow: 0 2px 8px rgb(0 0 0 / 0.2);
}

.vk-slideshow .swiper-button-prev::after,
.vk-slideshow .swiper-button-next::after {
	font-size: 1rem;
	font-weight: 700;
}

.vk-slideshow .swiper-pagination-bullet-active {
	background: var(--wp--preset--color--rood);
}

/* ---- doorlopend lint ---------------------------------------------------- */

/* Geen Swiper maar een CSS-animatie. De reeks staat er tweemaal in (de JS
   dupliceert hem), en we schuiven precies de helft op: dan valt het einde van
   de kopie exact samen met het begin van het origineel en is de sprong
   onzichtbaar. */

.vk-lint {
	overflow: hidden;
	padding-block-end: 0;
}

.vk-lint .swiper-wrapper {
	display: flex;
	gap: var(--wp--preset--spacing--50);
	width: max-content;
	animation: vk-lint-schuif var(--vk-lint-duur, 30s) linear infinite;
}

.vk-lint .swiper-slide {
	flex: 0 0 auto;
	width: clamp(140px, 22vw, 200px);
}

/* pauzeren waar hij is, en naadloos hervatten */
.vk-lint:hover .swiper-wrapper,
.vk-lint:focus-within .swiper-wrapper {
	animation-play-state: paused;
}

@keyframes vk-lint-schuif {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* wie minder beweging wil, krijgt een stilstaande rij die je zelf kunt scrollen */
@media (prefers-reduced-motion: reduce) {
	.vk-lint .swiper-wrapper {
		animation: none;
	}
	.vk-lint {
		overflow-x: auto;
	}
}

/* ---- sponsorband -------------------------------------------------------- */

/* Een doorlopend lint met de sponsorlogo's, onderaan elke pagina. De reeks
   staat twee keer in de HTML (zie render.php), zodat de animatie op -50%
   precies weer op het begin uitkomt. Geen JavaScript.

   De tussenruimte staat bewust in margin-inline-end en niet in gap. Met gap is
   het spoor 2N beelden plus 2N-1 tussenruimtes breed; de helft daarvan is dan
   N beelden plus N-0,5 tussenruimtes, en dat halve verschil geeft bij elke
   ronde een zichtbaar sprongetje. Met een marge per beeld is elke helft exact
   N x (beeld + marge) en loopt het lint naadloos rond.
   (Let op: .vk-lint hierboven heeft dat euvel wel -- daar staat gap.) */
.vk-sponsorband {
	/* stelknoppen */
	--vk-sponsorband-beeld: 420px;   /* breedte van één plaat */
	--vk-sponsorband-ruimte: 1rem;   /* tussenruimte tussen de platen */

	overflow: hidden;
	/* Zodat de plaatbreedte hieronder tegen de BAND kan rekenen en niet tegen
	   het venster of tegen __spoor -- die laatste is width: max-content, dus een
	   percentage daarvan is circulair. */
	container-type: inline-size;
}

.vk-sponsorband__spoor {
	display: flex;
	width: max-content;
	animation: vk-lint-schuif var(--vk-sponsorband-duur, 60s) linear infinite;
}

.vk-sponsorband__item {
	flex: 0 0 auto;
	/* Nooit breder dan de band zelf: anders valt op smalle schermen nooit een
	   hele plaat binnen beeld en zie je alleen halve logo's voorbijkomen. */
	width: min(var(--vk-sponsorband-beeld), 100cqw);
	margin-inline-end: var(--vk-sponsorband-ruimte);
}

.vk-sponsorband__beeld {
	display: block;
	width: 100%;
	height: auto;
}

/* pauzeren waar hij is, en naadloos hervatten */
.vk-sponsorband:hover .vk-sponsorband__spoor,
.vk-sponsorband:focus-within .vk-sponsorband__spoor {
	animation-play-state: paused;
}

/* wie minder beweging wil, krijgt een stilstaande rij die je zelf kunt scrollen */
@media (prefers-reduced-motion: reduce) {
	.vk-sponsorband__spoor { animation: none; }
	.vk-sponsorband { overflow-x: auto; }
}

/* ---- lightbox ----------------------------------------------------------- */

.vk-lightbox {
	position: fixed;
	inset: 0;
	/* Boven de WordPress-adminbalk, die op 99999 zit. Zonder dit valt de
	   bovenste helft van de sluitknop onder die balk en vangt een adminbalk-
	   link de klik af -- alleen zichtbaar wanneer je ingelogd bent. */
	z-index: 100000;
	display: grid;
	place-items: center;
	padding: 3rem 1rem;
	background: rgb(0 0 0 / 0.9);
}

/* Het hidden-attribuut verbergt via de browserstijl [hidden]{display:none},
   maar onze eigen .vk-lightbox{display:grid} wint daarvan omdat een auteurs-
   regel met een klasse zwaarder weegt. Zonder deze regel blijft de modal
   zichtbaar terwijl hidden wel gezet is. */
.vk-lightbox[hidden] {
	display: none;
}

body.vk-lightbox-open {
	overflow: hidden;
}

.vk-lightbox__swiper {
	width: min(100%, 1100px);
	max-height: 100%;
	/* ruimte onderaan zodat de teller niet over het bijschrift valt */
	padding-block-end: 2.5rem;
}

.vk-lightbox .swiper-slide {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.vk-lightbox .swiper-slide img {
	max-width: 100%;
	max-height: 78vh;
	width: auto;
	height: auto;
	object-fit: contain;
}

.vk-lightbox__naam {
	margin: 1rem 0 0;
	color: var(--wp--preset--color--wit);
	font-size: var(--wp--preset--font-size--klein);
}

.vk-lightbox__sluit {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 3rem;
	height: 3rem;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--gradient--kermisrood);
	color: var(--wp--preset--color--wit);
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
}

.vk-lightbox__sluit:focus-visible,
.vk-lightbox .swiper-button-prev:focus-visible,
.vk-lightbox .swiper-button-next:focus-visible {
	outline: 3px solid var(--wp--preset--color--wit);
	outline-offset: 3px;
}

.vk-lightbox .swiper-button-prev,
.vk-lightbox .swiper-button-next {
	color: var(--wp--preset--color--wit);
	border: 0;
	background: none;
}

.vk-lightbox .swiper-pagination {
	color: var(--wp--preset--color--wit);
	bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.vk-slideshow .swiper-wrapper { transition-duration: 0s !important; }
}

/* ---- footer-vermelding ------------------------------------------------- */

/* Rechtsonder in de transparante strook onder de groene grondbalk. Daar is de
   illustratie leeg op de foto-cirkel na, dus de tekst staat op wit.

   .vk-footer krijgt bewust GEEN position: relative. Het is een lege doos aan
   het einde van de tekststroom; de vermelding moet zich richten naar de
   onderrand van de geschilderde illustratie, en die zit op de padding-box van
   body (background-position: center bottom). Die twee vallen alleen samen als
   de pagina langer is dan het venster. Is ze korter, dan rekt min-height: 100vh
   body op en bleef de vermelding bij het einde van de stroom hangen -- op 375px
   stond ze 43px te hoog, midden in de confetti. Zonder eigen positionering
   valt de absolute vermelding terug op body en klopt het overal.
   Zie ook body { position: relative } hierboven, dat daar om dezelfde reden
   staat. */

.vk-credit {
	position: absolute;
	right: max(1rem, calc(50vw - var(--vk-max) / 2 + 1rem));
	/* Verticaal gecentreerd in de witte strook onder de groene grondbalk.
	   Gemeten in footer@1x.webp: de balk loopt van rij 523 t/m 539 van 583, dus
	   onder de balk blijft 43px over = 7,38% van de beeldhoogte. Die strook
	   krimpt mee met het venster, de tekst niet -- een vaste 0.75rem landde
	   daardoor vanaf 850px bovenop de balk.
	   0.0369 = de helft van 7,38% (het midden van de strook), min een halve
	   regelhoogte voor de tekst zelf. Op 1280px geeft dat 12,7px, praktisch
	   gelijk aan de 12px die er stond -- de brede weergave verandert niet.
	   100vw en niet 100%: in bottom rekent een percentage tegen de HOOGTE van
	   het blok, niet de breedte.
	   De ondergrens van 0.25rem gaat in rond 560px, waar de strook smaller
	   wordt dan de tekst hoog is. Daaronder valt de tekst op de groene balk --
	   dat is een openstaande keuze, geen oplossing. */
	bottom: max(0.25rem, calc(min(100vw, var(--vk-max)) / var(--vk-footer-ratio) * 0.0369 - 0.55rem));
	margin: 0;
	font-size: 0.75rem;
	color: var(--wp--preset--color--tekst);
	opacity: 0.7;
	z-index: 2;
}

.vk-credit a {
	color: inherit;
	text-decoration: none;
}

.vk-credit a:hover,
.vk-credit a:focus-visible {
	color: var(--wp--preset--color--rood);
	text-decoration: underline;
}

/* Staat bewust NA de basisregel hierboven: een media query verhoogt de
   specificiteit niet, dus bovenaan het bestand zou de basisregel gewoon winnen.
   Onder 560px is de witte strook onder de grondbalk smaller dan de regelhoogte
   van de vermelding: de strook is 7,38% van de beeldhoogte, dus 18px tekst past
   maar tot een voetbeeld van 244px = een venster van 535px. Daaronder gaat de
   tekst omlaag naar een regelhoogte van 12px, wat op 375px (strook 14px) nog
   net past. line-height staat er expliciet bij -- de dooshoogte bepaalt of het
   past, niet de lettergrootte. */
@media (max-width: 560px) {
	.vk-credit {
		font-size: 0.625rem;
		line-height: 1.2;
		/* De aftrek is een halve dooshoogte: die doos is hier 12px in plaats van
		   18px, dus 0.375rem in plaats van 0.55rem. Zonder deze regel bleef de
		   ondergrens van 0.25rem uit de basisregel gelden en werd de tekst juist
		   te hoog gedrukt. Ondergrens 0: onder 320px is de strook zelf smaller
		   dan de doos en is gelijkliggen met de onderrand het beste dat kan. */
		bottom: max(0px, calc(min(100vw, var(--vk-max)) / var(--vk-footer-ratio) * 0.0369 - 0.375rem));
	}
}


/* ---- blokstijlen ------------------------------------------------------- */

/* sectiebalk: volle breedte, verloop, witte hoofdletters */
/* balkhoogte 30px bij lettergrootte 18px (balk-token): line-height 1 geeft
   een regelbox van 18px (= de gemeten capheight+leading van het ontwerp),
   dus 6px verticale padding (0.3333em) erbij aan elke kant maakt 18+6+6=30px.
   Zonder line-height:1 erft de balk de 1.3 van de body en wordt de balk
   13px te hoog (43,2px i.p.v. 30px). */
.wp-block-heading.is-style-sectiebalk {
	/* hoekstraal op verzoek van de opdrachtgever; gemeten in het ontwerp was dit 3px */
	border-radius: 5px;
	margin: 2.5rem 0 1.5rem;
	/* asymmetrisch: tekst staat 2px lager dan gecentreerd, totale hoogte blijft 30px */
	padding: 0.4444em 1em 0.2222em;
	line-height: 1;
	background: var(--wp--preset--gradient--kermisrood);
	color: var(--wp--preset--color--wit);
	font-size: var(--wp--preset--font-size--balk);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-align: center;
	text-transform: uppercase;
}

/* dagkop: vette hoofdletters boven een programmadag */
.wp-block-heading.is-style-dagkop {
	margin: 2.25rem 0 0.75rem;
	color: var(--wp--preset--color--tekst);
	font-size: var(--wp--preset--font-size--basis);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* programmarij: smalle tijdkolom, brede tekstkolom */
.wp-block-columns.is-style-programmarij {
	margin-bottom: 1.1rem;
	gap: 1rem;
}

.wp-block-columns.is-style-programmarij > .wp-block-column:first-child {
	flex-basis: 5.5rem;
	flex-grow: 0;
	font-weight: 500;
}

.wp-block-columns.is-style-programmarij p { margin: 0 0 0.2rem; }
.wp-block-columns.is-style-programmarij strong { text-transform: uppercase; }

/* op mobiel stapelen de kolommen: tijd boven, activiteit eronder. Drempel
   is 781px, niet 600px: WP core stapelt core/columns zelf al onder 782px
   (flex-basis: 100% !important in wp-includes/blocks/columns/style.css,
   @media max-width: 781px). Onder onze eigen 600px-grens bleef de kolom
   tussen 601-781px dus wel gestapeld door core, maar zonder onze stijl:
   gap 16px i.p.v. 2.4px en de tijd in tekstgrijs i.p.v. rood. */
@media (max-width: 781px) {
	.wp-block-columns.is-style-programmarij { gap: 0.15rem; }
	.wp-block-columns.is-style-programmarij > .wp-block-column:first-child {
		flex-basis: auto;
		color: var(--wp--preset--color--rood);
	}
}

/* ronde foto die naast de tekst zweeft */
.wp-block-image.is-style-rondefoto img {
	border-radius: 50%;
	box-shadow: 0 3px 14px rgb(0 0 0 / 0.18);
}

@media (min-width: 601px) {
	.wp-block-image.is-style-rondefoto {
		float: right;
		width: min(38%, 230px);
		margin: 0 0 1rem 1.5rem;
		shape-outside: circle(50%);
	}

	/* sluit de float in zijn directe ouder in, zodat volgende blokken niet naast de foto gaan.
	   Uitgesloten: is-layout-flex/-grid, anders overschrijft dit hun eigen display (bv. een
	   core/group met flex-layout zou dan stiekem flow-root i.p.v. flex krijgen). */
	:has(> .wp-block-image.is-style-rondefoto):not(.is-layout-flex, .is-layout-grid) {
		display: flow-root;
	}

	/* een kop begint altijd een nieuwe sectie en mag nooit naast een zwevende foto vallen */
	.wp-block-heading {
		clear: both;
	}
}

/* knop in de huisstijl */
.wp-block-button.is-style-kermis .wp-block-button__link {
	background: var(--wp--preset--gradient--kermisrood);
	color: var(--wp--preset--color--wit);
	border-radius: 999px;
	padding: 0.7em 1.8em;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
}