/*
 * Vogelklas Karel Schot — de blokstijl "Hero" op core/cover.
 *
 * Laadt via wp_enqueue_block_style() in functions.php: alleen op pagina's waar
 * een coverblok staat, en altijd in de editor. De stijl heet `hero`; WordPress
 * zet daarvoor de klasse `is-style-hero` op de cover.
 *
 * De hero is de foto over het volle scherm boven aan de voorpagina, met de
 * leader in lime, de titel in zand, drie ghost-knoppen onderin en een pijltje
 * naar beneden rechtsonder. Uit style.css regel 421 e.v. (#frontpage-image) en
 * template-front.php.
 *
 * DE KLASSE vk-hero HOORT ER ALTIJD BIJ
 * assets/js/doneer-knop.js zoekt op `.vk-hero` om de zwevende doneer-knop te
 * verbergen zolang de hero in beeld is. Die klasse staat als gewone className
 * op hetzelfde coverblok; `is-style-hero` doet de opmaak, `vk-hero` de plek.
 * Ze staan allebei op de cover in templates/front-page.html; wie elders een
 * hero bouwt, zet ze allebei.
 */

/* ---------- De volle schermhoogte ---------- */

/*
 * !important, en dat is hier onvermijdelijk. De hoogte van een coverblok is een
 * blokattribuut (`minHeight`), en WordPress schrijft dat als inline stijl op de
 * <div>. Inline stijl wint van elke selector; alleen !important komt eroverheen.
 *
 * WAAROM svh EN NIET vh
 * Op een telefoon telt vh de balken van de browser niet mee: 100vh is daar
 * hoger dan het zichtbare venster, dus zou de onderrand van de hero — met de
 * knoppen erin — onder de adresbalk verdwijnen. svh is de kleine variant en
 * rekent mét die balken.
 *
 * Het blokattribuut blijft met opzet op 100vh staan: de editor kent svh niet
 * als eenheid in zijn hoogteveld, en zonder attribuut zou de cover in het
 * canvas op zijn standaardhoogte van 430px staan. Zo klopt het beeld daar ook.
 */
.wp-block-cover.is-style-hero {
	min-height: 100svh !important;
	padding: var(--wp--preset--spacing--50);
}

/*
 * De inhoud vult de hero van boven tot onder: de tekst bovenaan, de knoppenrij
 * onderaan. Uit style.css regel 432 (tekst op 100px van boven) en 466 (knoppen
 * op 45px van onder).
 *
 * De cover zet zelf `align-items: center` op zijn inhoud; `stretch` maakt het
 * omhulsel weer even hoog als de cover, zodat er iets te verdelen valt.
 */
.wp-block-cover.is-style-hero {
	align-items: stretch;
}

.wp-block-cover.is-style-hero > .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--wp--preset--spacing--40);
	width: 100%;
}

/*
 * VANAF 800px: tekst bovenin, knoppen onderin. Daaronder blijft alles bij
 * elkaar in het midden staan — op een telefoon is een lege hero met de knoppen
 * helemaal onderaan geen winst, en de knoppen mogen juist in beeld staan.
 */
@media screen and (min-width: 800px) {
	.wp-block-cover.is-style-hero > .wp-block-cover__inner-container {
		justify-content: space-between;
		padding-block: var(--wp--preset--spacing--50);
	}
}

/* ---------- De tekst ---------- */

/*
 * De slagschaduw uit style.css regel 437: 0 0 20px rgba(0,0,0,0.5). Die is er
 * niet voor de sier maar voor de leesbaarheid — een foto is nooit overal even
 * donker.
 *
 * Op live ligt er géén sluier over de herofoto (style.css regel 421 e.v. kent
 * geen overlay); de foto staat er op volle sterkte en deze schaduw doet al het
 * leeswerk. Daarom staat `dimRatio` in templates/front-page.html op 0. Het
 * overlay-attribuut zelf blijft staan, zodat de sluier per foto alsnog op te
 * draaien is als een lichte foto de tekst opeet.
 */
