/* ============================================================
   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%;
  transform: translateX(-50%);
  width: min(var(--card-width, 375px), 100vw);
  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));
  transform: translateX(-50%);
  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;
}