/* ============================================================
   Outer Frame Fill + Mobile Responsiveness
   ------------------------------------------------------------
   `.main-container` (503px) is a desktop "preview frame" around
   the real mobile page (`.mobile-main-english`, 375px). None of
   the design's own layout, spacing, or styles live in this file
   -- it only ever touches the outer wrapper and top-level
   spacing.
   ============================================================ */

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  /* Base fill so there's never a stray white edge around the frame. */
  background: var(--color-brand, #70836e);
  overflow-x: hidden; /* safety net against any 1px sub-pixel overflow */
}

/* ---------- Remove the dead space above the logo and below the
   last image ----------
   The original design had a fixed 100px top margin (empty gutter
   above the logo) and a fixed 4048px frame height that left extra
   blank space below the last menu image. Now that the logo and
   AR button are fixed overlays instead of in-flow elements (see
   fixed-overlays.css), the page only needs:
     - enough top padding to clear the fixed header's height, so
       content starts right underneath it instead of behind it
     - enough bottom padding to clear the fixed AR button, so the
       last image isn't hidden behind it
   Everything else can size itself to its actual content. */
.main-container {
  width: auto;
  height: auto;
  margin: 0 auto;
  background: var(--color-brand, #70836e);
}

.mobile-main-english {
  width: var(--card-width, 375px);
  height: auto;
  margin: 0 auto;
  padding-top: var(--header-height, 71px);
  padding-bottom: 0;
}

/* ---------- Phones narrower than the card itself ---------- */
/* `.mobile-main-english` is a fixed 375px wide. Below that
   viewport width it needs to shrink to fit the actual screen,
   not just recenter, or it overflows horizontally. Scaling
   (rather than resizing) keeps every internal absolute/relative
   position, font size, and spacing in the design proportionally
   identical -- nothing inside the card is touched.

   `--card-natural-height` is set by script.js from the card's
   real, measured height (it changes now that content is content-
   driven instead of a hardcoded 3884px), so the compensation
   below always matches the actual page, not a stale number. */
@media (max-width: 375px) {
  .mobile-main-english {
    transform: scale(calc(100vw / 375));
    transform-origin: top center;
    /* transform doesn't shrink the box's own layout footprint,
       so without this the page would keep the original scroll
       space below the visually-shrunk card. This pulls the
       extra (now-empty) space back in. */
    margin-bottom: calc(
      var(--card-natural-height, 3884px) * ((100vw / 375) - 1)
    );
  }
}