/**
 * Cookiemelding in de stijl van Loff. Studio.
 *
 * Kleuren, letter en vormtaal komen van de site zelf: reader, scherpe hoeken,
 * roze vlak met navy tekst, oranje accenten, en dat streepje dat bij hover
 * onder een link door schuift.
 */

/*
 * Alle eigen interface van Complianz uit beeld; wij tekenen hem zelf. Ook zijn
 * "Manage consent"-knop, die hij na een keuze standaard in beeld laat zweven.
 * Terugkomen op je keuze gaat bij ons via de link in de footer.
 */
#cmplz-cookiebanner-container,
.cmplz-cookiebanner,
.cmplz-soft-cookiewall,
.cmplz-manage-consent,
.cmplz-manage-consent-container {
	display: none !important;
}

.loff-cookies {
	position: fixed;
	/*
	 * Op dezelfde lijn als het logo: .loile-header-inner heeft 30px zijruimte,
	 * dus daar begint het logo ook. Dat is precies de binnenkant van de vaste
	 * randlijst (#scroll-border-wrapper, 30px), waardoor de melding er net zo
	 * strak tegenaan staat als het logo erboven.
	 *
	 * Onder dezelfde 30px, zodat de afstand tot de rand links en onder gelijk
	 * is. Vandaar vaste pixels en geen clamp: dit moet meebewegen met het logo,
	 * niet met de vensterbreedte.
	 */
	left: 30px;
	bottom: 30px;
	/*
	 * De stapelvolgorde op deze site, van onder naar boven:
	 *   10      randlijst
	 *   11      logo en menuknop in de header
	 *   999     header
	 *   9999    footer en het mobiele menu
	 *   10000   deze melding
	 *   100000  de videomodal van een case
	 *
	 * De footer staat via de Customizer op 9999 en schoof daarmee over de
	 * melding heen. Hierboven gaan betekent ook boven het mobiele menu; eronder
	 * blijft alleen de modal, want als iemand een video opent hoort die voor te
	 * gaan.
	 */
	z-index: 10000;
	width: min(38rem, calc(100vw - 6rem));
	color: #010132;
	font-family: reader, sans-serif;
}

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

.loff-cookies__panel {
	background: #ffecff;
	padding: clamp(1.8rem, 2vw, 2.4rem);
	/* Geen afronding: de hele site werkt met rechte vlakken. */
	border-radius: 0;
	box-shadow: 0 1rem 3.2rem rgba(1, 1, 50, 0.16);
}

/* Zelfde kleine, kleine-letter aanhef als de blokken op de dienstpagina's. */
.loff-cookies__label {
	margin: 0 0 0.5em;
	color: #f36e45;
	font-size: clamp(1.2rem, 0.5vw + 0.9rem, 1.35rem);
	line-height: 1.4;
	text-transform: lowercase;
}

.loff-cookies__tekst {
	margin: 0 0 1.2em;
	font-size: clamp(1.35rem, 0.6vw + 1rem, 1.5rem);
	line-height: 1.5;
}

/* --- Knoppen ------------------------------------------------------------ */

/*
 * Accepteren en weigeren staan er bewust even zwaar bij. Ze zien eruit als de
 * tekstlinks op de site: geen vlak, wel dat streepje eronder.
 */
.loff-cookies__acties {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em clamp(1.6rem, 2vw, 2.4rem);
	align-items: baseline;
}

/*
 * Alle standen expliciet dichtzetten. Het thema van Beaver Builder kleurt in
 * zijn skin elke button:hover en button:active blauw met een witte letter en
 * een rand eromheen; dat sloeg hier dwars doorheen. Vandaar dat hover, focus en
 * active hier alle vier dezelfde waarden krijgen.
 */
.loff-cookies__knop,
.loff-cookies__knop:hover,
.loff-cookies__knop:focus,
.loff-cookies__knop:active {
	position: relative;
	margin: 0;
	padding: 0 0 0.2em;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: none;
	background-color: transparent;
	color: #f36e45;
	font-family: inherit;
	font-size: clamp(1.35rem, 0.6vw + 1rem, 1.5rem);
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* Het streepje dat bij hover onder de tekst door schuift, net als elders. */
.loff-cookies__knop::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	/*
	 * 0,08em is precies de stokdikte van reader: bij een letter van 200px meet
	 * de stok van een "l" 16px. Zo is de streep even zwaar als de tekst
	 * erboven, en schaalt hij mee als de knop van formaat verandert.
	 */
	height: 0.08em;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: bottom left;
	transition: transform 0.3s ease-out;
}

.loff-cookies__knop:hover::after,
.loff-cookies__knop:focus-visible::after {
	transform: scaleX(1);
}

.loff-cookies__knop:focus-visible {
	outline: 2px solid #010132;
	outline-offset: 4px;
}

/* "Zelf instellen" en "Terug" mogen een tandje rustiger. */
.loff-cookies__knop--stil,
.loff-cookies__knop--stil:hover,
.loff-cookies__knop--stil:focus,
.loff-cookies__knop--stil:active {
	color: #010132;
	font-size: clamp(1.2rem, 0.5vw + 0.9rem, 1.35rem);
}

/*
 * De Customizer zet sitebreed a { text-decoration: none !important }, dus die
 * moeten we hier overrulen; anders is niet te zien dat dit een link is.
 */
.loff-cookies__link {
	color: #f36e45;
	text-decoration: underline !important;
	text-underline-offset: 0.22em;
	text-decoration-thickness: 2px;
}

.loff-cookies__link:hover,
.loff-cookies__link:focus-visible {
	color: #010132;
}

/* --- Instellingen ------------------------------------------------------- */

.loff-cookies__keuzes {
	margin: 0 0 1.4em;
	padding: 0;
	list-style: none;
}

.loff-cookies__keuze + .loff-cookies__keuze {
	margin-top: 1em;
}

.loff-cookies__keuze-naam {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-size: clamp(1.35rem, 0.6vw + 1rem, 1.5rem);
	line-height: 1.4;
}

.loff-cookies__keuze-naam input {
	width: 1.4rem;
	height: 1.4rem;
	accent-color: #f36e45;
	cursor: pointer;
}

.loff-cookies__keuze-uitleg {
	display: block;
	margin-top: 0.15em;
	/* Uitlijnen onder de tekst, niet onder het vinkje. */
	padding-left: 1.9rem;
	font-size: clamp(1.15rem, 0.4vw + 0.9rem, 1.3rem);
	line-height: 1.45;
	opacity: 0.75;
}

/* Functioneel heeft geen vinkje, dus ook geen inspringing nodig. */
.loff-cookies__keuze:first-child .loff-cookies__keuze-uitleg {
	padding-left: 0;
}

/* --- Klein scherm ------------------------------------------------------- */

/*
 * Onder 1000px zet de Customizer de zijruimte van de header op 20px. Het logo
 * schuift dan mee naar binnen, dus de melding ook.
 */
@media (max-width: 1000px) {
	.loff-cookies {
		left: 20px;
		bottom: 20px;
		width: min(38rem, calc(100vw - 4rem));
	}
}

@media (max-width: 768px) {
	.loff-cookies {
		right: 20px;
		width: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.loff-cookies__knop::after {
		transition-duration: 1ms;
	}
}