/**
 * ROBA — aanvullende stijlen op theme.json.
 *
 * Alles wat via theme.json kan, hoort daar. Hier staat enkel wat de
 * blokeditor niet kan uitdrukken: de slider, de golf, de kernkleuren
 * en de tabellen die door roba-core worden gerenderd.
 */

/* De hoogte van de golf staat hier één keer, zodat alles wat zich eraan moet
   vastklampen ermee kan rekenen: de vormensliert in de hero, maar ook het
   logo van de hoofdsponsor dat erbuiten staat. Stond dit op de hero zelf, dan
   leverde var() daarbuiten niets op en viel de hele berekening weg. */
:root {
	--roba-golf: clamp(90px, 14vw, 220px);
	--roba-radius: 18px;
	--roba-radius-lg: 32px;
	--roba-shadow: 0 10px 30px rgba(15, 23, 41, 0.09);
}

/* ---------------------------------------------------------------
   Kernkleuren — één kleur per trainingskern, overal consequent.
   Dit is het herkenningsteken van de site: een atleet ziet in één
   oogopslag of een training, trainer of activiteit van zijn kern is.
   --------------------------------------------------------------- */
.roba-kern {
	--kern: var(--wp--preset--color--primary);
}
/* De drie clubkleuren van het singlet, één per kern. Azuurblauw en
   lichtgroen zijn licht: op die twee staat donkere tekst, niet wit.
   Oranje blijft daarnaast de knopkleur van de hele site. */
.roba-kern--betekom  { --kern: #64ADBC; }
.roba-kern--diest    { --kern: #ED6C39; }
.roba-kern--wespelaar{ --kern: #7AC29B; }

.roba-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.3em 0.85em;
	border-radius: 999px;
	background: color-mix(in srgb, var(--kern) 12%, transparent);
	color: color-mix(in srgb, var(--kern) 80%, #000);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.4;
}
.roba-chip::before {
	content: "";
	width: 0.55em;
	height: 0.55em;
	border-radius: 999px;
	background: var(--kern);
}

/* ---------------------------------------------------------------
   Header & navigatie — afgeronde vormen, ook rond de dropdown.
   --------------------------------------------------------------- */
.roba-header {
	position: relative;
	z-index: 20;
}

.wp-block-navigation .wp-block-navigation-item__content {
	padding: 0.5rem 0.95rem;
	border-radius: 999px;
	text-decoration: none;
}
.wp-block-navigation .wp-block-navigation-item__content:hover {
	background: color-mix(in srgb, currentColor 12%, transparent);
}

/* Over de hero staat het menu op een donkere foto, dus wit. Alleen daar:
   op binnenpagina's ligt dezelfde header op een lichte achtergrond en
   moeten de links donker blijven. Dat onderscheid kan de kleurkiezer in de
   editor niet maken -- die zet alles in één keer wit. */
.roba-hero .roba-header a,
.roba-hero .roba-header .wp-block-site-title,
.roba-hero .roba-header .wp-block-navigation {
	color: #fff;
}
.roba-hero .roba-header .wp-block-navigation__responsive-container-open {
	color: #fff;
}
/* De dropdown erft zijn tekstkleur van het Navigatieblok, niet van de
   witte hero-links hierboven. */
.roba-hero .roba-header .wp-block-navigation__submenu-container a {
	color: inherit;
}

/* De pagina waar je nu bent. WordPress zet zelf aria-current="page" op de
   juiste link en markeert de bovenliggende items met current-menu-ancestor.
   Een onderstreping werkt op beide achtergronden: wit over de hero, donker
   op binnenpagina's -- een achtergrondkleur zou dat niet doen. */
.wp-block-navigation .wp-block-navigation-item__content[aria-current="page"] {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}
/* Het bovenliggende menu-item krijgt een lichtere aanduiding, zodat je ziet
   in welke sectie je zit zonder dat het met de actieve pagina concurreert. */
.wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content,
.wp-block-navigation .current-menu-parent > .wp-block-navigation-item__content {
	text-decoration: underline;
	text-decoration-style: dotted;
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

/* Menu-item met permanente achtergrondkleur: geef de link in het
   menu de extra CSS-klasse "roba-nav-cta" of "roba-nav-accent". */
.wp-block-navigation .roba-nav-cta > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--track);
	color: #fff;
}
.wp-block-navigation .roba-nav-accent > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--primary);
	color: #fff;
}

/* Enkel de vorm van de dropdown, geen kleuren: die stel je in via het
   Navigatieblok (Stijlen > Kleur > Achtergrond submenu). Zou het thema hier
   een achtergrond zetten, dan zou die instelling in de editor niets doen. */
.wp-block-navigation .wp-block-navigation__submenu-container {
	border: 0;
	border-radius: var(--roba-radius);
	padding: 0.5rem;
	box-shadow: var(--roba-shadow);
	overflow: hidden;
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	border-radius: 12px;
	white-space: nowrap;
}

/* ---------------------------------------------------------------
   Hero-slider — automatisch, geen handmatig scrollen (per briefing).
   --------------------------------------------------------------- */
/* De hero stapelt slider, overlay en golf op elkaar met CSS grid in plaats
   van absolute positionering. Zo bepaalt de hoogste laag de hoogte van het
   geheel: de knoppen kunnen niet meer onder de foto uitsteken, en de editor
   kan de stapeling niet stukmaken met zijn eigen position-regels. */
.roba-hero {
	/* Boven wat eronder staat: het pijltje wipt tot net voorbij de onderrand,
	   en zonder dit schuift het achter de sponsorbalk -- je ziet dan een
	   streepje verschijnen en verdwijnen. De hero telt als geheel, want
	   isolation maakt van de z-index binnenin een eigen wereldje. */
	z-index: 2;
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: 1fr;
}
.roba-hero > * {
	grid-area: 1 / 1;
	min-width: 0;
}
/* Haarlijn aan de onderrand op schermen met een gebroken pixelverhouding.
   Bij devicePixelRatio 1.25 of 1.5 valt de onderrand van de hero midden in
   een fysieke pixel; de browser mengt die laatste rij half golf, half foto
   en dat leest als een dun donker streepje. Op een extern scherm met ratio
   1.0 zie je het niet.

   Dit strookje ligt in de kleur van de paginaachtergrond over die rij heen.
   Absoluut gepositioneerd, dus geen grid-item, en boven alle lagen. Werkt
   ook aan de randen, in tegenstelling tot een dekking op de sponsorbalk:
   die heeft een mask-image en is daar dus doorzichtig. */
.roba-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 4px;
	background: var(--wp--preset--color--base);
	z-index: 7;
	pointer-events: none;
}

.roba-slider {
	--roba-slide-interval: 6000;
	position: relative;
	/* Precies wat er overblijft naast de sponsorbalk: samen vullen foto en
	   balk het eerste scherm, zonder dat er iets anders meekomt. De
	   ondergrens voorkomt dat de foto op een laag scherm tot een streep
	   krimpt -- dan valt de balk er net buiten, en dat is het minste kwaad.
	   De adminbalk telt mee zolang je ingelogd bent. */
	min-height: max(320px, calc(100dvh - var(--roba-sponsorbalk) - var(--roba-adminbalk, 0px)));
	overflow: hidden;
	background: var(--wp--preset--color--contrast);
}
.roba-slider > figure,
.roba-slider > .wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity 1200ms ease;
}
.roba-slider > figure:first-of-type,
.roba-slider > .wp-block-image:first-of-type,
.roba-slider > .is-active {
	opacity: 1;
}
/* Zodra JS de dia's overneemt, bepaalt .is-active alleen wat zichtbaar is. */
.roba-slider.is-running > figure:not(.is-active),
.roba-slider.is-running > .wp-block-image:not(.is-active) {
	opacity: 0;
}
.roba-slider img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Bijsnijden vanaf de bovenkant in plaats van vanuit het midden: bij een
	   sportfoto gaan er dan voeten af in plaats van hoofden. Dat maakt ook
	   staande of vierkante foto's bruikbaar -- niet ideaal, maar wel
	   herkenbaar. Met echt liggende foto's waar het onderwerp centraal staat,
	   doet deze regel niets. */
	object-position: center 28%;
	border-radius: 0;
}
.roba-slider::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--preset--gradient--hero-veil);
	pointer-events: none;
}

/* Logo + menu liggen over de slider heen. */
.roba-hero .roba-hero__overlay {
	/* Boven de golf (6) en het dekstrookje (7). Het mobiele menupaneel zit
	   hierbinnen: een hoge z-index op dat paneel zelf haalt niets uit, want
	   z-index geldt alleen binnen de eigen stapelcontext. Kwam die overlay
	   op 5 te staan, dan bleven golf en strookje er altijd overheen. */
	z-index: 10;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	pointer-events: none;
}
.roba-hero__overlay > * {
	pointer-events: auto;
}

