/*
 * FolieTotaal: de Complianz-cookiebanner in de huisstijl.
 * =====================================================================
 * Deze stylesheet hoort NIET bij het thema-uiterlijk zelf. Hij bestaat
 * omdat de cookiebanner van een plugin komt en er anders uitziet als een
 * los onderdeel dat er per ongeluk op staat.
 *
 * WAAR PLAK JE DIT?
 * Twee routes, beide goed:
 *
 *   1. Complianz, Cookiebanner, Bewerken, Aangepaste CSS. Zet daar de
 *      inhoud van dit bestand in. Voordeel: het overleeft een
 *      themawissel en Complianz laadt het pas als de banner er is.
 *
 *   2. Of laat het thema het laden. Dat is een regel in inc/assets.php,
 *      en die staat er al: als deze plugin actief is, komt dit bestand
 *      mee. Voordeel: het staat in versiebeheer bij de rest.
 *
 * Route 2 staat aan. Is de plugin niet actief, dan wordt er niets
 * geladen en kost dit niets.
 *
 * BELANGRIJK OVER DE KLASSENAMEN
 * De namen hieronder komen uit de documentatie van Complianz zelf
 * (.cmplz-cookiebanner, .cmplz-btn, .cmplz-accept, .cmplz-header,
 * .cmplz-documents, .cmplz-links, .cmplz-divider,
 * .cmplz-view-preferences, .cmplz-show-banner, .cmplz-amp-link).
 *
 * Een handvol namen verderop is afgeleid uit de structuur van de banner
 * en niet uit hun documentatie: .cmplz-title, .cmplz-message,
 * .cmplz-categories, .cmplz-category, .cmplz-deny,
 * .cmplz-save-preferences en .cmplz-manage-consent. Die kunnen bij een
 * grote versiesprong van naam veranderen. Loopt de opmaak ooit scheef:
 * rechtermuisknop op de banner, Inspecteren, en vergelijk de klassen.
 * Alles staat binnen .cmplz-cookiebanner, dus er kan niets weglekken
 * naar de site zelf.
 * =====================================================================
 */

/* ---------------------------------------------------------------------
   Het paneel
   --------------------------------------------------------------------- */

