/* By Laganini — gedeelde responsive regels voor telefoon, tablet en laptop.
   De pagina's gebruiken inline stijlen; deze regels passen ze per schermbreedte aan. */

/* `clip` i.p.v. `hidden`: voorkomt horizontaal scrollen zonder de sticky header te breken. */
body > div { overflow-x: clip !important; }
img { max-width: 100%; }
input, textarea, select, button { max-width: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button, summary { -webkit-tap-highlight-color: transparent; }

/* ---------------------------------------------------------- brede schermen */
/* Op grote laptops/monitoren blijft de inhoud gecentreerd binnen ~1320px. */
@media (min-width: 1440px) {
  header,
  footer,
  section:not([style*="max-width"]) {
    padding-left: max(48px, calc(50% - 660px)) !important;
    padding-right: max(48px, calc(50% - 660px)) !important;
  }
}

/* ----------------------------------------------------------------- tablet */
@media (max-width: 900px) {
  header, footer, section { padding-left: 24px !important; padding-right: 24px !important; }
  header { padding-top: 14px !important; padding-bottom: 14px !important; }

  section[style*="padding:96px"],
  section[style*="padding:88px"],
  section[style*="padding:80px"] { padding-top: 64px !important; padding-bottom: 64px !important; }
  section[style*="padding:96px 48px 0"] { padding-bottom: 0 !important; }
  section[style*="padding:72px"] { padding-top: 56px !important; padding-bottom: 56px !important; }

  h1[style*="font-size:64px"] { font-size: 48px !important; }
  h1[style*="font-size:56px"], h1[style*="font-size:52px"] { font-size: 42px !important; }

  /* Mobiel menu: ruimere tikvlakken en scrollbaar op lage schermen. */
  .bl-nav-mobile > div { max-height: calc(100vh - 72px); overflow-y: auto; box-sizing: border-box; }
  .bl-nav-mobile > div a { padding-top: 14px !important; padding-bottom: 14px !important; font-size: 16px !important; }
  .bl-nav-mobile > div a[href="/contact"][style*="#FFC481"] { padding-top: 13px !important; padding-bottom: 13px !important; }
  .bl-nav-mobile summary { width: 44px !important; height: 44px !important; margin-right: -8px; }
}

/* ---------------------------------------------------------------- telefoon */
@media (max-width: 640px) {
  header, footer, section { padding-left: 20px !important; padding-right: 20px !important; }
  header img { height: 28px !important; }

  section[style*="padding:96px"],
  section[style*="padding:88px"],
  section[style*="padding:80px"],
  section[style*="padding:64px"] { padding-top: 52px !important; padding-bottom: 52px !important; }
  section[style*="padding:96px 48px 0"] { padding-bottom: 0 !important; }
  section[style*="padding:72px"] { padding-top: 48px !important; padding-bottom: 48px !important; }
  footer { padding-top: 48px !important; }

  /* Rasters met vaste minimumbreedte worden één kolom, zodat niets wordt afgesneden. */
  [style*="grid-template-columns:repeat(auto-fit"] { grid-template-columns: minmax(0, 1fr) !important; }
  [style*="gap:56px"], [style*="gap:48px"] { gap: 32px !important; }

  /* Koppen */
  h1[style*="font-size:64px"] { font-size: 40px !important; }
  h1[style*="font-size:56px"], h1[style*="font-size:52px"] { font-size: 36px !important; line-height: 1.12 !important; }
  h2[style*="font-size:40px"], h2[style*="font-size:38px"] { font-size: 30px !important; }
  h2[style*="font-size:36px"], h2[style*="font-size:34px"], h2[style*="font-size:32px"] { font-size: 28px !important; line-height: 1.2 !important; }
  h2[style*="font-size:30px"], p[style*="font-size:30px"] { font-size: 24px !important; }
  p[style*="font-size:19px"], p[style*="font-size:18px"] { font-size: 17px !important; }
  h1, h2, h3 { overflow-wrap: break-word; text-wrap: balance; }

  /* Leeftijdscheck */
  #bl-gate p[style*="font-size:32px"] { font-size: 26px !important; }
  #bl-gate p[style*="font-size:28px"] { font-size: 24px !important; }
  #bl-gate button { flex: 1 1 auto; white-space: nowrap; padding-left: 24px !important; padding-right: 24px !important; }

  /* Knoppen mogen afbreken i.p.v. buiten beeld te vallen. */
  a[style*="white-space:nowrap"] { white-space: normal !important; text-align: center; }

  /* Afbeeldingen iets compacter in hoogte. */
  img[style*="height:363px"] { height: auto !important; aspect-ratio: 1 / 1; }
  img[style*="height:340px"], img[style*="height:320px"] { height: 260px !important; }

  /* FAQ-blokken en kaarten */
  details[style*="padding:22px 26px"] { padding: 18px 20px !important; }
  [style*="padding:40px"][style*="border-radius"] { padding: 28px 22px !important; }
  [style*="padding:32px"][style*="border-radius"] { padding: 24px 20px !important; }

  /* Formuliervelden: 16px voorkomt automatisch inzoomen op iOS. */
  input, textarea, select { font-size: 16px !important; }
  form[style*="display:flex"] input[style*="min-width:220px"] { min-width: 0 !important; flex-basis: 100% !important; }
  form[style*="display:flex"] input[style*="min-width:220px"] ~ button { width: 100%; }
}

/* Heel smalle telefoons (bijv. iPhone SE) */
@media (max-width: 380px) {
  header, footer, section { padding-left: 16px !important; padding-right: 16px !important; }
  h1[style*="font-size:64px"] { font-size: 36px !important; }
  h1[style*="font-size:56px"], h1[style*="font-size:52px"] { font-size: 32px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .bl-marquee-track { animation-duration: 80s !important; }
  html { scroll-behavior: auto !important; }
}