/*
 * De cookiemelding.
 *
 * Nagebouwd naar de banner van Cookiebot op sam-it-services.nl, gemeten op
 * 15 september 2026: gecentreerde witte kaart van 900 px breed, hoek 8 px,
 * schaduw `0 32px 68px rgba(0,0,0,.3)`, tekst 15px in #141414, en knoppen met
 * een rand van 2 px in #237EB3. Dat blauw is de `--kleurBlauw` van dit thema,
 * dus er hoefde niets aan de huisstijl bijgesteld te worden.
 *
 * Geen overlay over de pagina, net als daar: de site blijft bruikbaar terwijl
 * de melding staat. Dat is een bewuste keuze van de bestaande site en hij is
 * overgenomen; een melding die de pagina dichtzet leest als een eis, en de
 * meetcode staat toch al stil tot er gekozen is.
 *
 * Dit bestand staat op elke pagina, ook als er al een keuze ligt: de link
 * "Cookievoorkeuren" in de voet moet er dan nog steeds uitzien zoals de rest,
 * en de kaart moet opgemaakt zijn als iemand hem opnieuw opent.
 *
 * LET OP BIJ DE KNOPPEN
 *
 * Elke knopregel hangt onder `.toestemmingKaart` en dat is geen opmaakkeuze.
 * `reset.css` zet `background-color: transparent` op onder meer
 * `[type="button"]`, en dat is specificiteit 0,1,0 — precies gelijk aan een
 * losse klasse. Bij gelijke specificiteit wint wat later geladen wordt, en deze
 * stylesheet komt uit een mu-plugin en staat dus vóór reset.css. Een
 * `.toestemmingKnopVol` zonder ouder eromheen verliest daardoor zijn
 * achtergrond: witte tekst op wit, een knop die leeg lijkt. Met de ouder erbij
 * is het 0,2,0 en doet de volgorde er niet meer toe.
 */

.toestemmingKaart {
	/* z-index: hoger dan het uitschuifpaneel (100) en de suggestielijst (5),
	   maar ruim onder de top layer van een <dialog>. */
	position: fixed;
	z-index: 9000;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	display: flex;
	flex-direction: column;
	width: min(900px, calc(100vw - 40px));
	max-height: calc(100vh - 40px);

	background: #fff;
	color: #141414;
	border-radius: 8px;
	box-shadow: 0 32px 68px rgba(0, 0, 0, .3);

	font-size: 15px;
	line-height: 1.55;
}

/* De merknaam staat waar bij Cookiebot hun eigen logo stond. */
.toestemmingMerk {
	padding: 18px 24px 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--kleurTekstZacht, #7A8896);
}

/* ------------------------------------------------------------------
 * Tabbladen
 * ------------------------------------------------------------------ */

.toestemmingTabs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin-top: 14px;
	border-bottom: 1px solid var(--kleurLijn, #DADBE3);
}

.toestemmingKaart .toestemmingTab {
	padding: 14px 8px;
	border: 0;
	border-bottom: 3px solid transparent;
	background: none;
	font: inherit;
	font-weight: 600;
	color: #141414;
	cursor: pointer;
}

