/* ===========================================================================
 * Blok: veelgestelde vragen
 *
 * Links (sticky vanaf 900px) titel, intro, zoekveld, onderwerpen en knoppen;
 * rechts de vragen als native <details> (één tegelijk open via name). Het
 * plusje is een kruis van vijf bolletjes: bij openen klappen de twee
 * verticale om (scaleX naar 0, als een flipdot) en blijft een min over.
 * Openen en sluiten animeert via ::details-content (waar de browser het
 * kan); anders klapt het direct open.
 * blocks/faq.js toont zoekveld en onderwerpen en zet .is-weg / hidden.
 * ========================================================================= */

.blok-faq {
	--faq-rand: var(--gutter);
	--faq-tint: var(--c-pd-cyaan);
	color: var(--c-wit);
}

@media (min-width: 900px) {
	.blok-faq {
		--faq-rand: calc(var(--gutter) + 3.125rem);
	}
}

.faq__raam {
	display: grid;
	gap: var(--ruimte-7);
	padding-inline: var(--faq-rand);
}

@media (min-width: 900px) {
	.faq__raam {
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
		gap: clamp(3rem, 7vw, 8rem);
		align-items: start;
	}

	.faq__zij-binnen {
		position: sticky;
		top: calc(var(--header-hoogte) + var(--ruimte-5));
	}
}

/* --- Kop en zijkant ---------------------------------------------------------- */
.faq__kop {
	max-width: 11ch;
	margin-bottom: var(--ruimte-5);
	font-size: clamp(2.5rem, 1.5rem + 3.6vw, 5rem);
	line-height: 1.04;
	letter-spacing: -0.035em;
}

.faq__intro {
	max-width: 26rem;
	margin-bottom: var(--ruimte-6);
	color: rgba(255, 255, 255, 0.72);
}

/* Zoekveld: glazen pil zoals de headerbalk. */
.faq__zoek {
	position: relative;
	max-width: 24rem;
	margin-bottom: var(--ruimte-5);
}

.faq__zoek[hidden] {
	display: none;
}

.faq__zoek-icoon {
	position: absolute;
	left: 1.1rem;
	top: 50%;
	width: 1.05rem;
	height: 1.05rem;
	translate: 0 -50%;
	z-index: 1; /* boven het veld: backdrop-filter maakt van het veld een eigen laag */
	color: rgba(255, 255, 255, 0.5);
	pointer-events: none;
	transition: color var(--duur) var(--ease-uit);
}

.faq__zoek-veld {
	width: 100%;
	height: 3.25rem;
	padding: 0 1.25rem 0 3rem;
	font: inherit;
	color: var(--c-wit);
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-rond);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: border-color var(--duur) var(--ease-uit), background var(--duur) var(--ease-uit);
}

.faq__zoek-veld::placeholder {
	color: rgba(255, 255, 255, 0.45);
}

.faq__zoek-veld:hover {
	border-color: rgba(255, 255, 255, 0.24);
}

.faq__zoek-veld:focus {
	outline: none;
	background: rgba(255, 255, 255, 0.07);
	border-color: var(--faq-tint);
}

.faq__zoek:focus-within .faq__zoek-icoon {
	color: var(--faq-tint);
}

.faq__zoek-veld::-webkit-search-cancel-button {
	filter: invert(1);
	opacity: 0.6;
	cursor: pointer;
}

/* Onderwerpen: lijst op groot scherm, veegrij op klein scherm. */
.faq__onderwerpen {
	display: flex;
	gap: var(--ruimte-2);
	margin-bottom: var(--ruimte-6);
	overflow-x: auto;
	scrollbar-width: none;
}

.faq__onderwerpen[hidden] {
	display: none;
}

.faq__onderwerpen::-webkit-scrollbar {
	display: none;
}

@media (min-width: 900px) {
	.faq__onderwerpen {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		overflow: visible;
	}
}

.faq__onderwerp {
	position: relative;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: baseline;
	gap: 0.6em;
	padding: 0.55em 1em;
	font: inherit;
	color: rgba(255, 255, 255, 0.6);
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-rond);
	cursor: pointer;
	transition: color var(--duur) var(--ease-uit), background var(--duur) var(--ease-uit), border-color var(--duur) var(--ease-uit);
}

.faq__onderwerp-aantal {
	font-size: var(--fs-label);
	font-variant-numeric: tabular-nums;
	color: rgba(255, 255, 255, 0.4);
}

.faq__onderwerp:hover {
	color: var(--c-wit);
}

.faq__onderwerp[aria-pressed="true"] {
	color: var(--c-wit);
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.22);
}

.faq__onderwerp:focus-visible {
	outline: 2px solid var(--faq-tint);
	outline-offset: 2px;
}

/* Groot scherm: een rustige lijst met een pixel voor het actieve onderwerp. */
@media (min-width: 900px) {
	.faq__onderwerp {
		padding: 0.45em 0 0.45em 1.4em;
		font-size: var(--fs-intro);
		background: none;
		border: 0;
		border-radius: 0;
	}

	.faq__onderwerp[aria-pressed="true"] {
		background: none;
	}

	.faq__onderwerp::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		width: 0.45em;
		height: 0.45em;
		border-radius: 50%;
		background: var(--faq-tint);
		box-shadow: 0 0 0.6em color-mix(in srgb, var(--faq-tint) 55%, transparent);
		translate: 0 -50%;
		scale: 0;
		transition: scale 0.45s var(--ease-uit);
	}

	.faq__onderwerp[aria-pressed="true"]::before {
		scale: 1;
	}
}

.faq__knoppen {
	margin-top: var(--ruimte-2);
}

