/**
 * NIAN — Cultural Language Adaptation
 * =====================================
 * DEVELOPER BRIEF
 *
 * WHAT THIS DOES:
 * Changes color theme and typography when user toggles language.
 * English = navy/veteran. Spanish = warm/amber. Chinese = original unchanged.
 *
 * WHAT TO NOT TOUCH:
 * - Logo and brand mark
 * - Layout and structure
 * - Video background
 * - Form structure
 * - Veteran badge
 * - 念念不忘 closing
 * - Any existing JS logic
 * - Beehiiv integration
 *
 * HOW TO IMPLEMENT:
 * Step 1 — Add this CSS file as a <link> in both HTML files AFTER your existing CSS
 * Step 2 — Add the JS snippet to your existing language switcher function
 * Step 3 — Test by toggling languages
 *
 * THAT'S IT. Nothing else changes.
 */


/* =====================================================
   STEP 1 — ADD THIS CSS
   Save as: assets/css/nian-cultural.css
   Add to both index.html and nian_full_story.html:
   <link rel="stylesheet" href="assets/css/nian-cultural.css">
   ===================================================== */


/* ── BASE TRANSITION ─────────────────────────────── */
/* Smooth shift when language changes */
body,
.hero,
video,
h1, h2, h3, h4,
p, span, a,
button,
input,
.form-option,
[class*="gold"],
[class*="border"] {
  transition:
    background-color 0.7s ease,
    color 0.6s ease,
    border-color 0.6s ease,
    filter 0.7s ease;
}


/* ── ENGLISH — American memorial / monumental ─── */
html[lang="en"] {
  --ink:   #0b1530;
  --gold:  #a88a3a;
  --cream: #ece3cd;
}

html[lang="en"] body {
  background-color: #0b1530;
}

/* Video: cool blue tint — ambient bg only, never the founder clip */
html[lang="en"] video:not(.founder-video) {
  filter: hue-rotate(175deg) saturate(0.55) brightness(0.65);
  opacity: 0.22;
}

/* Video overlay: deeper navy gradient */
html[lang="en"] .video-overlay,
html[lang="en"] [class*="overlay"] {
  background: linear-gradient(
    to top,
    rgba(11,21,48,0.96) 0%,
    rgba(11,21,48,0.6)  60%,
    rgba(11,21,48,0.28) 100%
  );
}

/* Gold shifts to burnished bronze medal tone */
html[lang="en"] .gold,
html[lang="en"] [style*="color: #c9a84c"],
html[lang="en"] [style*="color:#c9a84c"],
html[lang="en"] [class*="gold"] {
  color: #a88a3a;
}

html[lang="en"] [style*="border-color: #c9a84c"],
html[lang="en"] [style*="border-color:#c9a84c"],
html[lang="en"] [class*="border-gold"] {
  border-color: rgba(168,138,58,0.28);
}

/* English typography — Cinzel display, Cormorant body — engraved letter-spacing */
html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] h3,
html[lang="en"] h4,
html[lang="en"] .display,
html[lang="en"] [class*="title"],
html[lang="en"] [class*="heading"],
html[lang="en"] [class*="headline"],
html[lang="en"] [class*="label"],
html[lang="en"] [class*="eyebrow"],
html[lang="en"] .faq-q {
  font-family: 'Cinzel', serif;
  letter-spacing: 0.14em;
}

html[lang="en"] p,
html[lang="en"] .body-text,
html[lang="en"] [class*="description"],
html[lang="en"] [class*="body"],
html[lang="en"] [class*="desc"],
html[lang="en"] [class*="note"],
html[lang="en"] .faq-a,
html[lang="en"] .closing-english {
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: 0.025em;
  line-height: 1.95;
}

/* Star field accent — fades in at edges only */
html[lang="en"] .hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(168,138,58,0.12) 1px, transparent 1px),
    radial-gradient(circle, rgba(168,138,58,0.06) 1px, transparent 1px);
  background-size: 80px 80px, 40px 40px;
  background-position: 0 0, 20px 20px;
  mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, transparent 35%, black 100%);
  pointer-events: none;
  z-index: 0;
}

/* Red/white/blue base stripe */
html[lang="en"] .hero {
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, #B22234 33%, rgba(238,232,216,0.2) 33%, rgba(238,232,216,0.2) 66%, #3C3B6E 66%) 1;
  border-image-slice: 1;
}


/* ── SPANISH — Iberian / Latin warmth ────────────── */
html[lang="es"] {
  --ink:   #170c08;
  --gold:  #c57b32;
  --cream: #f6ede0;
}

html[lang="es"] body {
  background-color: #170c08;
}

/* Video: warm amber tint — ambient bg only, never the founder clip */
html[lang="es"] video:not(.founder-video) {
  filter: saturate(1.15) sepia(0.28) brightness(0.72);
  opacity: 0.26;
}