/* Vloeiende afknotting onderaan de slider. */
/* De golf hoort de foto af te knotten, dus ligt hij als laatste laag
   onderaan de hero. Stond hij in de normale flow, dan tekende hij wit op
   wit onder de foto -- onzichtbaar. */
.roba-wave {
	align-self: end;
	z-index: 6;
	line-height: 0;
	color: var(--wp--preset--color--base);
	pointer-events: none;
	/* Een pixel voorbij de onderrand. De hoogte van de SVG schaalt mee met
	   de vensterbreedte en komt dus zelden precies op een hele pixel uit;
	   zonder deze marge blijft er een haarlijntje foto zichtbaar. */
	margin-bottom: -1px;
}
.roba-wave svg {
	display: block;
	width: 100%;
	height: var(--roba-golf, clamp(90px, 14vw, 220px));
}

/* ---------------------------------------------------------------
   Sponsorbalk — loopt automatisch door, staat stil bij hover.
   --------------------------------------------------------------- */
/* De hoogte van de balk staat hier als variabele, zodat de hero zijn eigen
   hoogte eruit kan afleiden: samen vullen ze precies één scherm. */
:root {
	--roba-sponsorbalk: calc(clamp(26px, 3.4vw, 36px) + 2.5rem);
}

.roba-sponsors {
	overflow: hidden;
	padding-block: 1.25rem;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* Standaard staat de balk stil en gecentreerd. Pas als JS vaststelt dat de
   logo's samen breder zijn dan de balk, wordt de rij verdubbeld en begint de
   animatie. Zo tonen editor en website hetzelfde bij weinig sponsors. */
.roba-sponsors__track {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3.5rem;
	flex-wrap: wrap;
}
.roba-sponsors__track.is-marquee {
	width: max-content;
	flex-wrap: nowrap;
	justify-content: flex-start;
	animation: roba-marquee 38s linear infinite;
}
.roba-sponsors:hover .roba-sponsors__track,
.roba-sponsors:focus-within .roba-sponsors__track {
	animation-play-state: paused;
}
/* Logo's in hun eigen kleuren. Grijs oogt rustiger, maar sponsors betalen
   voor zichtbaarheid en hebben vaak huisstijlregels die het aanpassen van
   hun logo verbieden. Bovendien bestaat hover niet op een telefoon: daar
   zou niemand de kleuren ooit te zien krijgen.

   Wil je toch het rustiger effect, zet dan hieronder grayscale(1) aan. */
.roba-sponsors img {
	/* Rustiger dan voorheen: met acht sponsors in een lopende balk hoeft elk
	   logo niet groot te zijn, en zo houdt de hoofdsponsor ernaast zijn
	   voorrang zonder dat die groter hoeft. */
	height: clamp(26px, 3.4vw, 36px);
	width: auto;
	filter: none;
	transition: transform 200ms ease;
}
.roba-sponsors a:hover img,
.roba-sponsors a:focus-visible img {
	transform: scale(1.06);
}
@keyframes roba-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* ---------------------------------------------------------------
   Activiteiten
   --------------------------------------------------------------- */
.roba-events {
	position: relative;
}
/* Eén rij die je opzij veegt, in plaats van afbreken naar meerdere regels.
   Met namen als "Breng je sportclub naar school" past een strip nooit op één
   regel, en over twee regels is het geen strip meer maar een lijst. */
.roba-events__strip {
	display: flex;
	gap: 0.6rem;
	flex-wrap: nowrap;
	align-items: center;
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0 0 0.5rem;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	/* Alleen rechts vervagen: daar staat nog meer. Links vervagen knipte de
	   eerste letter aan en las als een fout in plaats van als een hint. */
	-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent);
	mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent);
}
.roba-events__strip > li {
	flex: 0 0 auto;
	scroll-snap-align: start;
	white-space: nowrap;
}
.roba-events__strip li::after {
	content: "›";
	margin-left: 0.6rem;
	opacity: 0.4;
}
.roba-events__strip li:last-child::after { content: none; }
.roba-events__strip a {
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9375rem;
}

.roba-event-card {
	display: grid;
	grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
	gap: clamp(1rem, 3vw, 2rem);
	align-items: center;
	background: var(--wp--preset--color--base-2);
	border-radius: var(--roba-radius-lg);
	padding: clamp(1rem, 2.5vw, 1.75rem);
	box-shadow: var(--roba-shadow);
}
.roba-event-card img {
	width: 100%;
	/* De hoogte expliciet, anders doet aspect-ratio niets: een img met width
	   en height in de opmaak gebruikt die eigen maten en negeert de
	   verhouding. Bij een liggende foto viel dat niet op -- bij een staande
	   flyer werd de kaart duizend pixels hoog. */
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--roba-radius);
}
.roba-event-card__date {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	color: var(--wp--preset--color--track);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.8125rem;
}
.roba-event-card h3 {
	margin: 0.35rem 0 0.5rem;
}
@media (max-width: 680px) {
	.roba-event-card { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   Trainingstabellen
   --------------------------------------------------------------- */
.roba-schedule {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--wp--preset--color--base-2);
	border-radius: var(--roba-radius);
	box-shadow: var(--roba-shadow);
	font-size: 0.9375rem;
}
/* Hoeken afronden via de cellen in plaats van met overflow op de tabel:
   overflow knipte namelijk ook de titel erboven aan. */
.roba-schedule thead th:first-child { border-top-left-radius: var(--roba-radius); }
.roba-schedule thead th:last-child { border-top-right-radius: var(--roba-radius); }
.roba-schedule tbody tr:last-child td:first-child { border-bottom-left-radius: var(--roba-radius); }
.roba-schedule tbody tr:last-child td:last-child { border-bottom-right-radius: var(--roba-radius); }
/* De titel staat buiten het afgeronde kader. Stond hij erin, dan knipte de
   overflow van de tabel de eerste letter aan. */
.roba-schedule caption {
	caption-side: top;
	text-align: left;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.125rem;
	padding: 0 0 0.75rem;
	overflow: visible;
	white-space: normal;
}
.roba-schedule th,
.roba-schedule td {
	padding: 0.75rem 1rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
}
.roba-schedule thead th {
	background: color-mix(in srgb, var(--kern, var(--wp--preset--color--primary)) 10%, transparent);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.07em;
}
.roba-schedule tbody tr:last-child td { border-bottom: 0; }
.roba-schedule .roba-schedule__day {
	font-weight: 700;
	white-space: nowrap;
}
.roba-schedule .roba-schedule__trainers a {
	text-decoration: none;
	font-weight: 500;
}

@media (max-width: 700px) {
	.roba-schedule thead { display: none; }
	.roba-schedule tr {
		display: block;
		padding: 0.85rem 1rem;
		border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
	}
	.roba-schedule td {
		display: flex;
		gap: 1rem;
		border: 0;
		padding: 0.15rem 0;
	}
	.roba-schedule td::before {
		content: attr(data-label);
		flex: 0 0 5.5rem;
		font-size: 0.75rem;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		color: var(--wp--preset--color--contrast-2);
		padding-top: 0.15rem;
	}

	/* De dag is geen veld zoals de andere, maar een kop boven de trainingen
	   van die dag. Als elke rij het label "Dag" herhaalt en sommige rijen dan
	   leeg blijven -- omdat de dag hetzelfde is als hierboven -- oogt dat
	   rommelig. Daarom: een grijze band bij het begin van elke dag, en verder
	   geen dagveld meer. */
	.roba-schedule .roba-schedule__day {
		display: none;
	}
	.roba-schedule tr.roba-schedule__nieuwe-dag {
		padding-top: 0;
	}
	.roba-schedule tr.roba-schedule__nieuwe-dag .roba-schedule__day {
		display: block;
		margin: 0 -1rem 0.7rem;
		padding: 0.45rem 1rem;
		background: color-mix(in srgb, var(--kern, var(--wp--preset--color--primary)) 14%, var(--wp--preset--color--sand));
		font-size: 0.75rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.07em;
	}
	.roba-schedule tr.roba-schedule__nieuwe-dag .roba-schedule__day::before {
		content: none;
	}
}

/* ---------------------------------------------------------------
   Trainersraster — vierkantjes met naam en discipline eronder.
   --------------------------------------------------------------- */
.roba-people {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: clamp(0.75rem, 2vw, 1.5rem);
	list-style: none;
	margin: 0;
	padding: 0;
}
.roba-person a {
	display: block;
	text-decoration: none;
	color: inherit;
}
.roba-person__photo {
	aspect-ratio: 1;
	width: 100%;
	object-fit: cover;
	border-radius: var(--roba-radius);
	background: var(--wp--preset--color--sand);
	display: block;
}
.roba-person__photo--empty {
	display: grid;
	place-items: center;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.75rem;
	font-weight: 700;
	/* Donkere letters op een lichte tint van de kernkleur. Mengen met wit gaf
	   bij het lichtgroen van Wespelaar bijna onzichtbare initialen. */
	color: color-mix(in srgb, var(--kern, var(--wp--preset--color--primary)) 40%, #000);
	background: color-mix(in srgb, var(--kern, var(--wp--preset--color--primary)) 22%, var(--wp--preset--color--sand));
}
.roba-person__name {
	display: block;
	font-weight: 650;
	margin-top: 0.6rem;
	line-height: 1.3;
}
.roba-person__role {
	display: block;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--contrast-2);
}

/* Uitklapbaar blok "leer het team kennen" (details/summary, geen JS). */
.roba-disclosure {
	margin-top: 1.25rem;
	border-radius: var(--roba-radius);
	background: var(--wp--preset--color--base-2);
	box-shadow: var(--roba-shadow);
	overflow: hidden;
}
.roba-disclosure > summary {
	cursor: pointer;
	padding: 1rem 1.25rem;
	font-weight: 650;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}
.roba-disclosure > summary::-webkit-details-marker { display: none; }
.roba-disclosure > summary::after {
	content: "+";
	font-size: 1.25rem;
	line-height: 1;
	color: var(--kern, var(--wp--preset--color--primary));
}
.roba-disclosure[open] > summary::after { content: "–"; }
.roba-disclosure > div { padding: 0 1.25rem 1.25rem; }

/* ---------------------------------------------------------------
   Toegankelijkheid
   --------------------------------------------------------------- */
:where(a, button, summary, input, select, textarea):focus-visible {
	outline: 3px solid var(--wp--preset--color--track);
	outline-offset: 2px;
	border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
	.roba-sponsors__track.is-marquee { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
	.roba-slider > figure,
	.roba-slider > .wp-block-image { transition: none; }
	*, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}


/* ---------------------------------------------------------------
   Achtergrondblok "Komende activiteiten"
   --------------------------------------------------------------- */
.roba-events-bg {
	position: relative;
	isolation: isolate;
	background-image: url("../img/hero-2.jpg");
	background-size: cover;
	background-position: center;
	background-attachment: scroll;
	color: var(--wp--preset--color--base);
}
.roba-events-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 41, 0.7);
	z-index: -1;
}
.roba-events-bg .roba-events__strip a {
	color: var(--wp--preset--color--base);
}

