/**
 * Cookies: de melding en het instellingenpaneel.
 *
 * Eigen bestand en geen genummerde sectie in style.css. Dat wijkt af van wat
 * README.md over style.css zegt; reden is dat style.css al ruim 4800 regels
 * telt en de banner een op zichzelf staand widget is dat je in zijn geheel
 * wilt kunnen lezen. De tokens komen wel gewoon uit style.css.
 */

/*
 * De banner mag nooit hoger worden dan het scherm.
 *
 * Hij staat vast aan de onderrand zonder hoogtebegrenzing. Zodra
 * "Instellen" het paneel met de vier categorieën openklapt, groeit hij
 * naar bóven het scherm uit — en een vast geplaatst element scrolt niet
 * mee met de pagina, dus wat erboven uitsteekt is met geen enkele
 * beweging te bereiken. Gemeten op 375x667: banner 727px hoog, bovenkant
 * op -60px, de kop op -43px. Op 320x568 verdween ook de link naar het
 * cookiebeleid. Precies de twee dingen die je moet kunnen lezen vóór je
 * een keuze maakt.
 *
 * Met een plafond van de schermhoogte en een eigen scrollgebied blijft
 * de banner altijd compleet bereikbaar. overscroll-behavior houdt de
 * pagina eronder stil zodra je in de banner aan het eind bent.
 */
.dg-cookies {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	/* Onder de stacking context van de header (--dg-header-z: 900), niet
	   erboven. Op 9999 schilderde deze banner over de minicart, de
	   mobiele lade en het zoekpaneel heen — die zijn kinderen van
	   .dg-header en komen dus nooit hoger dan 900. Een eerste bezoeker
	   die iets in zijn winkelwagen legde kon "Bekijk winkelwagen" en
	   "Afrekenen" niet raken: die staan onderaan het paneel, precies waar
	   de banner lag, en eronder uit scrollen kon niet. */
	z-index: 890;
	/* Twee regels, in deze volgorde. Een browser zonder dvh-ondersteuning
	   (Safari < 15.4, Chrome < 108) laat de tweede regel stilzwijgend
	   vallen en houdt de eerste; zonder die terugval bleef er daar
	   helemaal geen plafond over en groeide de banner met het paneel
	   "Instellen" open weer tot boven de bovenrand van het scherm — met
	   de kop en de link naar het cookiebeleid onbereikbaar. Dat de
	   overflow-regel hieronder wél geldig is maakte dat juist
	   onopvallend. */
	max-height: 100vh;
	max-height: 100dvh;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--paper);
	border-top: 1px solid var(--line);
	box-shadow: var(--shadow);
	font-family: var(--font-body);
	color: var(--ink);
}

/*
 * De browser zet [hidden] zelf al op display:none, maar dat is een gewone
 * regel uit de standaardstylesheet en elke display-regel op .dg-cookies zou
 * het daarvan winnen. Expliciet dus — zonder deze regel staat de banner er
 * voor iedereen, altijd.
 */
.dg-cookies[hidden],
.dg-cookies__paneel[hidden] {
	display: none;
}

/*
 * --dg-gutter is gemaakt om als padding-inline op een schermbrede strook te
 * staan: hij centreert de inhoud op --dg-max en houdt op smalle schermen een
 * marge over. Vandaar hier padding en geen max-width met auto-marges.
 */
.dg-cookies__binnen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--dg-space-4) var(--dg-space-6);
	/* Was 20px: naar 16 en niet naar 24 — de banner is op smalle schermen
	   al hoog (drie knoppen gestapeld), dus de compacte kant van het raster. */
	padding: var(--dg-space-4) var(--dg-gutter);
}

.dg-cookies__tekst {
	flex: 1 1 32ch;
	min-width: 0;
}

.dg-cookies__kop {
	margin: 0 0 var(--dg-space-1);
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 500;
}

.dg-cookies__tekst p {
	margin: 0;
	font-size: .9375rem;
	color: var(--ink-soft);
}

.dg-cookies__tekst a {
	color: var(--moss);
}

.dg-cookies__knoppen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--dg-space-3);
}

.dg-cookies__knop {
	font: inherit;
	font-size: .9375rem;
	line-height: 1.2;
	cursor: pointer;
	border: 1px solid var(--knop);
	border-radius: var(--radius-s);
	/* Was 11px 22px: de knopconventie van de site (--dg-knop-y en space-5),
	   zodat deze knoppen dezelfde maat hebben als elke andere. */
	padding: var(--dg-knop-y) var(--dg-space-5);
	background: transparent;
	color: var(--knop);
}

/*
 * Weigeren en accepteren delen deze modifier en zien er dus identiek uit. Dat
 * is de bedoeling en geen slordigheid: onder de AVG moet weigeren net zo
 * makkelijk zijn als accepteren, en de veiligste uitleg van "net zo makkelijk"
 * is "precies hetzelfde".
 */
