/* ============================================================
   HERO 2026 — editorial first viewport
   ------------------------------------------------------------
   Replaces the old split hero (.hero-section.hero-split) and its
   GSAP pinned scrollytelling. Loaded AFTER home.css on the home
   pages only, so the one global override below wins by cascade
   order. Everything else is scoped under .pp-hero26 and cannot
   leak into other sections or pages.

   Design language (approved 2026-07, revised 07-03: owner flagged
   cream+tomato as "Claude colours" and Fraunces as AI-overused —
   palette is now paper white + ink + CHIANTI wine red, wordmark in
   DM Serif Display):
   • paper-white canvas (#F5F2EB, site-wide)
   • oversized DM Serif Display wordmark — "PIZZA" roman ink +
     "Persé." italic chianti — the type IS the hero
   • media band: wood-fire video + interior photo, rounded top
     corners, anchored to the bottom of the viewport
   • chianti marquee ticker closing the first viewport
   Contrast: #6E212E on #F5F2EB = 9.8 (AAA); paper on #6E212E fill
   passes AA for button text.
   ============================================================ */

:root {
  --h26-cream:        #F5F2EB;
  --h26-cream-bright: #F7F4EE;
  --h26-ink:          #1A1714;
  --h26-pomodoro:     #6E212E;  /* chianti wine red */
  --h26-pomodoro-deep:#521722;  /* darker chianti — hover */
}

/* ── Nav bar: always solid paper-white, never transparent+blurred ──
   main.css's `.nav-wrap` ships `backdrop-filter: blur(12px)` and a
   dark translucent background — designed for the OLD dark-video
   hero (a frosted-glass header that let the video show through).
   home.css's `.nav-v2 { background: transparent !important }` keeps
   the blur but drops the background to fully transparent. A fixed
   header that is FULLY transparent + backdrop-filter is a known iOS
   Safari bug trigger: the blur region isn't reliably clipped to the
   header's own bounds and can "bleed" into the content below it —
   reported symptom: the hero wordmark rendering as a smeared blur on
   first load, before any scroll (nav-scrolled/nav-inverted, which
   would otherwise mask this, don't apply until the user scrolls).
   The 2026 editorial hero has no dark video for the nav to see
   through anymore, so the transparency bought nothing — go solid
   and drop backdrop-filter entirely, which removes the bug at the
   root instead of masking a symptom. Scoped here (not main.css/
   home.css) because it only applies to the pages that got the
   editorial redesign — index/menu/reserve, zh + en. */
.nav-v2 {
  background: rgba(245, 242, 235, 0.96) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.nav-v2.nav-scrolled {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* The old hero duplicated the about narrative in a scroll stage and
   home.css therefore hides .about-section on desktop (display:none
   !important @ v3). The new hero has no scroll stage, so the real
   about section must be visible everywhere again. */
.about-section { display: block !important; }

/* ── Section shell ─────────────────────────────────────────── */
.pp-hero26 {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--h26-cream);
  min-height: 100vh;             /* fallback */
  min-height: 100svh;            /* small viewport unit: stable on mobile */
  padding-top: clamp(120px, 15vh, 156px);   /* clear the fixed nav (110px logo) */
}

/* ── Headline block ────────────────────────────────────────── */
.h26-head { text-align: center; padding: 0 22px; }

.h26-eyebrow {
  margin: 0 0 clamp(16px, 2.4vh, 28px);
  font-family: 'DM Sans', 'Noto Sans TC', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.32em;
  text-indent: 0.32em;           /* optically re-center tracked text */
  color: var(--h26-pomodoro);
}

.h26-title {
  margin: 0;
  font-family: 'DM Serif Display', 'Noto Serif TC', Georgia, serif;
  font-weight: 400;   /* DM Serif Display ships 400 only — never fake-bold it */
  font-size: clamp(64px, 11.5vw, 168px);
  line-height: 0.95;
  letter-spacing: -0.015em;
  color: var(--h26-ink);
}
.h26-title .t-word { display: inline-block; }
.h26-title .t-caps { text-transform: uppercase; }
.h26-title .t-italic {
  font-style: italic;
  font-weight: 400;
  color: var(--h26-pomodoro);
  margin-left: 0.12em;
  padding-right: 0.06em;         /* keep the italic overhang off the edge */
}
.h26-title .t-dot { color: var(--h26-ink); font-style: normal; }

/* Visually hidden (screen readers + SEO keep the Chinese tagline) */
.h26-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.h26-sub {
  margin: clamp(16px, 2.4vh, 26px) 0 0;
  font-family: 'Noto Sans TC', 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.7;
  color: rgba(26, 23, 20, 0.78);
}
.h26-sub .en {
  display: block;
  margin-top: 10px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  text-transform: uppercase;
  color: rgba(26, 23, 20, 0.45);
}

/* ── CTA row ───────────────────────────────────────────────── */
.h26-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(22px, 3.2vh, 34px);
}
.h26-btn,
.h26-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 32px;
  border-radius: 999px;
  font-family: 'Noto Sans TC', 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.h26-btn {
  background: var(--h26-pomodoro);
  color: var(--h26-cream-bright);
  border: 1px solid var(--h26-pomodoro);
}
.h26-btn:hover { background: var(--h26-pomodoro-deep); border-color: var(--h26-pomodoro-deep); }
.h26-btn-ghost {
  background: transparent;
  color: var(--h26-ink);
  border: 1px solid rgba(26, 23, 20, 0.35);
}
.h26-btn-ghost:hover { background: var(--h26-ink); color: var(--h26-cream-bright); border-color: var(--h26-ink); }
.h26-btn:focus-visible,
.h26-btn-ghost:focus-visible { outline: 2px solid var(--h26-ink); outline-offset: 3px; }

