/*
 * single-faq.css — één veelgestelde vraag (baserules regel 8).
 *
 * Het teken in de kop (de maan als vraagteken) en het contactblok onderaan
 * staan in main.css, want die staan ook op het overzicht.
 *
 * ── Het idee ──────────────────────────────────────────────────────────────
 *
 * Een antwoord, geen artikel. De kop is kort — het onderwerp, de vraag, wanneer
 * het antwoord is nagekeken — zodat het antwoord zelf boven de vouw begint. Dat
 * antwoord staat op een wit vel dat over de rand van de nacht valt, met het
 * korte antwoord bovenaan als "In het kort", in het licht van de dageraad. Naast
 * het vel de andere vragen uit hetzelfde onderwerp, genummerd zoals op het
 * overzicht, zodat je ziet waar je bent.
 *
 * ── Wat er waar staat ─────────────────────────────────────────────────────
 *
 *   1. de tokens
 *   2. de kop
 *   3. het vel: in het kort, het antwoord, de knoppen
 *   4. meer over dit onderwerp
 *   5. vorige en volgende
 *   6. smallere schermen
 */

/* ==========================================================================
   1. De tokens
   ========================================================================== */

.faqAntwoord {
	--omhulselBreedte: 1140px;
	--faPlakt: 8.5rem;
	--faOverlap: clamp(2.5rem, 5vw, 4rem);

	/* De dageraad, donker genoeg voor tekst op papier (4,6:1). */
	--faOchtendDiep: #A2551B;

	background-color: var(--kleurPapier);
}

@media (max-width: 1024px) {
	.faqAntwoord {
		--omhulselBreedte: 748px;
	}
}

@media (max-width: 767px) {
	.faqAntwoord {
		--omhulselBreedte: none;
	}
}

/* ==========================================================================
   2. De kop
   ========================================================================== */

.faqAntwoordKop {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(0.5rem, 1.5vw, 1.25rem) calc(var(--faOverlap) + clamp(1.5rem, 3vw, 2.5rem));
	background-color: var(--kleurNacht);
	background-image:
		radial-gradient(80% 110% at 90% 0%, rgb(83 70 128 / 55%) 0%, rgb(83 70 128 / 0%) 60%),
		linear-gradient(170deg, #07021B 0%, #150A3D 60%, #2A1A63 100%);
	color: var(--kleurWit);
}

.faqAntwoordKop__nacht {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
}

.faqAntwoordKop__gloed {
	position: absolute;
	inset-block-end: -60%;
	inset-inline-start: 10%;
	inline-size: clamp(360px, 60vw, 820px);
	aspect-ratio: 2 / 1;
	background-image: radial-gradient(ellipse at center, rgb(255 188 125 / 15%) 0%, rgb(255 188 125 / 0%) 66%);
}

.faqAntwoordKop__inhoud {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 8.5rem);
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: end;
}

.faqAntwoordKop .esseoBreadcrumbs {
	padding-block: var(--ruimte3) var(--ruimte5);
	color: rgb(255 255 255 / 52%);
	font-size: var(--vloeiendLabel);
}

.faqAntwoordKop .esseoBreadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem 0.45rem;
	align-items: center;
}

.faqAntwoordKop .esseoBreadcrumbs li {
	display: inline-flex;
	gap: 0.45rem;
	align-items: center;
}

.faqAntwoordKop .esseoBreadcrumbs a {
	color: rgb(255 255 255 / 72%);
}

.faqAntwoordKop .esseoBreadcrumbs a:hover {
	color: var(--kleurWit);
}

.faqAntwoordKop .esseoBreadcrumbs [aria-current] {
	color: rgb(255 255 255 / 52%);
}

