/* ============================================================
   Zilt & Zo Texel - static site responsive fixes
   Scoped to <=991px so desktop layout is untouched.
   ============================================================ */

/* --- 1. Mobile: full-width sections + keep text inside, no overflow ---
   SP Page Builder nests each coloured block inside a row-container that has
   15px side padding, so on mobile the blocks were indented (wood background
   showing on the sides) and their content was pushed off-screen. We drop the
   STRUCTURAL padding/margins so every section spans the full screen width
   (background included), while each block keeps its OWN padding as the text
   gutter, so text stays inside the section. */
@media (max-width: 991px){
  html, body { max-width: 100%; overflow-x: hidden; }

  /* flatten structural gutters -> nested sections go edge to edge */
  .sppb-row-container, .sppb-container-inner { padding-left: 0 !important; padding-right: 0 !important; }
  .sppb-row { margin-left: 0 !important; margin-right: 0 !important; }
  [class*="sppb-col-"], .sppb-column, .sppb-column-addons { padding-left: 0 !important; padding-right: 0 !important; }
  .sppb-section { max-width: 100% !important; }

  /* keep text/images within the block */
  .sppb-addon, .sppb-addon * { overflow-wrap: break-word; word-wrap: break-word; }
  .sppb-addon img, .sppb-addon-single-image img { max-width: 100%; height: auto; }

  /* embedded webshop (Bootstrap grid): restore container padding so its -15px rows fit */
  .scContainer .container-fluid { padding-left: 15px !important; padding-right: 15px !important; }

  /* neutralise a desktop-only -100px offset that overlapped footer text */
  .onderschrift { margin-top: 0 !important; }

  /* footer: centre all text */
  .sppb-section.footer, .sppb-section.footer * { text-align: center !important; }
  .sppb-section.footer table { margin-left: auto !important; margin-right: auto !important; width: auto !important; }
}

/* --- 2. Custom mobile navigation (module slide-menu is broken) --- */
/* hide the broken module off-canvas panel on small screens */
@media (max-width: 991px){
  .off-menu_101.sm-menu { display: none !important; }
}

/* hamburger button we control (reuses the existing icon position) */
.zz-burger{
  display: none;
  position: fixed; top: 12px; left: 12px; z-index: 3001;
  width: 52px; height: 52px; border: 0; border-radius: 4px;
  background: #3f8a86; cursor: pointer; padding: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
/* middle bar: centred in the 52px square (left:12 + width:28 + 12 = 52) */
.zz-burger span{
  content: ""; position: absolute; left: 12px; top: 25px; width: 28px; height: 3px;
  background: #fff; border-radius: 2px; transition: transform .3s, opacity .3s;
}
/* top/bottom bars are children of the span -> left:0 keeps them aligned with it */
.zz-burger span::before, .zz-burger span::after{
  content: ""; position: absolute; left: 0; width: 28px; height: 3px;
  background: #fff; border-radius: 2px; transition: transform .3s;
}
.zz-burger span::before{ top: -9px; }
.zz-burger span::after{ top: 9px; }
.zz-burger.open span{ background: transparent; }
.zz-burger.open span::before{ transform: translateY(9px) rotate(45deg); }
.zz-burger.open span::after{ transform: translateY(-9px) rotate(-45deg); }

/* backdrop */
.zz-backdrop{
  display: none; position: fixed; inset: 0; z-index: 2999;
  background: rgba(0,0,0,.45); opacity: 0; transition: opacity .3s;
}
.zz-backdrop.open{ opacity: 1; }

/* slide-in panel */
.zz-mobnav{
  position: fixed; top: 0; left: -320px; z-index: 3000;
  width: 300px; max-width: 82vw; height: 100%;
  background: #26403f; color: #fff;
  transition: left .3s ease;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 84px 0 30px; box-shadow: 2px 0 20px rgba(0,0,0,.4);
}
.zz-mobnav.open{ left: 0; }
.zz-mobnav a{
  display: block; padding: 15px 26px; color: #fff !important;
  font-size: 19px; text-decoration: none; letter-spacing: .5px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.zz-mobnav a:hover, .zz-mobnav a.active{ background: rgba(255,255,255,.08); }
.zz-mobnav .zz-close{ display: none !important; } /* burger square (top-left) toggles hamburger<->X, centred; no separate close */
.zz-mobnav .zz-close-unused{
  position: absolute; top: 22px; right: 20px; width: 34px; height: 34px;
  background: none; border: 0; cursor: pointer;
}
.zz-mobnav .zz-close::before, .zz-mobnav .zz-close::after{
  content: ""; position: absolute; top: 15px; left: 4px; width: 26px; height: 3px;
  background: #fff; border-radius: 2px;
}
.zz-mobnav .zz-close::before{ transform: rotate(45deg); }
.zz-mobnav .zz-close::after{ transform: rotate(-45deg); }

/* show our burger, hide the original broken icon, only on mobile/tablet */
@media (max-width: 991px){
  .zz-burger{ display: block; }
  .menu-icon-cont, .sm-btn-101 { visibility: hidden !important; }
  body.zz-nav-open{ overflow: hidden; }
  .zz-backdrop.show{ display: block; }
}