/* Platform — cookiemelding en toestemming.
 *
 * DE MELDING DRAAGT DE HUISSTIJL VAN DE SITE (opdracht Marcel, 2026-08-16).
 *
 * Tot die datum stond hier één vast ontwerp: een donkergrijze balk (#1c1c1c)
 * met witte knoppen en de systeemletter, op elke site hetzelfde. Dat was
 * bewust neutraal — "onder elk klantthema zonder mee te ontwerpen" — maar het
 * gevolg was dat het eerste wat een bezoeker ziet er bij niemand bij hoort.
 * Een balk die van een andere partij lijkt te zijn, is precies de balk die
 * wordt weggeklikt zonder gelezen te worden.
 *
 * HOE DE HUISSTIJL HIER KOMT
 *
 * Niet uit dit bestand. Dit bestand is gedeeld en op elke site identiek; het
 * gebruikt alleen `var(--hs-…)`. Die variabelen komen uit een tweede
 * stylesheet, `platform-assets/huisstijl.css`, die per klant wordt gegenereerd
 * uit het `huisstijl`-blok van `config/app.php` — hetzelfde blok waaruit het
 * beheerpaneel en de klantomgeving hun opmaak halen. Zie
 * `platform-wp-muplugins` en `docs/wordpress.md`.
 *
 * Eén bron dus, en geen tweede plek waar een kleur wordt overgetikt.
 *
 * WAT ER GEBEURT ALS DIE STYLESHEET ER NIET IS
 *
 * Dan grijpt elke `var()` naar zijn tweede argument en staat er een nette,
 * neutrale melding: wit vlak, donkere tekst, bijna-zwarte knoppen met een wit
 * label. Niet het merk, wel leesbaar en met kloppend contrast. De faalrichting
 * is dus "onopvallend", niet "onleesbaar" — en zeker niet "onzichtbaar".
 *
 * DRIE DINGEN ZIJN HIER GEEN SMAAK MAAR EIS
 *
 *  - De weiger- en accepteerknop zijn identiek in grootte, kleur en gewicht.
 *    Een weigering die minder opvalt dan een akkoord is geen vrije keuze, en
 *    dan is de toestemming die je krijgt niets waard.
 *
 *  - Contrast. Het label op de knoppen is ALTIJD wit, want de knop is altijd
 *    `--hs-primair`. Nagemeten op 2026-08-16 over alle elf klantconfiguraties:
 *    wit op `primair` haalt minimaal 4,75:1 (kraamzorgbep) en maximaal 12,44:1
 *    (regioharmonie) — overal boven de 4,5:1 van WCAG AA. `--hs-tekst` op
 *    `--hs-vlak` haalt minimaal 11,91:1.
 *
 *    `--hs-primair` wordt hier bewust NIET als tekstkleur gebruikt, ook niet
 *    voor de link "meer lezen". Op `--hs-vlak` blijft die bij twee klanten
 *    onder de norm (boersmaendewilde 4,16:1, kraamzorgbep 4,49:1). Als
 *    knopVLAK is diezelfde kleur wél goed: daar geldt 3:1, en dat haalt
 *    iedereen ruim. De link krijgt daarom `--hs-tekst` plus een onderstreping.
 *
 *  - Het vlak scheidt zich van de pagina met een SCHADUW, niet met de rand.
 *    `--hs-rand` is bij elke klant een fijne scheidslijn (1,08:1 tot 1,48:1 op
 *    `--hs-vlak`) en is dus niet in staat een zwevend paneel af te bakenen.
 *    De rand staat er voor de vorm; de schaduw doet het werk.
 *
 * Alle klassen beginnen met itmb-cookies; er wordt niets globaals aangeraakt.
 * De knop- en linkregels staan bewust op twee klassen diep
 * (`.itmb-cookies .itmb-cookies__knop`) omdat klantthema's `button` en `a`
 * breed opmaken en een enkele klasse het dan verliest.
 */

.itmb-cookies {
	position: fixed;
	left: 1rem;
	right: 1rem;
	bottom: 1rem;
	z-index: 99999;
	max-width: 34rem;
	margin-inline: auto;
	padding: 1.25rem;
	background: var(--hs-vlak, #fff);
	color: var(--hs-tekst, #1c1c1c);
	border: 1px solid var(--hs-rand, #e4e4e4);
	border-radius: .5rem;
	box-shadow: 0 .75rem 2.5rem rgba(0, 0, 0, .28);
	font-size: .95rem;
	line-height: 1.5;
	font-family: var(--hs-font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}

.itmb-cookies[hidden] {
	display: none;
}

.itmb-cookies__titel {
	margin: 0 0 .4rem;
	padding: 0;
	font-size: 1.05rem;
	line-height: 1.3;
	font-weight: 700;
	color: inherit;
	/* De kopletter van de site, met de gewone letter als terugval. Twee
	   geneste var()'s: ontbreekt --hs-font-kop, dan --hs-font, en ontbreekt
	   die ook, dan de systeemletter. */
	font-family: var(--hs-font-kop, var(--hs-font, inherit));
}

.itmb-cookies__tekst {
	margin: 0 0 1rem;
	color: inherit;
}

.itmb-cookies .itmb-cookies__meer {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: .15em;
}

.itmb-cookies__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
}

/* Gelijkwaardig, en dus letterlijk dezelfde opmaak voor accepteren en
   weigeren. flex: 1 1 10rem geeft ze bovendien dezelfde breedte. */
.itmb-cookies .itmb-cookies__knop {
	flex: 1 1 10rem;
	min-height: 2.75rem;
	padding: .6rem 1rem;
	background: var(--hs-primair, #1c1c1c);
	color: #fff;
	border: 2px solid transparent;
	border-radius: .35rem;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: background-color .15s ease-in-out;
}

.itmb-cookies .itmb-cookies__knop:hover,
.itmb-cookies .itmb-cookies__knop:focus-visible {
	background: var(--hs-primair-hover, #3a3a3a);
	color: #fff;
}

.itmb-cookies .itmb-cookies__knop:focus-visible,
.itmb-cookies__heropen:focus-visible {
	outline: 3px solid var(--hs-focus, #1c1c1c);
	outline-offset: 2px;
}

/* De terugweg naar de keuze. Klein en onopvallend, maar wel altijd bereikbaar
   en groot genoeg om aan te tikken (44px, WCAG 2.5.8). Zelfde knopkleur als
   hierboven, zodat het als bedieningselement leest en niet als een sticker. */
.itmb-cookies__heropen {
	position: fixed;
	left: 1rem;
	bottom: 1rem;
	z-index: 99998;
	min-height: 2.75rem;
	padding: .5rem .9rem;
	background: var(--hs-primair, #1c1c1c);
	color: #fff;
	border: 2px solid transparent;
	border-radius: .35rem;
	box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .22);
	font: inherit;
	font-family: var(--hs-font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	font-size: .8rem;
	font-weight: 600;
	cursor: pointer;
}

.itmb-cookies__heropen:hover {
	background: var(--hs-primair-hover, #3a3a3a);
	color: #fff;
}

.itmb-cookies__heropen[hidden] {
	display: none;
}

@media (prefers-reduced-motion: no-preference) {
	.itmb-cookies {
		animation: itmb-cookies-in .18s ease-out;
	}

	@keyframes itmb-cookies-in {
		from { transform: translateY(.75rem); opacity: 0; }
		to   { transform: none; opacity: 1; }
	}
}