/*
 * FAQ -- opmaak voor de Elementor-widget "FAQ" (zie inc/widget-faq.php).
 *
 * Elke vraag is een <details> met een <summary>. De vraag staat in een rij
 * met (optioneel) een nummer ervoor en een rond plusje erachter. Dunne lijnen
 * scheiden de vragen; bij de vraag die open staat vult het plusje zich
 * mintgroen en wordt het een min.
 *
 * Het openschuiven gebeurt in CSS via ::details-content en
 * interpolate-size (zie onderaan). Browsers die dat nog niet kennen, slaan
 * die regels gewoon over en klappen het antwoord in één keer open.
 *
 * Kleuren en maten komen uit de Vormgeving-tab van de widget en landen als
 * custom properties op .zuuvr-faq. De waarden hieronder zijn de
 * terugvalwaarden, gebaseerd op het ZUUVR-designsysteem (zwart/wit/mint).
 */

.zuuvr-faq {
	--zuuvr-faq-accent: var(--e-global-color-accent, #78C3A7);
	--zuuvr-faq-border: rgba(255, 255, 255, 0.14);
	--zuuvr-faq-question: #FFFFFF;
	--zuuvr-faq-question-open: var(--zuuvr-faq-question);
	--zuuvr-faq-answer: rgba(255, 255, 255, 0.86);
	--zuuvr-faq-open-bg: transparent;
	--zuuvr-faq-question-padding: 1.5rem 0;
	--zuuvr-faq-answer-padding: 0 3.5rem 1.75rem 0;
	--zuuvr-faq-answer-width: 65ch;
	--zuuvr-faq-icon-size: 2.25rem;
	--zuuvr-faq-number-width: 2.25rem;
	--zuuvr-faq-row-gap: 1.25rem;

	/* Nodig om naar "auto" te kunnen animeren (zie ::details-content). */
	interpolate-size: allow-keywords;
	border-bottom: 1px solid var(--zuuvr-faq-border);
}

.zuuvr-faq__item {
	margin: 0;
	border-top: 1px solid var(--zuuvr-faq-border);
	transition: background-color var(--duration-normal, 300ms) ease;
}

.zuuvr-faq__item[open] {
	background-color: var(--zuuvr-faq-open-bg);
}

/* ------------------------------------------------------------- vraag --- */

.zuuvr-faq__summary {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--zuuvr-faq-row-gap);
	padding: var(--zuuvr-faq-question-padding);
	cursor: pointer;
	list-style: none; /* het standaard driehoekje weg (Firefox, Chrome) */
}

.zuuvr-faq__summary::-webkit-details-marker {
	display: none; /* idem, Safari */
}

.zuuvr-faq--numbered .zuuvr-faq__summary {
	grid-template-columns: var(--zuuvr-faq-number-width) minmax(0, 1fr) auto;
}

.zuuvr-faq__summary:focus-visible {
	outline: 2px solid var(--zuuvr-faq-accent);
	outline-offset: 3px;
}

.zuuvr-faq__number {
	font-size: 0.87rem;
	font-weight: var(--fw-bold, 700);
	letter-spacing: 0.14em;
	color: var(--zuuvr-faq-accent);
	font-variant-numeric: tabular-nums;
}

.zuuvr-faq__question {
	font-size: 1.35rem;
	font-weight: var(--fw-black, 800);
	line-height: 1.3;
	color: var(--zuuvr-faq-question);
	transition: color var(--duration-normal, 300ms) ease;
}

.zuuvr-faq__item[open] .zuuvr-faq__question {
	color: var(--zuuvr-faq-question-open);
}

/*
 * Rond plusje: twee balkjes in een cirkel. Bij openen draait het staande
 * balkje een kwartslag plat, zodat er een min overblijft. Bij aanwijzen
 * kleurt de rand mintgroen, bij openen vult de cirkel zich.
 */
