/* JewishSong.org — Shared Base CSS */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ═══════════════════════════════════════════════════════════════════════
     M3 TONAL PALETTE — designed by Claude Design 2026-05-23 night
     Anchor: Rose Peach Mist #FBE6E1 (surface) + Nunito (typography)
     Six ramps · 37 semantic tokens · Nunito-400 AAA contrast verified.
     Legacy aliases at bottom — existing HTML stays working.
     ═══════════════════════════════════════════════════════════════════════ */

  /* M3 PRIMARY · Sunshine Gold (H≈60) */
  --p-0:#000;     --p-10:#281900; --p-20:#422C00; --p-30:#5F4100;
  --p-40:#7E5700; --p-50:#9E6E00; --p-60:#BE8700; --p-70:#DEA21F;
  --p-80:#FFB951; --p-90:#FFDDB0; --p-95:#FFEED9; --p-99:#FFFBF6; --p-100:#FFF;

  /* M3 SECONDARY · Cherry / Pomegranate (H≈5) */
  --s-0:#000;     --s-10:#410008; --s-20:#690014; --s-30:#930023;
  --s-40:#B72F3C; --s-50:#DC4253; --s-60:#FA5E6E; --s-70:#FF8A95;
  --s-80:#FFB3B9; --s-90:#FFDADC; --s-95:#FFEDEE; --s-99:#FFFBFA; --s-100:#FFF;

  /* M3 TERTIARY · Talit / Hanukkah Blue (H≈230) */
  --t-0:#000;     --t-10:#001847; --t-20:#002A71; --t-30:#003E9D;
  --t-40:#1956C1; --t-50:#3F70E3; --t-60:#618BFF; --t-70:#87A6FF;
  --t-80:#AEC2FF; --t-90:#D9E2FF; --t-95:#EDF0FF; --t-99:#FEFBFF; --t-100:#FFF;

  /* M3 NEUTRAL · Warm Rose-Taupe (N-95 = locked surface) */
  --n-0:#000;     --n-10:#221915; --n-20:#38302B; --n-30:#504640;
  --n-40:#685D56; --n-50:#82756E; --n-60:#9D8F88; --n-70:#B9AAA2;
  --n-80:#D5C5BC; --n-90:#F2E0D5; --n-95:#FBE6E1; --n-99:#FFFBF8; --n-100:#FFF;

  /* M3 NEUTRAL VARIANT · Tinted Outlines */
  --nv-0:#000;     --nv-10:#2A1812; --nv-20:#432B23; --nv-30:#5C4239;
  --nv-40:#765A50; --nv-50:#917267; --nv-60:#AC8C81; --nv-70:#C8A69B;
  --nv-80:#E5C0B5; --nv-90:#F4D6C9; --nv-95:#FFEDE5; --nv-99:#FFFBF8; --nv-100:#FFF;

  /* M3 ERROR · Persimmon Disney-warm (H≈20, distinct from cherry) */
  --e-0:#000;     --e-10:#410B00; --e-20:#691900; --e-30:#932900;
  --e-40:#BC3B00; --e-50:#DE5022; --e-60:#FF6A40; --e-70:#FF8A66;
  --e-80:#FFB59A; --e-90:#FFDBCD; --e-95:#FFEDE5; --e-99:#FFFBF8; --e-100:#FFF;

  /* M3 SEMANTIC ROLES */
  --surface:                       var(--n-95);
  --surface-variant:               var(--nv-90);
  --surface-container-lowest:      var(--n-100);
  --surface-container-low:         var(--n-99);
  --surface-container:             var(--n-95);
  --surface-container-high:        var(--n-90);
  --surface-container-highest:     var(--n-80);
  --on-surface:                    var(--n-10);
  --on-surface-variant:            var(--nv-30);

  --primary:                       var(--p-40);
  --on-primary:                    var(--n-100);
  --primary-container:             var(--p-90);
  --on-primary-container:          var(--p-10);

  --secondary:                     var(--s-40);
  --on-secondary:                  var(--n-100);
  --secondary-container:           var(--s-90);
  --on-secondary-container:        var(--s-10);

  --tertiary:                      var(--t-40);
  --on-tertiary:                   var(--n-100);
  --tertiary-container:            var(--t-90);
  --on-tertiary-container:         var(--t-10);

  --outline:                       var(--nv-50);
  --outline-variant:               var(--nv-80);

  --inverse-surface:               var(--n-20);
  --inverse-on-surface:            var(--n-95);
  --inverse-primary:               var(--p-80);

  --scrim:                         rgb(0 0 0 / .32);

  --error:                         var(--e-40);
  --on-error:                      var(--n-100);
  --error-container:               var(--e-90);
  --on-error-container:            var(--e-10);

  /* NUNITO-400 AAA INLINE-TEXT TIER
     Use for inline links / accent text on surface (Nunito 400 strokes are lighter, need AAA).
     Do NOT use --primary/--secondary/--tertiary for body text on surface — they hit AA only. */
  --primary-text:                  var(--p-30);
  --secondary-text:                var(--s-30);
  --tertiary-text:                 var(--t-30);
  --error-text:                    var(--e-20);

  /* LEGACY ALIASES — keep existing HTML/CSS working */
  --cream:        var(--surface);
  --cream-dark:   var(--n-90);
  --amber:        var(--p-60);
  --amber-light:  var(--p-70);
  --amber-pale:   var(--p-95);
  --amber-deep:   var(--p-40);
  --gold:         var(--p-40);
  --gold-sunshine: var(--p-60);
  --pale-gold:    var(--p-95);
  --cherry:       #E63946;
  --cherry-deep:  var(--s-40);
  --sky:          #60A5FA;
  --spring-green: #10B981;
  --bubblegum:    #F472B6;
  --rust:         #E63946;
  --warm-brown:   #E63946;
  --text-main:    var(--on-surface);
  --text-mid:     var(--on-surface-variant);
  --text-light:   var(--n-50);
  --text-muted:   var(--n-60);
  --border:       var(--outline-variant);
  --border-light: var(--nv-90);
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Nunito', sans-serif;
  background-color: var(--cream);
  color: var(--text-main);
  line-height: 1.7;
  font-size: 16px;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 2rem; }