/* ---------------------------------------------------------------
   Submenu links uitlijnen
   ---------------------------------------------------------------
   Core klapt een submenu naar rechts zodra het denkt dat er rechts te
   weinig ruimte is. Bij dit menu is die ruimte er wel en oogt de omslag
   als een fout. De regel van core mikt op drie klassen, dus een selector
   met twee klassen verliest het; vandaar deze specifiekere versie.

   Loopt een submenu ooit toch van het scherm af, haal dit blok dan weg:
   de omslag van core is dan juist wat je nodig hebt.
   --------------------------------------------------------------- */
.wp-block-navigation .has-child .wp-block-navigation__submenu-container,
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation__submenu-container,
.wp-block-navigation .wp-block-page-list .wp-block-navigation__submenu-container {
	/* Core zet dit soms via een inline stijl, en inline verslaat elke
	   stylesheet. Vandaar !important -- de enige plek in dit bestand waar dat
	   nodig is. Het paneel begint nu links onder de tekst van het menu-item,
	   in plaats van rechts uitgelijnd op het item. */
	left: -0.45rem !important;
	right: auto !important;
	/* Verticale speling tussen het menu en het paneel. */
	top: calc(100% + 10px) !important;
}

/* Die 10px zou het paneel onbereikbaar maken met de muis: zodra je de knop
   verlaat, verdwijnt het. Dit onzichtbare strookje overbrugt het gat zodat
   de hover niet onderbroken wordt. */
.wp-block-navigation:not(.is-menu-open) .has-child > .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	top: -12px;
	left: 0;
	right: 0;
	height: 12px;
}


/* Golf onderaan een sectie met achtergrondfoto, zelfde idee als bij de hero. */
.roba-wave--section {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	z-index: 3;
	line-height: 0;
	color: var(--wp--preset--color--base);
	pointer-events: none;
	/* De sectie gebruikt een constrained layout, die al haar kinderen een
	   max-width van de contentbreedte geeft. Dat geldt ook voor absoluut
	   gepositioneerde elementen, waardoor de golf tot een strook in het
	   midden werd afgeknepen. */
	max-width: none;
	width: auto;
	margin: 0;
}
.roba-wave--section svg {
	display: block;
	width: 100%;
	height: clamp(60px, 9vw, 140px);
}

/* Preview-strip als schakelaars tussen de activiteiten. */
.roba-events__strip button {
	appearance: none;
	background: transparent;
	border: 0;
	padding: 0.35em 0;
	font: inherit;
	font-weight: 600;
	font-size: 0.9375rem;
	color: inherit;
	opacity: 0.65;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	transition: opacity 150ms ease, border-color 150ms ease;
}
.roba-events__strip button:hover {
	opacity: 1;
}
.roba-events__strip button.is-active {
	opacity: 1;
	border-bottom-color: currentColor;
}
.roba-events__panel[hidden] {
	display: none;
}
.roba-event-card {
	color: var(--wp--preset--color--contrast);
}

/* Lege staat van het activiteitenblok: leesbaar op de achtergrondfoto. */
.roba-events--leeg {
	max-width: 34rem;
	margin-inline: auto;
	text-align: center;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: var(--roba-radius);
	padding: clamp(1.25rem, 4vw, 2rem);
}

/* ---------------------------------------------------------------
   Mobiel menu
   ---------------------------------------------------------------
   Het Navigatieblok opent op smalle schermen een schermvullend paneel.
   Drie dingen gaan daar mis zonder deze regels.
   --------------------------------------------------------------- */

/* 1. Het paneel boven de rest van de pagina. De echte oorzaak zat een
      niveau hoger, bij de z-index van .roba-hero__overlay; deze regel houdt
      het paneel daarbinnen bovenaan. */
.wp-block-navigation__responsive-container.is-menu-open {
	z-index: 100;
}

/* 2. Het paneel moet het volledige scherm bedekken. Core doet dat met
      position:fixed, maar dat kan mislopen wanneer een voorouder een eigen
      containing block vormt -- dan valt het paneel binnen de hero en zie je
      de pagina eronder doorschijnen. Vandaar alles expliciet. */
.wp-block-navigation__responsive-container.is-menu-open {
	position: fixed !important;
	inset: 0 !important;
	width: 100vw !important;
	max-width: none !important;
	height: 100dvh !important;
	/* Zonder dit is het paneel 100vw plus zijn eigen padding breed, en valt
	   die laatste padding buiten het scherm. Alles wat rechts in het paneel
	   staat -- de plusknop -- verdwijnt dan mee. */
	box-sizing: border-box;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 1.5rem !important;
	background-color: var(--wp--preset--color--primary) !important;
	color: #fff !important;
}

/* Achter het paneel niet meer meescrollen. */
body:has(.wp-block-navigation__responsive-container.is-menu-open) {
	overflow: hidden;
}

/* De header zit binnen de hero, en die vormt met isolation een eigen
   stapelcontext. Alles wat later in de pagina komt -- het welkomswoordje --
   wordt dus over de hele hero getekend, inclusief het menupaneel erin. Geen
   z-index binnen de hero kan dat verhelpen; de hero zelf moet omhoog. */
body:has(.wp-block-navigation__responsive-container.is-menu-open) .roba-hero {
	z-index: 9999;
}

/* Het paneel moet kunnen scrollen wanneer het menu langer is dan het scherm.
   Core centreert de inhoud verticaal, en dan valt het onderste item buiten
   beeld zonder dat je erbij kan. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	justify-content: flex-start !important;
	min-height: 0 !important;
	padding-bottom: 3rem;
}

/* Ruimere aanraakvlakken en alles links uitgelijnd: een menu is een lijst,
   geen gecentreerd blok. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start;
	gap: 0.25rem;
	padding-top: 3rem;
	box-sizing: border-box;
	width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding: 0.7rem 0;
	font-size: 1.125rem;
}

/* Items met een eigen achtergrondkleur houden hun pilvorm. Zonder deze
   uitzondering krimpt de oranje achtergrond van Inschrijven tot precies de
   breedte van de letters en is de vorm weg. */