/* --- Vragen ------------------------------------------------------------------ */
/* Lijnen boven elke vraag en onder de lijst. Een open vraag heeft geen lijn
   boven of onder zich: dan valt hij weg bij de vraag zelf, bij de vraag
   erna en (als hij de laatste is) onder de lijst. */
.faq__lijst {
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	transition: border-color 0.4s var(--ease-uit);
}

.faq__item {
	position: relative;
	isolation: isolate;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	interpolate-size: allow-keywords;
	transition: border-color 0.4s var(--ease-uit);
}

.faq__item[open],
.faq__item[open] + .faq__item {
	border-top-color: transparent;
}

.faq__lijst:has(> .faq__item:last-of-type[open]) {
	border-bottom-color: transparent;
}

/* Achter een open vraag een zacht glazen vlak dat net buiten de lijn valt. */
.faq__item::before {
	content: "";
	position: absolute;
	inset: -1px calc(var(--ruimte-5) * -1);
	z-index: -1;
	background: rgba(255, 255, 255, 0.035);
	border-radius: var(--radius-m);
	opacity: 0;
	transition: opacity 0.5s var(--ease-uit);
	pointer-events: none;
}

.faq__item[open]::before {
	opacity: 1;
}

.faq__vraag {
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--ruimte-4);
	padding: var(--ruimte-5) 0;
	cursor: pointer;
	list-style: none;
}

.faq__vraag::-webkit-details-marker {
	display: none;
}

.faq__vraag:focus-visible {
	outline: 2px solid var(--faq-tint);
	outline-offset: 4px;
	border-radius: var(--radius-s);
}

.faq__nr {
	font-size: var(--fs-label);
	font-variant-numeric: tabular-nums;
	color: rgba(255, 255, 255, 0.35);
	transition: color var(--duur) var(--ease-uit);
}

.faq__vraag-tekst {
	margin: 0;
	font-family: var(--font-kop);
	font-weight: var(--fw-kop);
	font-size: var(--fs-h3);
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: rgba(255, 255, 255, 0.82);
	transition: color var(--duur) var(--ease-uit);
}

.faq__vraag:hover .faq__vraag-tekst,
.faq__item[open] .faq__vraag-tekst {
	color: var(--c-wit);
}

.faq__item[open] .faq__nr {
	color: var(--faq-tint);
}

/* Zoekterm in de vraag. */
.faq__vraag-tekst mark {
	color: inherit;
	background: color-mix(in srgb, var(--faq-tint) 28%, transparent);
	border-radius: 0.2em;
	box-shadow: 0 0 0 0.08em color-mix(in srgb, var(--faq-tint) 28%, transparent);
}

/* Pixelkruis: 3x3 bolletjes, zo groot als drie rastercellen. De spookjes
   tekenen het rooster, vijf verlichte de plus; de verticale klappen om. */
.faq__icoon {
	width: 1.125rem;
	height: 1.125rem;
	overflow: visible;
}

.faq__geest {
	fill: rgba(255, 255, 255, 0.12);
}

.faq__dot {
	fill: rgba(255, 255, 255, 0.6);
	transform-box: fill-box;
	transform-origin: center;
	transition: fill var(--duur) var(--ease-uit), transform 0.45s var(--ease-uit);
}

.faq__vraag:hover .faq__dot {
	fill: var(--c-wit);
}

.faq__item[open] .faq__dot {
	fill: var(--faq-tint);
}

.faq__item[open] .faq__dot--v {
	transform: scaleX(0);
}

/* De tweede verticale klapt net later om: een kleine golf. */
.faq__dot--v + .faq__dot--v {
	transition-delay: 0.06s;
}

/* Antwoord: hoogte animeren waar ::details-content bestaat. */
.faq__item::details-content {
	block-size: 0;
	overflow: clip;
	transition: block-size 0.5s var(--ease-uit), content-visibility 0.5s allow-discrete;
}

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

.faq__antwoord {
	max-width: 40rem;
	padding: 0 0 var(--ruimte-6) calc(2.75rem + var(--ruimte-4));
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.75);
	opacity: 0;
	translate: 0 -0.4rem;
	transition: opacity 0.4s var(--ease-uit), translate 0.5s var(--ease-uit);
}

.faq__item[open] .faq__antwoord {
	opacity: 1;
	translate: 0 0;
	transition-delay: 0.08s;
}

.faq__antwoord a {
	color: var(--c-wit);
	text-decoration-color: var(--faq-tint);
	text-underline-offset: 0.2em;
}

@media (max-width: 599px) {
	.faq__vraag {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.faq__nr {
		display: none;
	}

	.faq__antwoord {
		padding-left: 0;
	}
}

/* Filter en zoeken: wat wegvalt fadet uit, wat terugkomt schuift in. */
.faq__item.is-in {
	animation: faq-in 0.5s var(--ease-uit) both;
	animation-delay: calc(var(--i, 0) * 40ms);
}

@keyframes faq-in {
	from {
		opacity: 0;
		translate: 0 0.6rem;
	}
}

/* Lege staat. */
.faq__leeg {
	padding: var(--ruimte-7) 0;
	color: rgba(255, 255, 255, 0.7);
}

.faq__leeg-kop {
	margin-bottom: var(--ruimte-2);
	font-family: var(--font-kop);
	font-size: var(--fs-h3);
	color: var(--c-wit);
}

.faq__leeg-link {
	color: var(--c-wit);
	text-decoration-color: var(--faq-tint);
	text-underline-offset: 0.2em;
}

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

	.faq__item.is-in {
		animation: none;
	}
}