/* ============================================================
   Mobile fixes for the static site — ADDITIVE / self-contained.
   Loaded last so it overrides. Only affects screens <=767px;
   desktop layout is untouched.  Goals: no text/buttons off-screen,
   full-width text blocks + coloured backgrounds, a single 20px
   inner padding, and no mid-word breaking.
   ============================================================ */

/* 1) Never allow horizontal scrolling / content wider than screen */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, iframe, table { max-width: 100%; }
img, video { height: auto; }

/* 2) Long words / e-mail addresses wrap only when needed (not mid-word by default) */
p, li, a, span, h1, h2, h3, h4, h5, h6, div, td, th, blockquote {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

@media (max-width: 767px) {
  /* 3) Flatten all structural wrappers to full width, no side padding/margin */
  .sppb-section, .sppb-container, .sppb-container-inner, .sppb-row-container, .sppb-row,
  .sppb-column-addons, .sppb-addon-wrapper, .clearfix {
    padding-left: 0 !important; padding-right: 0 !important;
    margin-left: 0 !important; margin-right: 0 !important;
    max-width: 100% !important;
  }
  [class*="sppb-col-"] {
    width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important;
    padding-left: 0 !important; padding-right: 0 !important;
  }

  /* 3b) Nested sections (a section inside a column): remove the OUTER column's
        padding so the nested section fills the full width; its own inner column
        then provides the single 20px inset (keeps left/right symmetric). */
  .sppb-column:has(> .sppb-column-addons > .sppb-section) {
    padding-left: 0 !important; padding-right: 0 !important;
  }

  /* 4) Single source of inner padding: the column (20px each side) */
  .sppb-column { padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important; }

  /* 5) Addons: full width, no extra side padding, dont shrink/centre-collapse */
  .sppb-addon { padding-left: 0 !important; padding-right: 0 !important; width: auto !important; max-width: 100% !important; }
  .sppb-addon-title { width: auto !important; max-width: 100% !important; }

  /* 6) Buttons (e-mail / booking) never overflow; break only when necessary */
  .sppb-btn {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    box-sizing: border-box !important;
  }

  /* 6b) Shrink the long e-mail button a touch so the address fits without an ugly break */
  a.sppb-btn[href^="mailto"] { font-size: 15px !important; letter-spacing: 0 !important; }

  /* 7) Cap oversized headings so they never crowd the screen edges */
  .sppb-addon-title { font-size: 26px !important; line-height: 1.2 !important; }
  h1, .sppb-addon-title h1 { font-size: 26px !important; line-height: 1.2 !important; }
  h2 { font-size: 22px !important; line-height: 1.25 !important; }
  h3 { font-size: 20px !important; line-height: 1.3 !important; }
}