.wp-block-navigation__responsive-container.is-menu-open .roba-nav-cta > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .roba-nav-accent > .wp-block-navigation-item__content {
	display: inline-block;
	padding: 0.7rem 1.5rem;
	border-radius: 999px;
	/* De pil zelf een stuk naar links, zodat zijn tekst op dezelfde lijn
	   begint als de labels eronder. Anders lijnt de ronde rand uit met de
	   letters en staat het label ingesprongen. */
	margin-left: -1.5rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 1rem;
	opacity: 0.85;
	/* Krapper dan de hoofditems: bij Aanbod staan er zes onder elkaar, en met
	   dezelfde ruimte als de hoofdniveaus wordt dat een lange lijst. */
	padding-top: 0.4rem;
	padding-bottom: 0.4rem;
}
/* De lijst zelf ook zonder eigen tussenruimte. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	gap: 0;
	row-gap: 0;
	padding-top: 0.25rem;
	padding-bottom: 0.5rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container li {
	margin: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: 1.25rem;
	right: 1.25rem;
}
.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open button {
	color: #fff !important;
}

/* 3. Vangnet: zolang het paneel open staat mag er niets uit de hero of de
      sponsorbalk doorheen prikken. De sponsors bleven ook doorlopen achter
      het menu, wat rommelig aanvoelt. */
body:has(.wp-block-navigation__responsive-container.is-menu-open) .roba-wave,
body:has(.wp-block-navigation__responsive-container.is-menu-open) .roba-hero::after,
body:has(.wp-block-navigation__responsive-container.is-menu-open) .roba-sponsors {
	visibility: hidden;
}

/* 4. De instelling "achtergrond submenu en overlay" in de editor geldt voor
      twee dingen tegelijk: de dropdown op desktop en het mobiele paneel. In
      dat paneel wordt de kleur daardoor twee keer getekend -- oranje op
      oranje, en dus onleesbaar. Binnen het paneel maken we de submenu's
      doorzichtig; de dropdown op desktop houdt zijn kleur. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background-color: transparent !important;
	box-shadow: none;
	border-radius: 0;
	margin-left: 0;
	padding-left: 1rem;
}

/* Meerdere categorieën in één trainingsuur staan onder elkaar, zoals in de
   briefing: dinsdag 18u30 is Kangoeroes én Benjamins. */
.roba-schedule__cats {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}
/* Trainers staan nu in een eigen kolom, meerdere namen onder elkaar. */
.roba-schedule td.roba-schedule__trainers {
	display: table-cell;
}
.roba-schedule__trainers span {
	display: block;
}
@media (max-width: 700px) {
	.roba-schedule td.roba-schedule__trainers {
		display: flex;
	}
	.roba-schedule td.roba-schedule__trainers span {
		display: inline;
	}
	.roba-schedule td.roba-schedule__trainers span:not(:last-child)::after {
		content: ", ";
	}
}

/* ---------------------------------------------------------------
   Tabbladen
   --------------------------------------------------------------- */
.roba-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}
.roba-tabs__tab {
	appearance: none;
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	padding: 0.7rem 1.4rem;
	border-radius: 999px;
	border: 2px solid color-mix(in srgb, var(--kern, var(--wp--preset--color--primary)) 35%, transparent);
	background: transparent;
	color: color-mix(in srgb, var(--kern, var(--wp--preset--color--primary)) 85%, #000);
	transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.roba-tabs__tab:hover {
	border-color: var(--kern, var(--wp--preset--color--primary));
}
.roba-tabs__tab.is-active {
	background: var(--kern, var(--wp--preset--color--primary));
	border-color: var(--kern, var(--wp--preset--color--primary));
	/* Azuurblauw en lichtgroen zijn te licht voor witte tekst; het zwart uit
	   de huisstijl leest daar beter op. Oranje kan beide, en houdt wit. */
	color: var(--wp--preset--color--contrast);
}
.roba-tabs__tab.roba-kern--diest.is-active {
	color: #fff;
}
.roba-tabs__panel[hidden] {
	display: none;
}

/* In de editor staan alle panelen open onder elkaar, met hun naam erboven,
   zodat je overal in kan werken zonder te klikken. */
.roba-tab-editor {
	border-left: 3px solid color-mix(in srgb, var(--kern, var(--wp--preset--color--primary)) 45%, transparent);
	padding-left: 1rem;
	margin-bottom: 1.5rem;
}
.roba-tab-editor__label {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--kern, var(--wp--preset--color--primary));
	margin: 0 0 0.5rem;
}

/* Binnen een tabblad gedraagt een blok zich als in een gewone constrained
   container: standaard de tekstbreedte, en breed als het zo is ingesteld. */
.roba-tabs__panel > .alignwide {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}
.roba-tabs__panel > .alignfull {
	max-width: none;
}

/* ---------------------------------------------------------------
   Brede uitlijning van de ROBA-blokken
   ---------------------------------------------------------------
   WordPress regelt uitlijning met een regel die alleen geldt voor een
   directe dochter van een constrained container. Mijn blokken staan soms
   dieper genest -- in een tabbladpaneel bijvoorbeeld -- en vielen dan
   buiten die regel. Deze versie werkt ongeacht de omgeving.
   --------------------------------------------------------------- */
.alignwide:where(.roba-kern, .roba-disclosure, .roba-events, .roba-sponsors, .roba-tabs, .roba-tabs__panel > *) {
	max-width: var(--wp--style--global--wide-size, 1280px);
	width: 100%;
	margin-inline: auto;
}
.alignfull:where(.roba-kern, .roba-disclosure, .roba-events, .roba-sponsors, .roba-tabs, .roba-tabs__panel > *) {
	max-width: none;
	width: 100%;
}
/* Ook wanneer de klasse op een omhullend blokje staat. */
div.alignwide > .roba-schedule,
div.alignwide > .roba-people {
	width: 100%;
}

/* Binnen het mobiele menu staat een submenu in de gewone flow: geen
   positionering, geen speling. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	left: auto !important;
	right: auto !important;
	top: auto !important;
}

/* ---------------------------------------------------------------
   Inklapbare submenu's in het mobiele paneel
   --------------------------------------------------------------- */

/* De knop bestaat overal in de opmaak, maar telt alleen mee binnen het
   geopende paneel. Op desktop blijft de dropdown op zweven werken. */
.roba-submenu-toggle {
	display: none;
}

/* Elk lijstitem op de volle breedte van het paneel. Mikken op de klasse
   has-child werkte niet -- die staat er blijkbaar niet op deze items -- dus
   nu op elk direct lijstitem van het menu. Zonder volle breedte betekent
   "rechts uitlijnen" van de plusknop: net naast het woord, bovenop de link. */
/* Op elementniveau in plaats van op klassen: in het geopende paneel staat
   niets anders dan het menu, dus ul en li zijn hier ondubbelzinnig. Mikken op
   .wp-block-navigation__container en .has-child werkte niet -- die klassen
   staan blijkbaar elders dan ik dacht. */
.wp-block-navigation__responsive-container.is-menu-open ul {
	width: 100%;
	align-items: flex-start;
	/* Een ul heeft standaard een linkerinspringing van de browser. Samen met
	   width:100% is dat breder dan het paneel, en dan valt de plusknop aan de
	   rechterkant buiten beeld. */
	margin: 0;
	padding-left: 0;
	list-style: none;
	box-sizing: border-box;
}
.wp-block-navigation__responsive-container.is-menu-open li {
	position: relative;
	width: 100%;
	align-self: stretch;
	text-align: left;
	box-sizing: border-box;
}
/* Het submenu springt wel in, maar met marge in plaats van breedte erbij. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	box-sizing: border-box;
}
/* De link blijft precies zo breed als zijn tekst. Stond hij op volle breedte,
   dan lag zijn klikgebied onder de plusknop en ging je naar de pagina in
   plaats van het submenu te openen. */
.wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation-item__content {
	display: inline-block;
	padding-right: 0;
}

/* Dicht, tenzij de bezoeker het openzet. */
.wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation__submenu-container {
	display: none !important;
	padding-left: 1rem;
}
.wp-block-navigation__responsive-container.is-menu-open .has-child.roba-submenu-open > .wp-block-navigation__submenu-container {
	display: block !important;
}

/* Nu de paneelbreedte klopt, is absoluut positioneren het eenvoudigst: de
   knop staat buiten de flow, kan de link dus niet wegduwen en er valt niets
   te wrappen. Eerder ging dit mis doordat het paneel drie rem te breed was --
   niet door de positionering zelf. */
.wp-block-navigation__responsive-container.is-menu-open li {
	display: block;
	position: relative;
	max-width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .roba-submenu-toggle {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 2.75rem;
	/* De hoogte wordt door roba.js gelijkgezet aan die van de link ernaast.
	   Deze waarde geldt zolang dat nog niet gebeurd is, of als JavaScript
	   niet draait. */
	height: 2.75rem;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	font: inherit;
}
.wp-block-navigation__responsive-container.is-menu-open .roba-submenu-toggle::before,
.wp-block-navigation__responsive-container.is-menu-open .roba-submenu-toggle::after {
	content: "";
	position: absolute;
	background: currentColor;
	transition: transform 150ms ease, opacity 150ms ease;
}
.wp-block-navigation__responsive-container.is-menu-open .roba-submenu-toggle::before {
	width: 14px;
	height: 2px;
}
.wp-block-navigation__responsive-container.is-menu-open .roba-submenu-toggle::after {
	width: 2px;
	height: 14px;
}
.wp-block-navigation__responsive-container.is-menu-open .roba-submenu-open > .roba-submenu-toggle::after {
	transform: scaleY(0);
	opacity: 0;
}

/* Het pijltje van core is nu overbodig binnen het paneel. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
	display: none;
}

/* In de header staat het menu rechts uitgelijnd, en het paneel erft die
   uitlijning. Enkel die ene klasse terugdraaien -- de uitlijning van de
   containers zelf niet aanraken, want daar hangt hun breedte aan vast. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container.items-justified-right,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container.items-justified-center,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container.items-justified-space-between {
	align-items: flex-start;
	justify-content: flex-start;
}

/* ---------------------------------------------------------------
   Filterbalk verslagen
   --------------------------------------------------------------- */
.roba-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1rem;
	margin-bottom: 2rem;
	padding: 1.25rem;
	border-radius: var(--roba-radius);
	background: var(--wp--preset--color--base-2);
	box-shadow: var(--roba-shadow);
}
.roba-filter__veld {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	margin: 0;
	flex: 0 1 12rem;
}
.roba-filter__veld--zoek {
	flex: 1 1 16rem;
}
.roba-filter label {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--contrast-2);
}
.roba-filter input,
.roba-filter select {
	font: inherit;
	padding: 0.55rem 0.75rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 18%, transparent);
	border-radius: 999px;
	background: var(--wp--preset--color--base-2);
	color: inherit;
	width: 100%;
}
.roba-filter__knoppen {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0;
}
.roba-filter__knoppen button {
	cursor: pointer;
	border: 0;
}
.roba-filter__knoppen a {
	font-size: 0.875rem;
}

