/* tea-f-p mobile refinements (override layer) */

/* --- 0. Scroll performance --- */
/* Fixed nav: backdrop-blur re-blurs the whole page every scrolled frame on
   mobile GPUs, and transition-all(500ms) animates paint properties mid-scroll.
   Use a solid opaque bar + scoped transition instead (readability also improves). */
nav[class*="fixed"] {
  transition-property: background-color, box-shadow !important;
  transition-duration: 300ms !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
nav[class*="bg-white/95"] {
  background-color: #fdfcfa !important;
}
/* Before the 60px scroll threshold the nav is transparent with white text;
   a soft scrim keeps it readable over bright imagery without any blur cost */
nav[class*="bg-transparent"] {
  background: linear-gradient(to bottom, rgba(24, 18, 12, 0.5), rgba(24, 18, 12, 0)) !important;
}
nav div[class*="backdrop-blur"] {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Glassy membership cards: blur(4px) backdrop costs GPU while that section scrolls */
[class*="backdrop-blur-sm"] {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background-color: rgba(255, 255, 255, 0.09) !important;
}
/* 100vh hero re-lays-out every time the mobile URL bar shows/hides; svh is stable */
@supports (height: 100svh) {
  .h-screen { height: 100svh !important; }
  .min-h-screen { min-height: 100svh !important; }
}

/* --- 1. Mobile hamburger menu: solid readable background --- */
/* The built bundle uses invalid class bg-white/97 → transparent. Force solid. */
nav div[class*="bg-white/97"] {
  background-color: rgba(252, 250, 247, 0.98) !important;
  border-top: 1px solid rgba(120, 100, 80, 0.14) !important;
  box-shadow: 0 24px 48px -20px rgba(28, 25, 23, 0.35);
  padding: 0.75rem 1.5rem 1.25rem !important;
  gap: 0 !important;
}
nav div[class*="bg-white/97"] button[class*="text-stone-700"] {
  font-size: 1rem !important;
  color: #292524 !important;
  padding: 0.875rem 0.25rem;
  border-bottom: 1px solid rgba(120, 100, 80, 0.1);
  letter-spacing: 0.08em;
}
nav div[class*="bg-white/97"] button[class*="text-stone-700"]:active {
  color: #6b2737 !important;
}
/* CTA button inside menu: keep burgundy, add breathing room */
nav div[class*="bg-white/97"] > button:last-child,
nav div[class*="bg-white/97"] > a:last-child {
  margin-top: 1rem;
}

/* --- 2. Typography balance on mobile --- */
@media (max-width: 767px) {
  /* Hero background: the desktop image is 16:9 landscape, which zooms ~4x on a
     portrait phone screen. Swap to the portrait variant of the same scene. */
  div[style*="search-image-229067.jpg"] {
    background-image: url("/media/ae08992f138e3f23eb0a655df2bc03f0-15dd60.jpg") !important;
    background-position: center 35% !important;
  }

  /* Japanese phrase-aware line breaking on headings (Chrome/Edge; safe fallback elsewhere) */
  h1, h2, h3 {
    word-break: auto-phrase;
  }

  /* Hero title: scale with viewport so the nowrap lines (13 chars max) always fit
     inside the 24px side paddings; caps at 28px on wider phones */
  h1 {
    font-size: clamp(1.25rem, calc((100vw - 48px) / 13), 1.75rem) !important;
    line-height: 1.5 !important;
  }

  /* Section headings: cap oversized ones, unify rhythm */
  h2 {
    font-size: 1.625rem !important;     /* 26px */
    line-height: 1.55 !important;
  }

  /* Body copy: 14px → 15px for JP readability */
  p[class*="text-sm"] {
    font-size: 0.9375rem !important;    /* 15px */
    line-height: 1.85 !important;
  }

  /* Hero lead sentence slightly larger too */
  p[class*="text-base"] {
    line-height: 1.85 !important;
  }

  /* Comfortable tap targets for primary buttons */
  a[class*="bg-"], button[class*="bg-"] {
    min-height: 44px;
  }
}