/* ==========================================================================
   Whole Pilates - responsive overrides
   Load this LAST, after main_style.css, so these rules win.
   Nothing here changes desktop appearance above 900px except making
   images/tables safe and the container fluid at its 960px max.
   ========================================================================== */

/* --- Universal safety net ------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

img, video, iframe, embed, object, canvas {
  max-width: 100%;
}

img, video {
  height: auto;
}

/* Weebly writes style="width:300" (no unit) on some images - invalid CSS that
   browsers ignore, but this makes the intent explicit and safe. */
.wsite-logo img,
.wsite-image img {
  height: auto;
}

/* Stop any wide element from forcing a horizontal scrollbar on phones. */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* ==========================================================================
   SIDE MARGINS (GUTTERS)
   --------------------------------------------------------------------------
   ONE PLACE TO EXPERIMENT. Change the two --wp-gutter values below.
   Bigger number = more space between text and the screen edge.
   Try 20px (tight) up to 34px (roomy). Desktop is unaffected.
   Remember to bump ?v=N in each page's stylesheet link after editing.
   ========================================================================== */

:root {
  --wp-gutter: 16px;          /* desktop / large screens */
}

@media (max-width: 900px) {
  :root { --wp-gutter: 26px; }   /* <-- TABLETS & LARGE PHONES: edit this */
}

@media (max-width: 600px) {
  :root { --wp-gutter: 22px; }   /* <-- SMALL PHONES: edit this */
}

/* --- Fluid container ----------------------------------------------------- */
/* main_style.css line 7 hardcodes width:960px. Keep 960 as a ceiling,
   but let it shrink below that. */

.container {
  width: 100% !important;
  max-width: 960px;
  padding-left: var(--wp-gutter) !important;
  padding-right: var(--wp-gutter) !important;
}

/* --- iOS fixed-background fix -------------------------------------------- */
/* background-attachment:fixed is janky-to-broken on iOS Safari. */

@media (max-width: 1024px) {
  body.wsite-background,
  .wsite-background,
  .splash {
    background-attachment: scroll !important;
  }
}

/* ==========================================================================
   PHOTO GALLERY
   Slideshow fills its box at the correct 4:3 ratio instead of being clipped
   by the old overflow:hidden wrapper. Thumbnails sit below it, side by side.
   ========================================================================== */

.wp-slideshow-wrap {
  position: relative;
  width: 100%;               /* fills the content column (~928px on desktop) */
  margin: 0 auto 34px;
  padding-bottom: 75%;       /* 4:3 - matches the source 800x600 slideshow */
  height: 0;
  overflow: hidden;
  background: #f2f2f0;
}

.wp-slideshow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.wp-gallery-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  margin: 0 auto 10px;
  max-width: 900px;
}

.wp-gallery-link {
  flex: 1 1 240px;
  max-width: 300px;
  text-align: center;
}

.wp-gallery-link img {
  width: 100%;
  height: auto;
  display: block;
  border: 4px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}

.wp-gallery-caption {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.35;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.wp-footer {
  text-align: center;
  padding: 22px 0;
  font-size: 14px;
  line-height: 1.7;
}

.wp-footer a {
  text-decoration: none;
}

.wp-footer a:hover {
  text-decoration: underline;
}

/* Price lines left behind after the PayPal buttons were removed */
.wp-price {
  display: block;
  padding: 2px 0;
}

/* ==========================================================================
   TABLET AND BELOW
   ========================================================================== */

@media (max-width: 900px) {

  /* --- Header: stack logo above nav --- */

  #header,
  #header tbody,
  #header tr,
  #header td,
  #header #logo,
  #header #nav {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
  }

  #header { height: auto !important; }

  .row2 { padding: 14px 0; height: auto; min-height: 0; }

  #logo, #logo a {
    max-width: 100% !important;
    padding-right: 0 !important;
    text-align: center;
  }

  #logo img {
    max-width: 240px;
    margin: 0 auto;
  }

  /* --- Nav: wrap into centered rows with real tap targets --- */

  #nav {
    min-width: 0 !important;
    max-width: 100% !important;
    margin-top: 12px;
  }

  #nav ul {
    float: none !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 8px;
    padding: 0;
    margin: 0;
  }

  #nav ul li {
    float: none !important;
    margin: 0 !important;
  }

  /* 44px minimum touch target - Apple/Google accessibility guidance */
  #nav ul li a {
    padding: 12px 14px !important;
    min-height: 44px;
    display: flex !important;
    align-items: center;
    font-size: 15px !important;
  }

  /* --- Weebly multi-column tables: stack into single column --- */
  /* These carry inline style="width:59.79%" on each <td>, so !important
     is required to override them. */

  .wsite-multicol-table,
  .wsite-multicol-tbody,
  .wsite-multicol-tr,
  .wsite-multicol-col {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .wsite-multicol-col {
    padding: 0 0 24px 0 !important;
  }

  /* Weebly wraps columns in a -15px/-25px negative margin. Left alone it
     drags content back outside the gutter, which is what made the earlier
     margin fix look like it did nothing. */
  .wsite-multicol-table-wrap {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Images inside stacked columns often had text-align:right - centre them */
  .wsite-multicol-col .wsite-image {
    text-align: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Weebly spacer divs create big dead gaps once stacked */
  .wsite-spacer { height: 16px !important; }

  /* --- Content breathing room --- */

  /* Vertical padding only. Side margins are controlled by --wp-gutter
     on .container above - do NOT put a left/right value here, or it will
     override it (this rule has higher specificity). */
  #main-wrap .container {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
    min-height: 0 !important;
  }

  #footer-wrap {
    text-align: center !important;
    padding: 24px 0 !important;
  }
}

/* ==========================================================================
   PHONES
   ========================================================================== */

@media (max-width: 600px) {

  /* Gallery thumbnails stack rather than squeezing into two columns */
  .wp-gallery-links {
    gap: 22px;
  }

  .wp-gallery-link {
    flex: 1 1 100%;
    max-width: 280px;
  }

  .wp-slideshow-wrap {
    margin-bottom: 26px;
  }

  /* Readable body text without zooming. 16px also stops iOS Safari
     auto-zooming when a form field is focused. */
  .wsite-elements.wsite-not-footer div.paragraph,
  .wsite-elements.wsite-not-footer p,
  #wsite-content div.paragraph,
  #wsite-content p {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  h2, .wsite-content-title {
    font-size: 22px !important;
    line-height: 1.25 !important;
  }

  /* Weebly wraps headings in <font size="6"> - neutralise it */
  .wsite-content-title font { font-size: inherit !important; }

  #logo img { max-width: 200px; }

  #nav ul li a {
    font-size: 14px !important;
    padding: 11px 10px !important;
  }

  /* Buttons: full width and tappable */
  .wsite-button {
    display: block !important;
    width: 100% !important;
    text-align: center;
    margin: 8px 0 !important;
  }

  .wsite-button-inner {
    display: block;
    padding: 14px 16px !important;
    min-height: 44px;
    box-sizing: border-box;
  }

  /* Form fields - prevent iOS zoom-on-focus */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea,
  select {
    font-size: 16px !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* YouTube embeds - keep 16:9 without overflowing */
  iframe[src*="youtube"] {
    width: 100% !important;
    aspect-ratio: 16 / 9;
    height: auto !important;
  }

  /* Any leftover generic layout table */
  .wsite-elements table {
    width: 100% !important;
    max-width: 100% !important;
  }
}