/* ============================================================
   light-theme.css — HOMEPAGE ONLY (index.html).
   All rules scoped to body.home-light. Do NOT link from course pages.
   Flips index.html from dark-neon to the light/white palette.
   ============================================================ */

/* 1 ── Scoped token redefinition: flips the bulk via var() */
body.home-light {
  --ink: #ffffff;
  --s1: #f7f7fb;
  --s2: #ffffff;
  --text: #16161d;
  --muted: #4a4a5a;
  --border2: #e6e6ef;
  --border: rgba(91, 78, 255, 0.30);
  background: #ffffff;
  color: #16161d;
}

/* 2 ── Kill the dark background scaffolding (index.html 563-564) */
body.home-light .mesh,
body.home-light .grid-bg { display: none; }

/* 3 ── Nav: frosted centered floating pill (Refined Electric, Geist) */
body.home-light nav {
  top: 16px; left: 0; right: 0;
  max-width: 1140px; margin: 0 auto;
  padding: 10px 12px 10px 22px;
  gap: 24px;
  border-radius: 999px;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid #e6e6ef;
  box-shadow: 0 12px 40px -12px rgba(23,23,60,0.16);
  font-family: 'Geist', 'Nunito', sans-serif;
}
body.home-light nav .logo {
  margin-left: 0; display: flex; align-items: center; gap: 10px;
  font-family: 'Geist', sans-serif; font-weight: 600; font-size: 16px;
  letter-spacing: -0.02em; text-decoration: none;
}
body.home-light nav .brand-glyph {
  width: 26px; height: 26px; border-radius: 8px;
  background: #0f0f17 url('/favicon.png?v=2') center/cover no-repeat; color: transparent;
  display: grid; place-items: center;
  font-weight: 700; font-size: 0; letter-spacing: -0.05em;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.10), 0 4px 16px -4px rgba(15,15,23,0.30);
}
body.home-light nav .brand-name { color: #16161d; }
body.home-light .nav-links { margin-right: auto; margin-left: 12px; display: flex; gap: 24px; }
body.home-light .nav-links a { color: #4b4b60; font-size: 14px; font-weight: 400; }
body.home-light .nav-links a:hover { color: #5b4eff; }
/* ghost "Увійти" (artifact .btn-back) */
body.home-light nav .nav-login {
  color: #4b4b60; text-decoration: none; font-size: 13px; font-weight: 500;
  padding: 8px 14px; border-radius: 999px; transition: color 0.2s;
}
body.home-light nav .nav-login:hover { color: #16161d; }
/* primary "Записатись" — SOLID electric pill (artifact .btn-primary), overrides .btn-main gradient */
body.home-light nav .nav-cta {
  padding: 12px 20px; font-size: 15px; font-weight: 500; border-radius: 999px;
  font-family: 'Geist', var(--font-body), sans-serif;
  background: #5b4eff; background-image: none;
  box-shadow: 0 0 0 1px #5b4eff, 0 8px 32px -8px rgba(91,78,255,0.30), inset 0 1px 0 rgba(255,255,255,0.18);
}
body.home-light nav .nav-cta:hover {
  background: #6d5cff;
  box-shadow: 0 0 0 1px #6d5cff, 0 12px 40px -8px rgba(91,78,255,0.30), inset 0 1px 0 rgba(255,255,255,0.22);
  transform: translateY(-1px);
}
/* nav-collapse: transparent on wide desktop (children flow in the pill as before) */
body.home-light .nav-collapse { display: contents; }

/* hamburger — hidden >1500px, shown ≤1500px (Liven-style: logo + burger only) */
body.home-light .nav-burger {
  display: none; width: 42px; height: 42px; margin-left: auto;
  border: 0; background: transparent; cursor: pointer; padding: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
body.home-light .nav-burger span {
  display: block; width: 24px; height: 2.5px; border-radius: 2px;
  background: #16161d; transition: transform 0.25s, opacity 0.2s;
}
body.home-light nav.nav-open .nav-burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
body.home-light nav.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
body.home-light nav.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ≤1500px — full-width pill with only logo + hamburger; links/login/CTA collapse
   into a dropdown panel the hamburger toggles (matches Liven's medium/mobile nav). */
@media (max-width: 1500px) {
  body.home-light nav {
    left: 16px; right: 16px; max-width: none; margin: 0;
    padding: 10px 14px 10px 18px;
  }
  body.home-light .nav-burger { display: flex; }
  body.home-light nav .nav-collapse {
    display: flex; flex-direction: column; align-items: stretch; gap: 4px;
    position: absolute; top: calc(100% + 10px); right: 6px;
    min-width: 240px; padding: 12px;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid #e6e6ef; border-radius: 18px;
    box-shadow: 0 22px 50px -12px rgba(23,23,60,0.22);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  }
  body.home-light nav.nav-open .nav-collapse { opacity: 1; visibility: visible; transform: none; }
  body.home-light .nav-collapse .nav-links {
    display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 2px 0;
  }
  body.home-light .nav-collapse .nav-links a {
    display: block; padding: 11px 12px; border-radius: 10px; font-size: 15px;
  }
  body.home-light .nav-collapse .nav-links a:hover { background: rgba(91,78,255,0.08); }
  body.home-light .nav-collapse .nav-login {
    padding: 11px 12px; border-radius: 10px; font-size: 15px;
    border-top: 1px solid #ececf3; margin-top: 2px;
  }
  body.home-light .nav-collapse .nav-cta { justify-content: center; margin-top: 6px; width: 100%; }
}

/* 4 ── Generic card elevation (cards must read on white) */
body.home-light .num-box,
body.home-light .review-card,
body.home-light .p-card,
body.home-light .course-card,
body.home-light .bundle-card {
  background: #ffffff;
  border: 1px solid #e6e6ef;
  box-shadow: 0 8px 24px rgba(22, 22, 40, 0.06);
}

/* 5 ── HERO (Refined Electric — centered) */
body.home-light #hero-wrap {
  background-color: #ffffff;
  background-image:
    radial-gradient(ellipse 40% 50% at 70% 20%, rgba(91, 78, 255, 0.10) 0%, transparent 70%),
    radial-gradient(ellipse 35% 40% at 15% 60%, rgba(0, 168, 142, 0.08) 0%, transparent 70%),
    radial-gradient(ellipse 20% 25% at 90% 70%, rgba(232, 88, 255, 0.06) 0%, transparent 70%);
}
body.home-light .h1-grad {
  background-image: linear-gradient(90deg, #2f6bff 0%, #00a88e 45%, #7c3aed 100%);
}

/* Page-wide heading/label refinements for the light palette
   (neon-cyan reads poorly on white → teal endpoint) */
body.home-light .section-label { color: #0a8f7a; }
body.home-light h2 .grad { background-image: linear-gradient(90deg, #5b4eff, #0a8f7a); }

/* 6 ── FEATS BAR (index.html 649-655) */
body.home-light .feats-bar {
  background: #f7f7fb;
  border-top: 1px solid #e6e6ef;
  border-bottom: 1px solid #e6e6ef;
}
body.home-light .feat-text strong { color: #16161d; }
body.home-light .feat-text { color: #4a4a5a; }
body.home-light .feat-ic.ic-p  { background: rgba(91, 78, 255, 0.08);  border: 1px solid rgba(91, 78, 255, 0.25); }
body.home-light .feat-ic.ic-t  { background: rgba(0, 229, 192, 0.08);  border: 1px solid rgba(0, 229, 192, 0.30); }
body.home-light .feat-ic.ic-o  { background: rgba(255, 107, 53, 0.08); border: 1px solid rgba(255, 107, 53, 0.28); }
body.home-light .feat-ic.ic-pk { background: rgba(232, 88, 255, 0.08); border: 1px solid rgba(232, 88, 255, 0.28); }

/* 7 ── SOCIAL PROOF (index.html 659-701) */
body.home-light #social { background: #f7f7fb; }
body.home-light .num-desc { color: #4a4a5a; }
body.home-light .review-card:hover { border-color: rgba(91, 78, 255, 0.35); }
body.home-light .reviewer-name { color: #16161d; }
body.home-light .reviewer-role,
body.home-light .review-text { color: #4a4a5a; }
/* .num-big keeps its gradient text — verified in QA (Task 8) */

/* 8 ── PORTFOLIO (index.html 705-808) */
body.home-light #portfolio { background: #ffffff; }
body.home-light .tabs { background: #f0f0f5; }
body.home-light .tab { color: #4a4a5a; }
body.home-light .tab.active {
  background: rgba(91, 78, 255, 0.10);
  border: 1px solid rgba(91, 78, 255, 0.30);
  color: #16161d;
}
body.home-light .p-card:hover { border-color: rgba(0, 229, 192, 0.45); }
body.home-light .p-card-title { color: #16161d; }
body.home-light .p-card-meta { color: #4a4a5a; }
body.home-light .p-tool {
  background: #f0f0f5;
  color: #4a4a5a;
  border: 1px solid #e6e6ef;
}

/* 9 ── FREE-COURSE (index.html 812-845) — CSS only, no markup/JS touched */
body.home-light #free-course { background: #f7f7fb; }
body.home-light .free-card {
  background: linear-gradient(135deg, rgba(0, 229, 192, 0.05), rgba(91, 78, 255, 0.05)), #ffffff;
  border: 1px solid rgba(0, 229, 192, 0.35);
  box-shadow: 0 18px 44px rgba(22, 22, 40, 0.10);
}
body.home-light .free-input {
  background: #ffffff;
  border: 1.5px solid #e6e6ef;
  color: #16161d;
}
body.home-light .free-input::placeholder { color: #8a8a9a; }
body.home-light .free-input:focus { border-color: #5b4eff; }
/* .btn-free keeps its neon gradient (legible as-is) */
/* fine print has an inline color:#fff (white-on-white) — override needs !important */
body.home-light .free-fine { color: #6a6a7a !important; }

/* 10 ── COMMUNITY (index.html 1038-1056) — CSS only */
body.home-light .community { background: #f7f7fb; }
body.home-light .community-textarea { background: #ffffff; }
body.home-light .community-thanks {
  background: rgba(0, 229, 192, 0.05);
  border: 1px solid rgba(0, 229, 192, 0.30);
  color: #0a8f7a;
}

/* 11 ── COURSES GRID (index.html 849-932) */
body.home-light #courses { background: #ffffff; }
body.home-light .course-card:hover {
  border-color: rgba(91, 78, 255, 0.35);
  box-shadow: 0 12px 40px rgba(22, 22, 40, 0.10);
}
body.home-light .course-card-title { color: #16161d; }
body.home-light .course-card-desc { color: #4a4a5a; }
body.home-light .course-card-price strong { color: #16161d; }
body.home-light .course-card-cta { color: #5b4eff; }

/* 12 ── BUNDLES (index.html 935-1004) */
body.home-light #bundles { background: #f7f7fb; }
body.home-light .bundle-card-title { color: #16161d; }
body.home-light .bundle-card-sub { color: #4a4a5a; }
body.home-light .bundle-card-list li { color: #4a4a5a; }
body.home-light .bundle-card-featured {
  background: linear-gradient(135deg, rgba(91, 78, 255, 0.06), #ffffff);
  border: 1px solid rgba(91, 78, 255, 0.30);
  box-shadow: 0 18px 48px rgba(22, 22, 40, 0.10);
}
/* .bundle-badge-top keeps its gradient */
body.home-light .btn-bundle {
  border: 1px solid #e6e6ef;
  color: #16161d;
}
body.home-light .btn-bundle:hover {
  background: rgba(91, 78, 255, 0.05);
  border-color: rgba(91, 78, 255, 0.30);
}
/* primary (filled) bundle button keeps its gradient + white text */
body.home-light .btn-bundle.btn-bundle-main {
  color: #ffffff;
  border-color: transparent;
}

/* Whole-heading gradients (mission/community use <h2 class="grad">, not a child span).
   Force the text-clip so it renders as gradient TEXT, not a gradient box behind dark text. */
body.home-light .grad {
  background-image: linear-gradient(90deg, #5b4eff, #0a8f7a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 13 ── MISSION (index.html 1010-1036) */
body.home-light .mission { background: #f7f7fb; }
body.home-light .mission-statement { color: #16161d; }
body.home-light .mission-statement strong { color: #5b4eff; }
body.home-light .mission-current { color: #16161d; }
body.home-light .mission-goal,
body.home-light .mission-progress-note { color: #4a4a5a; }
body.home-light .mission-photo img { box-shadow: 0 12px 32px rgba(22, 22, 40, 0.10); }
body.home-light .mission-progress-bar { background: #ececf3; }
/* .mission-progress-fill keeps its gradient */

/* 14 ── COMMUNITY sub-headline (index.html 1042) */
body.home-light .community-sub { color: #4a4a5a; }

/* 15 ── FOOTER (index.html 1059-1092; base bg hardcoded #161616) */
body.home-light .footer-card { background: #f0f0f5; color: #16161d; }
body.home-light .footer-card a { color: #16161d; }
body.home-light .footer-copy,
body.home-light .footer-address { color: rgba(22, 22, 40, 0.55); }
body.home-light .footer-legal-links a { color: rgba(22, 22, 40, 0.6); }
body.home-light .footer-legal-links a:hover,
body.home-light .footer-social-links a:hover { color: #5b4eff; }