/* ============================================================
   Pagina Veelgestelde vragen
   ============================================================ */
.bb-faqpage { display: block; }

/* --- kop --- */
.bb-faq__head { background: var(--bb-mint); padding: 40px 0 48px; position: relative; overflow: hidden; }
.bb-faq__head::after { content: ""; position: absolute; right: -140px; top: -120px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(141, 187, 78, 0.22), rgba(141, 187, 78, 0) 70%); pointer-events: none; }
.bb-faq__crumb { display: flex; gap: 10px; align-items: center; font-size: var(--fs-small); color: var(--fg-muted); margin-bottom: 24px; }
.bb-faq__crumb a { color: var(--bb-green-forest); }
.bb-faq__headgrid { display: grid; gap: 32px; align-items: center; }
.bb-faq__head h1 { margin: 0 0 12px; }
.bb-faq__lead { font-size: var(--fs-lead); color: var(--fg-2); max-width: 46ch; margin: 0 0 28px; text-wrap: pretty; }
.bb-faq__headfig { display: none; }
.bb-faq__headfig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-xl); border: 4px solid var(--bb-white); box-shadow: 0 18px 40px rgba(6, 69, 48, 0.18); }

/* --- zoekveld --- */
.bb-faq__search { position: relative; display: flex; align-items: center; background: var(--bb-white); border: 2px solid var(--border-card); border-radius: var(--radius-pill); box-shadow: var(--shadow-card); max-width: 560px; transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); }
/* Klik je met de muis in de balk, dan verandert er niets aan de vormgeving: alleen
   de cursor knippert erin. Wie met de Tab-toets navigeert heeft wel een zichtbare
   markering nodig (WCAG 2.2), en die krijgt de balk als geheel, in zijn eigen
   pilvorm. Wij gaan hier niet op :focus-visible af: een tekstveld geldt voor de
   browser ook na een muisklik als toetsenbordfocus. De markering hangt daarom aan
   data-toetsenbord, dat in ui.jsx wordt bijgehouden. */
html[data-toetsenbord] .bb-faq__search:has(input:focus) { border-color: var(--bb-green-light); box-shadow: var(--shadow-focus); }
.bb-faq__searchicon { display: flex; padding: 0 4px 0 18px; color: var(--bb-green-forest); }
.bb-faq__srlabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bb-faq__search input { flex: 1; min-width: 0; border: 0; background: none; font: 500 var(--fs-body)/1.4 var(--font-body); color: var(--fg-1); padding: 15px 12px; min-height: 48px; }
.bb-faq__search input:focus { outline: none; }
/* Het invoerveld zelf krijgt nooit een eigen ring. Zonder deze regel pakt het de
   algemene focusring uit tokens.css, met een kleine hoekradius, en dan staat er een
   hoekig kadertje midden in de ronde balk. */
/* Het invoerveld zelf krijgt nooit een eigen ring: de balk eromheen draagt hem.
   Zonder deze regel pakt het de algemene focusring uit styles.css. Die regel
   gebruikt :is() met [tabindex] erin en weegt daardoor zwaarder dan een gewone
   klasseselector, dus .bb-page hoort hier voor. */
.bb-page .bb-faq__search input:focus-visible { box-shadow: none; border-radius: inherit; }
.bb-faq__search input::placeholder { color: var(--fg-muted); }
.bb-faq__search input::-webkit-search-cancel-button { display: none; }
.bb-faq__clear { display: grid; place-items: center; width: 44px; height: 44px; margin-right: 4px; border: 0; border-radius: 50%; background: var(--bb-mint); color: var(--bb-green-dark); cursor: pointer; }
.bb-faq__clear:hover { background: var(--bb-gray-light); }

/* --- lijstgebied --- */
.bb-faq { padding: 26px 0 72px; }

/* De filterbalk blijft bij het scrollen onder de menubalk hangen, zodat je overal
   op de pagina kunt blijven filteren en alles kunt openen of sluiten. De hoogte van
   de menubalk komt uit ui.jsx; die ene pixel eraf laat de balken elkaar net raken,
   zodat er geen streepje achtergrond tussen valt.

   Onder 720 px staan de knoppen op meerdere regels en is de balk 244 px hoog. Dan
   zou hij bijna de halve telefoon vullen, dus daar blijft hij gewoon op zijn plek
   in de pagina staan. Plakken doet hij vanaf de breedte waarop alles op een rij
   past, en dat is precies de breedte waarop de balk laag genoeg is. */