/* ---------------------------------------------------------------
   Nieuws en verslagen
   --------------------------------------------------------------- */
.roba-nieuws__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}
.roba-nieuws__knop {
	display: inline-block;
	text-decoration: none;
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	padding: 0.55rem 1.3rem;
	border-radius: 999px;
	border: 2px solid color-mix(in srgb, var(--wp--preset--color--primary) 35%, transparent);
	background: transparent;
	color: var(--wp--preset--color--primary);
	transition: background-color 150ms ease, color 150ms ease;
}
.roba-nieuws__knop:hover {
	border-color: var(--wp--preset--color--primary);
}
.roba-nieuws__knop.is-active {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: #fff;
}

.roba-nieuws__lijst {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: clamp(1rem, 2.5vw, 2rem);
	list-style: none;
	margin: 0;
	padding: 0;
}
.roba-nieuws__item a {
	display: block;
	text-decoration: none;
	color: inherit;
}
.roba-nieuws__item img,
.roba-nieuws__geenfoto {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--roba-radius);
	background: var(--wp--preset--color--sand);
}
.roba-nieuws__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: baseline;
	margin-top: 0.6rem;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--contrast-2);
}
.roba-nieuws__soort {
	font-weight: 700;
	color: var(--wp--preset--color--track);
}
.roba-nieuws__titel {
	display: block;
	margin-top: 0.2rem;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 1.25;
}
.roba-nieuws__item a:hover .roba-nieuws__titel {
	text-decoration: underline;
}
.roba-nieuws__paginering {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	justify-content: center;
	margin-top: 2.5rem;
}
.roba-nieuws__paginering .page-numbers {
	display: grid;
	place-items: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.75rem;
	border-radius: 999px;
	text-decoration: none;
	font-weight: 600;
}
.roba-nieuws__paginering .page-numbers.current {
	background: var(--wp--preset--color--primary);
	color: #fff;
}
.roba-nieuws__paginering a.page-numbers:hover {
	background: color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent);
}

/* ---------------------------------------------------------------
   Activiteiten als raster
   --------------------------------------------------------------- */
.roba-events__raster {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: clamp(1rem, 2.5vw, 2rem);
	list-style: none;
	margin: 0;
	padding: 0;
}
.roba-events__kaart a {
	display: block;
	text-decoration: none;
	color: inherit;
}
.roba-events__kaart img,
.roba-events__geenfoto {
	display: block;
	width: 100%;
	/* Hoogte vrijgeven, anders negeert de browser de verhouding: een img met
	   eigen maten in de opmaak houdt die. Een staande flyer werd zo duizend
	   pixels hoog. */
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--roba-radius);
	background: var(--wp--preset--color--sand);
}
.roba-events__datum {
	display: block;
	margin-top: 0.6rem;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--track);
}
.roba-events__raster .roba-events__titel {
	display: block;
	margin-top: 0.2rem;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 1.25;
}
.roba-events__plaats {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.875rem;
	color: var(--wp--preset--color--contrast-2);
}
.roba-events__kaart a:hover .roba-events__titel {
	text-decoration: underline;
}

/* ---------------------------------------------------------------
   Gewone tabelblokken in dezelfde stijl als de trainingstabellen
   ---------------------------------------------------------------
   De bestuurstabellen en de juryledenlijst zijn handgemaakte tabelblokken.
   Zonder deze regels zien ze er anders uit dan de trainingsuren, terwijl ze
   hetzelfde doen. Stapelen op mobiel kan hier niet -- daarvoor zijn er geen
   data-labels en zijn de mailadressen te lang -- dus daar scrollt de tabel
   horizontaal, met een schaduwrand die aangeeft dat er meer staat.
   --------------------------------------------------------------- */
.wp-block-table:not(.is-style-stripes) > table {
	width: 100%;
	border-collapse: collapse;
	background: var(--wp--preset--color--base-2);
	font-size: 0.9375rem;
}
.wp-block-table:not(.is-style-stripes) {
	border-radius: var(--roba-radius);
	overflow-x: auto;
	box-shadow: var(--roba-shadow);
	/* Schaduw aan de rand zolang er nog iets buiten beeld staat. */
	background:
		linear-gradient(to right, var(--wp--preset--color--base-2) 30%, transparent),
		linear-gradient(to left, var(--wp--preset--color--base-2) 30%, transparent) 100% 0,
		linear-gradient(to right, rgba(36, 36, 36, 0.14), transparent),
		linear-gradient(to left, rgba(36, 36, 36, 0.14), transparent) 100% 0;
	background-repeat: no-repeat;
	background-size: 3rem 100%, 3rem 100%, 1rem 100%, 1rem 100%;
	background-attachment: local, local, scroll, scroll;
}
.wp-block-table:not(.is-style-stripes) th,
.wp-block-table:not(.is-style-stripes) td {
	padding: 0.75rem 1rem;
	text-align: left;
	vertical-align: top;
	border: 0;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
}
.wp-block-table:not(.is-style-stripes) thead th {
	background: color-mix(in srgb, var(--kern, var(--wp--preset--color--azuur)) 16%, transparent);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	white-space: nowrap;
}
.wp-block-table:not(.is-style-stripes) tbody tr:last-child td {
	border-bottom: 0;
}
.wp-block-table:not(.is-style-stripes) td:first-child {
	white-space: nowrap;
}
.wp-block-table:not(.is-style-stripes) a {
	text-decoration: none;
}
.wp-block-table:not(.is-style-stripes) a:hover {
	text-decoration: underline;
}

