/* ═══════════════════════════════════════════════════════════
   Talk Story — /talkstory voice-first page.

   The shared FAB + modal (from _includes/talkstory.html, loaded
   site-wide via footer.html) carries the entire voice surface —
   brand header, narrator toggle, mic, status, latest-answer panel,
   and Concierge alt link. This page just provides the dark themed
   surface around the relocated modal.

   Scoped under body.hg-ts-page-voice. Sister page /concierge handles
   the text-first experience.
   ═══════════════════════════════════════════════════════════ */

/* ── Page shell ──────────────────────────────────────────────── */
/* Flex-centre the modal in the viewport. Top padding is a safety
   margin so the modal never tucks under the fixed site header on
   short screens; flex centring handles the rest on tall ones. */
.ts-voice-section {
  background: #0d2b3e;
  background-image:
    radial-gradient(ellipse at top, rgba(29,151,113,0.18) 0%, transparent 60%),
    radial-gradient(ellipse at bottom, rgba(24,102,180,0.12) 0%, transparent 55%);
  min-height: 100vh;
  min-height: 100svh;
  padding: 120px 16px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
}

/* ── Modal mount ─────────────────────────────────────────────── */
.ts-voice-mount {
  width: 100%;
  max-width: 680px;
  display: flex;
  justify-content: center;
}

/* ── Modal in voice-page mode ────────────────────────────────── */
/* Override the floating-modal styles from talkstory-v1.css when on
   /talkstory. Inline card, full-width within the mount, with a
   generous min-height so the modal has visual presence against the
   dark surface. flex-column comes from the site-wide voice-first
   block — the page just grows the minimum. */
body.hg-ts-page-voice .hg-ts-modal {
  position: static;
  transform: none;
  width: 100%;
  max-width: 100%;
  max-height: none;
  height: auto;
  min-height: 560px;
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  opacity: 1;
  pointer-events: auto;
  /* overflow:hidden so the green header's top corners clip cleanly
     to the modal's 20px border-radius. The orb sits inside the modal
     body (not the header) so this doesn't cut off its glow. */
  overflow: hidden;
}
body.hg-ts-page-voice .hg-ts-modal.is-active { transform: none; }

/* Hide the duplicate Hawaii Guide logo inside the modal header —
   the site nav above already shows the logo, so a second one in the
   header band is visual noise. Only hidden on /talkstory; the FAB
   modal on other pages still needs it (no site-header logo above). */
body.hg-ts-page-voice .hg-ts-header-logo { display: none !important; }

/* Kill the FAB and backdrop — the page IS the voice surface. */
body.hg-ts-page-voice .hg-ts-fab,
body.hg-ts-page-voice .hg-ts-backdrop { display: none !important; }

/* Close X is visible on /talkstory too — tapping it stops any audio
   in flight and navigates home. talkstory-page-v1.js wires the
   navigation; the shared JS handles audio stop via closeModal(). */

/* ── Mobile refinements ──────────────────────────────────────── */
@media (max-width: 640px) {
  .ts-voice-section { padding: 100px 14px 48px; }
  body.hg-ts-page-voice .hg-ts-modal { min-height: 70vh; min-height: 70svh; }
}