.bb-faq__filter { background: var(--bg-page); border-bottom: 1px solid var(--border-card); padding: 14px 0; }
@media (min-width: 720px) {
  .bb-faq__filter { position: sticky; top: calc(var(--bb-header-h, 73px) - 1px); z-index: 20; }
}
.bb-faq__toolbar { display: flex; flex-direction: column; gap: 16px; }
.bb-faq__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.bb-faq__chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; border: 2px solid var(--border-card); border-radius: var(--radius-pill); background: var(--bb-white); font: 600 var(--fs-small) var(--font-body); color: var(--bb-green-dark); cursor: pointer; transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); }
.bb-faq__chip:hover { border-color: var(--bb-green-light); transform: translateY(-1px); }
.bb-faq__chip.is-on { background: var(--bb-green-forest); border-color: var(--bb-green-forest); color: var(--bb-white); }
.bb-faq__chipn { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--bb-mint); color: var(--bb-green-dark); font-size: var(--fs-caption); font-weight: 700; }
.bb-faq__chip.is-on .bb-faq__chipn { background: rgba(255, 255, 255, 0.22); color: var(--bb-white); }
.bb-faq__tools { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.bb-faq__count { margin: 0; font-size: var(--fs-small); color: var(--fg-muted); }
.bb-faq__toggleall { border: 0; background: none; padding: 10px 4px; min-height: 44px; font: 600 var(--fs-small) var(--font-body); color: var(--bb-green-forest); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.bb-faq__toggleall:hover { color: var(--bb-green-dark); }

/* --- groepen --- */
.bb-faq__group { margin-bottom: 40px; }
.bb-faq__grouphead { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.bb-faq__grouphead h2 { margin: 0; font-size: var(--fs-h3); }
.bb-faq__groupicon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--bb-mint); color: var(--bb-green-forest); flex: none; }
.bb-faq__groupn { display: grid; place-items: center; min-width: 26px; height: 24px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--bb-gray-light); color: var(--bb-green-dark); font-size: var(--fs-caption); font-weight: 700; }

.bb-faq__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.bb-faq__item { background: var(--bb-white); border: 2px solid var(--border-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out); }
.bb-faq__item:hover { border-color: rgba(148, 177, 67, 0.55); box-shadow: var(--shadow-card-h); }
.bb-faq__item.is-open { border-color: var(--bb-green-light); }
.bb-faq__qwrap { margin: 0; font-size: inherit; }
.bb-faq__q { display: flex; align-items: center; gap: 16px; width: 100%; padding: 18px 20px; border: 0; background: none; text-align: left; cursor: pointer; min-height: 60px; }
.bb-faq__num { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--bb-mint); font: 700 var(--fs-caption) var(--font-body); color: var(--bb-green-dark); }
.bb-faq__qtext { flex: 1; font: 600 19px/1.35 var(--font-display); color: var(--bb-green-dark); text-wrap: pretty; }
.bb-faq__q:hover .bb-faq__qtext { color: var(--bb-green-forest); }

.bb-faq__sign { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--bb-mint); display: grid; place-items: center; transition: background var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out); }
.bb-faq__sign i { position: absolute; left: 50%; top: 50%; width: 14px; height: 2.5px; border-radius: 2px; background: var(--bb-green-dark); transform: translate(-50%, -50%); transition: transform var(--t-base) var(--ease-out), opacity var(--t-base) var(--ease-out); }
.bb-faq__sign i:last-child { transform: translate(-50%, -50%) rotate(90deg); }
.bb-faq__item.is-open .bb-faq__sign { background: var(--bb-green-forest); transform: rotate(180deg); }
.bb-faq__item.is-open .bb-faq__sign i { background: var(--bb-white); }
.bb-faq__item.is-open .bb-faq__sign i:last-child { transform: translate(-50%, -50%) rotate(180deg); opacity: 0; }

