/*
 * Cookiebanner (Complianz) — merkstyling.
 *
 * WAAROM HIER EN NIET IN DE PLUGIN. Complianz heeft zelf een veld voor eigen CSS,
 * maar dat is DB-state: het staat niet in Git, deployt niet mee via de pipeline
 * en moet je op elke omgeving overtikken. Precies de klasse fouten die
 * docs/SEEDING.md probeert te voorkomen. Hier is het reviewbaar en reist het mee.
 * Het risico dat Complianz z'n `.cmplz-*`-classes hernoemt bij een update loop je
 * in beide gevallen even hard.
 *
 * WAT WEL EN NIET HIER HOORT. Alles wat de banner-instellingen zelf kunnen —
 * positie, radius, kleuren, lettergrootte, de blokkerende overlay — staat in de
 * database via de bannerinstellingen, niet hier. Zie SEEDING. Dit bestand doet
 * alleen wat die instellingen níet kunnen: het lettertype en de laatste
 * afwerking gelijktrekken met de rest van de site.
 *
 * Dit is een van de weinige stylesheets die NIET op een paginacontext gescoped
 * is, en dat mag: de banner hangt aan <body> en verschijnt overal. Elke selector
 * begint daarom met een `.cmplz-`-class, zodat niets hiervan het thema kan raken.
 */

/* ---------- typografie ---------- */

#cmplz-cookiebanner-container .cmplz-cookiebanner,
#cmplz-manage-consent .cmplz-manage-consent {
	font-family: var(--font-sans);
	line-height: var(--lh-base);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title {
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	letter-spacing: var(--tracking-snug);
	color: var(--fg-1);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message {
	color: var(--fg-2);
}

/* ---------- knoppen ---------- */
/*
 * De radius komt uit de bannerinstellingen (10px = --r-md), de rest hier. Let op
 * het contrast: wit op #008999 haalt maar 4,16:1, dus de accepteerknop gebruikt
 * --accent-fill (5,96:1). Zie de contrastronde in variables.css.
 */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn {
	font-family: var(--font-sans);
	font-weight: var(--fw-bold);
	font-size: var(--fs-14);
	transition: background var(--dur-base) var(--ease-standard);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-accept {
	background: var(--accent-fill);
	border-color: var(--accent-fill);
	color: #fff;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover {
	background: var(--accent-fill-hover);
	border-color: var(--accent-fill-hover);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-deny,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences {
	background: transparent;
	border: 1px solid var(--border-1);
	color: var(--fg-1);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences:hover {
	background: var(--bg-2);
}

/* Zichtbare focus — de banner is met een blokkerende overlay het enige
 * bedienbare element op de pagina, dus toetsenbordfocus moet hier opvallen
 * (WCAG 2.4.7). */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn:focus-visible,
#cmplz-cookiebanner-container .cmplz-cookiebanner a:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* ---------- links in de banner ---------- */

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-link,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-documents a {
	color: var(--accent-text);
	text-underline-offset: 2px;
}

/* ---------- de blokkerende laag ---------- */
/*
 * De overlay zelf komt van Complianz (`soft_cookiewall = 1` in de
 * bannerinstellingen); die zet ook `overflow: hidden` op <html>, waardoor
 * scrollen en klikken achter de modal onmogelijk zijn tot er een keuze is
 * gemaakt. Hier alleen de tint, zodat het grijs bij het thema past in plaats van
 * het standaard blauwzwart van de plugin.
 */
.cmplz-blocked-content-container,
#cmplz-cookiebanner-container.cmplz-blocked-content-container,
.cmplz-soft-cookiewall .cmplz-cookiebanner-overlay,
#cmplz-cookiebanner-container ~ .cmplz-cookiebanner-overlay {
	background: rgba(15, 23, 26, 0.55); /* --hs-ink op 55% */
	backdrop-filter: blur(2px);
}

/* ---------- de footerlink die de banner heropent ---------- */
/*
 * Een <button> omdat Complianz daarop bindt (button.cmplz-manage-consent), maar
 * hij moet als de andere footerlinks ernaast lezen — niet als knop.
 */
.hs-footer__consent {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	cursor: pointer;
	text-decoration: none;
}

.hs-footer__consent:hover {
	text-decoration: underline;
}

.hs-footer__consent:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: var(--r-sm);
}