/* ============================================================
   AANMELDFORMULIEREN (/meedoen)
   Zelfde vocabulaire als de rest van de site: witte kaart,
   groene accentbalk, 16px radius, focus-ring uit tokens.
   ============================================================ */
.bb-formpage__head { padding-bottom: var(--space-8); text-align: center; }
.bb-formpage__head h1 { margin: 12px 0 0; font-size: clamp(30px, 5vw, 46px); }
.bb-formpage__intro { max-width: 620px; margin: 14px auto 0; font-size: var(--fs-lead); color: var(--fg-2); text-wrap: pretty; }
.bb-formpage__body { padding-top: var(--space-8); }
.bb-formpage__privacy { max-width: 720px; margin: 20px auto 0; text-align: center; font-size: 15px; color: var(--bb-muted); }

/* Tabs */
.bb-tabs { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 720px; margin: 0 auto 24px; }
.bb-tab {
  min-height: 48px; padding: 10px 24px; border-radius: var(--radius-pill);
  background: var(--bb-white); border: 1.5px solid var(--border-card);
  font: 600 16px var(--font-body); color: var(--bb-green-dark); cursor: pointer;
  white-space: nowrap; line-height: 1.2;
  /* Beide knoppen delen de breedte gelijk, zodat ze samen de volle breedte van
     het formulier vullen. Onder ongeveer 610 px komen ze onder elkaar. */
  flex: 1 1 290px; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  box-shadow: 0 2px 5px rgba(6, 69, 48, 0.07);
}
/* Kort vetgedrukt label met een kleinere ondertitel: zo blijven beide knoppen
   even breed en passen ze ook op een smal scherm. De maten schalen mee met de
   schermbreedte, met een vaste bovengrens op desktop. */
.bb-tab__label { font-weight: 700; font-size: clamp(15px, 2.08vw, 19.2px); line-height: 1.1; }
.bb-tab__onder { font-size: clamp(12px, 1.94vw, 17.9px); font-weight: 400; color: var(--bb-muted); line-height: 1.15; }
.bb-tab.is-on .bb-tab__onder { color: rgba(255, 255, 255, 0.82); }
/* Bij aanwijzen komt de knop een fractie omhoog, met een iets diepere schaduw en
   een lichtgroene rand. De actieve knop krijgt een groene gloed in dezelfde kleur. */
.bb-tab:hover { border-color: var(--bb-green-light); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(6, 69, 48, 0.13); }
.bb-tab:active { transform: translateY(0); box-shadow: 0 2px 5px rgba(6, 69, 48, 0.1); }
.bb-tab.is-on { box-shadow: 0 3px 8px rgba(19, 86, 55, 0.22); }
.bb-tab.is-on:hover { box-shadow: 0 7px 16px rgba(19, 86, 55, 0.3); }
@media (prefers-reduced-motion: reduce) { .bb-tab, .bb-tab:hover { transform: none; } }
/* Op mobiel staan de twee keuzes onder elkaar, met wat compactere randen zodat
   ze ook op een smal scherm ruim binnen de kaart passen. */
@media (max-width: 620px) {
  .bb-tabs { gap: 10px; margin-bottom: 22px; }
  /* Beide keuzes even breed en over de volle breedte van de kaart: dat leest
     rustiger dan twee knoppen die zo breed zijn als hun eigen tekst. */
  .bb-page .bb-tabs { grid-template-columns: minmax(0, 1fr); }
  .bb-tab { padding: 10px 16px; }
  .bb-tab__label { font-size: 16.5px; }
  .bb-tab__onder { font-size: 13.2px; }
}
@media (max-width: 430px) { .bb-tab { padding: 10px 12px; } }
.bb-tab.is-on { background: var(--bb-green-forest); border-color: var(--bb-green-forest); color: var(--bb-white); }
.bb-formpage__tabtitel { margin: 0 0 20px; font-size: var(--fs-h3); text-align: center; }
/* Melding onder de postcode als iemand buiten het werkgebied woont en zich wel
   voor de nieuwsbrief inschrijft. */
.bb-form__buiten {
  margin: -6px 0 4px; padding: 12px 14px; border-radius: 12px;
  background: var(--bb-mint); color: var(--bb-green-dark);
  font-size: 15px; line-height: 1.5;
}

/* Kaart */
.bb-form-card {
  position: relative; max-width: 720px; margin: 0 auto;
  background: var(--bb-white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: 34px 26px 30px; overflow: hidden;
}
.bb-form-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--bb-green-forest); }
@media (min-width: 720px) { .bb-form-card { padding: 40px 40px 34px; } }