/* Praktische gegevens bovenaan een activiteit. */
.roba-activiteit-info {
	margin-bottom: 2rem;
	padding: 1.25rem 1.5rem;
	border-radius: var(--roba-radius);
	background: var(--wp--preset--color--base-2);
	box-shadow: var(--roba-shadow);
}
.roba-activiteit-info dl {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1rem 2rem;
	margin: 0;
}
.roba-activiteit-info dt {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--wp--preset--color--contrast-2);
}
.roba-activiteit-info dd {
	margin: 0.2rem 0 0;
	font-weight: 600;
}
.roba-activiteit-info p {
	margin: 1.25rem 0 0;
}

/* ---------------------------------------------------------------
   Clubrecords
   ---------------------------------------------------------------
   Geslacht en seizoen zijn pillen: twee opties, één klik. Categorie is een
   keuzelijst, want negentien pillen namen de halve pagina in. De onderdelen
   staan ingeklapt met een teller -- je kiest ze zelden, maar als je ze kiest
   wil je ze allemaal zien.
   --------------------------------------------------------------- */
.roba-records__filter {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1rem 1.5rem;
	margin-bottom: 2rem;
	padding: 1.25rem 1.5rem;
	border-radius: var(--roba-radius);
	background: var(--wp--preset--color--base-2);
	box-shadow: var(--roba-shadow);
}
.roba-records__filter fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
}
.roba-records__filter legend,
.roba-records__veld label {
	float: left;
	width: 100%;
	margin-bottom: 0.35rem;
	padding: 0;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--wp--preset--color--contrast-2);
}
.roba-records__filter fieldset label {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.9rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 15%, transparent);
	border-radius: 999px;
	cursor: pointer;
	font-size: 0.9375rem;
}
.roba-records__filter fieldset label:has(input:checked) {
	background: var(--wp--preset--color--azuur);
	border-color: var(--wp--preset--color--azuur);
	font-weight: 600;
}
.roba-records__veld {
	margin: 0;
	flex: 0 1 16rem;
}
.roba-records__veld select {
	font: inherit;
	width: 100%;
	padding: 0.5rem 0.75rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 18%, transparent);
	border-radius: 999px;
	background: var(--wp--preset--color--base-2);
}
.roba-records__onderdelen {
	flex: 1 1 100%;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
	padding-top: 0.9rem;
}
.roba-records__onderdelen summary {
	cursor: pointer;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--wp--preset--color--contrast-2);
}
.roba-records__telling {
	margin-left: 0.5rem;
	padding: 0.1em 0.6em;
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--azuur) 30%, transparent);
	color: var(--wp--preset--color--contrast);
	letter-spacing: 0.03em;
}
.roba-records__vinkjes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 0.35rem 1rem;
	margin-top: 0.9rem;
}
.roba-records__vinkjes label {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.9375rem;
}
.roba-records__knoppen {
	margin: 0;
}
.roba-records__knoppen button {
	border: 0;
	cursor: pointer;
	white-space: nowrap;
}

/* Records als tabel: bij Alle categorieën staan er zestig onder elkaar, en
   die wil je kunnen overlopen in plaats van doorscrollen. */
.roba-records__tabel {
	width: 100%;
	border-collapse: collapse;
	background: var(--wp--preset--color--base-2);
	border-radius: var(--roba-radius);
	overflow: hidden;
	box-shadow: var(--roba-shadow);
	font-size: 0.9375rem;
}
.roba-records__tabel th,
.roba-records__tabel td {
	padding: 0.7rem 1rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
}
.roba-records__tabel thead th {
	background: color-mix(in srgb, var(--wp--preset--color--azuur) 16%, transparent);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	white-space: nowrap;
}
.roba-records__tabel tbody tr:last-child td {
	border-bottom: 0;
}
.roba-records__onderdeel-cel {
	font-weight: 600;
}
.roba-records__prestatie {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	white-space: nowrap;
}
.roba-records__plaats {
	display: block;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--contrast-2);
}
.roba-records__historiek {
	margin-top: 0.5rem;
}
.roba-records__historiek summary {
	cursor: pointer;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}
.roba-records__historiek ul {
	list-style: none;
	margin: 0.6rem 0 0;
	padding: 0 0 0 0.9rem;
	border-left: 2px solid color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
}
.roba-records__historiek li {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 0.7rem;
	padding: 0.3rem 0;
	font-size: 0.875rem;
}
.roba-records__historiek li span:last-child {
	color: var(--wp--preset--color--contrast-2);
}

@media (max-width: 700px) {
	.roba-records__tabel thead { display: none; }
	.roba-records__tabel tr {
		display: block;
		padding: 0.85rem 1rem;
		border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
	}
	.roba-records__tabel td {
		display: flex;
		gap: 1rem;
		border: 0;
		padding: 0.15rem 0;
	}
	.roba-records__tabel td::before {
		content: attr(data-label);
		flex: 0 0 5.5rem;
		font-size: 0.75rem;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		color: var(--wp--preset--color--contrast-2);
		padding-top: 0.15rem;
	}
}

/* Zonder JavaScript blijft de knop nodig; met JavaScript versturen de
   keuzerondjes zichzelf en is hij enkel nog voor de onderdelen. */
.roba-records__knoppen button {
	white-space: nowrap;
}

/* ---------------------------------------------------------------
   Recordkaarten
   ---------------------------------------------------------------
   Vierkante kaarten die je opzij veegt, zoals de kledijslider. Bewust niet
   automatisch doorlopend: bij een kaart wil je stilstaan en lezen.
   --------------------------------------------------------------- */
.roba-recordkaarten__titel {
	margin-bottom: 1rem;
}
.roba-recordkaarten__rij {
	display: flex;
	flex-wrap: nowrap;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	list-style: none;
	margin: 0;
	padding: 0 0 0.75rem;
	scrollbar-width: thin;
}
.roba-recordkaarten__kaart {
	flex: 0 0 auto;
	scroll-snap-align: start;
}
/* De kaart in zijn geheel tonen. Ze op een vierkant bijsnijden sneed de
   namen en tijden aan de zijkanten weg -- net wat je wil lezen. Alleen de
   hoogte staat vast, zodat de rij netjes blijft; de breedte volgt de
   verhouding van de kaart zelf. */
.roba-recordkaarten__kaart img {
	display: block;
	width: auto;
	height: clamp(220px, 42vw, 340px);
	max-width: none;
	object-fit: contain;
	border-radius: var(--roba-radius);
	box-shadow: var(--roba-shadow);
}

/* ---------------------------------------------------------------
   Juryleden
   --------------------------------------------------------------- */
.roba-jury__legende {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	border-radius: var(--roba-radius);
	background: var(--wp--preset--color--sand);
	font-size: 0.875rem;
}
.roba-jury__legende li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.roba-jury__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	border-radius: var(--roba-radius);
	overflow: hidden;
	background: var(--wp--preset--color--base-2);
	box-shadow: var(--roba-shadow);
}
.roba-jury__lid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 0.5rem 1.5rem;
	padding: 0.7rem 1.25rem;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
}
.roba-jury__lid:last-child {
	border-bottom: 0;
}
.roba-jury__naam {
	font-weight: 600;
}
.roba-jury__niveaus {
	display: flex;
	gap: 0.35rem;
	align-items: center;
}
.roba-jury__pictogram {
	height: 1.75rem;
	width: auto;
	display: block;
}
/* Zolang er nog geen pictogram bij een niveau hoort, de naam tonen. Beter
   een leesbaar label dan een leeg vakje. */
.roba-jury__tekstniveau {
	padding: 0.15em 0.6em;
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--azuur) 25%, transparent);
	font-size: 0.75rem;
	font-weight: 600;
	white-space: nowrap;
}
.roba-jury__contact {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	justify-content: flex-end;
	font-size: 0.875rem;
}
.roba-jury__contact a {
	text-decoration: none;
}

@media (max-width: 700px) {
	.roba-jury__lid {
		grid-template-columns: 1fr;
		gap: 0.35rem;
	}
	.roba-jury__contact {
		justify-content: flex-start;
	}
}

/* Sponsors als stilstaand raster, voor de partnerspagina. Alle logo's even
   groot en blijvend in beeld: wie hier komt, komt kijken. */
.roba-sponsors--raster {
	overflow: visible;
	-webkit-mask-image: none;
	mask-image: none;
	padding-block: 0;
}
.roba-sponsors__raster {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	align-items: center;
	justify-items: center;
	gap: clamp(1.5rem, 4vw, 3rem);
	margin: 1.5rem 0 2rem;
}
.roba-sponsors__raster a,
.roba-sponsors__raster span {
	display: grid;
	place-items: center;
	width: 100%;
	min-height: 5rem;
}
.roba-sponsors--raster img {
	height: auto;
	max-height: 4.5rem;
	max-width: 100%;
	width: auto;
}