.bb-faq__aouter { overflow: hidden; height: 0; transition: height var(--t-base) var(--ease-out); }
.bb-faq__a { padding: 0 20px 20px 58px; }
.bb-faq__a p { margin: 0; color: var(--fg-2); font-size: 18px; line-height: var(--lh-body); text-wrap: pretty; }
.bb-faq__hit { background: var(--bb-yellow); color: var(--bb-ink); border-radius: 3px; padding: 0 2px; }

/* --- sfeerband tussen de groepen --- */
.bb-faq__band { border-radius: var(--radius-xl); overflow: hidden; margin: 8px 0 40px; height: 140px; }
.bb-faq__band img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }

/* --- geen resultaat --- */
.bb-faq__empty { background: var(--bb-mint); border-radius: var(--radius-xl); padding: 32px 24px; text-align: center; }
.bb-faq__emptytitle { font: 600 var(--fs-h3) var(--font-display); color: var(--bb-green-dark); margin: 0 0 8px; }
.bb-faq__empty p { color: var(--fg-2); }
.bb-faq__emptyrow { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; }

/* --- afsluitende CTA --- */
.bb-faq__cta { background: var(--bb-green-dark); color: var(--bb-white); border-radius: var(--radius-xl); padding: 32px 24px; display: flex; flex-direction: column; gap: 24px; margin-top: 8px; }
.bb-faq__cta h2 { color: var(--bb-white); margin: 0 0 6px; font-size: var(--fs-h2); }
.bb-faq__ctatext p { margin: 0; color: rgba(255, 255, 255, 0.78); font-size: var(--fs-small); }
.bb-faq__ctarow { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.bb-faq__ctalink { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--bb-yellow); font-weight: 600; text-decoration: none; border-bottom: 2px solid transparent; }
.bb-faq__ctalink:hover { color: var(--bb-yellow); border-bottom-color: var(--bb-yellow); }

/* --- verder lezen --- */
.bb-faq__next { display: grid; gap: 12px; margin-top: 32px; }
.bb-faq__next a { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px; padding: 18px 20px; background: var(--bb-white); border: 2px solid var(--border-card); border-radius: var(--radius-lg); text-decoration: none; transition: border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); }
.bb-faq__next a:hover { border-color: var(--bb-green-light); transform: translateY(-2px); }
.bb-faq__next .t { font: 600 var(--fs-h3) var(--font-display); color: var(--bb-green-dark); }
.bb-faq__next .d { grid-column: 1; font-size: var(--fs-small); color: var(--fg-muted); }
.bb-faq__next .a { grid-row: 1 / span 2; grid-column: 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--bb-mint); color: var(--bb-green-forest); }

/* --- vanaf tablet --- */
@media (min-width: 720px) {
  .bb-faq__head { padding: 48px 0 56px; }
  .bb-faq__toolbar { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
  .bb-faq__tools { justify-content: flex-end; }
  .bb-faq__q { padding: 22px 24px; gap: 20px; }
  .bb-faq__a { padding: 0 88px 24px 66px; }
  .bb-faq__band { height: 200px; }
  .bb-faq__cta { flex-direction: row; align-items: center; justify-content: space-between; padding: 40px; }
  .bb-faq__next { grid-template-columns: repeat(3, 1fr); }
  .bb-faq__next a { grid-template-columns: 1fr; }
  .bb-faq__next .a { grid-row: auto; grid-column: 1; justify-self: start; margin-top: 8px; }
}

@media (min-width: 1024px) {
  .bb-faq__headgrid { grid-template-columns: 1.15fr 0.85fr; gap: 48px; }
  .bb-faq__headfig { display: block; }
  .bb-faq__qtext { font-size: 21px; }
  .bb-faq__group { margin-bottom: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .bb-faq__aouter, .bb-faq__sign, .bb-faq__sign i, .bb-faq__chip, .bb-faq__item, .bb-faq__next a { transition: none; }
}
.bb-rm-force .bb-faq__aouter, .bb-rm-force .bb-faq__sign, .bb-rm-force .bb-faq__sign i { transition: none; }