.wp-block-cover.is-style-hero :where(h1, h2, h3, p) {
	text-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

/* ---------- Het pijltje rechtsonder ---------- */

/*
 * Uit style.css regel 269 (a.down): rechtsonder in de hero, wit op 40%
 * doorzichtigheid, bij hover 80%. Het was toen een Font Awesome-teken; nu is
 * het assets/icons/chevron-omlaag.svg als masker, dezelfde aanpak als de veer
 * op de doneer-knop en de vogel op de menuknop.
 *
 * Het masker zit op de ::before en niet op de link zelf. Een masker knipt alles
 * weg wat het element tekent — óók de focusrand — en dan zou het pijltje met de
 * toetsenbord niet meer te vinden zijn.
 *
 * De tekst van de link blijft in de HTML staan en wordt met text-indent uit
 * beeld geschoven. Zo hoort een schermlezer "Verder naar beneden" in plaats van
 * een link zonder naam.
 */
/*
 * Het pijltje staat absoluut in de rechteronderhoek en niet in de rij, precies
 * zoals in het oude thema (style.css regel 269: `position: absolute; bottom:
 * 15px; right: 15px`). Dat is niet alleen trouw aan het ontwerp maar ook nodig
 * voor de verdeling hierboven: `space-between` verdeelt álle kinderen van de
 * inhoud, dus met het pijltje in de rij zouden de knoppen in het midden komen
 * te hangen in plaats van onderin. Absoluut geplaatst telt het niet mee.
 *
 * Het houvast is de cover zelf; core geeft `.wp-block-cover` al
 * `position: relative`.
 */
.wp-block-cover.is-style-hero .vk-hero__pijl {
	position: absolute;
	right: 15px;
	bottom: 15px;
	margin: 0;
	text-align: right;
}

.wp-block-cover.is-style-hero .vk-hero__pijl a {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 44px;
	overflow: hidden;
	/*
	 * text-indent schuift alleen de éérste regel weg. Zonder `nowrap` breekt
	 * "Verder naar beneden" binnen de 44px in drie regels, blijven regel twee en
	 * drie gewoon staan en lees je "naar beneden" dwars door het pijltje heen —
	 * nagemeten op de testpagina. Met nowrap is er maar één regel en verdwijnt
	 * die helemaal.
	 */
	white-space: nowrap;
	/*
	 * En `text-align: left` erbij, want de <p> eromheen lijnt rechts uit en dat
	 * erft de link. Bij rechts uitlijnen legt de browser de regel tegen de
	 * réchterrand van het vak, ongeacht hoe ver text-indent hem naar links heeft
	 * geduwd: het einde van "…beneden" kwam zo alsnog dwars door het pijltje
	 * heen te staan. Nagemeten op de testpagina, met en zonder.
	 */
	text-align: left;
	text-indent: -999em;
	text-decoration: none;
}

.wp-block-cover.is-style-hero .vk-hero__pijl a::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 30px;
	height: 30px;
	background-color: rgba(255, 255, 255, 0.6);
	-webkit-mask: url("../icons/chevron-omlaag.svg") no-repeat center / contain;
	mask: url("../icons/chevron-omlaag.svg") no-repeat center / contain;
	transition: background-color 0.4s ease-in-out;
}

.wp-block-cover.is-style-hero .vk-hero__pijl a:hover::before,
.wp-block-cover.is-style-hero .vk-hero__pijl a:focus::before {
	background-color: rgba(255, 255, 255, 0.95);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-cover.is-style-hero .vk-hero__pijl a::before {
		transition: none;
	}
}

/*
 * Op een smal scherm is er geen plek voor én drie knoppen onder elkaar én een
 * pijltje: het pijltje wijst dan naar iets wat al in beeld staat. Weg ermee,
 * inclusief uit de voorleesvolgorde.
 */
@media screen and (max-width: 799px) {
	.wp-block-cover.is-style-hero .vk-hero__pijl {
		display: none;
	}
}

/* ---------- De knoppenrij ---------- */

