/* Bricks Blocks – FAQ ("Veelgestelde vragen")
 *
 * Port of the FAQ mockup (pages/faq.html). Everything is scoped under .bb-faq so it
 * neither leaks into nor picks up from Bricks: headings, buttons, inputs and <p> get
 * explicit values instead of trusting the theme's element styles. Colours and
 * spacing read the site's Bricks variables (--secondary, --space-m, …) with the
 * mockup value as fallback. The fonts (Geologica, Poppins) are expected to be loaded
 * by the site. Category colours arrive inline per group (icon, filter dot).
 *
 * The element is always 100% wide; its Bricks column decides the real width.
 */

.bb-faq {
	--bb-faq-primary: var(--primary, #5f112b);
	--bb-faq-secondary: var(--secondary, #4e2567);
	--bb-faq-text: var(--text, #222222);
	--bb-faq-muted: var(--text-muted, #5a5a5a);
	--bb-faq-white: var(--white, #ffffff);
	--bb-faq-soft: var(--background-soft, #fbf1ef);
	--bb-faq-border: var(--border, #e8dcd9);
	--bb-faq-accent: var(--accent, #2f8a6c);
	--bb-faq-accent-dark: var(--accent-dark, #22684f);
	--bb-faq-pink: var(--pastel-pink, #f2cbd2);
	--bb-faq-mark: #ffe9a8;
	--bb-faq-shadow: 0 8px 24px rgba(95, 17, 43, 0.10);
	--bb-faq-radius-md: 16px;
	--bb-faq-radius-lg: 28px;
	--bb-faq-font-title: "Geologica", sans-serif;
	--bb-faq-font-body: "Poppins", sans-serif;

	--bb-faq-2xs: var(--space-2xs, clamp(0.51rem, calc(0.00029629629629629656 * (100vw - 22.5rem) + 0.51rem), 0.53rem));
	--bb-faq-m: var(--space-m, clamp(1rem, calc(0.003703703703703704 * (100vw - 22.5rem) + 1rem), 1.25rem));
	--bb-faq-xl: var(--space-xl, clamp(1.56rem, calc(0.00977777777777778 * (100vw - 22.5rem) + 1.56rem), 2.22rem));
	--bb-faq-2xl: var(--space-2xl, clamp(1.95rem, calc(0.014962962962962963 * (100vw - 22.5rem) + 1.95rem), 2.96rem));
	--bb-faq-3xl: var(--space-3xl, clamp(2.44rem, calc(0.022370370370370374 * (100vw - 22.5rem) + 2.44rem), 3.95rem));

	box-sizing: border-box;
	display: block;
	width: 100%;
	font-family: var(--bb-faq-font-body);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--bb-faq-text);
	-webkit-font-smoothing: antialiased;
}

.bb-faq *,
.bb-faq *::before,
.bb-faq *::after {
	box-sizing: border-box;
}

.bb-faq p {
	margin: 0;
	color: inherit;
}

.bb-faq svg {
	display: block;
	flex-shrink: 0;
}

/* ---------- Filter box ---------- */

/* No JS = no search/filters: everything stays visible and opens natively. */
.bb-faq:not(.bb-faq--js) .bb-faq__filterbox {
	display: none;
}

.bb-faq__filterbox {
	background: var(--bb-faq-soft);
	border: 1px solid var(--bb-faq-border);
	border-radius: var(--bb-faq-radius-lg);
	padding: var(--bb-faq-xl) var(--bb-faq-2xl);
	margin-bottom: var(--bb-faq-3xl);
}

.bb-faq .bb-faq__label {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 var(--bb-faq-m);
	font-family: var(--bb-faq-font-title);
	font-weight: 700;
	font-size: 0.78rem;
	line-height: 1.6;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bb-faq-secondary);
}

.bb-faq__label:last-child {
	margin-bottom: 0;
}

.bb-faq__label svg {
	width: 15px;
	height: 15px;
}

.bb-faq__search {
	margin-bottom: var(--bb-faq-m);
}

.bb-faq__search:last-child {
	margin-bottom: 0;
}

.bb-faq__field {
	display: flex;
	align-items: center;
	gap: var(--bb-faq-2xs);
	background: var(--bb-faq-white);
	border: 1px solid var(--bb-faq-border);
	border-radius: 999px;
	padding: 0.55em 0.6em 0.55em 1.3em;
}

.bb-faq__field:focus-within {
	outline: 2px solid var(--bb-faq-secondary);
	outline-offset: 2px;
}

.bb-faq .bb-faq__input {
	flex-grow: 1;
	width: auto;
	min-width: 0;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 1px 2px; /* the browser default the design was drawn with */
	border: none;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	outline: none;
	font-family: var(--bb-faq-font-body);
	font-size: 0.95rem;
	font-weight: 400;
	line-height: normal;
	letter-spacing: normal;
	color: var(--bb-faq-text);
	-webkit-appearance: none;
	appearance: none;
}

.bb-faq .bb-faq__input:focus {
	border: none;
	box-shadow: none;
	outline: none;
}

/* type="search" gives mobile the right keyboard; hide its native clear/decoration
   so the field looks exactly like the design. */
.bb-faq__input::-webkit-search-decoration,
.bb-faq__input::-webkit-search-cancel-button,
.bb-faq__input::-webkit-search-results-button,
.bb-faq__input::-webkit-search-results-decoration {
	-webkit-appearance: none;
	display: none;
}

.bb-faq .bb-faq__search-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--bb-faq-primary);
	color: var(--bb-faq-white);
	box-shadow: none;
	cursor: pointer;
}

.bb-faq__search-btn svg {
	width: 16px;
	height: 16px;
}

.bb-faq__search-btn:focus-visible {
	outline: 2px solid var(--bb-faq-secondary);
	outline-offset: 2px;
}

/* ---------- Filter pills ---------- */

.bb-faq__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bb-faq .bb-faq__filter {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	width: auto;
	min-height: 0;
	margin: 0;
	padding: 0.5em 1em;
	border: 1px solid var(--bb-faq-border);
	border-radius: 999px;
	background: var(--bb-faq-white);
	box-shadow: none;
	font-family: var(--bb-faq-font-title);
	font-weight: 600;
	font-size: 0.84rem;
	line-height: normal;
	letter-spacing: normal;
	text-transform: none;
	color: var(--bb-faq-text);
	cursor: pointer;
	transition: all 0.15s ease;
}

.bb-faq__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--bb-faq-border);
	flex-shrink: 0;
}

.bb-faq__count {
	color: var(--bb-faq-muted);
	font-weight: 500;
}

.bb-faq .bb-faq__filter:hover {
	border-color: var(--bb-faq-secondary);
}

.bb-faq .bb-faq__filter.is-active {
	background: var(--bb-faq-text);
	border-color: var(--bb-faq-text);
	color: var(--bb-faq-white);
}

.bb-faq__filter.is-active .bb-faq__count {
	color: rgba(255, 255, 255, 0.7);
}

.bb-faq__filter:focus-visible {
	outline: 2px solid var(--bb-faq-secondary);
	outline-offset: 2px;
}

/* ---------- Groups ---------- */

.bb-faq__group {
	margin: 0 0 var(--bb-faq-3xl);
	padding: 0;
	scroll-margin-top: 90px;
}

.bb-faq__group.is-hidden {
	display: none;
}

.bb-faq__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: var(--bb-faq-xl);
}

.bb-faq__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 50%;
}

.bb-faq__icon svg {
	width: 18px;
	height: 18px;
}

.bb-faq .bb-faq__title {
	margin: 0;
	padding: 0;
	font-family: var(--bb-faq-font-title);
	font-weight: 900;
	font-size: 1.15rem;
	line-height: 1.05;
	letter-spacing: normal;
	text-transform: none;
	color: var(--bb-faq-primary);
}

.bb-faq__badge {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	margin-left: auto;
	padding: 0.4em 1em;
	border-radius: 999px;
	background: var(--bb-faq-secondary);
	color: var(--bb-faq-white);
	font-family: var(--bb-faq-font-title);
	font-weight: 600;
	font-size: 0.78rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
}

.bb-faq__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* ---------- Items (accordion) ---------- */

.bb-faq__item {
	margin: 0;
	padding: 0;
	border: 1px solid var(--bb-faq-border);
	border-radius: var(--bb-faq-radius-lg);
	overflow: hidden;
	background: var(--bb-faq-white);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	scroll-margin-top: 90px;
}

.bb-faq__item.is-hidden {
	display: none;
}

.bb-faq__item:hover {
	border-color: var(--bb-faq-secondary);
}

.bb-faq__item[open] {
	border-color: var(--bb-faq-secondary);
	box-shadow: var(--bb-faq-shadow);
}

.bb-faq__item > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bb-faq-xl);
	margin: 0;
	padding: 1.15em 1.3em;
	list-style: none;
	cursor: pointer;
	font-family: var(--bb-faq-font-title);
	font-weight: 600;
	font-size: 0.98rem;
	line-height: 1.4;
	color: var(--bb-faq-text);
}

