/* h4p-mobile.css — responsive laag over de vaste Wix-desktoplayout.

   BREEKPUNT 1023px, niet 767px. De Wix-export zet 717x een vaste breedte van
   980px; tussen 768 en ~1290px gold de desktoplayout terwijl het scherm daar te
   smal voor is — gemeten op de homepage bij 900px: 80px horizontale overflow en
   460 elementen buiten beeld. Op 1024px past het 980-canvas wél.

   1023 is bovendien exact het spiegelbeeld van `lg:` in Tailwind (>=1024), waar
   de eigen componenten (header, diensten, agenda, contact, footer) op schakelen.
   Eén grens voor de hele site in plaats van twee die langs elkaar heen lopen.
   Kernprincipe: elke Wix-mesh-gridContainer is één kolom met expliciete
   rijvolgorde; door marges/offsets van de kinderen te resetten stapelt
   elke sectie netjes verticaal. Kolomstrips stapelen als flex-kolom. */

@media (max-width: 1023px) {

  /* ---- 1. basis ---- */
  /* DE sleutel: Wix stuurt alle sectiebreedtes via --site-width (980px);
     secties hebben min-width:var(--site-width) */
  html, body, #masterPage, #site-root { --site-width: 100vw !important; }
  [id^="comp-"], section, [data-mesh-id], [data-testid="columns"],
  #SITE_HEADER, #SITE_FOOTER { min-width: 0 !important; }
  html, body { overflow-x: hidden; }
  #site-root, #SITE_CONTAINER, main, #PAGES_CONTAINER {
    min-width: 0 !important;
    width: 100% !important;
  }
  img, video { max-width: 100% !important; }

  /* ---- 1b. structurele breedtes: Wix zet vaste --width/--height vars op
     secties; wrappers en bg-lagen erven die. Op mobiel overschrijven. ---- */
  section[id^="comp-"],
  .wixui-column-strip,
  .wixui-column-strip__column,
  #SITE_HEADER, #SITE_FOOTER,
  [id^="pageBackground_"] {
    --width: 100% !important;
    --height: auto !important;
    width: 100% !important;
  }
  [id^="pageBackground_"], [id^="bgLayers_"], [id^="bgMedia_"] {
    width: 100% !important;
  }
  /* decoratieve verticale lijnen storen in gestapelde layout */
  .wixui-vertical-line { display: none !important; }

  /* ---- 2. mesh-linearisatie ---- */
  [data-mesh-id$="-gridContainer"],
  [data-mesh-id$="inlineContent"] { width: 100% !important; }
  [data-mesh-id$="-gridContainer"] > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: 0 !important;
    max-width: 100% !important;
    justify-self: center !important;
  }

  /* hoogtes loslaten zodat content de hoogte bepaalt */
  section[id^="comp-"],
  .wixui-column-strip,
  .wixui-column-strip__column {
    height: auto !important;
    min-height: 0 !important;
  }

  /* ---- 3. kolomstrips stapelen ---- */
  [data-testid="columns"] {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .wixui-column-strip__column { width: 100% !important; }

  /* ---- 4. header ----
     De header is een Tailwind-component (build_nav.py) met een eigen mobiel
     paneel en hamburger; die regelt zijn responsive gedrag zelf met lg:-varianten.
     Wat hier stond -- balkhoogte, het gepositioneerde navpaneel, de li's van
     absolute naar block, het logo verkleinen, de Boek-knop verbergen en de
     .h4p-burger-opmaak -- hoorde bij de Wix-markup die er niet meer is. */

  /* ---- 5. footer ----
     Het contactformulier en de footerbalk zijn Tailwind-componenten
     (build_footer.py); die stapelen zelf via `lg:`-varianten en hebben hier
     niets nodig. Wat hier stond hoorde bij de Wix-mesh die inject_footer.py
     vervangt. #SITE_FOOTER zelf blijft wel: die is nog de gridcel eromheen. */
  html #SITE_FOOTER { min-height: 0 !important; height: auto !important; }
  #contact { scroll-margin-top: 68px; }

  /* ---- 5b. events-widget: kaarten stapelen ---- */
  #wix-events-widget div, [data-hook="wix-events-widget"] div { max-width: 100% !important; min-width: 0 !important; }
  [data-hook="side-by-side-items"], [data-hook="side-by-side-item"] { width: 100% !important; }
  [data-hook="side-by-side-item"] { display: flex !important; flex-direction: column !important; height: auto !important; }
  [data-hook="side-by-side-item"] > div { width: 100% !important; }
  /* Leeg Google-reviews-blok (dood zonder Wix-runtime) verbergen.
     NIET #comp-mfvo0ahz meenemen: die sectie bevat alleen de FAQ-widget
     (#comp-mgs1gns2), niet de reviews. Zolang de FAQ dichtgeklapt was leek die
     sectie leeg en viel het niet op dat deze regel hem op mobiel wegpoetste. */
  #comp-mfvo0bg4, [id^="comp-mfvo0bg4_r_"] { display: none !important; }
  /* decoratieve elementen (chevrons/hart) centreren i.p.v. desktop-offset */
  #comp-lapzk0lh, #comp-lhtq4je3, #comp-l7nnpfk0 {
    left: 50% !important;
    transform: translateX(-50%) !important;
    justify-self: auto !important;
  }

  /* ---- 6. typografie: enorme koppen temmen ---- */
  h1 span, h2 span { font-size: clamp(22px, 7vw, 34px) !important; line-height: 1.3 !important; }
  h3 span { font-size: clamp(18px, 5.5vw, 26px) !important; }
}