/* Velden */
/* Op smalle schermen mag geen enkel veld breder worden dan de kaart eromheen.
   Zonder deze regels rekt de standaardbreedte van een tekstvak (of een lange
   waarde in een veld) het hele formulier op, waardoor er inhoud buiten beeld valt. */
.bb-form, .bb-form__row, .bb-field, .bb-form-card, .bb-checks, .bb-check { min-width: 0; }
.bb-input, .bb-textarea, textarea.bb-input { min-width: 0; max-width: 100%; }
.bb-form { display: flex; flex-direction: column; gap: 20px; }
.bb-form__row { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
@media (min-width: 620px) { .bb-form__row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 720px) { .bb-form__row--name { grid-template-columns: 1fr 0.6fr 1.2fr; } }
.bb-form__grouplabel { font: 700 15px var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--bb-green-forest); margin: 4px 0 -8px; }
.bb-field { display: flex; flex-direction: column; gap: 6px; align-content: start; }
.bb-field > label, .bb-fieldset > legend { font: 700 16px var(--font-body); color: var(--bb-green-dark); }
.bb-field > label { margin-bottom: 4px; }
.bb-field__req { color: var(--bb-error); font-weight: 700; }
.bb-field__opt { color: var(--bb-muted); font-weight: 400; font-size: 15px; }
.bb-field__hint { margin: 0; font-size: 15px; color: var(--bb-muted); }
.bb-input {
  width: 100%; min-height: 48px; padding: 12px 14px; box-sizing: border-box;
  font: 400 16px var(--font-body); color: var(--bb-ink);
  background: var(--bb-white); border: 1.5px solid rgba(6, 69, 48, 0.22);
  border-radius: var(--radius-md);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.bb-input::placeholder { color: #9AA6A0; }
.bb-input:hover { border-color: var(--bb-green-light); }
.bb-input:focus-visible { outline: none; border-color: var(--bb-green-forest); box-shadow: var(--shadow-focus); }
.bb-input.has-error { border-color: var(--bb-error); }
.bb-field__error {
  display: flex; align-items: center; gap: 6px; margin: 0;
  font: 600 15px var(--font-body); color: var(--bb-error);
}
.bb-field__error svg { flex: none; }

/* Radio's */
.bb-fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bb-fieldset > legend { margin-bottom: 10px; padding: 0; }
.bb-radio-row { display: flex; flex-wrap: wrap; gap: 10px; }
.bb-radio {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 10px 18px; border-radius: var(--radius-pill);
  background: var(--bb-white); border: 1.5px solid rgba(6, 69, 48, 0.22);
  font: 600 16px var(--font-body); color: var(--bb-green-dark); cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.bb-radio:hover { border-color: var(--bb-green-light); }
.bb-radio.is-on { border-color: var(--bb-green-forest); background: var(--bb-mint); }
.bb-radio input { width: 24px; height: 24px; accent-color: var(--bb-green-forest); margin: 0; }
.bb-fieldset.has-error .bb-radio { border-color: var(--bb-error); }

/* Toestemming en vinkjes */
.bb-consent {
  background: var(--bb-mint); border-radius: var(--radius-md);
  padding: 16px 18px; font-size: 15px; line-height: 1.55; color: var(--fg-2);
}
.bb-consent p { margin: 0; text-wrap: pretty; }
.bb-checks { display: flex; flex-direction: column; gap: 7px; }
/* Op mobiel lopen de teksten naast een vinkje over meerdere regels. Zonder extra
   ruimte plakken de opt-ins dan aan elkaar. Deze regel geldt voor elk formulier
   op de site, zodat de verdeling overal gelijk is. */
@media (max-width: 620px) { .bb-checks { gap: 12px; } }
@media (max-width: 430px) { .bb-checks { gap: 16px; } }
.bb-check > label {
  display: flex; align-items: flex-start; gap: 12px;
  font: 400 16px/1.5 var(--font-body); color: var(--bb-ink); cursor: pointer;
  min-height: 44px; padding: 2px 0;
}
.bb-check__hint { margin: -8px 0 0 36px; font-size: 15px; line-height: 1.5; color: var(--bb-muted); max-width: 46em; }
/* Op mobiel loopt de tekst naast een vinkje al snel over twee of drie regels.
   De grijze toelichting eronder krijgt daarom overal dezelfde extra lucht:
   15 px op een telefoon, 20 px op een heel smal scherm. Dat geldt voor elk
   formulier op de site, want deze regel staat op het vinkje zelf. */
@media (max-width: 620px) { .bb-check__hint { margin-top: 7px; } }
@media (max-width: 430px) { .bb-check__hint { margin-top: 12px; } }
.bb-check input { width: 24px; height: 24px; margin: 1px 0 0; flex: none; accent-color: var(--bb-green-forest); }
.bb-check.has-error > label { color: var(--bb-error); }

/* Melding bij een postcode buiten het werkgebied. Te veel tekst voor een regel
   onder het veld, dus als venster naast de postcode, over het formulier heen. */
.bb-pcwrap { position: relative; }
.bb-pcpop {
  position: absolute; z-index: 40; top: 25px; left: calc(44% - 40px);
  width: min(370px, calc(100vw - 56px));
  display: flex; flex-direction: column; gap: 8px;
  padding: 18px 46px 18px 20px;
  background: var(--bb-white); color: var(--bb-ink);
  border: 1.5px solid var(--bb-green-light); border-radius: 16px;
  box-shadow: 0 20px 44px rgba(6, 69, 48, 0.20);
  font-size: 15.5px; line-height: 1.55; text-wrap: pretty;
  animation: bb-pcpop-in 180ms var(--ease-out) both;
}
.bb-pcpop p { margin: 0; }
.bb-pcpop__kop { font: 600 17px/1.35 var(--font-display); color: var(--bb-green-dark); }
.bb-pcpop__pijl {
  position: absolute; top: 22px; left: -8px; width: 14px; height: 14px;
  background: var(--bb-white);
  border-left: 1.5px solid var(--bb-green-light); border-bottom: 1.5px solid var(--bb-green-light);
  transform: rotate(45deg); border-radius: 2px;
}
.bb-pcpop__sluit {
  position: absolute; top: 4px; right: 4px;
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; background: none; border-radius: 50%; cursor: pointer;
  color: var(--bb-muted);
}
.bb-pcpop__sluit:hover { background: var(--bb-mint); color: var(--bb-green-dark); }
@keyframes bb-pcpop-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bb-pcpop { animation: none; } }
/* Op smalle schermen is er naast het veld geen ruimte: dan staat het venster
   direct onder het invoerveld, over de volle breedte. */
@media (max-width: 720px) {
  .bb-pcpop { position: static; width: auto; margin: -2px 0 2px; }
  .bb-pcpop__pijl { display: none; }
}

/* Foutsamenvatting en verzendfout */
.bb-form__summary {
  background: #FDECEC; border: 1.5px solid var(--bb-error);
  border-radius: var(--radius-md); padding: 16px 18px;
  color: #7F1414; font-size: 15px;
}
.bb-form__summary:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.bb-form__summary strong { display: block; margin-bottom: 8px; color: #7F1414; }
.bb-form__summary ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.bb-form__summary a { color: #7F1414; }
.bb-form__summary--send { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.bb-form__summary--send p { margin: 0; }

/* Voet */
.bb-form__foot { display: flex; flex-direction: column; gap: 18px; align-items: center; margin-top: 14px; }
.bb-form__note { margin: 0; font-size: 15px; color: var(--bb-muted); }

/* Nieuwsbrief in de footer */
.bb-foot-news {
  display: grid; gap: 24px 40px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-lg);
  padding: 26px 22px;
}
@media (min-width: 900px) { .bb-foot-news { grid-template-columns: minmax(240px, 0.85fr) 1.3fr; align-items: start; padding: 32px 34px; } }
.bb-foot-news__intro { display: flex; flex-direction: column; gap: 8px; }
.bb-foot-news__kop { display: flex; align-items: center; gap: 12px; }
.bb-foot-news__intro h4 { margin: 0; font-size: clamp(25px, 6.2vw, 34px); line-height: 1.15; }
.bb-foot-news__intro p { margin: 0; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, 0.85); }
.bb-foot-news__badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--bb-yellow); color: var(--bb-green-dark); flex: none;
}
.bb-foot-news__intro p.bb-foot-news__hint { font-size: 15px; color: rgba(255, 255, 255, 0.62); max-width: 34em; }
.bb-foot-news__label { font: 700 15px var(--font-body); color: var(--bb-white); }
/* Op hele smalle schermen, zoals het voorscherm van een opvouwbare telefoon, is de
   kolom voor het tussenvoegsel te smal voor het hele woord. Daar staat de korte vorm. */
.bb-lbl-smal { display: none; }
@media (max-width: 519px) { .bb-lbl-breed { display: none; } .bb-lbl-smal { display: inline; } }
.bb-foot-news__form { display: flex; flex-direction: column; gap: 16px; }
.bb-foot-news__names { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 340px) { .bb-foot-news__names { grid-template-columns: 1.4fr 0.7fr; } .bb-foot-news__names .bb-foot-news__f:last-child { grid-column: 1 / -1; } }
@media (min-width: 520px) { .bb-foot-news__names { grid-template-columns: 1fr 0.78fr 1.42fr; } .bb-foot-news__names .bb-foot-news__f:last-child { grid-column: auto; } }
.bb-foot-news__f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bb-foot-news__row { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: end; }
@media (min-width: 520px) { .bb-foot-news__row { grid-template-columns: minmax(0, 1fr) auto; } }
/* De knop lijnt uit met het invoerveld, niet met het veld inclusief een eventuele
   foutmelding eronder. Anders zakt de knop mee zodra die melding verschijnt.
   De marge is precies de hoogte van het label plus de tussenruimte. */
@media (min-width: 520px) {
  .bb-foot-news__row { align-items: start; }
  .bb-foot-news__row .bb-foot-news__btn { margin-top: 27px; height: 46px; min-height: 46px; }
}
.bb-foot-news__f--mail { min-width: 0; }
.bb-foot-news__mail { position: relative; display: block; }
.bb-foot-news__mailicon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  display: inline-flex; color: var(--bb-green-forest); pointer-events: none;
}
.bb-foot-news__input {
  width: 100%; min-width: 0; min-height: 46px; padding: 11px 14px;
  font-size: 15px; border-radius: var(--radius-sm);
  border-color: rgba(255, 255, 255, 0.32);
}
.bb-foot-news__input--mail { padding-left: 42px; }
.bb-foot-news__btn {
  flex: none; min-height: 46px; padding: 11px 22px;
  font-size: 15px; border-radius: var(--radius-sm); white-space: nowrap;
}
@media (max-width: 719px) {
  .bb-foot-news { gap: 18px; padding: 20px 18px; }
  .bb-foot-news__intro { gap: 6px; }
  .bb-foot-news__badge { width: 40px; height: 40px; }
  .bb-foot-news__kop { gap: 10px; }
  .bb-foot-news__intro p { font-size: 15.5px; }
  .bb-foot-news__intro p.bb-foot-news__hint { font-size: 15px; line-height: 1.45; margin-top: 15px; }
  .bb-foot-news__form { gap: 12px; }
  .bb-foot-news__names { gap: 10px; }
  .bb-foot-news__row { gap: 24px; }
}
.bb-foot-news__error { color: #FFD1D1; }
.bb-foot-news .bb-field__req { color: var(--bb-yellow); }

/* Bevestigingspop-up uit de footer */
.bb-modal {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: rgba(6, 69, 48, 0.55); padding: 20px;
  animation: bbModalIn 0.2s var(--ease-out) both;
}
@keyframes bbModalIn { from { opacity: 0; } to { opacity: 1; } }
.bb-modal__card {
  position: relative; background: var(--bb-white); border-radius: var(--radius-lg);
  padding: 34px 28px 28px; max-width: 460px; width: 100%; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  box-shadow: 0 24px 60px rgba(6, 7, 7, 0.3);
  animation: bbModalPop 0.34s var(--ease-bounce) both;
}
@keyframes bbModalPop { from { transform: translateY(14px) scale(0.96); opacity: 0; } to { transform: none; opacity: 1; } }
.bb-modal__card h2 { margin: 0; font-size: 26px; }
.bb-modal__card p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--fg-2); }
.bb-modal__x {
  position: absolute; top: 8px; right: 8px; width: 44px; height: 44px;
  display: grid; place-items: center; background: none; border: 0; cursor: pointer;
  color: var(--bb-green-forest); border-radius: 50%;
}
.bb-modal__x:hover { background: var(--bb-mint); }
@media (prefers-reduced-motion: reduce) { .bb-modal, .bb-modal__card { animation: none; } }
.bb-rm-force .bb-modal, .bb-rm-force .bb-modal__card { animation: none; }

