/* Platform — cookiemelding en toestemming.
 *
 * Neutraal genoeg om onder elk klantthema te staan zonder mee te ontwerpen, en
 * specifiek genoeg om niet door een thema te worden overschreven. Alle klassen
 * zijn voorafgegaan door itmb-cookies; er wordt niets globaals aangeraakt.
 *
 * Twee 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. #1c1c1c op #fff is 16,1:1 en wit op #1c1c1c hetzelfde; de rand
 *    om de knoppen zorgt dat ze ook zonder kleurwaarneming als knop leesbaar
 *    zijn (WCAG 1.4.11, 3:1 voor bedieningselementen).
 */

.itmb-cookies {
	position: fixed;
	left: 1rem;
	right: 1rem;
	bottom: 1rem;
	z-index: 99999;
	max-width: 34rem;
	margin-inline: auto;
	padding: 1.25rem;
	background: #1c1c1c;
	color: #fff;
	border-radius: .5rem;
	box-shadow: 0 .5rem 2rem rgba(0, 0, 0, .35);
	font-size: .95rem;
	line-height: 1.5;
	font-family: 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: #fff;
}

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

.itmb-cookies__meer {
	color: #fff;
	text-decoration: underline;
}

.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__knop {
	flex: 1 1 10rem;
	padding: .6rem 1rem;
	background: #fff;
	color: #1c1c1c;
	border: 2px solid #fff;
	border-radius: .35rem;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.itmb-cookies__knop:hover,
.itmb-cookies__knop:focus-visible {
	background: #e8e8e8;
	border-color: #e8e8e8;
}

.itmb-cookies__knop:focus-visible,
.itmb-cookies__heropen:focus-visible {
	outline: 3px solid #7cc4ff;
	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). */
.itmb-cookies__heropen {
	position: fixed;
	left: 1rem;
	bottom: 1rem;
	z-index: 99998;
	min-height: 2.75rem;
	padding: .5rem .9rem;
	background: #1c1c1c;
	color: #fff;
	border: 2px solid #fff;
	border-radius: .35rem;
	font: inherit;
	font-size: .8rem;
	cursor: pointer;
}

.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; }
	}
}