/* ============================================================
 * Responsive fixes for the WordPress/Bricks Weight Loss page.
 *
 * The exported weight-loss-inline.css hard-codes:
 *   body            { font-size: 1.8rem; }
 *   h1              { font-size: 4.8rem; }
 *   .brxe-container { width: 1280px; }
 *   #brx-content.wordpress { width: 1280px; }
 *
 * With no media-query overrides, those fixed widths break mobile
 * (horizontal overflow, text squeezed into a single-character column).
 * This file is loaded LAST in WeightLossClient.tsx so its rules win.
 * ============================================================ */

/* 0) Hide the duplicate site header that is baked into the
 *    WordPress-exported weight-loss HTML (logo image + brxe-nav-nested
 *    menu + brxe-toggle hamburger button). The React <Header /> rendered
 *    by app/weight-loss/page.tsx is the canonical one, so the Bricks
 *    copy must be hidden to prevent two stacked logos and menu buttons.
 */
.bricks-is-frontend section.brxe-section:has(> nav.brxe-nav-nested),
.bricks-is-frontend section.brxe-section:has(> button.brxe-toggle) {
  display: none !important;
}
/* Fallback for browsers without :has() support — hide individual pieces. */
.bricks-is-frontend > div > div > section.brxe-section:first-of-type
  > nav.brxe-nav-nested,
.bricks-is-frontend > div > div > section.brxe-section:first-of-type
  > button.brxe-toggle,
.bricks-is-frontend > div > div > section.brxe-section:first-of-type
  > img.brxe-image:first-child {
  display: none !important;
}

/* 1) Clamp every fixed-width container so it shrinks below desktop. */
.bricks-is-frontend .brxe-container,
.bricks-is-frontend #brx-content.wordpress,
.bricks-is-frontend .woocommerce main.site-main {
  width: 100% !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* 2) Prevent any descendant from forcing horizontal scroll. */
.bricks-is-frontend {
  max-width: 100vw;
  overflow-x: hidden;
}
.bricks-is-frontend img,
.bricks-is-frontend video,
.bricks-is-frontend iframe,
.bricks-is-frontend svg {
  max-width: 100%;
  height: auto;
}

/* 3) Scale down the oversized base typography on small screens.
 *    The inline CSS sets body { font-size: 1.8rem } (28.8px) which is
 *    unreadably large on phones. */
@media (max-width: 1024px) {
  .bricks-is-frontend,
  .bricks-is-frontend .brxe-text,
  .bricks-is-frontend .brxe-text-basic,
  .bricks-is-frontend p {
    font-size: 1.6rem;
    line-height: 1.55;
  }
  .bricks-is-frontend h1 { font-size: 3.6rem; line-height: 1.2; }
  .bricks-is-frontend h2 { font-size: 3rem;   line-height: 1.3; }
  .bricks-is-frontend h3 { font-size: 2.4rem; line-height: 1.35; }
  .bricks-is-frontend .brxe-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}

@media (max-width: 640px) {
  .bricks-is-frontend,
  .bricks-is-frontend .brxe-text,
  .bricks-is-frontend .brxe-text-basic,
  .bricks-is-frontend p {
    font-size: 1.5rem;
    line-height: 1.55;
  }
  .bricks-is-frontend h1 { font-size: 2.8rem; }
  .bricks-is-frontend h2 { font-size: 2.4rem; }
  .bricks-is-frontend h3 { font-size: 2rem;   }

  /* Force multi-column Bricks rows / grids to stack on phones.
   * Bricks uses flex containers without proper wrap defaults. */
  .bricks-is-frontend .brxe-container > .brxe-container,
  .bricks-is-frontend .brxe-section > .brxe-container {
    flex-wrap: wrap !important;
  }
  .bricks-is-frontend .brxe-container > .brxe-block,
  .bricks-is-frontend .brxe-container > .brxe-div {
    flex-basis: 100% !important;
    max-width: 100% !important;
  }
}