/* ============================================================
   Fixed Header + Fixed AR Button
   ------------------------------------------------------------
   Two elements need to stay on screen at all times, regardless
   of scroll position:
     1. `.group`     -- the logo header, pinned to the TOP
     2. `.layer-78`  -- the AR button, pinned to the BOTTOM

   Why `position: fixed` instead of `position: sticky`:
   `sticky` only stays put while its own parent is on screen --
   once you scroll past the parent's box, a sticky child scrolls
   away with it. These two elements need to be visible for the
   ENTIRE page, so they use `fixed`, which pins them to the
   viewport itself.

   Why they were moved out of `.mobile-main-english` (see
   index.html): `.mobile-main-english` gets a `transform: scale()`
   on very narrow phones (see responsive.css). Any CSS transform
   on an ancestor creates a new positioning context for `fixed`
   descendants, which would make them stick to that scaled box
   instead of the real viewport. Living as direct children of
   `.main-container` (which never has a transform) keeps them
   correctly pinned to the screen on every device.

   Loaded AFTER index.css so these overrides win the cascade.
   ============================================================ */

.main-container,
.mobile-main-english {
  overflow: visible;
}

/* ---------- Fixed logo header (top) ---------- */
.group {
  position: fixed;
  top: 0;
  left: 50%;
  /* Scales with --page-scale (see variables.css) so the logo
     bar grows/shrinks along with .mobile-main-english. It can't
     just live inside .mobile-main-english and inherit that
     transform (see comment above -- that would break its fixed
     positioning), so it applies the same scale itself.
     transform-origin is top-center so the top edge stays flush
     with the viewport as it grows. */
  transform: translateX(-50%) scale(var(--page-scale, 1));
  transform-origin: center top;
  width: var(--card-width, 375px);
  height: var(--header-height, 71px);
  margin: 0;
  z-index: var(--z-sticky-header, 500);
}

.group .rectangle {
  /* No separate background plate anymore -- the logo image
     itself fills the header now, and the page background
     (already the same brand green) shows through anywhere the
     logo doesn't cover. */
  display: none;
}

.logo-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

/* Optional "lifted" look once the page has actually scrolled --
   toggled by script.js. Off by default so the unscrolled header
   matches the original design exactly. */
.group.is-stuck .rectangle {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ---------- Fixed AR button (bottom) ---------- */
.layer-78 {
  position: fixed;
  left: 50%;
  bottom: calc(var(--ar-button-bottom-offset, 16px) + env(safe-area-inset-bottom, 0px));
  /* Scales with --page-scale, same reasoning as .group above.
     Anchored bottom-center so the button's distance from the
     bottom edge stays correct as it grows/shrinks. */
  transform: translateX(-50%) scale(var(--page-scale, 1));
  transform-origin: center bottom;
  width: var(--ar-button-width, 66px);
  height: var(--ar-button-height, 30px);
  margin: 0;
  z-index: var(--z-sticky-header, 500);
  /* The button had no background of its own -- it was relying
     entirely on the small icon image inside it to read as a
     shape, so it disappeared against a flat backdrop and only
     looked "visible" when it happened to overlap a busy photo
     behind it. This is the solid white pill plate from the
     Figma frame, always present regardless of what's underneath. */
  /* Original design colors: soft cream background at low opacity,
     with a solid cream text color on top. */
  background: rgba(224, 214, 205, 0.2);
  border-radius: calc(var(--ar-button-height, 30px) / 2);
  /* This shadow didn't exist at all before -- the button was
     rendering completely flat. Built from the two tones in the
     Figma "Selection colors" panel: a soft cream glow (E0D6CD)
     plus a touch of plain dark shadow for depth. */
  box-shadow:
    0 6px 18px rgba(224, 214, 205, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.18);
}

.layer-78 .ar {
  color: #e1d6cc;
}


/* ---------- iOS Safari fixed-header repaint fix ----------
   Safari's dynamic URL bar (bottom, on iPhone) resizes the
   viewport as it hides/shows during scroll, which can make
   `position: fixed` elements repaint a frame late -- seen here
   as menu content flashing behind the logo while scrolling.
   Scoped to iOS Safari only via the -webkit-touch-callout
   feature query so other browsers are untouched. */
@supports (-webkit-touch-callout: none) {
  .group {
    /* Adding translateZ(0) forces its own GPU compositing
       layer, so it's painted once and moved, not redrawn
       against the scrolling content behind it each frame. */
    -webkit-transform: translateX(-50%) scale(var(--page-scale, 1)) translateZ(0);
    transform: translateX(-50%) scale(var(--page-scale, 1)) translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
    /* Belt-and-braces: guarantees no gap in the header shows
       scrolling content through it even for a single frame. */
    background-color: var(--color-brand, #70836e);
  }

  .layer-78 {
    -webkit-transform: translateX(-50%) scale(var(--page-scale, 1)) translateZ(0);
    transform: translateX(-50%) scale(var(--page-scale, 1)) translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
  }
}