/* ══════════════════════════════════════════════════════
   YUVATHA HOMEPAGE — Dark Navy + Alternating Theme
   Loaded only by index.html, after styles.css.

   Alternating layout:
     Hero         → always dark
     Trust Bar    → dark slate
     About        → LIGHT (white)
     Services     → dark navy
     Programs     → LIGHT (off-white)
     Gallery      → always dark
     Events       → LIGHT (off-white)
     CTA + Footer → always dark
════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────
   1. LIGHT SECTION TOKEN OVERRIDES
   (cascade: child elements using var() pick these up)
──────────────────────────────────────────────────── */
.about-section,
.programs-section,
.events-section {
  --ink:        #081B29;
  --ink-2:      #243B53;
  --muted:      #4A6480;
  --paper:      #FFFFFF;
  --cream:      #F4F7FA;
  --aqua:       #E8F5F0;
  --border:     rgba(36, 59, 83, 0.1);
  --border-mid: rgba(36, 59, 83, 0.2);
}

/* ────────────────────────────────────────────────────
   3. CRITICAL COLOR FIXES
   styles.css uses `color: var(--paper)` for white text
   in dark elements — now --paper is dark, so we must
   explicitly restore white where backgrounds are dark.
──────────────────────────────────────────────────── */
.hero                               { color: #FFFFFF; }
.btn-primary                        { color: #FFFFFF; }
.service-card:hover .service-icon-wrap { color: #FFFFFF; }
.cta-band-new                       { color: #FFFFFF; }
.floating-note                      { color: #FFFFFF; }
.footer h3, .footer strong          { color: #FFFFFF; }
.gallery-section .section-title.light,
.cta-band-new .section-title.light  { color: #FFFFFF; }

/* ────────────────────────────────────────────────────
   4. NAVIGATION
──────────────────────────────────────────────────── */
.topbar {
  background: rgba(8, 27, 41, 0.85);
  border-bottom-color: rgba(36, 59, 83, 0.25);
}
.topbar.scrolled {
  background: rgba(8, 27, 41, 0.97);
  border-bottom-color: #243B53;
  box-shadow: 0 2px 20px rgba(0,0,0,0.36), 0 1px 0 rgba(36,59,83,0.4);
}

/* Brand name — white on dark nav */
.brand-copy strong { color: #FFFFFF; }
.brand-copy small  { color: var(--muted); }

.nav-link          { color: #D9E2EC; }
.nav-link:hover    { color: #8CC63F; background: rgba(22, 47, 74, 0.65); }

/* Desktop hamburger (hidden, but still styled) */
.nav-toggle        { background: #102A43; border-color: #243B53; }
.nav-toggle:hover  { background: #162F4A; }
.nav-toggle span   { background: #8CC63F; }

/* Mobile nav */
@media (max-width: 860px) {
  .nav-toggle {
    background: #009845;
    border-color: #009845;
    box-shadow: 0 4px 16px rgba(0,152,69,0.3);
  }
  .nav-toggle span { background: #FFFFFF; }   /* white bars on green toggle */

  .nav-links {
    background: rgba(8, 27, 41, 0.98);
    border-color: #243B53;
  }
  .nav-links .nav-link        { color: #D9E2EC; }
  .nav-links .nav-link:hover  { color: #8CC63F; background: rgba(22,47,74,0.8); }
}

/* ────────────────────────────────────────────────────
   5. HERO
──────────────────────────────────────────────────── */
.accent-word { color: #8CC63F; }

/* Bottom gradient fades into the dark trust bar */
.hero::after {
  background: linear-gradient(180deg, transparent, rgba(8,27,41,0.97));
}

.hero-badge {
  background: rgba(0, 152, 69, 0.15);
  border-color: rgba(0, 152, 69, 0.35);
}

.stat:hover { border-color: rgba(0,152,69,0.3); }
.stat strong { color: #8CC63F; }

/* ────────────────────────────────────────────────────
   6. KICKER PILLS
──────────────────────────────────────────────────── */
/* Default: dark section pill (light text) */
.kicker-pill {
  background: rgba(0, 152, 69, 0.12);
  border-color: rgba(0, 152, 69, 0.28);
  color: #8CC63F;
}
.kicker-pill::before          { background: #F4B942; }
.kicker-pill.kicker-light     { background: rgba(0,152,69,0.14); border-color: rgba(0,152,69,0.32); color: #8CC63F; }
.kicker-pill.kicker-light::before { background: #F4B942; }

/* Light section pills (dark text on white/off-white bg) */
.about-section    .kicker-pill,
.programs-section .kicker-pill,
.events-section   .kicker-pill {
  background: rgba(0, 152, 69, 0.09);
  border-color: rgba(0, 152, 69, 0.25);
  color: #007835;
}
.about-section    .kicker-pill::before,
.programs-section .kicker-pill::before,
.events-section   .kicker-pill::before { background: #009845; }

/* ────────────────────────────────────────────────────
   7. BUTTONS
──────────────────────────────────────────────────── */
.btn-primary       { box-shadow: 0 8px 24px rgba(0,152,69,0.28); }
.btn-primary:hover { box-shadow: 0 16px 36px rgba(0,152,69,0.38); }

/* Outline: adapt to dark/light context via scoped vars */
.btn-outline       { color: var(--navy); border-color: var(--border-mid); }
.btn-outline:hover { background: var(--aqua); border-color: rgba(0,152,69,0.4); }

/* ────────────────────────────────────────────────────
   8. TRUST BAR (dark slate)
──────────────────────────────────────────────────── */
.trust-bar         { background: #102A43; border-bottom-color: #243B53; }
.trust-label       { color: #8BA3B8; }
.trust-item        { color: #D9E2EC; opacity: 1; }
.trust-divider     { background: #243B53; }

/* ────────────────────────────────────────────────────
   9. ABOUT SECTION  — LIGHT
──────────────────────────────────────────────────── */
.about-section { background: #FFFFFF; overflow: hidden; }

.about-section .section-bg-accent {
  background: radial-gradient(circle, rgba(0,152,69,0.05) 0%, transparent 68%);
}

.about-section .about-check {
  background: linear-gradient(135deg, #E8F5F0, #C8EDDB);
  color: #009845;
}

/* Photo panel border between stacked images */
.about-section .photo-panel.small { border-color: #F4F7FA; }

.photo-panel.large::after {
  background: linear-gradient(180deg, transparent 55%, rgba(8,27,41,0.28) 100%);
}

/* Floating note stays dark regardless of section */
.floating-note {
  background: linear-gradient(135deg, #041120 0%, #007a38 100%);
  border-color: rgba(0,152,69,0.3);
}
.floating-note::before {
  background: linear-gradient(135deg, rgba(0,152,69,0.1) 0%, transparent 60%);
}
.floating-note-icon { background: rgba(245,158,11,0.2); color: #F4B942; }
.floating-note strong { color: #F4B942; }
.floating-note span   { color: rgba(255,255,255,0.72); }

/* ────────────────────────────────────────────────────
   10. SERVICES SECTION  — DARK
──────────────────────────────────────────────────── */
.services-section {
  background: linear-gradient(180deg, #0D2137 0%, #081B29 100%);
}

/* Section header text (dark section, explicit white) */
.services-section .section-title { color: #FFFFFF; }
.services-section .section-body  { color: #8BA3B8; }

.service-card         { background: #0F2540; border-color: #243B53; }
.service-card:hover   { border-color: rgba(0,152,69,0.4); }

.service-card::before { background: linear-gradient(135deg, transparent 0%, rgba(0,152,69,0.06) 100%); }
.service-card::after  { background: linear-gradient(90deg, #009845, #F4B942); }

.service-num          { color: rgba(36,59,83,0.65); }

.service-icon-wrap    { background: linear-gradient(135deg, #162F4A, #1A3D5C); color: #8CC63F; }
.service-card:hover .service-icon-wrap { background: linear-gradient(135deg, #009845, #007835); }

.service-card h3      { color: #FFFFFF; }
.service-card p       { color: #8BA3B8; }
.service-link         { color: #8CC63F; }
.service-link:hover   { color: #F4B942; }

/* ────────────────────────────────────────────────────
   11. PROGRAMS SECTION  — LIGHT
──────────────────────────────────────────────────── */
.programs-section { background: #F0F5FA; }

/* Cards sit on off-white section */
.program {
  background: #FFFFFF;
  border-color: rgba(36,59,83,0.1);
  box-shadow: 0 2px 14px rgba(36,59,83,0.07);
}
.program:hover {
  border-color: rgba(0,152,69,0.2);
  box-shadow: 0 14px 40px rgba(36,59,83,0.12);
}

.program-tag      { color: #009845; }
.program-list li svg { color: #009845; }

/* ────────────────────────────────────────────────────
   12. GALLERY SECTION  — always dark
──────────────────────────────────────────────────── */
.gallery-section {
  background: linear-gradient(175deg, #0A1E30 0%, #081B29 80%, #060F1A 100%);
}
.gallery-section::before {
  background: linear-gradient(90deg, transparent, rgba(0,152,69,0.5), transparent);
}
.gallery-item { background: #0A1E30; }
.gallery-overlay {
  background: linear-gradient(to top, rgba(8,27,41,0.88) 0%, rgba(8,27,41,0.35) 45%, transparent 100%);
}
.gallery-item:hover .play { background: #F4B942; }

/* ────────────────────────────────────────────────────
   13. EVENTS SECTION  — LIGHT
──────────────────────────────────────────────────── */
.events-section { background: #F0F5FA; }

/* Section header */
.events-section .section-title { color: #081B29; }

.event-card-new {
  background: #FFFFFF;
  border-color: rgba(36,59,83,0.1);
  box-shadow: 0 2px 14px rgba(36,59,83,0.06);
}
.event-card-new:hover {
  border-color: rgba(0,152,69,0.18);
  box-shadow: 0 14px 40px rgba(36,59,83,0.11);
}

.event-body-new h3    { color: #081B29; }
.event-body-new p     { color: #4A6480; }
.event-date-new       { color: #6B8299; }
.event-chip           { color: #009845; }

.event-img-overlay {
  background: linear-gradient(180deg, rgba(8,27,41,0.04) 0%, rgba(8,27,41,0.52) 100%);
}

.event-read-more       { color: #009845; }
.event-read-more:hover { color: #F4B942; }

/* ────────────────────────────────────────────────────
   14. CTA BAND  — always dark
──────────────────────────────────────────────────── */
.cta-band-new { background: #060F1A; }

.cta-orb-1 { background: radial-gradient(circle, rgba(0,80,160,0.3)  0%, transparent 70%); }
.cta-orb-2 { background: radial-gradient(circle, rgba(0,152,69,0.18) 0%, transparent 70%); }
.cta-orb-3 { background: radial-gradient(circle, rgba(0,80,160,0.12) 0%, transparent 70%); }

.cta-grid-lines {
  background-image:
    linear-gradient(rgba(0,152,69,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,152,69,0.05) 1px, transparent 1px);
}

.cta-band-stats {
  background: rgba(255,255,255,0.04);
  border-color: rgba(0,152,69,0.18);
}

.cta-stat-num {
  background: linear-gradient(135deg, #F4B942, #8CC63F);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cta-stat-divider { background: rgba(0,152,69,0.16); }

/* ────────────────────────────────────────────────────
   15. FOOTER  — always dark
──────────────────────────────────────────────────── */
.footer { background: #040C15; }

.footer-accent-line {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,152,69,0.6) 25%,
    rgba(140,198,63,0.88) 50%,
    rgba(0,152,69,0.6) 75%,
    transparent 100%);
}
.footer-dot-bg {
  background-image: radial-gradient(rgba(0,152,69,0.06) 1px, transparent 1px);
}

.footer-nav-col a::before         { background: rgba(0,152,69,0.45); }
.footer-nav-col a:hover           { color: #8CC63F; }
.footer-nav-col a:hover::before   { background: #F4B942; }
.footer-contact-list a:hover      { color: #8CC63F; }
.footer a:hover                   { color: #8CC63F; }

.social-link:hover {
  background: rgba(0,152,69,0.18);
  border-color: rgba(0,152,69,0.38);
  color: #8CC63F;
}