/* ============================================================
   FAQ (uitklap) - blok acf/eldee-faq
   Losse stylesheet: geladen op de front-end (alleen op pagina's
   waar het blok voorkomt) en in de blok-editor (add_editor_style).
   Native Gutenberg-instellingen (kleur, spacing, typografie, breedte)
   worden op het blok zelf gezet via get_block_wrapper_attributes();
   deze CSS verzorgt alleen de opmaak van de accordion.
   Bewust apart van de gecompileerde style.css (externe Prepros-build).
   ============================================================ */

/* ---- Breedte: volgt de uitlijning uit de blok-toolbar ----
   Geen uitlijning = klasse .container (contentbreedte van de site). */
.eldee-faq--wide {
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
}
.eldee-faq--full {
	width: 100%;
}

/* ---- Titel (volgt de site-koppen; erft de ingestelde tekstkleur) ---- */
.eldee-faq__title {
	margin-bottom: 1.5rem;
	border-bottom: 0;
	text-decoration: none;
	color: inherit;
}

/* ---- Lijst / items ----
   Randkleur volgt de tekstkleur op lage sterkte, zodat het ook op een
   donkere achtergrond zichtbaar blijft. Vaste rgba als fallback. */
.eldee-faq__list {
	border-top: 1px solid rgba(128, 128, 128, 0.4);
	border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}
.eldee-faq__item {
	border-bottom: 1px solid rgba(128, 128, 128, 0.4);
	border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}
.eldee-faq__question {
	margin: 0;
}

/* ---- De aanklikbare vraag ---- */
.eldee-faq__toggle {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 1.1rem 0;
	border: 0;
	background: transparent;
	text-align: left;
	text-decoration: none;
	color: inherit;
	font-family: inherit;
	font-size: 1.15em;   /* groter dan het antwoord; schaalt mee met de Typografie-instelling */
	font-weight: 600;
	line-height: 1.35;
	white-space: normal;
	cursor: pointer;
}

/* Hover/focus: neutrale onderstreping als affordance; kleur alleen als
   er een accentkleur is gekozen (anders geen kleuromslag, dus geen rood). */
.eldee-faq__toggle:hover,
.eldee-faq__toggle:focus {
	text-decoration: none;
	color: var(--eldee-faq-accent, inherit);
}
.eldee-faq__toggle:hover .eldee-faq__question-text {
	text-decoration: underline;
}
/* Openstaande vraag krijgt (indien gekozen) de accentkleur. */
.eldee-faq__toggle:not(.collapsed) {
	color: var(--eldee-faq-accent, inherit);
}

.eldee-faq__toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.eldee-faq__question-text {
	flex: 1 1 auto;
}

/* ---- Antwoord ---- */
.eldee-faq__answer-inner {
	padding: 0 0 1.25rem;
}
.eldee-faq__answer-inner > :last-child {
	margin-bottom: 0;
}

/* Met achtergrondkleur (Kleuren-paneel): standaard wat lucht eromheen.
   De klant kan dit overschrijven via het Afmetingen-paneel (inline style). */
.eldee-faq.has-background {
	padding-top: 2.5rem;
	padding-bottom: 2.5rem;
}

/* Editor-preview: toon antwoorden altijd (Bootstrap-JS draait niet in de editor). */
.eldee-faq--editor .eldee-faq__answer {
	display: block !important;
	height: auto !important;
}