/* Eenmalige melding over de leeftijdsgrens van WhatsApp. Vriendelijk van toon, geen
   waarschuwingsrood: dit is informatie, geen fout van de ouder. Het merkteken bovenaan
   is het WhatsApp-icoon in het groen van de huisstijl. */
.bb-wa13 { max-width: 520px; }
.bb-wa13__mark {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  margin: 0 auto; background: var(--bb-mint); color: var(--bb-green-forest);
}
.bb-wa13 h2 { font-size: 23px; line-height: 1.25; text-wrap: balance; }
.bb-wa13__rust {
  background: var(--bb-mint); border-radius: var(--radius-md); padding: 14px 16px;
  color: var(--bb-green-dark) !important;
}
@media (max-width: 719px) {
  .bb-wa13 h2 { font-size: 22px; }
  .bb-wa13 p { font-size: 17px; }
}

/* Bedankt */
.bb-thanks {
  max-width: 720px; margin: 0 auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 10px 0 6px;
}
.bb-thanks__mark {
  width: 76px; height: 76px; border-radius: 50%;
  background: var(--bb-mint); color: var(--bb-green-forest);
  display: grid; place-items: center;
  border: 4px solid var(--bb-green-light);
  animation: bbThanksPop 0.5s var(--ease-bounce) both;
}
@keyframes bbThanksPop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.bb-thanks h2 { margin: 0; font-size: clamp(28px, 4vw, 38px); }
.bb-thanks p { margin: 0; font-size: 18px; color: var(--fg-2); max-width: 30em; }
.bb-thanks__extra { font-size: 15px !important; color: var(--bb-muted) !important; }
.bb-thanks__news {
  display: flex; align-items: flex-start; gap: 12px; text-align: left;
  background: var(--bb-mint); border-radius: var(--radius-md);
  padding: 14px 18px; margin-top: 6px; max-width: 34em;
}
.bb-thanks__news span { color: var(--bb-green-forest); line-height: 0; margin-top: 3px; }
.bb-thanks__news p { margin: 0; font-size: 15px !important; line-height: 1.55; color: var(--fg-2) !important; }
.bb-thanks__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 10px; }
.bb-confetti-rain { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }
@media (prefers-reduced-motion: reduce) { .bb-thanks__mark { animation: none; } }
.bb-rm-force .bb-thanks__mark { animation: none; }


