/* Block: Vragen. Heading left (sticky on wide screens), questions right as a ruled <details> list. */
.faq-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
	column-gap: var(--col-gap);
	row-gap: 40px;
	align-items: start;
}
.faq-head { display: grid; gap: 20px; position: sticky; top: 32px; }
.faq-head h2 { font-size: var(--fs-h2); max-width: 10em; }
.faq-head p { max-width: 24em; }

.faq-list { border-top: 1px solid var(--green); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
	list-style: none;
	cursor: pointer;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 24px;
	align-items: center;
	padding: 24px 0;
	border-radius: 4px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q { font-size: clamp(21px, 1.8vw, 26px); line-height: 1.2; }

/* The round toggle: a plus that turns into a minus. */
.faq-toggle {
	position: relative;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--green);
	transition: background .2s;
}
.faq-toggle::before,
.faq-toggle::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 12px;
	height: 1.5px;
	background: currentColor;
	transform: translate(-50%, -50%);
	transition: transform .2s;
}
.faq-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item summary:hover .faq-toggle { background: var(--beige); }
.faq-item[open] .faq-toggle { background: var(--green); color: var(--beige); }
.faq-item[open] .faq-toggle::after { transform: translate(-50%, -50%) rotate(0deg); }

.faq-a {
	display: grid;
	gap: 14px;
	padding: 0 60px 28px 0;
	color: var(--ink-soft);
	max-width: 44em;
}
.faq-a p, .faq-a ul, .faq-a ol { margin: 0; }
.faq-a ul, .faq-a ol { padding-left: 1.2em; }
.faq-a strong { color: var(--green); font-weight: 400; }
.faq-a a { color: var(--green); text-underline-offset: 3px; }

@media (max-width: 900px) {
	.faq-inner { grid-template-columns: 1fr; }
	.faq-head { position: static; }
	.faq-a { padding-right: 0; }
}