/* Vragen – uitklapbare veelgestelde vragen
 * Neemt lettertype en tekstkleur over van het thema.
 * Aanpassen via de CSS-variabelen hieronder (in je thema).
 */
.vragen {
	--vragen-accent: currentColor;
	--vragen-rand: rgba(0, 0, 0, 0.14);
	--vragen-achtergrond: transparent;
	--vragen-achtergrond-open: rgba(0, 0, 0, 0.025);
	--vragen-radius: 6px;
	--vragen-ruimte: 1rem;
	--vragen-snelheid: 0.28s;

	interpolate-size: allow-keywords; /* maakt de hoogte-animatie mogelijk */
	margin-block: 1.5em;
}

.vragen__titel {
	margin: 0 0 0.75em;
}

.vragen__item {
	border: 1px solid var(--vragen-rand);
	border-radius: var(--vragen-radius);
	background: var(--vragen-achtergrond);
	transition: background-color var(--vragen-snelheid) ease;
}

.vragen__item + .vragen__item {
	margin-top: 0.5rem;
}

.vragen__item[open] {
	background: var(--vragen-achtergrond-open);
}

.vragen__vraag {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: var(--vragen-ruimte) calc(var(--vragen-ruimte) * 1.25);
	cursor: pointer;
	list-style: none;
	-webkit-user-select: none;
	user-select: none;
}

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

.vragen__vraag::marker {
	content: "";
}

.vragen__vraag:focus-visible {
	outline: 2px solid var(--vragen-accent);
	outline-offset: 2px;
	border-radius: var(--vragen-radius);
}

.vragen .vragen__vraag-tekst {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: 1.05em;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
	color: inherit;
}

/* Plus-icoon dat een min wordt */
.vragen__icoon {
	position: relative;
	flex: 0 0 auto;
	width: 1.75rem;
	height: 1.75rem;
	border: 1px solid var(--vragen-rand);
	border-radius: 50%;
}

.vragen__icoon::before,
.vragen__icoon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.7rem;
	height: 2px;
	border-radius: 1px;
	background: var(--vragen-accent);
	transform: translate(-50%, -50%);
	transition: transform var(--vragen-snelheid) ease;
}

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

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

.vragen__antwoord {
	padding: 0 calc(var(--vragen-ruimte) * 1.25) calc(var(--vragen-ruimte) * 1.1);
	max-width: 75ch;
}

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

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

/* Soepel openen/sluiten in moderne browsers; oudere browsers klappen direct open. */
.vragen__item::details-content {
	block-size: 0;
	overflow: hidden;
	transition: block-size var(--vragen-snelheid) ease, content-visibility var(--vragen-snelheid) allow-discrete;
}

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

@media (prefers-reduced-motion: reduce) {
	.vragen__item,
	.vragen__icoon::before,
	.vragen__icoon::after {
		transition: none;
	}
}

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

/* Melding voor beheerders bij een onbekende groep */
.vragen-melding {
	padding: 0.75em 1em;
	border-left: 3px solid #d63638;
	background: #fcf0f1;
	color: #1d2327;
}