/* Video overlay: deep warm earth gradient */
html[lang="es"] .video-overlay,
html[lang="es"] [class*="overlay"] {
  background: linear-gradient(
    to top,
    rgba(23,12,8,0.96)  0%,
    rgba(23,12,8,0.58)  60%,
    rgba(23,12,8,0.24)  100%
  );
}

/* Gold shifts to burnt sienna */
html[lang="es"] .gold,
html[lang="es"] [style*="color: #c9a84c"],
html[lang="es"] [style*="color:#c9a84c"],
html[lang="es"] [class*="gold"] {
  color: #c57b32;
}

html[lang="es"] [style*="border-color: #c9a84c"],
html[lang="es"] [style*="border-color:#c9a84c"],
html[lang="es"] [class*="border-gold"] {
  border-color: rgba(197,123,50,0.28);
}

/* Spanish typography — Playfair italic display, Cormorant body */
html[lang="es"] h1,
html[lang="es"] h2,
html[lang="es"] h3,
html[lang="es"] h4,
html[lang="es"] .display,
html[lang="es"] [class*="title"],
html[lang="es"] [class*="heading"],
html[lang="es"] [class*="headline"],
html[lang="es"] [class*="label"],
html[lang="es"] [class*="eyebrow"],
html[lang="es"] .faq-q {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  letter-spacing: 0.03em;
}

html[lang="es"] p,
html[lang="es"] .body-text,
html[lang="es"] [class*="description"],
html[lang="es"] [class*="body"],
html[lang="es"] [class*="desc"],
html[lang="es"] [class*="note"],
html[lang="es"] .faq-a,
html[lang="es"] .closing-english {
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: 0.015em;
  line-height: 2.0;
}

/* Dual warm glow — dusk from below + dawn from above (Iberian dusk feel) */
html[lang="es"] .hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 80%, rgba(180,80,20,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 70% 35% at 50% 10%, rgba(197,123,50,0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}


/* ── CHINESE — Original / Ancestral ─────────────── */
/* No overrides. Original design preserved exactly.  */
/* This block exists only to reset any inherited     */
/* changes if the user switches back from EN or ES.  */

html[lang="zh"] {
  --ink:   #0a0a0a;
  --gold:  #c9a84c;
  --cream: #f5f0e8;
}

html[lang="zh"] body {
  background-color: #0a0a0a;
}

html[lang="zh"] video:not(.founder-video) {
  filter: none;
  opacity: 0.3;
}

html[lang="zh"] .video-overlay,
html[lang="zh"] [class*="overlay"] {
  background: linear-gradient(
    to top,
    rgba(10,10,10,0.96) 0%,
    rgba(10,10,10,0.6)  60%,
    rgba(10,10,10,0.28) 100%
  );
}

html[lang="zh"] h1,
html[lang="zh"] h2,
html[lang="zh"] h3,
html[lang="zh"] h4,
html[lang="zh"] .display,
html[lang="zh"] [class*="title"],
html[lang="zh"] [class*="heading"],
html[lang="zh"] [class*="headline"],
html[lang="zh"] [class*="label"],
html[lang="zh"] [class*="eyebrow"],
html[lang="zh"] .faq-q {
  font-family: 'Noto Serif SC', serif;
  letter-spacing: 0.1em;
  font-style: normal;
}

html[lang="zh"] p,
html[lang="zh"] .body-text,
html[lang="zh"] [class*="description"],
html[lang="zh"] [class*="body"],
html[lang="zh"] [class*="desc"],
html[lang="zh"] [class*="note"],
html[lang="zh"] .faq-a,
html[lang="zh"] .closing-english {
  font-family: 'Noto Serif SC', serif;
  letter-spacing: 0.07em;
  line-height: 2.2;
}


/* =====================================================
   STEP 2 — ADD THIS TO YOUR EXISTING LANGUAGE SWITCHER
   Find your current setLanguage() or equivalent function.
   Add ONE LINE inside it after setting the lang attribute:

   document.documentElement.setAttribute('lang', langCode);

   That's it. The CSS above does everything else automatically.
   ===================================================== */


/* =====================================================
   STEP 3 — ADD PLAYFAIR DISPLAY FONT (if not already loaded)
   Add to your <head> in both HTML files:

   <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">

   Cinzel and Noto Serif SC are already loaded.
   Cormorant Garamond is already loaded.
   Only Playfair Display needs to be added.
   ===================================================== */


/* =====================================================
   NOTES FOR DEVELOPER
   ─────────────────────────────────────────────────────
   1. Do NOT change any existing class names or IDs
   2. Do NOT change any existing layout or structure
   3. These styles only activate on html[lang="xx"] — safe to add
   4. If gold color is set via JS inline style, add this to
      your setLanguage() function:

      const goldMap = { en: '#b8973a', es: '#d4903a', zh: '#c9a84c' };
      document.documentElement.style.setProperty('--gold', goldMap[lang]);

   5. The video filter only works if <video> is a direct
      element — not inside an iframe
   6. Test all three languages after implementing
   7. If anything breaks, remove the <link> tag — fully reversible
   ===================================================== */