/* ============================================================
   BoemBoost — footer-new.css
   Footer 1 (CTA + form) + Footer 2 (main footer)
   All colours use CSS vars from base.css as defaults.
============================================================ */

/* ============================================================
   FOOTER 1 — CTA / contact form
============================================================ */
.bb-footer1 {
  border-top: 3px solid var(--bb-f1-top-border, rgba(153,255,187,0.3));
}
.bb-footer1__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bb-s8);
  padding-top: var(--bb-s8);
  padding-bottom: var(--bb-s8);
  align-items: start;
}
.bb-footer1__eyebrow {
  /* Typography-rol 'footer1-heading' (koppen). Leeg = huidige stijl. */
  font-family: var(--bb-role-footer1-heading-font, var(--bb-font));
  font-size: 0.7rem;
  font-weight: var(--bb-role-footer1-heading-weight, 700);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bb-f-eyebrow, rgba(153,255,187,0.65));
  margin-bottom: var(--bb-s3);
}
.bb-footer1__heading {
  font-family: var(--bb-role-footer1-heading-font, var(--bb-font-heading, 'Syne', sans-serif));
  font-size: var(--bb-role-footer1-heading-size, clamp(1.5rem, 3vw, 2.25rem));
  font-weight: var(--bb-role-footer1-heading-weight, 700);
  line-height: var(--bb-role-footer1-heading-lh, 1.2);
  color: var(--bb-f-heading, #fff);
  margin: 0 0 var(--bb-s4);
}
.bb-footer1__heading em {
  font-style: italic;
  font-weight: 800;
  color: var(--bb-f-heading-accent, rgba(153,255,187,1));
}
.bb-footer1__body {
  /* Typography-rol 'footer1-body'. Leeg = huidige stijl. */
  font-family: var(--bb-role-footer1-body-font, var(--bb-font));
  font-size: var(--bb-role-footer1-body-size, 0.9375rem);
  font-weight: var(--bb-role-footer1-body-weight, 400);
  line-height: var(--bb-role-footer1-body-lh, 1.7);
  color: var(--bb-f-body, rgba(255,255,255,0.65));
  margin: 0 0 var(--bb-s5);
  max-width: 44ch;
}
.bb-footer1__wa-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--bb-s2);
  text-decoration: none;
  padding: 0.6rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 700;
  transition: background var(--bb-ease), color var(--bb-ease);
}
.bb-footer1__wa-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* v3.9.473 — footer 1 holds up to two buttons. Stacked by default; the
   "Knoppen naast elkaar" toggle switches them to one row. Below 640px they
   always stack and go full width. */
.bb-footer1__btns {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--bb-s3, 12px);
  /* v3.9.474 — the wrapper shrinks to its widest child, and stretch then
     pulls the narrower button out to match. Two buttons end up the same
     width whatever their labels say, with no fixed sizes anywhere. */
  width: fit-content;
}
.bb-footer1__btns > * { justify-content: center; }
.bb-footer1__btns--row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
}
.bb-footer1__btns--row > * { flex: 1 1 auto; }
/* v3.9.553 — per apparaat te kiezen in plaats van één schakelaar voor alles.
   De desktopklasse geldt boven 1024px; daaronder bepalen --row-t en --row-m
   wat er gebeurt. Staat de betreffende klasse er niet, dan stapelen ze. */
@media (max-width: 1024px) {
  .bb-footer1__btns,
  .bb-footer1__btns--row { flex-direction: column; align-items: stretch; width: fit-content; }
  .bb-footer1__btns--row-t {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    width: auto;
  }
  .bb-footer1__btns--row-t > * { flex: 1 1 auto; }
}
@media (max-width: 640px) {
  .bb-footer1__btns,
  .bb-footer1__btns--row,
  .bb-footer1__btns--row-t { flex-direction: column; align-items: stretch; width: fit-content; }
  .bb-footer1__btns--row-m {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    width: auto;
    gap: var(--bb-s2, 8px);
  }
  /* Krimpen mag, uitlopen niet: een knop mag smaller worden dan zijn tekst
     breed is, en de rij breekt af zodra het krap wordt. min-width:0 haalt de
     flex-standaard weg die anders overloop veroorzaakt. */
  .bb-footer1__btns--row-m > * {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    white-space: nowrap;
  }
  .bb-footer1__btns > * { justify-content: center; }
}

