/* ============================================================
   Van Egmond Schilders — static-site responsive fixes
   Scope: ONLY <= 991px (tablet + mobile). Desktop (>=992px)
   is left as an exact copy of the live site.
   ============================================================ */

/* ---------- custom mobile menu (Astroid offcanvas is broken) ---------- */
#sf-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;visibility:hidden;
  transition:opacity .3s ease;z-index:99998;}
html.sf-open #sf-backdrop{opacity:1;visibility:visible;}
#sf-mobnav{position:fixed;top:0;right:0;height:100%;width:min(82vw,330px);background:#501F5D;
  box-shadow:-6px 0 28px rgba(0,0,0,.35);transform:translateX(100%);transition:transform .3s ease;
  z-index:99999;padding:72px 26px 28px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
html.sf-open #sf-mobnav{transform:translateX(0);}
html.sf-open{overflow:hidden;}
#sf-mobnav ul{list-style:none;margin:0;padding:0;}
#sf-mobnav li{border-bottom:1px solid rgba(255,255,255,.16);}
#sf-mobnav a{display:block;color:#fff;font-size:20px;font-weight:600;padding:16px 2px;
  text-decoration:none;font-family:Montserrat,Arial,Helvetica,sans-serif;letter-spacing:.3px;}
#sf-mobnav a:active{opacity:.7;}
#sf-mobnav .sf-tel{margin-top:26px;font-size:22px;color:#F4B400;border:0;}
#sf-mobnav .sf-close{position:absolute;top:16px;right:20px;background:none;border:0;color:#fff;
  font-size:42px;line-height:1;cursor:pointer;padding:0;}
@media (min-width:992px){#sf-mobnav,#sf-backdrop{display:none!important;}}

/* ---------- layout fixes: tablet + mobile ---------- */
@media (max-width:991px){
  img,video,iframe{max-width:100%;height:auto;}

  /* ONE clean 20px gutter each side; content fills the rest.
     The desktop layout stacks side-padding across BOTH layout systems
     (Astroid grid + SP Page Builder: section + bootstrap col + column +
     oval + per-addon clearfix), which squeezed text into a narrow strip.
     Fix: zero horizontal padding/margin at every level, then apply a single
     20px gutter on .sppb-container-inner (which sits INSIDE the section, so
     section backgrounds stay full-bleed). :has() un-nests nested sections. */
  .astroid-header-section,.astroid-header-section.py-3{padding-left:20px!important;padding-right:20px!important;}

  .sp-page-builder,.sp-page-builder .page-content,
  .sppb-section,.sppb-row,.sppb-column,.sppb-column-addons,
  .sppb-addon-wrapper,.sppb-addon-wrapper > .clearfix,
  .sppb-addon.oval,
  [class*="sppb-col-md-"],[class*="sppb-col-sm-"],[class*="sppb-col-xs-"]{
    padding-left:0!important;padding-right:0!important;
    margin-left:0!important;margin-right:0!important;}

  .sppb-container-inner{padding-left:20px!important;padding-right:20px!important;box-sizing:border-box!important;}
  /* a container that wraps a nested section is structural → no extra gutter */
  .sppb-container-inner:has(.sppb-section){padding-left:0!important;padding-right:0!important;}
  /* header banner image: full screen width (drop the gutter for its section) */
  .sppb-container-inner:has(img[src*="header-"]){padding-left:0!important;padding-right:0!important;}
  img[src*="header-"]{width:100%!important;max-width:100%!important;display:block;}

  .sppb-addon.oval{padding-top:22px!important;padding-bottom:22px!important;max-width:100%!important;}
  .sppb-addon-content{width:auto!important;max-width:100%!important;}
  [class*="sppb-col-md-"]{width:100%!important;max-width:100%!important;flex:0 0 100%!important;}

  /* larger, readable body copy (16px felt too small on phones) */
  .sppb-addon-text-block,.sppb-addon-text-block p,.sppb-addon-text-block li,
  .sppb-addon-text-block span{font-size:18px!important;line-height:1.65!important;}

  /* never let a long word / heading push off-screen */
  .sppb-addon-title,.sppb-addon-text-block,h1,h2,h3,p,li,a{overflow-wrap:break-word;}

  /* keep the hero slider visible on mobile too (it works); just make sure it
     can't cause horizontal overflow */
  #home-slider,[id^="n2-ss-"]{max-width:100%!important;overflow-x:hidden!important;}
}