.container--narrow { max-width: 860px; margin: 0 auto; padding: 0 2rem; }

/* ── Nav ── */
nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251,230,225,0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-light);
  padding: 1rem 0;
}
nav .container {
  display: flex; align-items: center;
  justify-content: space-between; gap: 2rem;
  flex-wrap: wrap;
}
.nav-logo { font-size: 1.05rem; font-weight: 900; color: var(--text-main); letter-spacing: -0.01em; }
.nav-logo em { font-style: normal; color: var(--amber); }
.nav-links { display: flex; gap: 1.8rem; list-style: none; flex-wrap: wrap; }
.nav-links a { font-size: 0.85rem; font-weight: 600; color: var(--text-mid); transition: color 0.2s; }
.nav-links a:hover, .nav-links a.active { color: var(--amber); }

.nav-toggle { display: none; }
.nav-burger {
  display: none;
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--text-main);
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  user-select: none;
  transition: background 0.2s;
}
.nav-burger:hover { background: var(--amber-pale); }
.nav-burger .nav-burger-close { display: none; }

@media (max-width: 760px) {
  nav .container { gap: 1rem; }
  .nav-burger { display: inline-block; }
  .nav-links {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    gap: 0;
    margin-top: 0.8rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--border-light);
  }
  .nav-links li { width: 100%; }
  .nav-links a {
    display: block;
    padding: 0.8rem 0.4rem;
    font-size: 0.95rem;
    border-radius: 6px;
    transition: background 0.15s, color 0.2s;
  }
  .nav-links a:hover { background: var(--amber-pale); }
  .nav-toggle:checked ~ .nav-links { display: flex; }
  .nav-toggle:checked ~ .nav-burger .nav-burger-open { display: none; }
  .nav-toggle:checked ~ .nav-burger .nav-burger-close { display: inline; }
}

