/* ────────────────────────────────────────────────────────────────────────────
   nefesh.live — premium warm-cream theme (loaded last so it wins the cascade)
   v1 · 2026-05-03 · Replaces blue-on-blue dark UI with inviting light palette.
   Games' interactive canvases keep their own dark contexts.
   ──────────────────────────────────────────────────────────────────────────── */

:root {
  --nf-cream:    #fbf7f1;        /* warm parchment — page base */
  --nf-cream2:   #f5ede2;        /* warmer surface — sections */
  --nf-sand:     #ede2d0;        /* dividers / subtle bands */
  --nf-navy:     #0a1628;        /* TEXT only, never large fills */
  --nf-text:     #1a2535;
  --nf-muted:    #6b7a90;
  --nf-teal:     #00b4a0;
  --nf-teal2:    #00d4bc;
  --nf-teal-deep:#008c7d;
  --nf-gold:     #d4a574;
  --nf-rose:     #e8b4a8;
  --nf-border:   #ece4d6;
  --nf-shadow-sm:0 1px 3px rgba(26,37,53,.04), 0 4px 16px rgba(26,37,53,.04);
  --nf-shadow-md:0 4px 16px rgba(26,37,53,.06), 0 12px 40px rgba(26,37,53,.06);
}

/* ── PAGE BASE — every page gets warm cream ── */
html, body {
  background: var(--nf-cream) !important;
  color: var(--nf-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── NAV — flip dark navy nav patterns to light ── */
nav, .nav, header.site-header {
  background: rgba(251,247,241,.88) !important;
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid rgba(236,228,214,.6) !important;
}
nav .logo, nav .logo span, nav a.logo, .nav-logo, .nav-logo span,
nav .brand, nav h1 { color: var(--nf-text) !important; }

/* ── FOOTER — warm sand instead of dark navy ── */
footer, .footer, body > footer {
  background: linear-gradient(180deg, #f5ede2 0%, #ede2d0 100%) !important;
  border-top: 1px solid var(--nf-border);
}
footer, footer p, footer a, .footer, .footer p, .footer a {
  color: var(--nf-text) !important;
}
footer a:hover, .footer a:hover { color: var(--nf-teal) !important; }
footer p { opacity: .75; }

/* ── Section "dark" pattern (used across many pages) → flip to warm cream ── */
.section-dark, section.section-dark, .dark-section, .hero-dark, .bg-dark {
  background: linear-gradient(180deg, #fbf7f1 0%, #f5ede2 100%) !important;
  color: var(--nf-text) !important;
}
.section-dark *, .dark-section *, .hero-dark *, .bg-dark * {
  color: inherit;
}
.section-dark h1, .section-dark h2, .section-dark h3,
.dark-section h1, .dark-section h2, .dark-section h3,
.hero-dark h1, .hero-dark h2, .hero-dark h3 {
  color: var(--nf-text) !important;
}
.section-dark p, .section-dark .section-sub,
.dark-section p, .dark-section .section-sub,
.hero-dark p { color: #5a6878 !important; }

/* ── Trial / CTA banner if it uses dark gradient ── */
.trial-banner, .cta-banner, .upgrade-banner {
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(0,180,160,.10), transparent 70%),
    linear-gradient(135deg, #fbf7f1 0%, #f5ede2 100%) !important;
  color: var(--nf-text) !important;
  border-top: 1px solid var(--nf-border);
  border-bottom: 1px solid var(--nf-border);
}
.trial-banner h2, .cta-banner h2 { color: var(--nf-text) !important; }
.trial-banner p, .cta-banner p { color: #5a6878 !important; }

/* ── Trust-strip / stats-bar that were dark ── */
.trust-strip, .stats-bar {
  background: linear-gradient(180deg, #fbf7f1 0%, #f5ede2 100%) !important;
  border-top: 1px solid var(--nf-border) !important;
  border-bottom: 1px solid var(--nf-border) !important;
}
.trust-strip *, .stats-bar .stat-l { color: var(--nf-text) !important; }
.stats-bar .stat-n { color: var(--nf-teal) !important; }

/* ── Sticky mobile bottom CTA — soft cream wash, not navy fade ── */
.sticky-cta, .mobile-cta-bar {
  background: linear-gradient(180deg, rgba(251,247,241,0) 0%, rgba(251,247,241,.95) 40%) !important;
  backdrop-filter: blur(10px) !important;
}

/* ── Buttons (preserve teal CTA + add lift on cream backgrounds) ── */
.btn-primary, .price-cta.primary, .nav-cta {
  background: var(--nf-teal) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(0,180,160,.28);
}
.btn-primary:hover, .price-cta.primary:hover, .nav-cta:hover {
  background: var(--nf-teal2) !important;
  box-shadow: 0 6px 20px rgba(0,180,160,.4);
}

/* ── Card uniformity on warm bg ── */
.card-uniform, .card, .feature-card {
  background: #fff !important;
  border: 1px solid var(--nf-border) !important;
  box-shadow: var(--nf-shadow-sm);
}

/* ── Respect game canvases — DO NOT lighten interactive game areas ── */
canvas, .game-canvas, [data-game-canvas], .immersive,
.game-stage, #game-canvas, #stage {
  background: initial !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   iOS SAFE-AREA — critical: never let bottom UI hide behind home indicator
   or address bar. Run: site-wide via theme.css (loaded on every page).
   ──────────────────────────────────────────────────────────────────────────── */

/* Use full available height on iOS Safari (handles dynamic browser UI) */
html { height: -webkit-fill-available; }
body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
  min-height: 100dvh;  /* dynamic viewport height — newer browsers */
}

/* Common bottom-fixed patterns: lift above the home indicator */
.sticky-cta, .mobile-cta-bar, .wa-float, [data-stick-bottom],
.bottom-bar, .nav-bottom, .game-controls, .game-bottom,
.actions-bar, .footer-cta, .fab, [class*="floating"] {
  padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
}

/* WhatsApp float button — explicitly lift above home indicator */
.wa-float {
  bottom: max(28px, calc(env(safe-area-inset-bottom) + 16px)) !important;
}

/* Full-screen scenes / heroes / panels — ensure bottom padding clears the indicator.
   This is THE fix for Maya's Journey and every other position:fixed inset:0 layout. */
.scene, .ending, .intro, .full-screen, .immersive, .stage,
.game-stage, .game-screen, .game-overlay, .modal-fullscreen,
.outcome-card, [class*="overlay-full"], [class*="screen-full"] {
  padding-bottom: max(30px, calc(env(safe-area-inset-bottom) + 24px)) !important;
}

/* Generic full-height containers — switch to dvh so they shrink when iOS bar appears.
   This prevents 100vh elements from being taller than the visible area. */
@supports (height: 100dvh) {
  .hero, .scene, .full-screen, .immersive,
  .game-stage, .game-screen, .stage {
    min-height: 100dvh !important;
  }
}

/* Top safe-area too (notch / Dynamic Island) */
nav, .nav, header.site-header, .top-bar {
  padding-top: max(14px, calc(env(safe-area-inset-top) + 8px)) !important;
}

/* Side insets for landscape on notched devices */
.scene, .ending, .intro, .full-screen, .stage {
  padding-left: max(18px, env(safe-area-inset-left)) !important;
  padding-right: max(18px, env(safe-area-inset-right)) !important;
}

/* Pages that have a footer that should stay visible: extra space at end of content */
main, .page-content, .article-body {
  padding-bottom: env(safe-area-inset-bottom);
}

/* ── Reduce-motion: kill heavy animations for users who set the pref ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}