.faqAntwoordKop__onderwerp {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-block-end: 1rem;
	padding: 0.4rem 0.85rem 0.4rem 0.55rem;
	border: 1px solid rgb(255 255 255 / 16%);
	border-radius: var(--rondingPil);
	background-color: rgb(255 255 255 / 6%);
	color: var(--kleurWit);
	font-size: var(--vloeiendKlein);
	font-weight: 700;
	transition:
		background-color var(--duurKort) var(--soepel),
		border-color var(--duurKort) var(--soepel);
}

.faqAntwoordKop__onderwerp:hover {
	border-color: rgb(255 188 125 / 55%);
	background-color: rgb(255 188 125 / 12%);
	color: var(--kleurWit);
	text-decoration: none;
}

.faqAntwoordKop__icoon {
	inline-size: 1.35rem;
	block-size: 1.35rem;
	color: var(--kleurDageraad);
}

.faqAntwoordKop__titel {
	max-inline-size: 22ch;
	font-size: clamp(2rem, 1.1rem + 3.4vw, 3.6rem);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1.04;
	text-wrap: balance;
}

.faqAntwoordKop__meta {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin-block-start: 1.1rem;
	color: rgb(255 255 255 / 64%);
	font-size: var(--vloeiendKlein);
}

.faqAntwoordKop__vink {
	inline-size: 1rem;
	block-size: 1rem;
	color: var(--kleurDageraad);
}

.faqAntwoordKop__maan {
	max-inline-size: 8.5rem;
	justify-self: end;
	margin-block-end: -0.5rem;
	filter: drop-shadow(0 0 30px rgb(201 195 220 / 25%));
}

/* ==========================================================================
   3. Het vel
   ========================================================================== */

.faqAntwoord__lichaam {
	padding-block-end: clamp(3rem, 6vw, 5rem);
}

.faqAntwoord__raster {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 20rem;
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: start;
	margin-block-start: calc(var(--faOverlap) * -1);
}

.faqAntwoord__raster--enkel {
	grid-template-columns: minmax(0, 1fr);
}

/* Eén kolom leest prettiger smal; alleen op desktop, net als in faq.css. */
@media (min-width: 1025px) {
	.faqAntwoord__raster--enkel {
		--omhulselBreedte: 52rem;
	}
}

.faqAntwoord__hoofd {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2rem);
	padding: clamp(1.5rem, 4vw, 3rem);
	border-radius: 26px;
	background-color: var(--kleurWit);
	box-shadow:
		0 1px 2px rgb(16 5 77 / 6%),
		0 24px 60px rgb(16 5 77 / 12%);
}

/* In het kort: het antwoord in één adem, in het licht van de dageraad. */
.faqKort {
	position: relative;
	padding: 1.25rem 1.4rem 1.35rem;
	border-radius: 18px;
	background-image: linear-gradient(135deg, rgb(255 188 125 / 22%) 0%, rgb(255 188 125 / 8%) 100%);
	box-shadow: inset 0 0 0 1px rgb(255 188 125 / 40%);
}

.faqKort__kop {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin-block-end: 0.5rem;
	color: var(--faOchtendDiep);
	font-size: var(--vloeiendLabel);
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.faqKort__icoon {
	inline-size: 1rem;
	block-size: 1rem;
}

.faqKort__tekst {
	color: var(--kleurTekst);
	font-size: var(--vloeiendMidden);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.45;
}

.faqAntwoord__tekst {
	color: var(--kleurTekst);
	font-size: var(--vloeiendLopend);
	line-height: 1.75;
}

.faqAntwoord__tekst ul,
.faqAntwoord__tekst ol {
	display: grid;
	gap: 0.5rem;
}

.faqAntwoord__tekst li + li {
	margin-block-start: 0;
}

.faqAntwoord__tekst li::marker {
	color: var(--kleurPrimair);
	font-weight: 700;
}

.faqAntwoord__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	padding-block-start: 1.5rem;
	border-block-start: 1px solid var(--kleurLijn);
}

/* ==========================================================================
   4. Meer over dit onderwerp
   ========================================================================== */