/* WPForms overrides on dark background */
.bb-footer1 .wpforms-container input,
.bb-footer1 .wpforms-container textarea,
.bb-footer1 .wpforms-container select {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(153,255,187,0.25) !important;
  border-radius: var(--bb-r-sm) !important;
  color: #fff !important;
  font-family: var(--bb-font, 'DM Sans', sans-serif) !important;
}
.bb-footer1 .wpforms-container input::placeholder,
.bb-footer1 .wpforms-container textarea::placeholder { color: rgba(255,255,255,0.4) !important; }
.bb-footer1 .wpforms-container label { color: rgba(255,255,255,0.7) !important; font-size: 12px !important; }
.bb-footer1 .wpforms-container button[type="submit"],
.bb-footer1 .wpforms-container input[type="submit"] {
  background: var(--bb-btn-form-bg, var(--bb-accent, #99ffbb)) !important;
  color: var(--bb-btn-form-text, var(--bb-dark, #003b3b)) !important;
  border: none !important;
  border-radius: var(--bb-btn-form-radius, var(--bb-r-pill)) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}
/* v3.9.138 — hover volgt centrale familie; zonder instelling gelijk aan basis */
.bb-footer1 .wpforms-container button[type="submit"]:hover,
.bb-footer1 .wpforms-container input[type="submit"]:hover {
  background: var(--bb-btn-form-hover-bg, var(--bb-btn-form-bg, var(--bb-accent, #99ffbb))) !important;
  color: var(--bb-btn-form-hover-text, var(--bb-btn-form-text, var(--bb-dark, #003b3b))) !important;
}

/* ============================================================
   FOOTER 2 — Main footer
============================================================ */
.bb-footer2 {
  border-top: 1px solid var(--bb-f2-top-border, rgba(153,255,187,0.15));
}
.bb-footer2__inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--bb-s7);
  padding-top: var(--bb-s8);
  padding-bottom: var(--bb-s8);
  align-items: start;
}

/* Brand column */
.bb-footer2__logo {
  display: flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
  margin-bottom: var(--bb-s4);
}
.bb-footer2__logo-name {
  font-family: var(--bb-font-heading, 'Syne', sans-serif);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
}
.bb-footer2__logo-sub {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  border-left: 1px solid currentColor;
  padding-left: 8px;
  text-transform: uppercase;
}
.bb-footer2__tagline {
  /* Typography-rol 'footer2-heading' (kolomtitels + tagline). Leeg = huidige stijl. */
  font-family: var(--bb-role-footer2-heading-font, var(--bb-font));
  font-size: var(--bb-role-footer2-heading-size, 0.8125rem);
  font-weight: var(--bb-role-footer2-heading-weight, 400);
  line-height: var(--bb-role-footer2-heading-lh, 1.75);
  color: var(--bb-f-tagline, rgba(255,255,255,0.55));
  margin: 0 0 var(--bb-s5);
  max-width: 38ch;
}

/* Socials */
.bb-footer2__socials {
  /* Typography-rol 'footer-social' — geldt voor de social-rij + contactregels. */
  font-family: var(--bb-role-footer-social-font, var(--bb-font));
  font-weight: var(--bb-role-footer-social-weight, 400);
  display: flex;
  gap: var(--bb-s3);
  flex-wrap: wrap;
  margin-bottom: var(--bb-s5);
}
/* Contactregels (WhatsApp/telefoon/e-mail) volgen ook 'footer-social'.
   Specifieker dan '.bb-footer2__links a' zodat deze rol wint. */
.bb-footer2__contact-list a {
  font-family: var(--bb-role-footer-social-font, var(--bb-role-footer2-body-font, var(--bb-font)));
  font-size: var(--bb-role-footer-social-size, var(--bb-role-footer2-body-size, 0.875rem));
  font-weight: var(--bb-role-footer-social-weight, var(--bb-role-footer2-body-weight, 400));
  line-height: var(--bb-role-footer-social-lh, normal);
}
.bb-footer2__social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: var(--bb-f-social-bg, rgba(255,255,255,0.08));
  border-radius: var(--bb-f-social-radius, var(--bb-r-md, 10px));
  transition: background var(--bb-ease);
}
.bb-footer2__social:hover { background: var(--bb-f-social-bg-hover, rgba(153,255,187,0.18)); }
.bb-footer2__social svg { width: 16px; height: 16px; fill: var(--bb-f-social-icon, rgba(255,255,255,0.7)); }

/* Certificates */
.bb-footer2__certs {
  display: flex;
  gap: var(--bb-s3);
  flex-wrap: wrap;
}
.bb-footer2__cert-badge {
  background: var(--bb-f-cert-bg, rgba(255,255,255,0.06));
  border: 1px solid var(--bb-f-cert-border, rgba(153,255,187,0.15));
  border-radius: var(--bb-f-cert-radius, var(--bb-r-sm));
  padding: 6px 10px;
  font-size: 10px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 60px;
}
.bb-footer2__cert-badge strong { color: var(--bb-f-cert-title, rgba(153,255,187,0.9)); font-weight: 700; font-size: 11px; }
.bb-footer2__cert-badge span   { color: var(--bb-f-cert-sub, rgba(255,255,255,0.5)); }

/* Nav columns */
.bb-footer2__col-title {
  /* Typography-rol 'footer2-heading' (kolomtitels). Leeg = huidige stijl. */
  font-family: var(--bb-role-footer2-heading-font, var(--bb-font));
  font-size: 0.7rem;
  font-weight: var(--bb-role-footer2-heading-weight, 700);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--bb-s4);
  color: var(--bb-f-coltitle, rgba(153,255,187,1));
}
.bb-footer2__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bb-s2);
}
.bb-footer2__links a {
  /* Typography-rol 'footer2-body' (links). Leeg = huidige stijl. */
  font-family: var(--bb-role-footer2-body-font, var(--bb-font));
  font-size: var(--bb-role-footer2-body-size, 0.875rem);
  font-weight: var(--bb-role-footer2-body-weight, 400);
  line-height: var(--bb-role-footer2-body-lh, normal);
  color: var(--bb-f-link, rgba(255,255,255,0.65));
  text-decoration: none;
  transition: color var(--bb-ease);
  display: inline-block;
}
.bb-footer2__links a:hover { color: var(--bb-f-link-hover, #fff); }

.bb-footer2__address {
  /* Typography-rol 'footer2-body' (adres). Leeg = huidige stijl. */
  margin-top: 12px;
  font-style: normal;
  font-family: var(--bb-role-footer2-body-font, var(--bb-font));
  font-size: var(--bb-role-footer2-body-size, 0.8rem);
  font-weight: var(--bb-role-footer2-body-weight, 400);
  line-height: var(--bb-role-footer2-body-lh, 1.7);
  color: var(--bb-f-address, rgba(255,255,255,0.5));
}

/* Regions accordion */
.bb-footer2__region-item { position: relative; }
.bb-footer2__region-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--bb-f-region, rgba(255,255,255,0.65));
  font-size: 0.875rem;
  font-family: var(--bb-font, 'DM Sans', sans-serif);
}
.bb-footer2__region-toggle:hover,
.bb-footer2__region-toggle:hover .bb-footer2__region-link { color: var(--bb-f-region-hover, #fff); }
.bb-footer2__region-link {
  color: inherit;
  text-decoration: none;
  flex: 1;
  text-align: left;
  transition: color var(--bb-ease);
}
.bb-footer2__chevron {
  width: 16px;
  height: 16px;
  fill: var(--bb-f-chevron, currentColor);
  transition: transform 0.25s;
  flex-shrink: 0;
}
.bb-footer2__region-toggle[aria-expanded="true"] .bb-footer2__chevron {
  transform: rotate(180deg);
}
.bb-footer2__cities {
  display: none; /* collapsed by default — JS opens with display:flex */
  flex-direction: column;
  list-style: none;
  padding: var(--bb-s2) 0 0 var(--bb-s3);
  margin: 0;
  gap: 4px;
}
.bb-footer2__cities.is-open {
  display: flex;
}
.bb-footer2__cities a {
  font-size: 0.8125rem;
  color: var(--bb-f-city, rgba(255,255,255,0.45));
}
.bb-footer2__cities a:hover { color: var(--bb-f-city-hover, rgba(255,255,255,0.85)); }

/* Bottom bar */
.bb-footer2__bottom {
  border-top: 1px solid var(--bb-f-bottom-border, rgba(153,255,187,0.1));
  padding: var(--bb-s4) 0;
}
.bb-footer2__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bb-s4);
  flex-wrap: wrap;
}
.bb-footer2__copy {
  font-size: 0.75rem;
  color: var(--bb-f-copy, rgba(255,255,255,0.3));
  margin: 0;
}
.bb-footer2__legal {
  display: flex;
  align-items: center;
  gap: var(--bb-s5);
  flex-wrap: wrap;
}
.bb-footer2__legal a {
  font-size: 0.75rem;
  color: var(--bb-f-legal, rgba(255,255,255,0.3));
  text-decoration: none;
  transition: color var(--bb-ease);
}
.bb-footer2__legal a:hover { color: var(--bb-f-legal-hover, rgba(255,255,255,0.75)); }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1024px) {
  .bb-footer2__inner { grid-template-columns: 1fr 1fr 1fr; }
  .bb-footer2__brand { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .bb-footer1__inner { grid-template-columns: 1fr; gap: var(--bb-s6); }
  .bb-footer2__inner { grid-template-columns: 1fr 1fr; gap: var(--bb-s5); }
  .bb-footer2__brand { grid-column: 1 / -1; }
  .bb-footer2__bottom-inner { flex-direction: column; align-items: flex-start; gap: var(--bb-s3); }
  .bb-footer2__logo { margin-left: calc(5% - var(--bb-s4, 1rem)); }
}
@media (max-width: 480px) {
  .bb-footer2__inner { grid-template-columns: 1fr; }
}