/* Clublogo als tijdelijke trainersfoto.

   Twee dingen zijn hier nodig. Het logo is wit -- gemaakt om op een foto te
   staan -- en op een licht vlak vervalt het dus. En omdat alle kaartjes
   dezelfde achtergrond krijgen, vloeien ze zonder rand samen tot één grijze
   balk in plaats van losse portretten. */
.roba-person__photo--logo {
	display: grid;
	place-items: center;
	padding: 20%;
	background: var(--wp--preset--color--base-2);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
	box-sizing: border-box;
}
.roba-person__photo--logo img {
	width: 100%;
	height: auto;
	object-fit: contain;
	/* Het witte logo omkleuren naar de kernkleur: een filter werkt ook op een
	   PNG, waar een kleurinstelling dat niet doet. */
	filter: brightness(0) saturate(100%) opacity(0.28);
}
.roba-kern--betekom .roba-person__photo--logo img { filter: brightness(0) saturate(100%) invert(62%) sepia(28%) saturate(560%) hue-rotate(140deg) opacity(0.55); }
.roba-kern--diest .roba-person__photo--logo img { filter: brightness(0) saturate(100%) invert(52%) sepia(72%) saturate(2200%) hue-rotate(340deg) opacity(0.5); }
.roba-kern--wespelaar .roba-person__photo--logo img { filter: brightness(0) saturate(100%) invert(72%) sepia(24%) saturate(560%) hue-rotate(100deg) opacity(0.6); }

/* ---------------------------------------------------------------
   Vormen en letterlogo over de hero
   ---------------------------------------------------------------
   De vormentaal van sponsor Gysemans, zoals op het singlet: links onderaan
   dicht, ijler naar boven. Ze staan tussen de navigatie en de golf. Op smalle
   schermen verdwijnen ze -- daar is de foto al krap genoeg.
   --------------------------------------------------------------- */
.roba-hero__vormen {
	grid-area: 1 / 1;
	align-self: end;
	justify-self: start;
	z-index: 4;
	pointer-events: none;
	line-height: 0;
	/* De vormen komen uit de golf. Aan de linkerkant ligt de kam hoog, dus
	   mogen de onderste vormen daar een stuk in zakken -- anders blijft er
	   een gat tussen de sliert en de golf. */
	padding: 0 0 calc(var(--roba-golf) * var(--roba-vormen-diepte, 0.15)) clamp(0.5rem, 2vw, 2.5rem);
	/* Mag buiten de hero uitsteken: zo komt de sliert het scherm in in plaats
	   van er middenin te beginnen. */
	margin-left: var(--roba-vormen-schuif, 0);
}
/* De maat volgt de hoogte, niet de breedte. De hero is 62% van de
   schermhoogte, dus op een smalle hoge telefoon werd de sliert een propje
   terwijl de foto juist groot was -- en op een breed, laag scherm het
   omgekeerde. De maximumbreedte houdt hem van de rechterhelft af. */
.roba-hero__vormen img {
	/* Breedte én hoogte tellen mee. Alleen op de breedte schalen maakte hem
	   te groot op een breed, laag scherm; alleen op de hoogte maakte hem te
	   klein op een laptop. De grootste van de twee wint, met een plafond. */
	/* De breedte is hier bepalend, niet de hoogte: knijp je de baan af, dan
	   wordt het een propje in het midden in plaats van een sliert die van de
	   linkerrand komt. Op een telefoon mag hij dus ruim de helft innemen. */
	/* Breedte, hoek en diepte komen uit het blok; de waarden hier zijn de
	   terugval wanneer het blok ze niet meegeeft. */
	width: clamp(200px, var(--roba-vormen-breedte, 30vw), 700px);
	height: auto;
	max-height: 52vh;
	opacity: 0.93;
	transform-origin: center;
	transform: rotate(var(--roba-vormen-hoek, 0deg)) scaleX(var(--roba-vormen-spiegel, 1));
}

.roba-hero__merk {
	grid-area: 1 / 1;
	align-self: end;
	justify-self: end;
	z-index: 6;
	pointer-events: none;
	line-height: 0;
	padding: 0 clamp(1rem, 4vw, 4rem) calc(var(--roba-golf) * 0.42) 0;
}
.roba-hero__merk img {
	width: clamp(110px, 17vw, 250px);
	height: auto;
}

@media (max-width: 600px) {
	/* Op een telefoon staan sliert en logo laag naast elkaar; zonder deze
	   grenzen raken ze elkaar in het midden. */
	/* Op een telefoon blijft de sliert zoals hij is: daar staat hij goed en
	   duwt groter hem tegen het menu aan. */
	/* Op een telefoon gelden de eigen waarden van het blok. */
	.roba-hero__vormen {
		padding-bottom: calc(var(--roba-golf) * var(--roba-vormen-diepte-gsm, var(--roba-vormen-diepte, 0.15)));
		margin-left: var(--roba-vormen-schuif-gsm, var(--roba-vormen-schuif, 0));
	}
	.roba-hero__vormen img {
		width: clamp(200px, var(--roba-vormen-breedte-gsm, var(--roba-vormen-breedte, 84vw)), 460px);
		max-height: 40vh;
		transform: rotate(var(--roba-vormen-hoek-gsm, var(--roba-vormen-hoek, 0deg))) scaleX(var(--roba-vormen-spiegel, 1));
	}
	.roba-hero__merk img {
		width: clamp(90px, 30vw, 150px);
	}
}

/* De sliert aan de rechterkant van de hero. */
.roba-hero__vormen--rechts {
	justify-self: end;
	padding-left: 0;
	padding-right: clamp(0.5rem, 2vw, 2.5rem);
}

/* Tablets: tussen telefoon en laptop in. Deze regel staat na die voor brede
   schermen en voor die van de telefoon, zodat elk formaat zijn eigen waarden
   krijgt. */
@media (min-width: 601px) and (max-width: 1000px) {
	.roba-hero__vormen {
		padding-bottom: calc(var(--roba-golf) * var(--roba-vormen-diepte-tablet, var(--roba-vormen-diepte, 0.15)));
		margin-left: var(--roba-vormen-schuif-tablet, var(--roba-vormen-schuif, 0));
	}
	.roba-hero__vormen img {
		width: clamp(200px, var(--roba-vormen-breedte-tablet, var(--roba-vormen-breedte, 55vw)), 700px);
		transform: rotate(var(--roba-vormen-hoek-tablet, var(--roba-vormen-hoek, 0deg))) scaleX(var(--roba-vormen-spiegel, 1));
	}
}

/* Het standaardbeeld is een vlak met vormen, geen foto: iets zachter tonen
   zodat het niet met echte foto's concurreert. */
.roba-beeld--standaard {
	opacity: 0.85;
}

/* Het clublogo als terugvalbeeld: op een vlak in de clubkleur, met ruimte
   eromheen zodat het niet als bijgesneden foto oogt. */
.roba-beeld--logo {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	width: 100%;
	padding: 22%;
	border-radius: var(--roba-radius);
	background: var(--wp--preset--color--azuur);
	box-sizing: border-box;
}
.roba-beeld--logo img {
	width: 100%;
	height: auto;
	object-fit: contain;
	opacity: 0.85;
}

/* Het terugvalbeeld in een Query Loop krijgt dezelfde vorm als een echte
   uitgelichte afbeelding: even hoog, zelfde afronding. */
.roba-beeld--terugval {
	margin: 0;
}
.roba-beeld--terugval img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--roba-radius);
}
.roba-beeld--terugval .roba-beeld--logo {
	border-radius: var(--roba-radius);
}
.roba-beeld--terugval .roba-beeld--logo img {
	aspect-ratio: auto;
	object-fit: contain;
}

/* Alle uitgelichte afbeeldingen even hoog. Een staande foto maakt anders
   zijn kaart veel langer, en dan staan de titels van de kolommen niet meer op
   één lijn. Op het blok zelf gericht en niet op de query eromheen, want die
   klasse staat er niet altijd. */
.wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--roba-radius);
}
/* Op de pagina van één verslag of activiteit mag de foto zijn eigen
   verhouding houden: daar staat hij alleen en hoeft er niets uitgelijnd te
   worden. Wel met een plafond aan de hoogte, want een staande flyer wordt
   anders een kolom van anderhalf scherm hoog. Bijsnijden is daar geen optie:
   dan valt de tekst van de flyer eraf. */
.wp-block-post-featured-image.alignwide img,
.wp-block-post-featured-image.alignfull img {
	aspect-ratio: auto;
	max-height: 70vh;
	width: auto;
	max-width: 100%;
	margin-inline: auto;
	object-fit: contain;
}
.wp-block-post-featured-image.alignwide,
.wp-block-post-featured-image.alignfull {
	text-align: center;
}