/* ── Location line ─────────────────────────────────────────── */
.h26-loc {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: clamp(16px, 2.4vh, 24px);
  font-family: 'DM Sans', 'Noto Sans TC', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: rgba(26, 23, 20, 0.55);
  text-decoration: none;
  transition: color 0.2s ease;
}
.h26-loc:hover { color: var(--h26-pomodoro); }
.h26-loc svg { flex-shrink: 0; }

/* ── Media band (video + interior photo) ───────────────────── */
.h26-media {
  flex: 1 1 auto;                /* pushes the ticker to the viewport bottom */
  display: flex;
  align-items: stretch;
  gap: clamp(10px, 1.2vw, 16px);
  padding: clamp(28px, 4.5vh, 48px) clamp(20px, 4vw, 56px) 0;
  min-height: 0;
}
.h26-media-panel {
  position: relative;
  overflow: hidden;
  border-radius: 14px 14px 0 0;
  min-height: clamp(180px, 26vh, 340px);
  background: #2A231E;           /* warm dark placeholder while media loads */
}
.h26-media-video { flex: 1.6; }
.h26-media-photo { flex: 1; }
.h26-media-panel video,
.h26-media-panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* home.css v12 sets a global `.hero-video { brightness(1.15) !important }`
   tuned for the old dark-overlay hero — on the new open panel it reads
   washed out. Re-grade warm and natural (more specific selector wins). */
.pp-hero26 .hero-video {
  filter: saturate(1.12) contrast(1.05) brightness(0.98) !important;
}

/* ── Pomodoro marquee ticker ───────────────────────────────── */
.h26-ticker {
  background: var(--h26-pomodoro);
  overflow: hidden;
}
.h26-ticker-track {
  display: flex;
  width: max-content;
  animation: h26-marquee 28s linear infinite;
}
.h26-ticker-group {
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding: 13px 0 13px 34px;
  gap: 34px;
}
.h26-ticker-group span {
  font-family: 'DM Sans', 'Noto Sans TC', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.22em;
  color: var(--h26-cream-bright);
}
.h26-ticker-group .star { color: rgba(247, 244, 238, 0.65); letter-spacing: 0; font-size: 10px; }
@keyframes h26-marquee { to { transform: translateX(-50%); } }

/* ── Entrance: staggered rise on load (CSS-only, safe by
      construction — if the stylesheet loads, the animation runs;
      nothing is ever hidden by JS) ───────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .h26-rise {
    opacity: 0;
    transform: translateY(26px);
    animation: h26-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  .h26-rise-1 { animation-delay: 0.05s; }
  .h26-rise-2 { animation-delay: 0.15s; }
  .h26-rise-3 { animation-delay: 0.30s; }
  .h26-rise-4 { animation-delay: 0.42s; }
  .h26-rise-5 { animation-delay: 0.55s; }
  @keyframes h26-rise { to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .h26-ticker-track { animation: none; }
}

/* ── Mobile ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* The fixed nav stacks logo + pills on mobile (~105px tall) */
  .pp-hero26 { padding-top: clamp(126px, 17vh, 150px); }

  /* home.css v4 forces the mobile nav WHITE (it sat over the old
     dark video hero). The new hero is cream, so restore the dark
     chrome. Same selectors + !important, later in the cascade. */
  .nav-v2 { border-bottom: 1px solid rgba(26, 23, 20, 0.08) !important; }
  .nav-v2 .nav-logo-img { filter: none !important; }
  .nav-v2 .nav-pill { color: #0A0808 !important; text-shadow: none !important; }
  .nav-v2 .nav-pill.active { color: #0A0808 !important; }
  .nav-v2 .nav-pill:hover { background: #0A0808 !important; color: #fff !important; text-shadow: none !important; }
  .nav-v2 .nav-lang { color: #0A0808 !important; text-shadow: none !important; }
  .nav-v2 .nav-lang a { color: #0A0808 !important; }

  /* Stack the wordmark: PIZZA / Persé. on two lines, bigger */
  .h26-title { font-size: clamp(72px, 20vw, 104px); line-height: 0.98; }
  .h26-title .t-word { display: block; }
  .h26-title .t-italic { margin-left: 0; }

  .h26-eyebrow { font-size: 10px; letter-spacing: 0.26em; text-indent: 0.26em; }
  .h26-sub { padding: 0 8px; }

  .h26-cta { gap: 10px; margin-top: 24px; }
  .h26-btn, .h26-btn-ghost { padding: 14px 26px; font-size: 14px; }

  /* Single full-width video panel; interior photo hidden */
  .h26-media { padding: 26px 16px 0; }
  .h26-media-photo { display: none; }
  .h26-media-panel { min-height: clamp(200px, 30vh, 300px); border-radius: 12px 12px 0 0; }

  .h26-ticker-group { padding: 11px 0 11px 26px; gap: 26px; }
  .h26-ticker-group span { font-size: 11px; letter-spacing: 0.18em; }
}

/* Very short landscape viewports: let the section grow naturally
   instead of cramming into 100svh */
@media (max-height: 560px) {
  .pp-hero26 { min-height: auto; }
  .h26-media-panel { min-height: 180px; }
}