/*
 * De drie ghost-knoppen staan gecentreerd naast elkaar en breken op een smal
 * scherm netjes af. Dat doet het knoppenblok zelf met zijn flex-opmaak; hier
 * staat alleen dat ze op mobiel de volle breedte mogen pakken, zodat drie
 * knoppen onder elkaar even breed zijn en niet als een trapje staan.
 */
@media screen and (max-width: 599px) {
	.wp-block-cover.is-style-hero .vk-hero__knoppen .wp-block-button {
		width: 100%;
	}

	.wp-block-cover.is-style-hero .vk-hero__knoppen .wp-block-button__link {
		width: 100%;
	}
}

/* ==========================================================================
   Fase 4b — de twee covers uit de bouwstenen
   ========================================================================== */

/*
 * DE VERWIJZING NAAR GESCHIEDENIS, ONDERAAN DE VOORPAGINA (`vk-teaser`)
 *
 * In het oude thema was dit een foto over de volle breedte die in zijn geheel
 * een link naar /geschiedenis was (template-front.php, #frontpage-block4). Een
 * hele band als link is met de toetsenbord lastig en met een schermlezer niet
 * te benoemen; hier is het een cover met een witte kaart erop, en de link zit
 * in een gewone knop met een leesbaar label.
 *
 * De kaart blijft smal, ook op een breed scherm: een tekstregel van 1140px
 * leest niet.
 */
.wp-block-cover.vk-teaser > .wp-block-cover__inner-container {
	display: flex;
	justify-content: center;
}

.wp-block-cover.vk-teaser .vk-teaser__kaart {
	max-width: 480px;
	padding: var(--wp--preset--spacing--40);
	text-align: center;
}

/*
 * DE VIER FOTOBANDEN OP "DIER GEVONDEN" (`vk-band`)
 *
 * Uit style.css regel 1157 (.button-background): een foto met de knoppen
 * erover. De eerste band draagt ook de intro-kop en -tekst; de andere drie
 * alleen de knoppenrij, die daar verticaal gecentreerd staat.
 *
 * De cover zet zijn inhoud standaard in het midden; hier hoeft alleen de
 * binnenruimte gelijk te lopen met de rest van het ontwerp, en moet de tekst
 * niet over de volle 1140px lopen.
 */
.wp-block-cover.vk-band {
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

.wp-block-cover.vk-band > .wp-block-cover__inner-container {
	width: 100%;
}

/*
 * EEN WITTE KAART OP EEN COVER KRIJGT ZIJN EIGEN TEKSTKLEUR TERUG
 *
 * WordPress zet de tekst in een coverblok op wit — logisch, want daar ligt een
 * foto onder. Maar een `is-style-kaart` binnen die cover is zelf een wit vlak,
 * en dan staat er wit op wit: de tekst is er wel, maar niemand ziet hem.
 * Nagemeten op de testpagina van de voorpagina, waar de zin boven de knop
 * "Lees de geschiedenis" onzichtbaar bleek.
 *
 * De kaart neemt daarom de gewone tekstkleur van de site terug. De selector
 * staat met opzet in `:where()`: dat telt niet mee voor het gewicht, dus een
 * redacteur die in de zijbalk bewust een kleur kiest — dat wordt een
 * `has-…-color`-klasse op het blok — wint hier alsnog van.
 */
:where(.wp-block-cover .wp-block-group.is-style-kaart) {
	color: var(--wp--preset--color--inkt);
}

/*
 * De vier snelkoppelingen passen alleen op één regel als ze breder mogen zijn
 * dan de leesbreedte. De cover heeft een constrained-opmaak — dat is precies
 * wat de intro-tekst nodig heeft, die moet níet over 1140px lopen — maar die
 * opmaak zet ook de knoppenrij op 660px, en dan valt de vierde knop naar een
 * tweede regel. De rij krijgt daarom de volle breedte terug; op een smal
 * scherm breken de knoppen vanzelf af.
 */
.wp-block-cover.vk-band > .wp-block-cover__inner-container > .wp-block-buttons {
	max-width: none;
}