/* Bijschriften in een galerij onder de foto in plaats van eroverheen.
   Core legt ze standaard als witte tekst over het beeld met een donker
   verloop; bij een wedstrijdverslag wil je ze kunnen lezen zonder dat ze de
   foto afdekken, en in dezelfde stijl als elders op de site. */
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	position: static;
	max-height: none;
	margin: 0.5rem 0 0;
	padding: 0;
	background: none;
	text-align: center;
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--small);
	overflow: visible;
	text-shadow: none;
}
/* Core rekent bij een bijgesneden galerij de hoogte van elke foto als 100%
   van zijn kader. Dat werkt zolang de bijschriften over de foto liggen, maar
   niet meer zodra ze eronder staan: dan is dat kader nul hoog en verdwijnt de
   foto. Deze regel is even specifiek als die van core en zet het recht, ook
   voor galerijen die al gemaakt zijn. */
/* Foto's in een galerij houden hun eigen verhouding. Ze even hoog maken
   vraagt bijsnijden, en dat kostte bij portretfoto's hoofden -- erger dan een
   rij die niet helemaal uitgelijnd is. Wie het strak wil, snijdt de foto zelf
   bij voor het uploaden. */
.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img,
.wp-block-gallery.has-nested-images figure.wp-block-image img {
	height: auto;
	max-height: none;
	object-fit: contain;
}

/* ---------------------------------------------------------------
   Tekst over de hero
   ---------------------------------------------------------------
   Een schermvullende foto zonder woorden laat de bezoeker raden waar hij is.
   Deze regel staat links onderaan, boven de golf, en zegt in één zin wie we
   zijn. Het pijltje eronder maakt duidelijk dat er meer volgt.
   --------------------------------------------------------------- */
.roba-hero__tekst {
	grid-area: 1 / 1;
	align-self: end;
	justify-self: start;
	z-index: 7;
	max-width: min(42ch, 80vw);
	padding: 0 clamp(1rem, 4vw, 4rem) calc(var(--roba-golf) * 1.15) clamp(1rem, 4vw, 4rem);
	color: #fff;
	text-shadow: 0 2px 18px rgba(36, 36, 36, 0.55);
}
.roba-hero__tekst p {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(1.5rem, 3.4vw, 2.75rem);
	line-height: 1.12;
}
.roba-hero__tekst span {
	display: block;
	margin-top: 0.6rem;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
	font-size: clamp(0.95rem, 1.3vw, 1.125rem);
	line-height: 1.45;
	opacity: 0.95;
	text-wrap: balance;
}

/* Het pijltje onderaan: zacht op en neer, zodat het opvalt zonder te
   schreeuwen. Staat stil voor wie beweging heeft uitgezet. */
.roba-hero__verder {
	grid-area: 1 / 1;
	align-self: end;
	justify-self: center;
	/* Boven het dekstrookje van .roba-hero::after, dat ook op 7 staat en
	   later in het bestand wint. Raakte het pijltje op zijn laagste punt dat
	   strookje, dan schoof hij eronder -- de witte lijn die kwam en ging. */
	z-index: 8;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	/* Ruim binnen de hero blijven: het balletje wipt op en neer, en kwam
	   onderaan voorbij de rand -- daar ligt de sponsorbalk, en dan schoof hij
	   er half achter. */
	margin-bottom: calc(var(--roba-golf) * 0.45 + 12px);
	border-radius: 999px;
	color: #fff;
	text-decoration: none;
	background: rgba(36, 36, 36, 0.3);
	backdrop-filter: blur(4px);
	animation: roba-wip 2.4s ease-in-out infinite;
}
.roba-hero__verder svg {
	width: 1.25rem;
	height: 1.25rem;
}
@keyframes roba-wip {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(5px); }
}
@media (prefers-reduced-motion: reduce) {
	.roba-hero__verder { animation: none; }
}

@media (max-width: 782px) {
	.roba-hero__tekst {
		padding-bottom: calc(var(--roba-golf) * 1.6);
		max-width: 88vw;
	}
	/* Ook op een telefoon: juist daar zie je het minst van wat eronder komt.
	   Gewoon in het midden, zoals op een breed scherm -- rechts las als een
	   losse knop in plaats van een aanwijzing. */
	.roba-hero__verder {
		margin-bottom: calc(var(--roba-golf) * 0.35 + 10px);
		width: 2.5rem;
		height: 2.5rem;
	}
}

/* De adminbalk duwt de pagina omlaag; zonder dit zou de sponsorbalk er voor
   een ingelogde beheerder net buiten vallen. Bezoekers zien die balk niet. */
body.admin-bar {
	--roba-adminbalk: 32px;
}
@media (max-width: 782px) {
	body.admin-bar {
		--roba-adminbalk: 46px;
	}
}

/* ---------------------------------------------------------------
   Hoofdsponsor in de golf
   ---------------------------------------------------------------
   Zet op het afbeeldingsblok de extra klasse roba-hoofdsponsor en plaats het
   los tussen de hero en de sponsorbalk -- niet in een kolom.

   Op een breed scherm wordt het logo omhoog getrokken in de witte driehoek
   die de golf links vrijlaat. Die ruimte is ongeveer vier vijfde van de
   golfhoogte, en omdat de golf zelf met het scherm meeschaalt, zit het logo
   altijd net onder de boog -- hoe breed het venster ook is.

   Op een telefoon is die driehoek er nauwelijks; daar blijft het logo gewoon
   boven de balk staan.
   --------------------------------------------------------------- */
.roba-hoofdsponsor {
	display: flex;
	align-items: center;
	margin: 0;
	/* Boven de golf, ook op een telefoon: zonder dit valt de bovenkant van
	   het logo achter de boog van de hero erboven. Hoger dan de hero, want
	   die staat nu zelf ook gestapeld. */
	position: relative;
	z-index: 3;
}
.roba-hoofdsponsor img {
	width: auto;
	max-width: 100%;
	object-fit: contain !important;
}

@media (min-width: 783px) {
	.roba-hoofdsponsor {
		/* In de golf trekken. De negatieve marge telt vanzelf mee in de
		   meting van het eerste scherm, dus de hero past zich aan. */
		/* Een halve golfhoogte omhoog: dan ligt het logo in de witte driehoek
		   die de boog links vrijlaat, zonder over de foto te komen. */
		margin-top: calc(var(--roba-golf) * -0.5);
		margin-bottom: calc(var(--roba-golf) * 0.05);
		padding-left: clamp(1rem, 4vw, 4rem);
		position: relative;
		z-index: 5;
		justify-content: flex-start;
	}
	.roba-hoofdsponsor img {
		/* Zo hoog als de witte ruimte onder de boog toelaat, maar ook
		   begrensd in de breedte: het logo is bijna vierkant, en dan wordt
		   200 pixels hoog meteen 900 breed. De kleinste van de twee wint. */
		height: auto;
		width: auto;
		max-height: calc(var(--roba-golf) * 0.62);
		max-width: clamp(160px, 18vw, 280px);
	}
}

@media (max-width: 782px) {
	/* Op een telefoon is de golf maar negentig pixels hoog, dus past het
	   logo er net in. Dat kan alleen als het wat kleiner wordt -- en dan
	   moeten de logo's in de balk mee omlaag, anders is de hoofdsponsor
	   nauwelijks groter dan de rest. */
	.roba-sponsors img {
		height: clamp(20px, 5.5vw, 24px);
	}

	.roba-hoofdsponsor {
		justify-content: flex-start;
		padding-left: clamp(1rem, 4vw, 2rem);
		margin-top: calc(var(--roba-golf) * -0.28);
		margin-bottom: 0.5rem;
	}
	.roba-hoofdsponsor img {
		height: auto;
		width: auto;
		max-height: clamp(28px, 9vw, 40px);
		max-width: clamp(130px, 44vw, 200px);
	}
}

/* Een staande uitgelichte afbeelding op de pagina van één bericht, ook
   zonder brede uitlijning: hetzelfde plafond, zodat een flyer leesbaar
   blijft zonder het scherm te vullen. */
.wp-singular .wp-block-post-featured-image:not(.alignwide):not(.alignfull) img {
	max-height: 70vh;
	width: auto;
	max-width: 100%;
	margin-inline: auto;
	aspect-ratio: auto;
	object-fit: contain;
}
.wp-singular .wp-block-post-featured-image:not(.alignwide):not(.alignfull) {
	text-align: center;
}