.bb-faq__item > summary::-webkit-details-marker {
	display: none;
}

.bb-faq__item > summary::marker {
	content: "";
}

.bb-faq__item > summary:focus-visible {
	outline: 2px solid var(--bb-faq-secondary);
	outline-offset: -2px;
}

.bb-faq__item[open] > summary {
	color: var(--bb-faq-secondary);
	padding-bottom: 0.9em;
}

.bb-faq__chevron {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--bb-faq-soft);
	transition: background 0.15s ease;
}

.bb-faq__chevron svg {
	width: 14px;
	height: 14px;
	color: var(--bb-faq-secondary);
	transition: transform 0.2s ease;
}

.bb-faq__item[open] .bb-faq__chevron {
	background: var(--bb-faq-secondary);
}

.bb-faq__item[open] .bb-faq__chevron svg {
	color: var(--bb-faq-white);
	transform: rotate(180deg);
}

.bb-faq__answer {
	margin: 0;
	padding: 0 1.3em 1.3em;
	font-family: var(--bb-faq-font-body);
	font-weight: 400;
	font-size: 0.93rem;
	line-height: 1.65;
	color: var(--bb-faq-muted);
}

.bb-faq .bb-faq__answer p {
	margin: 0 0 0.8em;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.bb-faq .bb-faq__answer p:last-child {
	margin-bottom: 0;
}

.bb-faq .bb-faq__answer a {
	color: var(--bb-faq-secondary);
	font-weight: 600;
	text-decoration: none;
}

.bb-faq .bb-faq__answer a:hover {
	text-decoration: underline;
}

.bb-faq mark {
	background: var(--bb-faq-mark);
	color: inherit;
	border-radius: 3px;
	padding: 0 2px;
}

/* ---------- Empty state ---------- */

/* Always in the accessibility tree so its text gets announced; zero height while empty. */
.bb-faq .bb-faq__empty {
	margin: 0;
	padding: 0;
	text-align: center;
	color: var(--bb-faq-muted);
}

.bb-faq .bb-faq__empty.is-visible {
	padding: var(--bb-faq-2xl) 0;
}

/* ---------- Call to action ---------- */

.bb-faq__cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--bb-faq-m);
	margin-top: var(--bb-faq-2xl);
	padding: var(--bb-faq-xl) var(--bb-faq-2xl);
	border-radius: var(--bb-faq-radius-md);
	background: var(--bb-faq-pink);
}