.zuuvr-faq__icon {
	position: relative;
	flex: none;
	width: var(--zuuvr-faq-icon-size);
	height: var(--zuuvr-faq-icon-size);
	border: 1px solid var(--zuuvr-faq-border);
	border-radius: 50%;
	color: var(--zuuvr-faq-accent);
	transition: border-color var(--duration-normal, 300ms) ease, background-color var(--duration-normal, 300ms) ease, color var(--duration-normal, 300ms) ease;
}

.zuuvr-faq__icon::before,
.zuuvr-faq__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40%;
	height: 2px;
	border-radius: 1px;
	background-color: currentColor;
	transform: translate(-50%, -50%);
	transition: transform var(--duration-normal, 300ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}

.zuuvr-faq__icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.zuuvr-faq__summary:hover .zuuvr-faq__icon {
	border-color: var(--zuuvr-faq-accent);
}

.zuuvr-faq__item[open] .zuuvr-faq__icon {
	border-color: var(--zuuvr-faq-accent);
	background-color: var(--zuuvr-faq-accent);
	color: #000000;
}

.zuuvr-faq__item[open] .zuuvr-faq__icon::after {
	transform: translate(-50%, -50%) rotate(0deg);
}

/* ---------------------------------------------------------- antwoord --- */

.zuuvr-faq__answer {
	max-width: var(--zuuvr-faq-answer-width);
	padding: var(--zuuvr-faq-answer-padding);
	font-size: 1.2rem; /* gelijk aan de globale Tekst-typografie van de Kit */
	line-height: var(--text-body-leading, 1.6);
	color: var(--zuuvr-faq-answer);
}

/* Met nummers begint het antwoord onder de vraag, niet onder het nummer. */
.zuuvr-faq--numbered .zuuvr-faq__answer {
	margin-inline-start: calc(var(--zuuvr-faq-number-width) + var(--zuuvr-faq-row-gap));
}

.zuuvr-faq__answer > :first-child {
	margin-top: 0;
}

.zuuvr-faq__answer > :last-child {
	margin-bottom: 0;
}

.zuuvr-faq__answer a {
	color: var(--zuuvr-faq-accent);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ------------------------------------------------------------ animatie --- */

/*
 * ::details-content is de container van alles in <details> behalve de
 * <summary>. Dicht is hij 0 hoog, open "auto" -- en dankzij
 * interpolate-size op .zuuvr-faq animeert de browser daartussen.
 * content-visibility moet mee in de transition (allow-discrete), anders
 * verdwijnt de inhoud bij het dichtklappen meteen in plaats van na de
 * animatie.
 *
 * Bewust aparte regels en geen selectorlijst met de rest: een browser die
 * ::details-content niet kent, gooit de héle regel weg waarin hij staat.
 */
.zuuvr-faq__item::details-content {
	block-size: 0;
	overflow: clip;
	transition:
		block-size var(--duration-normal, 300ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
		content-visibility var(--duration-normal, 300ms) allow-discrete;
}

.zuuvr-faq__item[open]::details-content {
	block-size: auto;
}

/* ------------------------------------------------------------- mobiel --- */

@media (max-width: 767px) {

	.zuuvr-faq {
		--zuuvr-faq-question-padding: 1.25rem 0;
		--zuuvr-faq-answer-padding: 0 0 1.5rem;
		--zuuvr-faq-icon-size: 2rem;
		--zuuvr-faq-row-gap: 1rem;
	}

	.zuuvr-faq__question {
		font-size: 1.2rem;
	}

	/* Op een smal scherm is de ruimte voor het antwoord te kostbaar om in te
	   springen tot onder de vraag. */
	.zuuvr-faq--numbered .zuuvr-faq__answer {
		margin-inline-start: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.zuuvr-faq__item,
	.zuuvr-faq__question,
	.zuuvr-faq__icon,
	.zuuvr-faq__icon::before,
	.zuuvr-faq__icon::after {
		transition: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.zuuvr-faq__item::details-content {
		transition: none;
	}
}