.dg-cookies__knop--hoofd {
	background: var(--knop);
	color: var(--paper);
}

.dg-cookies__knop--tekst {
	border-color: transparent;
	padding-inline: var(--dg-space-2);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.dg-cookies__knop:focus-visible {
	outline: var(--dg-focus-ring, 2px solid var(--moss));
	outline-offset: 2px;
}

.dg-cookies__paneel {
	flex: 1 1 100%;
	border-top: 1px solid var(--line);
	padding-top: var(--dg-space-4);
	display: grid;
	gap: var(--dg-space-3); /* Was 14px. */
}

.dg-cookies__regel {
	display: grid;
	gap: var(--dg-space-1); /* Was 2px. */
}

.dg-cookies__schakelaar {
	display: flex;
	align-items: center;
	gap: var(--dg-space-2); /* Was 10px. */
	cursor: pointer;
}

.dg-cookies__schakelaar input[disabled] {
	cursor: default;
}

.dg-cookies__label {
	font-weight: 500;
}

/* --ink-soft en niet --metadata: "altijd aan" en "8 cookies" zijn
   gewone tekst van 13px, en de declaratie van --metadata in style.css
   legt zelf vast dat dat token voor decoratie is en nooit voor kleine
   tekst — het haalt 3,08:1 op wit tegen een norm van 4,5. --ink-soft
   haalt 5,5:1. */
.dg-cookies__vast,
.dg-cookies__aantal {
	font-size: .8125rem;
	color: var(--ink-soft);
}

.dg-cookies__uitleg {
	margin: 0;
	/* Was 28px: sluit aan op checkbox plus gap hierboven, zodat de uitleg
	   onder de labeltekst begint en niet onder het vakje. */
	padding-left: var(--dg-space-5);
	font-size: .875rem;
	color: var(--ink-soft);
}

.dg-cookies__aantal::before {
	content: " · ";
}

/* Op smalle schermen vullen de knoppen de breedte, zodat ze niet in een
   onbereikbaar hoekje eindigen. */
@media (max-width: 640px) {
	.dg-cookies__knoppen {
		width: 100%;
	}

	.dg-cookies__knop--hoofd {
		flex: 1 1 40%;
	}

	/*
	 * In de brontekst staat Instellen tussen Weigeren en Accepteren in.
	 * Zonder ingreep breekt de flex-rij daarna, en groeit alleen Accepteren
	 * naar de volle breedte: twee ongelijke hoofdknoppen, terwijl weigeren
	 * onder de AVG net zo makkelijk moet zijn als accepteren.
	 *
	 * Een eerdere versie loste dat op met `order`, maar `order` verandert
	 * alleen de zichtbare volgorde, niet de tabvolgorde — die blijft de
	 * DOM-volgorde. Beeld en toetsenbordfocus liepen daardoor uit de pas
	 * (WCAG 2.4.3). Hier krijgt elke knop in de hoofdrij in plaats daarvan
	 * een eigen volle regel, in gewone brontekstvolgorde: Weigeren en
	 * Accepteren zijn dan allebei precies de containerbreedte en dus per
	 * definitie even breed — niet toevallig bij één schermbreedte, maar
	 * structureel — en er wordt niets verplaatst, dus beeld en tabvolgorde
	 * blijven gelijk. Alleen de hoofdrij van de banner, niet de knoppenrij
	 * in het paneel (Weigeren/Keuze bewaren, die twee zijn al eerlijk
	 * verdeeld op flex: 1 1 40%).
	 */
	.dg-cookies__binnen > .dg-cookies__knoppen .dg-cookies__knop {
		flex: 1 1 100%;
		text-align: center;
	}
}

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

	@keyframes dg-cookies-in {
		from { transform: translateY(100%); }
		to   { transform: none; }
	}
}

/* De tabel op het cookiebeleid. */
.dg-cookietabel__kop {
	margin: var(--dg-space-5) 0 var(--dg-space-1);
}

.dg-cookietabel__uitleg,
.dg-cookietabel__leeg {
	margin: 0 0 var(--dg-space-3);
	color: var(--ink-soft);
}

.dg-cookietabel__tabel {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--dg-space-3);
	font-size: .9375rem;
	/* Eigen scrollcontainer: op een smal scherm is de tabel breder dan
	   de viewport en zou hij anders de hele pagina horizontaal laten
	   scrollen (gemeten: 443px tabel op 375px viewport). */
	display: block;
	overflow-x: auto;
}

.dg-cookietabel__tabel th,
.dg-cookietabel__tabel td {
	text-align: left;
	vertical-align: top;
	padding: var(--dg-space-2) var(--dg-space-3) var(--dg-space-2) 0;
	border-bottom: 1px solid var(--line);
}

.dg-cookietabel__tabel code {
	font-size: .875em;
	overflow-wrap: anywhere;
}