.bb-faq__cta-text {
	display: flex;
	align-items: center;
	gap: var(--bb-faq-m);
}

.bb-faq__cta-icon {
	display: block;
	flex-shrink: 0;
	color: var(--bb-faq-primary);
}

.bb-faq__cta-icon svg {
	width: 36px;
	height: 36px;
}

.bb-faq .bb-faq__cta-text p {
	margin: 0;
	font-family: var(--bb-faq-font-body);
	font-weight: 400;
	font-size: 1.1rem;
	line-height: 1.6;
	color: var(--bb-faq-text);
}

.bb-faq__cta-text strong {
	display: block;
	font-family: var(--bb-faq-font-title);
	font-weight: 700;
	color: var(--bb-faq-primary);
}

.bb-faq .bb-faq__cta-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--bb-faq-2xs);
	margin: 0;
	padding: 0.6em 1.2em;
	border: 2px solid transparent;
	border-radius: 999px;
	background: var(--bb-faq-accent);
	color: var(--bb-faq-white);
	font-family: var(--bb-faq-font-title);
	font-weight: 600;
	font-size: 0.85rem;
	line-height: 1.6;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.bb-faq .bb-faq__cta-btn:hover {
	transform: translateY(-1px);
	background: var(--bb-faq-accent-dark);
	color: var(--bb-faq-white);
	box-shadow: var(--bb-faq-shadow);
}

.bb-faq__cta-btn:focus-visible {
	outline: 2px solid var(--bb-faq-secondary);
	outline-offset: 2px;
}

.bb-faq__cta-btn svg {
	width: 16px;
	height: 16px;
}

@media (max-width: 640px) {
	.bb-faq__cta {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bb-faq *,
	.bb-faq *::before,
	.bb-faq *::after {
		transition: none !important;
	}
}