.cmplz-cookiebanner {
	/*
	 * De tokens staan op :root in theme.css. Elke var heeft toch een
	 * terugval, want de banner kan renderen voordat theme.css binnen is,
	 * en een banner zonder kleuren is erger dan een banner die even de
	 * verkeerde tint heeft.
	 */
	background: var(--ftl-panel, #ffffff);
	color: var(--ftl-body, #545b64);
	border: 1px solid var(--ftl-hairline, rgba(18, 21, 26, 0.1));
	border-top: 3px solid var(--ftl-red, #d8352a);
	border-radius: var(--ftl-radius, 2px);
	box-shadow: 0 18px 50px rgba(18, 21, 26, 0.16);
	font-family: var(--ftl-sans, "IBM Plex Sans", system-ui, sans-serif);
	font-size: 15px;
	line-height: 1.6;
	padding: 26px 28px 22px;
}

/* De rode kop is het enige merkaccent. Verder blijft het paneel rustig:
   dit is een vraag, geen reclame. */

.cmplz-cookiebanner .cmplz-header {
	border: 0;
	padding: 0;
	margin: 0 0 10px;
}

.cmplz-cookiebanner .cmplz-title {
	font-family: var(--ftl-mono, "Archivo", "Helvetica Neue", Arial, sans-serif);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ftl-paper, #12151a);
	margin: 0;
}

.cmplz-cookiebanner .cmplz-message,
.cmplz-cookiebanner p {
	color: var(--ftl-body, #545b64);
	font-size: 14.5px;
	margin: 0 0 16px;
}

/* ---------------------------------------------------------------------
   Categorieën
   --------------------------------------------------------------------- */

.cmplz-cookiebanner .cmplz-categories {
	gap: 10px 22px;
	margin: 0 0 18px;
}

.cmplz-cookiebanner .cmplz-category {
	font-family: var(--ftl-mono, "Archivo", "Helvetica Neue", Arial, sans-serif);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ftl-soft, #383e47);
}

/* ---------------------------------------------------------------------
   Knoppen: dezelfde vorm als .ft-btn op de site
   --------------------------------------------------------------------- */

.cmplz-cookiebanner .cmplz-btn {
	font-family: var(--ftl-mono, "Archivo", "Helvetica Neue", Arial, sans-serif);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 14px 24px;
	border-radius: var(--ftl-radius, 2px);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* Accepteren is de hoofdknop, in het merkrood. */

.cmplz-cookiebanner .cmplz-btn.cmplz-accept {
	background: var(--ftl-red, #d8352a);
	border-color: var(--ftl-red, #d8352a);
	color: #fff;
}

.cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover,
.cmplz-cookiebanner .cmplz-btn.cmplz-accept:focus-visible {
	background: var(--ftl-red-ink, #b8271c);
	border-color: var(--ftl-red-ink, #b8271c);
	color: #fff;
}

/*
 * Weigeren krijgt bewust een echte, leesbare knop en geen weggemoffeld
 * linkje. Een weigerknop die je moet zoeken is niet alleen onnet, hij
 * maakt de toestemming juridisch aanvechtbaar: die moet vrij gegeven
 * zijn. Zelfde formaat, zelfde plek, alleen niet rood.
 */

.cmplz-cookiebanner .cmplz-btn.cmplz-deny,
.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences {
	background: none;
	border-color: var(--ftl-hairline-strong, rgba(18, 21, 26, 0.24));
	color: var(--ftl-paper, #12151a);
}

.cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover,
.cmplz-cookiebanner .cmplz-btn.cmplz-deny:focus-visible,
.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences:hover,
.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences:focus-visible {
	background: var(--ftl-paper, #12151a);
	border-color: var(--ftl-paper, #12151a);
	color: var(--ftl-black, #f6f5f1);
}

.cmplz-cookiebanner .cmplz-buttons {
	gap: 10px;
}

/* ---------------------------------------------------------------------
   Links onderaan
   --------------------------------------------------------------------- */

.cmplz-cookiebanner .cmplz-links a,
.cmplz-cookiebanner .cmplz-documents a,
.cmplz-cookiebanner a.cmplz-view-preferences {
	color: var(--ftl-dim, #6a717b);
	font-size: 13px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cmplz-cookiebanner .cmplz-links a:hover,
.cmplz-cookiebanner .cmplz-documents a:hover,
.cmplz-cookiebanner a.cmplz-view-preferences:hover {
	color: var(--ftl-red, #d8352a);
}

.cmplz-cookiebanner .cmplz-divider {
	border-color: var(--ftl-hairline, rgba(18, 21, 26, 0.1));
}

/* ---------------------------------------------------------------------
   Zichtbare focus, net als op de rest van de site
   --------------------------------------------------------------------- */

.cmplz-cookiebanner .cmplz-btn:focus-visible,
.cmplz-cookiebanner a:focus-visible,
.cmplz-cookiebanner input:focus-visible,
.cmplz-cookiebanner button:focus-visible {
	outline: 2px solid var(--ftl-red, #d8352a);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   De knop "Beheer toestemming" onderaan iedere pagina
   --------------------------------------------------------------------- */

.cmplz-manage-consent,
#cmplz-manage-consent .cmplz-manage-consent {
	background: var(--ftl-panel, #ffffff);
	color: var(--ftl-soft, #383e47);
	border: 1px solid var(--ftl-hairline-strong, rgba(18, 21, 26, 0.24));
	border-radius: var(--ftl-radius, 2px);
	font-family: var(--ftl-mono, "Archivo", "Helvetica Neue", Arial, sans-serif);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 8px 14px;
}

.cmplz-manage-consent:hover {
	color: var(--ftl-red, #d8352a);
	border-color: var(--ftl-red, #d8352a);
}

/* De losse link in de footer of in een tekst. */

a.cmplz-show-banner {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

a.cmplz-show-banner:hover {
	color: var(--ftl-red, #d8352a);
}

/* ---------------------------------------------------------------------
   De offertepagina
   --------------------------------------------------------------------- */

/*
 * Hier zit het echte risico. De hele opzet van de site is dat de lead
 * binnenkomt, en de configurator is een formulier van meerdere stappen.
 * Een banner die daar bovenop valt kost aanvragen.
 *
 * Twee dingen: hij mag het formulier niet overlappen, en hij moet onder
 * de vaste menubalk blijven. z-index 99999 is de waarde die Complianz
 * zelf gebruikt; die laten we staan zodat de banner boven de pagina
 * blijft, maar op de offertepagina schuift hij naar de onderrand.
 */

.ft-offerte .cmplz-cookiebanner {
	max-width: 560px;
}

@media (max-width: 782px) {
	.cmplz-cookiebanner {
		padding: 20px 18px 16px;
		font-size: 14.5px;
	}

	.cmplz-cookiebanner .cmplz-buttons {
		flex-direction: column;
	}

	/*
	 * Op mobiel elke knop over de volle breedte, in plaats van twee
	 * halve naast elkaar. Weigeren blijft daarmee net zo goed te raken
	 * als accepteren.
	 */
	.cmplz-cookiebanner .cmplz-btn {
		width: 100%;
		text-align: center;
	}
}

/* ---------------------------------------------------------------------
   Donkere secties
   --------------------------------------------------------------------- */

/*
 * De banner staat vast ten opzichte van het venster, niet in de flow van
 * de pagina, dus hij komt nooit binnen .ft-dark terecht. Deze regel is
 * er alleen voor het geval iemand hem ooit inline plaatst.
 */

.ft-dark .cmplz-cookiebanner {
	background: var(--ftl-panel, #ffffff);
	color: var(--ftl-body, #545b64);
}

/* ---------------------------------------------------------------------
   Bewegingsvoorkeur
   --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.cmplz-cookiebanner,
	.cmplz-cookiebanner * {
		transition: none !important;
		animation: none !important;
	}
}

/* ---------------------------------------------------------------------
   De AMP-terugval
   --------------------------------------------------------------------- */

/*
 * Zonder JavaScript toont Complianz een eenvoudige versie. Die krijgt
 * hier alleen de fonts en het rood mee, geen verdere opmaak: het is een
 * noodgeval, niet een ontwerp.
 */

.cmplz-amp-link {
	color: var(--ftl-red, #d8352a);
	text-decoration: underline;
}