.toestemmingKaart .toestemmingTab[aria-selected="true"] {
	color: var(--kleurBlauw, #237EB3);
	border-bottom-color: var(--kleurBlauw, #237EB3);
}

.toestemmingKaart .toestemmingTab:focus-visible {
	outline: 2px solid var(--kleurBlauw, #237EB3);
	outline-offset: -4px;
}

/* ------------------------------------------------------------------
 * Inhoud
 * ------------------------------------------------------------------ */

.toestemmingInhoud {
	overflow-y: auto;
	padding: 22px 24px;
}

.toestemmingKop {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 700;
}

.toestemmingTekst {
	margin: 0;
}

.toestemmingBeleid {
	margin: 12px 0 0;
}

.toestemmingBeleid a {
	color: var(--kleurBlauwDonker, #215073);
}

/* ------------------------------------------------------------------
 * De schakelaars, zichtbaar na "Aanpassen"
 * ------------------------------------------------------------------ */

.toestemmingKeuzes {
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 16px;
	border-top: 1px solid var(--kleurLijn, #DADBE3);
	padding-top: 18px;
}

.toestemmingSchakelaar {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	cursor: pointer;
}

.toestemmingSchakelaar input {
	inline-size: 18px;
	block-size: 18px;
	accent-color: var(--kleurBlauw, #237EB3);
	cursor: pointer;
}

.toestemmingSchakelaar input:disabled {
	cursor: default;
}

.toestemmingSchakelaarUitleg {
	margin: 4px 0 0 28px;
	font-size: 14px;
	/* Gemeten paar: #5A6478 op wit haalt 6,0:1. */
	color: #5A6478;
}

/* ------------------------------------------------------------------
 * Tabblad Details
 * ------------------------------------------------------------------ */

.toestemmingDetailKop {
	margin: 20px 0 8px;
	font-size: 15px;
	font-weight: 700;
}

.toestemmingDetailKop:first-child {
	margin-top: 0;
}

.toestemmingAantal {
	display: inline-block;
	min-inline-size: 22px;
	padding: 1px 7px;
	border-radius: 11px;
	background: var(--kleurVlak, #EEF5F9);
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	color: #5A6478;
}

.toestemmingLeeg {
	margin: 0;
	font-size: 14px;
	color: #5A6478;
}

/* Een tabel mag als enige breder zijn dan de kaart; hij rolt in zijn eigen
   houder, zodat de pagina zelf nooit zijwaarts schuift. */
.toestemmingTabelRol {
	overflow-x: auto;
}

.toestemmingTabel {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.toestemmingTabel th,
.toestemmingTabel td {
	padding: 7px 10px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--kleurLijn, #DADBE3);
}

.toestemmingTabel th {
	font-weight: 600;
	white-space: nowrap;
	color: #5A6478;
}

.toestemmingTabel code {
	font-size: 13px;
	overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------
 * De knoppen
 * ------------------------------------------------------------------ */

.toestemmingVoet {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 12px;
	padding: 18px 24px;
	border-top: 1px solid var(--kleurLijn, #DADBE3);
}

.toestemmingKaart .toestemmingKnop {
	flex: 1 1 auto;
	max-inline-size: 280px;
	padding: 13px 15px;
	border-radius: 3.75px;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

/* Wit op #237EB3 haalt 4,46:1 en dus net niet de 4,5:1 die WCAG AA voor 15px
   vraagt. Een tint donkerder (#2079AC, hetzelfde blauw als de categoriebalk in
   de header) haalt hem wel, en het verschil is met het blote oog niet te zien.
   De rand blijft #237EB3, zodat de omlijnde knoppen ernaast gelijk blijven aan
   de bestaande site. */
.toestemmingKaart .toestemmingKnopVol {
	border: 2px solid #2079AC;
	background: #2079AC;
	color: #fff;
}

.toestemmingKaart .toestemmingKnopRand {
	border: 2px solid var(--kleurBlauw, #237EB3);
	background: #fff;
	color: #141414;
}

.toestemmingKaart .toestemmingKnop:hover {
	filter: brightness(.95);
}

.toestemmingKaart .toestemmingKnop:focus-visible {
	outline: 2px solid var(--kleurTekst, #0F184A);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------
 * Smal scherm
 *
 * Onder de 768 px wordt de kaart een blad onderaan het scherm: dat is waar een
 * duim bij kan, en het laat de bovenkant van de pagina vrij.
 * ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.toestemmingKaart {
		top: auto;
		bottom: 0;
		left: 0;
		transform: none;
		inline-size: 100%;
		max-block-size: 85vh;
		border-radius: 12px 12px 0 0;
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}

	.toestemmingKaart .toestemmingKnop {
		flex-basis: 100%;
		max-inline-size: none;
	}

	.toestemmingVoet {
		flex-direction: column-reverse;
	}
}

/* Op papier bestaat er geen keuze om te maken. */
@media print {
	.toestemmingKaart {
		display: none;
	}
}

/* ------------------------------------------------------------------
 * De weg terug, in de voet
 *
 * Een <button> die eruitziet als de tekst ernaast. Het scopen geldt hier
 * net zo goed: `[type="button"]` uit reset.css zou anders winnen.
 * ------------------------------------------------------------------ */

.footerFijn .footerCookies {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.footerFijn .footerCookies:hover {
	text-decoration: none;
}

.footerFijn .footerCookies:focus-visible {
	outline: 2px solid currentcolor;
	outline-offset: 2px;
}