/* ── Buttons ── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--amber); color: var(--text-main);
  font-family: 'Nunito', sans-serif;
  font-size: 0.9rem; font-weight: 800;
  padding: 0.7rem 1.6rem; border-radius: 6px;
  border: none; cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
.btn-primary:hover { background: var(--cherry-deep); color: #fff; transform: translateY(-1px); }
.btn-secondary {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: transparent; color: var(--amber);
  font-family: 'Nunito', sans-serif;
  font-size: 0.9rem; font-weight: 700;
  padding: 0.7rem 1.6rem; border-radius: 6px;
  border: 2px solid var(--amber);
  transition: background 0.2s, color 0.2s;
}
.btn-secondary:hover { background: var(--amber-pale); }
.btn-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.btn-row--center { justify-content: center; }

/* ── Video embed ── */
.video-wrap { position: relative; width: 100%; padding-bottom: 56.25%; background: #000; }
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; display: block; }
.video-frame {
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(230,57,70,0.18);
  border: 2px solid var(--border);
}

/* ── Typography ── */
.section-label {
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 0.5rem;
}
.section-num {
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 0.4rem;
}
h1 {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 900; line-height: 1.15;
  color: var(--text-main); letter-spacing: -0.02em;
}
/* Canon: headings NEVER italic. <em> inside heading = accent color only, upright weight. */
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em { font-style: normal; font-weight: inherit; color: var(--amber); }
h1, h2, h3, h4, h5, h6 { font-style: normal; }
h2 {
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 900; line-height: 1.25;
  color: var(--text-main); letter-spacing: -0.01em;
}
h3 { font-size: 1.15rem; font-weight: 800; color: var(--text-main); }
p { color: var(--text-mid); line-height: 1.75; margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

/* ── Song cards ── */
.songs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.song-card {
  display: flex; flex-direction: column;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
  cursor: pointer;
}
.song-card:hover {
  box-shadow: 0 8px 32px rgba(230,57,70,0.12);
  transform: translateY(-2px);
  border-color: var(--amber);
}
.song-category { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); margin-bottom: 0.4rem; }
.song-title { font-size: 1.1rem; font-weight: 900; color: var(--text-main); margin-bottom: 0.2rem; }
.song-subtitle { font-size: 0.8rem; color: var(--text-muted); font-weight: 600; margin-bottom: 0.8rem; }
.song-desc { font-size: 0.88rem; color: var(--text-mid); line-height: 1.6; flex: 1; margin-bottom: 1rem; }
.song-link { font-size: 0.82rem; font-weight: 700; color: var(--amber); margin-top: auto; }

.song-card--soon {
  opacity: 0.72;
  cursor: default;
}
.song-card--soon:hover {
  box-shadow: none;
  transform: none;
  border-color: var(--border);
}
.song-card--soon .song-link {
  color: var(--text-muted);
  font-weight: 700;
}
.coming-soon-pill {
  display: inline-block;
  font-size: 0.66rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted);
  background: var(--cream-dark);
  border: 1px solid var(--border);
  padding: 0.18rem 0.55rem;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

/* ── Footer (cherry-deep AA-safe bg, white text 5.94:1) ── */
footer {
  background: var(--cherry-deep);
  padding: 3rem 0 2rem;
  color: #fff;
}
.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255,255,255,0.22);
}
.footer-brand p { font-size: 1rem; color: #fff; margin-top: 0.7rem; line-height: 1.65; font-weight: 600; }
.footer-col h4 { font-size: 0.95rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber-light); margin-bottom: 0.9rem; }
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 0.55rem; }
.footer-col ul a { font-size: 1.02rem; color: #fff; transition: color 0.2s; font-weight: 700; }
.footer-col ul a:hover { color: var(--amber-light); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.footer-bottom p { font-size: 0.92rem; color: #fff; margin: 0; font-weight: 600; }
footer .nav-logo { color: #fff; font-weight: 900; }
footer .nav-logo em { color: var(--amber-light); }
@media (max-width: 700px) {
  .footer-top { grid-template-columns: 1fr; gap: 1.5rem; }
  .footer-bottom { flex-direction: column; text-align: center; }
}