/* FAQ Block - frontend styling
 * Scoped under .wb-faq so nothing leaks into the rest of the site.
 * Self-contained: no framework or icon font required.
 * Uses native <details>/<summary>, so the accordions work without any JS.
 */

.wb-faq {
	--wb-faq-blue: var(--color-primary-600, #2f86eb);
	--wb-faq-accent: var(--wb-accent, var(--color-primary-600, #2f86eb));
	--wb-faq-blue-dark: var(--color-primary-700, #1f6fd0);
	--wb-faq-navy: var(--color-primary-950, #0f2a4a);
	--wb-faq-ink: #46586f;
	padding: clamp(2rem, 5vw, 5rem) 0;
}

.wb-faq-inner {
	/* Breedte, centrering en linker/rechterkantlijn komen van de template's
	 * eigen .grid-container-class (zie view.php) - dat garandeert exacte
	 * uitlijning met de rest van de pagina, op elk breakpoint, ook als de
	 * template die waarden ooit wijzigt. Hier alleen de eigen tweekoloms-
	 * layout van dit blok. */
	display: flex;
	align-items: flex-start;
	gap: clamp(1.5rem, 5vw, 4rem);
}

/* ---- Left column ------------------------------------------------------- */
.wb-faq-head {
	flex: 1 1 40%;
	min-width: 0;
	/* .wb-faq-inner (via de template's eigen .grid-container-class) levert al
	 * de gewone rand-tot-tekst-kantlijn - maar overal elders in de template
	 * krijgt tekst in een sectie daarbovenop nog de "ademruimte" van
	 * .section-content (35px / 15px). Zonder dat zou deze titel wat te dicht
	 * tegen de kantlijn staan vergeleken met een sectiekop of kaarttekst
	 * elders op de pagina. Dezelfde vaste waarden hier herhaald (niet de
	 * class zelf hergebruikt, want section-content zet ook verticale padding
	 * die dit blok al op zijn eigen manier regelt). */
	padding-left: 35px;
}
@media (max-width: 1023px) {
	.wb-faq-head {
		padding-left: 15px;
	}
}

.wb-faq-intro {
	display: inline-block;
	color: var(--wb-faq-blue);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 1rem;
}

/* Geen eigen titelopmaak meer (v1.0.9). De titel is een kale <h1> en wordt
 * volledig door het template opgemaakt (css/basics.css voor grootte en
 * gewicht, css/wbce.css voor de tweekleurige kop). Zo ziet een kop uit dit
 * blok er exact hetzelfde uit als een kop uit elke andere module of uit de
 * editor - de eerdere .wb-faq-title/-line1/-line2 gaven dit blok een eigen
 * lettergrootte en kleurenpaar, en dat is precies het verschil dat we niet
 * meer willen. Wil je de kopopmaak wijzigen, doe dat in het template. */

.wb-faq-lead {
	color: var(--wb-faq-ink);
	font-size: clamp(1rem, 1.3vw, 1.12rem);
	line-height: 1.7;
	max-width: 34em;
	margin: 0 0 1.8rem;
}

/* ---- Left column button ------------------------------------------------ */
.wb-faq-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.wb-faq-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 26px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	line-height: 1;
	transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
	cursor: pointer;
}

.wb-faq-btn .wb-faq-arrow { transition: transform 0.2s ease; }
.wb-faq-btn:hover .wb-faq-arrow { transform: translateX(3px); }

.wb-faq-btn--primary {
	background: var(--wb-faq-blue);
	color: #fff;
	box-shadow: 0 8px 20px rgba(47, 134, 235, 0.32);
}
.wb-faq-btn--primary:hover {
	background: var(--wb-faq-blue-dark);
	transform: translateY(-1px);
	color: #fff;
}

/* ---- Right column: FAQ list ------------------------------------------- */
.wb-faq-list {
	flex: 1 1 60%;
	min-width: 0;
}

.wb-faq-item {
	border-bottom: 1px solid rgba(15, 42, 74, 0.12);
	background: transparent;
}

.wb-faq-item:first-child {
	border-top: 1px solid rgba(15, 42, 74, 0.12);
}

.wb-faq-q {
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding: 1.15em 0.25em;
	color: var(--wb-faq-navy);
	font-weight: 700;
	font-size: clamp(1rem, 1.3vw, 1.12rem);
	line-height: 1.35;
	-webkit-user-select: none;
	user-select: none;
	list-style: none;
	transition: color 0.2s ease;
}

.wb-faq-q::-webkit-details-marker { display: none; }
.wb-faq-q::marker { content: ''; }

.wb-faq-q:hover { color: var(--wb-faq-blue); }

.wb-faq-q:focus-visible {
	outline: 2px solid var(--wb-faq-blue);
	outline-offset: 2px;
}

.wb-faq-q-text { flex: 1 1 auto; }

/* Round +/- indicator built with CSS (::after rotates when [open]) */
.wb-faq-icon {
	position: relative;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1.5px solid var(--wb-faq-blue);
	transition: background 0.2s ease;
}

.wb-faq-icon::before,
.wb-faq-icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--wb-faq-blue);
	transform: translate(-50%, -50%);
	transition: transform 0.25s ease, opacity 0.2s ease;
}

.wb-faq-icon::before {
	width: 12px;
	height: 2px;
}

.wb-faq-icon::after {
	width: 2px;
	height: 12px;
}

/* Open state: minus (hide the vertical bar) + filled icon */
.wb-faq-item[open] > .wb-faq-q .wb-faq-icon {
	background: var(--wb-faq-blue);
}
.wb-faq-item[open] > .wb-faq-q .wb-faq-icon::before {
	background: #fff;
}
.wb-faq-item[open] > .wb-faq-q .wb-faq-icon::after {
	transform: translate(-50%, -50%) scaleY(0);
	opacity: 0;
}

.wb-faq-a {
	color: var(--wb-faq-ink);
	font-size: clamp(0.95rem, 1.2vw, 1.05rem);
	line-height: 1.7;
	padding: 0 2.6em 1.4em 0.25em;
}

.wb-faq-a p:first-child { margin-top: 0; }
.wb-faq-a p:last-child { margin-bottom: 0; }
.wb-faq-a img { max-width: 100%; height: auto; }
.wb-faq-a a { color: var(--wb-faq-blue); }

/* ---- Reveal-on-scroll -------------------------------------------------- */
.wb-faq-head,
.wb-faq-list {
	opacity: 0;
	transform: translateY(24px);
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease;
}
.wb-faq-list { transition-delay: 120ms; }

.wb-faq.is-visible .wb-faq-head,
.wb-faq.is-visible .wb-faq-list {
	opacity: 1;
	transform: translateY(0);
}

/* Respect users who prefer no motion */
@media (prefers-reduced-motion: reduce) {
	.wb-faq-head,
	.wb-faq-list {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ---- Responsive: stack under 900px ------------------------------------ */
@media (max-width: 900px) {
	.wb-faq-inner {
		flex-direction: column;
		gap: 2rem;
	}
	.wb-faq-head,
	.wb-faq-list {
		flex-basis: auto;
		width: 100%;
	}
}

/* Containerbreedte, centrering en linker/rechterkantlijn komen nu van de
 * template's eigen .grid-container-class op hetzelfde element (zie view.php:
 * class="wb-faq-inner grid-container") - dat garandeert exacte uitlijning
 * met de rest van de pagina op elk breakpoint, ook als de template die
 * waarden ooit aanpast. Een eerdere versie dupliceerde die breakpoints hier
 * zelf; dat raakte in de praktijk uit sync met de echte .grid-container (de
 * bron van het "drie stukken tekst lijnen niet uit"-probleem). Wordt dit
 * blok ooit buiten dit template gebruikt, dan ontbreekt .grid-container's
 * CSS en valt de breedte terug op 100% - voeg dan zelf een .grid-container
 * regel toe in de omgeving waar dit blok draait, in plaats van hier weer een
 * eigen kopie te onderhouden. */