/**
 * FAQ-accordeon — [dm_faqs]
 *
 * Kleuren komen uit het Astra global color palette, zodat de accordeon
 * automatisch meegaat met de huisstijl van elke subsite.
 * 0 = accent goud, 1 = tekst/donker, 2 = lijnen, 7 = grijze tekst.
 */

.dm-faq {
	--dm-faq-accent: var(--ast-global-color-0, #957d48);
	--dm-faq-ink: var(--ast-global-color-1, #1d1d1b);
	--dm-faq-line: var(--ast-global-color-2, #e6e6e6);
	--dm-faq-num-col: 3rem;
	--dm-faq-gap: 1.5rem;

	margin: 0 0 3em;
}

/* Optionele kop boven de accordeon (attribuut title=""). */
.dm-faq__title {
	margin: 0 0 1.75em;
	text-align: center;
}

.dm-faq__title::after {
	content: "";
	display: block;
	width: 3.5rem;
	height: 1px;
	margin: 0.75em auto 0;
	background-color: var(--dm-faq-accent);
}

.dm-faq__list {
	counter-reset: dm-faq;
	border-top: 1px solid var(--dm-faq-line);
}

.dm-faq__item {
	counter-increment: dm-faq;
	border-bottom: 1px solid var(--dm-faq-line);
}

/* De vraagregel: nummer | vraag | icoon. */
.dm-faq__q {
	display: grid;
	grid-template-columns: var(--dm-faq-num-col) 1fr 1rem;
	align-items: start;
	column-gap: var(--dm-faq-gap);
	padding: 1.4em 0;
	cursor: pointer;
	list-style: none;
}

/* Native marker weghalen (Safari + de rest). */
.dm-faq__q::-webkit-details-marker {
	display: none;
}

.dm-faq__q::marker {
	content: "";
}

.dm-faq__q:focus-visible {
	outline: 1px solid var(--dm-faq-accent);
	outline-offset: 0.35em;
}

/* Nummertje: 01, 02, 03 … */
.dm-faq__num {
	color: var(--dm-faq-accent);
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.08em;
	line-height: 2.05;
	transition: opacity 0.25s ease;
}

.dm-faq__num::before {
	content: counter(dm-faq, decimal-leading-zero);
}

.dm-faq__item:not([open]) .dm-faq__q:hover .dm-faq__num {
	opacity: 0.55;
}

/* De vraag neemt de heading-typografie van het thema over. */
.dm-faq__q-text {
	margin: 0;
	color: var(--dm-faq-ink);
	font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.1875rem);
	line-height: 1.5;
	transition: color 0.25s ease;
}

.dm-faq__q:hover .dm-faq__q-text,
.dm-faq__item[open] .dm-faq__q-text {
	color: var(--dm-faq-accent);
}

/* Dunne plus die een min wordt. */
.dm-faq__icon {
	position: relative;
	width: 1rem;
	height: 1rem;
	margin-top: 0.4em;
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.dm-faq__icon::before,
.dm-faq__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: var(--dm-faq-accent);
	transition: opacity 0.25s ease;
}

.dm-faq__icon::after {
	transform: rotate(90deg);
}

.dm-faq__item[open] .dm-faq__icon {
	transform: rotate(180deg);
}

.dm-faq__item[open] .dm-faq__icon::after {
	opacity: 0;
}

/* Het antwoord, uitgelijnd onder de vraag. */
.dm-faq__a {
	overflow: hidden;
}

.dm-faq__a-inner {
	padding: 0 2.5rem 1.75em calc(var(--dm-faq-num-col) + var(--dm-faq-gap));
	max-width: 68ch;
}

.dm-faq__a-inner > :first-child {
	margin-top: 0;
}

.dm-faq__a-inner > :last-child {
	margin-bottom: 0;
}

/* Datumregel (attribuut updated="yes"). */
.dm-faq__updated {
	margin: 1.75em 0 0;
	color: var(--ast-global-color-7, #424242);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Zonder nummers valt de eerste kolom weg. */
.dm-faq--no-numbers {
	--dm-faq-num-col: 0rem;
	--dm-faq-gap: 0rem;
}

.dm-faq--no-numbers .dm-faq__num {
	display: none;
}

.dm-faq--no-numbers .dm-faq__q {
	grid-template-columns: 1fr 1rem;
	column-gap: 1.5rem;
}

.dm-faq--no-numbers .dm-faq__a-inner {
	padding-left: 0;
}

@media (max-width: 767px) {
	.dm-faq {
		--dm-faq-num-col: 1.75rem;
		--dm-faq-gap: 0.85rem;
	}

	.dm-faq__q {
		padding: 1.15em 0;
	}

	.dm-faq__num {
		font-size: 0.75rem;
		line-height: 2.1;
	}

	.dm-faq__a-inner {
		padding-right: 1.75rem;
		padding-bottom: 1.4em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dm-faq__num,
	.dm-faq__q-text,
	.dm-faq__icon,
	.dm-faq__icon::before,
	.dm-faq__icon::after {
		transition: none;
	}
}

/* Byline met de expert achter de antwoorden (attribuut author=""). */
.dm-faq__byline {
	margin: 0 0 2em;
	color: var(--ast-global-color-7, #424242);
	font-size: 0.875rem;
}

.dm-faq__byline a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--dm-faq-accent);
	text-underline-offset: 0.2em;
}

.dm-faq__byline a:hover {
	color: var(--dm-faq-accent);
}

/* ─────────────────────────────────────────────
 * LINKS-MODUS
 *
 * De hub toont enkel de vragen; elke regel linkt door naar haar eigen pagina.
 * Zelfde ritme als de accordeon: nummer, vraag, haarlijn.
 * ───────────────────────────────────────────── */

.dm-faq--links .dm-faq__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dm-faq--links .dm-faq__item {
	margin: 0;
	counter-increment: dm-faq;
	border-bottom: 1px solid var(--dm-faq-line);
}

.dm-faq--links .dm-faq__link {
	display: grid;
	grid-template-columns: var(--dm-faq-num-col) 1fr 1.25rem;
	align-items: baseline;
	column-gap: var(--dm-faq-gap);
	padding: 1.4em 0;
	color: var(--dm-faq-ink);
	text-decoration: none;
	transition: color 0.25s ease;
}

.dm-faq--links .dm-faq__link:hover .dm-faq__q-text,
.dm-faq--links .dm-faq__link:focus-visible .dm-faq__q-text {
	color: var(--dm-faq-accent);
}

.dm-faq--links .dm-faq__link:focus-visible {
	outline: 1px solid var(--dm-faq-accent);
	outline-offset: 0.35em;
}

.dm-faq--links .dm-faq__q-text {
	display: block;
	margin: 0;
	color: inherit;
	font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.1875rem);
	line-height: 1.5;
	transition: color 0.25s ease;
}

.dm-faq--links .dm-faq__pijl {
	color: var(--dm-faq-accent);
	font-size: 1rem;
	text-align: right;
	transition: transform 0.25s ease;
}

.dm-faq--links .dm-faq__link:hover .dm-faq__pijl {
	transform: translateX(3px);
}

.dm-faq--no-numbers.dm-faq--links .dm-faq__link {
	grid-template-columns: 1fr 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
	.dm-faq--links .dm-faq__pijl,
	.dm-faq--links .dm-faq__q-text {
		transition: none;
	}
}