/* ================================================================
   LEESBAARHEID OP MOBIEL (WCAG 2.2, EAA)
   ================================================================
   Alle tekst in en om de formulieren is op een telefoon minimaal 16,5 pixels, en waar
   het echt leestekst is 17: de toelichting onder een veld, de foutmelding, de
   toestemmingstekst, de tekst naast een vinkje en de bevestiging na het versturen. De
   invoervelden zijn zelf minimaal 17 pixels, want onder 16 zoomt een iPhone het scherm
   in bij het tikken in een veld. */
@media (max-width: 719px) {
  .bb-formpage__privacy { font-size: 17px; }
  .bb-modal__card p { font-size: 17px; }
  .bb-form__buiten { font-size: 17px; }
  .bb-field > label, .bb-fieldset > legend { font-size: 17.5px; }
  .bb-field__opt { font-size: 16.5px; }
  .bb-field__hint { font-size: 16.5px; }
  .bb-field__error { font-size: 16.5px; }
  .bb-consent { font-size: 17px; }
  .bb-check__hint { font-size: 16.5px; }
  .bb-check span { font-size: 17px; }
  .bb-pcpop, .bb-pcpop p { font-size: 17px; }
  .bb-form__summary { font-size: 17px; }
  .bb-form__note { font-size: 16.5px; }
  .bb-form__grouplabel { font-size: 16px; }

  /* De regel onder een tabblad ('Voor kinderen', 'Voor ouders') is een label van een
     paar woorden en geen leestekst, en blijft daarom onder de 16,5 pixels. */
  .bb-tab__label { font-size: 17.5px; }
  .bb-tab__onder { font-size: 15px; }

  /* Nieuwsbrief in de voet van de pagina. */
  .bb-foot-news__intro p { font-size: 18px; }
  .bb-foot-news__intro p.bb-foot-news__hint { font-size: 16.5px; }
  .bb-foot-news__label { font-size: 16.5px; }
  .bb-foot-news__input { font-size: 17px; }
  .bb-foot-news__btn { font-size: 17px; }

  /* Bevestiging na het versturen. De uitroepen staan met !important in de
     vormgeving, dus die is hier ook nodig. */
  .bb-thanks__extra { font-size: 17px !important; }
  .bb-thanks__news p { font-size: 17px !important; }
}