.faqVerder__plak {
	position: sticky;
	inset-block-start: var(--faPlakt);
	display: grid;
	gap: 0.75rem;
	padding: 1.35rem 1.1rem 1.1rem;
	border-radius: 22px;
	background-color: var(--kleurWit);
	box-shadow:
		0 1px 2px rgb(16 5 77 / 5%),
		0 14px 36px rgb(16 5 77 / 8%);
}

.faqVerder__kop {
	padding-inline: 0.5rem;
	color: var(--kleurPrimair);
	font-size: var(--vloeiendLabel);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.faqVerder__lijst {
	display: grid;
	gap: 0.1rem;
}

.faqVerder__vraag {
	display: grid;
	grid-template-columns: 1.6rem minmax(0, 1fr);
	gap: 0.5rem;
	padding: 0.6rem 0.5rem;
	border-radius: 12px;
	color: var(--kleurTekst);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.4;
	transition:
		background-color var(--duurKort) var(--soepel),
		color var(--duurKort) var(--soepel);
}

.faqVerder__vraag:hover {
	background-color: var(--kleurMist);
	color: var(--kleurPrimair);
	text-decoration: none;
}

.faqVerder__nummer {
	padding-block-start: 0.1rem;
	color: var(--faOchtendDiep);
	font-size: 0.75rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.faqVerder__vraag.isHier {
	background-color: var(--kleurNacht2);
	color: var(--kleurWit);
	font-weight: 700;
}

.faqVerder__vraag.isHier .faqVerder__nummer {
	color: var(--kleurDageraad);
}

.faqVerder__terug {
	display: grid;
	gap: 0.35rem;
	padding: 0.85rem 0.5rem 0;
	border-block-start: 1px solid var(--kleurLijn);
	font-size: var(--vloeiendKlein);
	font-weight: 700;
}

/* ==========================================================================
   5. Vorige en volgende
   ========================================================================== */

.faqBuren {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.9rem;
	margin-block-start: clamp(2rem, 4vw, 3rem);
}

.faqBuren__buur {
	display: grid;
	gap: 0.35rem;
	padding: 1.1rem 1.3rem;
	border: 1px solid var(--kleurLijn);
	border-radius: 18px;
	background-color: var(--kleurWit);
	color: var(--kleurTekst);
	transition:
		border-color var(--duurKort) var(--soepel),
		transform var(--duurMiddel) var(--soepel);
}

.faqBuren__buur:hover {
	border-color: rgb(83 70 128 / 40%);
	color: var(--kleurTekst);
	text-decoration: none;
	transform: translateY(-2px);
}

.faqBuren__buur--volgende {
	text-align: end;
}

.faqBuren__label {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--kleurPrimair);
	font-size: var(--vloeiendLabel);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.faqBuren__buur--volgende .faqBuren__label {
	flex-direction: row-reverse;
	justify-self: end;
}

.faqBuren__pijl {
	inline-size: 1rem;
	block-size: 1rem;
}

.faqBuren__titel {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
}

/* ==========================================================================
   6. Smallere schermen
   ========================================================================== */

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

	.faqVerder__plak {
		position: static;
	}
}

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

	.faqAntwoordKop__maan {
		position: absolute;
		inset-block-start: 1.25rem;
		inset-inline-end: 1rem;
		inline-size: 3rem;
		margin: 0;
		opacity: 0.8;
	}

	.faqAntwoordKop__titel,
	.faqAntwoordKop .esseoBreadcrumbs {
		padding-inline-end: 3.5rem;
	}

	.faqAntwoord__hoofd {
		border-radius: 20px;
	}

	.faqBuren {
		grid-template-columns: minmax(0, 1fr);
	}

	.faqBuren__leeg {
		display: none;
	}

	.faqBuren__buur--volgende {
		text-align: start;
	}

	.faqBuren__buur--volgende .faqBuren__label {
		flex-direction: row;
		justify-self: start;
	}
}