/* =========================================================
   Blok: faq (veelgestelde-vragen-accordeon)
   Hergebruikt de bestaande FAQ-accordion-styling 1:1, gescoped
   onder .sellabees-block--faq (de pagina-CSS assets/css/pages/faq.css
   laadt alléén op de FAQ-pagina). Uitsluitend --sellabees-* tokens.
   ========================================================= */

.sellabees-block--faq {
	padding-block: clamp(28px, 4vw, 44px);
}
/* Opeenvolgende FAQ-groepen (paginakop → faq → faq → …) niet dubbel padden:
   anders is de tussenruimte 2×44px. De bovenste padding van een volgend faq-blok
   vervalt, zodat er één nette gelijke gap tussen de groepen staat. */
.sellabees-block--faq + .sellabees-block--faq {
	padding-top: 0;
}

.sellabees-block--faq .sellabees-block__title {
	margin: 0 0 17px;
	color: var(--sellabees-ink);
	font-family: var(--sellabees-font-heading);
	font-weight: 400;
	font-size: clamp(26px, 4vw, 30px);
	line-height: 1.1;
	text-transform: uppercase;
}

/* --- Lijst met accordion-items ------------------------------------------ */
.sellabees-block--faq .sellabees-faq__list {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.sellabees-block--faq .sellabees-faq__item {
	background: var(--sellabees-search-bg);
}

/* --- Eigen open/dicht-animatie (grid-template-rows 0fr → 1fr) ------------
   De wrapper is een grid met één rij; van 0fr naar 1fr animeren laat de browser
   de hoogte zelf vloeiend interpoleren — zonder JS-hoogtemeting of reflow. De
   binnenste .sellabees-faq__answer MOET overflow:hidden + min-height:0 hebben,
   anders kan de rij niet naar 0 krimpen. Standaard dicht; JS zet .is-open. */
.sellabees-block--faq .sellabees-faq__answer-wrap {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.34s cubic-bezier(0.4, 0, 0.2, 1);
}
.sellabees-block--faq .sellabees-faq__item.is-open .sellabees-faq__answer-wrap {
	grid-template-rows: 1fr;
}
@media (prefers-reduced-motion: reduce) {
	.sellabees-block--faq .sellabees-faq__answer-wrap { transition: none; }
}

/* --- Vraag (<button>) --------------------------------------------------- */
.sellabees-block--faq .sellabees-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	min-height: 45px;
	margin: 0;
	padding: 14px 13px 14px 12px;
	background: none;
	border: 0;
	text-align: left;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	font-family: var(--sellabees-font-body);
	font-weight: 300; /* 45 Book */
	font-size: 14px;
	line-height: 1.4;
	color: var(--sellabees-ink);
}

.sellabees-block--faq .sellabees-faq__question:focus-visible {
	outline: 2px solid var(--sellabees-red);
	outline-offset: 2px;
}

.sellabees-block--faq .sellabees-faq__question-text {
	flex: 1 1 auto;
}

/* --- Rode cirkel met plus / minus (CSS getekend) ------------------------ */
.sellabees-block--faq .sellabees-faq__toggle {
	position: relative;
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--sellabees-red);
}

.sellabees-block--faq .sellabees-faq__toggle::before,
.sellabees-block--faq .sellabees-faq__toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: #fff;
	transform: translate(-50%, -50%);
}

/* Horizontale balk van de plus */
.sellabees-block--faq .sellabees-faq__toggle::before {
	width: 7px;
	height: 1.5px;
}

/* Verticale balk van de plus (verdwijnt bij open -> wordt een minus) */
.sellabees-block--faq .sellabees-faq__toggle::after {
	width: 1.5px;
	height: 7px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.sellabees-block--faq .sellabees-faq__item.is-open .sellabees-faq__toggle::after {
	transform: translate(-50%, -50%) rotate(90deg);
	opacity: 0;
}

/* --- Antwoord ----------------------------------------------------------- */
/* .answer = de overflow-clip (grid-item) → GEEN eigen padding, anders zet die een
   minimumhoogte op de grid-track en krimpt-ie niet naar 0. De padding staat op de
   binnenste .answer-inner. */
.sellabees-block--faq .sellabees-faq__answer {
	overflow: hidden;
	min-height: 0;
	padding: 0; /* neutraliseert de ongescopete legacy pages/faq.css-padding (zou de 16px-vloer terugbrengen) */
	font-family: var(--sellabees-font-body);
	font-weight: 300; /* 45 Book */
	font-size: 14px;
	line-height: 1.6;
	color: var(--sellabees-ink);
}
.sellabees-block--faq .sellabees-faq__answer-inner {
	padding: 0 18px 16px;
}

.sellabees-block--faq .sellabees-faq__answer-inner > :first-child {
	margin-top: 0;
}
.sellabees-block--faq .sellabees-faq__answer-inner > :last-child {
	margin-bottom: 0;
}

.sellabees-block--faq .sellabees-faq__answer a {
	color: var(--sellabees-red);
	text-decoration: underline;
}

/* --- Mobiel (gelijk aan de FAQ-pagina) ---------------------------------- */
@media (max-width: 981px) {
	.sellabees-block--faq .sellabees-faq__list {
		gap: 10px;
	}
	.sellabees-block--faq .sellabees-faq__question {
		min-height: 50px;
		padding: 8px 13px 8px 12px;
		gap: 12px;
	}
	.sellabees-block--faq .sellabees-faq__answer-inner {
		padding: 0 12px 12px;
	}

	/* Het toggle-icoon blijft op mobiel/tablet identiek aan desktop (witte plus/min
	   in een rode cirkel) — geen aparte mobiele outline-variant meer. */
}