/*
 * Golven in de footer (zie footer-golven.php), net als tussen de secties van
 * de homepage (homepage-volgorde.css), maar met eigen vormen en lager.
 *
 * Beide steken omhoog uit hun rij, in de kleur van die rij, zodat ze werken
 * wat er ook boven staat. Boven de footer staat op elke pagina iets anders;
 * gemeten op 7 oktober 2026 zat er op vijftien pagina's minstens 60px
 * (telefoon 48px) tussen de laatste tekst of kaart en de footer. Ze lopen
 * 1px de rij in tegen een haarlijn. z-index 1, want de laatste sectie van een
 * pagina kan zelf z-index 1 hebben.
 */
#footer > [data-row="middle"],
#footer > [data-row="bottom"] {
	position: relative;
}

#footer > [data-row="middle"]::before,
#footer > [data-row="bottom"]::before {
	content: "";
	position: absolute;
	z-index: 1;
	left: 0;
	right: 0;
	bottom: calc(100% - 1px);
	height: calc(var(--nrd-golf-hoogte) + 1px);
	pointer-events: none;
	background: var(--nrd-golf-kleur);
	-webkit-mask: var(--nrd-golf-vorm) center / var(--nrd-golf-breedte, 100%) 100% no-repeat;
	mask: var(--nrd-golf-vorm) center / var(--nrd-golf-breedte, 100%) 100% no-repeat;
}

/* Naar de nieuwsbrief: een lage top links, een dal rechts van het midden. */
#footer > [data-row="middle"] {
	--nrd-golf-kleur: #e3ece8;
	--nrd-golf-hoogte: 28px;
	--nrd-golf-vorm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C160,18 330,20 500,46 C680,74 840,76 1000,52 V100 H0 Z'/%3E%3C/svg%3E");
}

/*
 * De balk met het copyright. Eerst een vlakkere golf, sinds 9 oktober 2026
 * een cappuccino (onderaan dit bestand). Bijna zwart, zoals de
 * smaakband (sinds 8 oktober 2026; eerder die dag koffiebruin #4a3418): op
 * salie las de crema niet als koffie. Via variabelen, niet met een zwaardere selector: Blocksy
 * kleurt de balk met --theme-palette-color-1. Melkwitte tekst in
 * footer-opbouw.css.
 */
#footer > [data-row="bottom"] {
	--nrd-golf-kleur: #231910;
	--theme-palette-color-1: #231910;
}

@media (max-width: 767px) {
	#footer > [data-row="middle"]::before,
	#footer > [data-row="bottom"]::before {
		height: calc(var(--nrd-golf-hoogte) * 0.58 + 1px);
	}
}

/*
 * De balk is een cappuccino (sinds 9 oktober 2026): een stilstaand beeld
 * van de shader in crema.js, op de plek van het canvas (beweging.css,
 * .nrd-crema--gl). Dat staat er tot het canvas zijn eerste beeld heeft, en
 * blijft staan bij "minder beweging" en zonder WebGL2. Het is precies het
 * eerste beeld van het canvas, met stoom (crema.js, BEELD). Het begint net
 * als het canvas 240px boven de balk (telefoon 190px, --nrd-koffie-top in
 * beweging.css) en loopt door tot onderaan; is de balk hoger dan het beeld,
 * dan is de rest de kleur van de balk.
 * Een nieuw beeld krijgt een nieuw nummer ("Remove Query Strings").
 *
 * isolation geeft de balk een eigen stapel: het beeld en het canvas liggen
 * met z-index -1 boven de achtergrond van de balk en onder de tekst.
 */
#footer > [data-row="bottom"] {
	isolation: isolate;
}

#footer > [data-row="bottom"]::before {
	z-index: -1;
	bottom: 0;
	height: calc(100% + 240px);
	-webkit-mask: none;
	mask: none;
	background: url("/wp-content/mu-plugins/nrd/assets/koffie-voet-11.webp") center top / max(100%, 2560px) auto no-repeat;
	/* Op een scherm met pixelverhouding 1 het beeld op 1x, bijna de helft kleiner. */
	background-image: image-set(url("/wp-content/mu-plugins/nrd/assets/koffie-voet-11-1x.webp") 1x, url("/wp-content/mu-plugins/nrd/assets/koffie-voet-11.webp") 1.5x);
}

@media (max-width: 767px) {
	#footer > [data-row="bottom"]::before {
		height: calc(100% + 190px);
		background-image: url("/wp-content/mu-plugins/nrd/assets/koffie-voet-mobiel-11.webp");
		background-size: max(100%, 760px) auto;
	}
}