/* ================================================================
   LEARNOVAKIDS.IN — SHARED STYLES
   Used by every page. Edit colours here to change the whole site.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Baloo+2:wght@400;600;700;800&display=swap');

:root {
  --yellow:  #FFD93D;
  --orange:  #FF6B35;
  --pink:    #FF6B9D;
  --purple:  #845EF7;
  --blue:    #339AF0;
  --teal:    #20C997;
  --green:   #51CF66;
  --red:     #FF6B6B;
  --dark:    #1A1A2E;
  --text:    #2D2D44;
  --muted:   #6B7280;
  --bg:      #F8F6FF;
  --white:   #FFFFFF;
  --shadow:  0 4px 20px rgba(0,0,0,0.08);
  --shadow-hover: 0 8px 32px rgba(0,0,0,0.15);
  --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-xl: 32px;

  /* Class accent colours */
  --c3: #FF6B35;
  --c4: #845EF7;
  --c5: #20C997;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Nunito',sans-serif; background:var(--bg); color:var(--text); overflow-x:hidden; }

/* ── NAV ── */
nav {
  background: var(--white);
  box-shadow: 0 2px 20px rgba(0,0,0,0.08);
  position: sticky; top: 0; z-index: 1000;
  padding: 0 2rem;
}
.nav-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; gap: 1rem; height: 70px; flex-wrap: wrap;
}
.logo {
  font-family:'Baloo 2',cursive; font-size:1.6rem; font-weight:800;
  background: linear-gradient(135deg,var(--purple),var(--pink));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  text-decoration:none; cursor:pointer; flex-shrink:0;
}
.logo span { background:linear-gradient(135deg,var(--orange),var(--yellow)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.nav-links { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.nav-btn {
  padding:.45rem 1.1rem; border-radius:999px;
  font-family:'Nunito',sans-serif; font-size:.92rem; font-weight:700;
  border:2px solid transparent; cursor:pointer; transition:all .2s; background:none; color:var(--text); text-decoration:none; display:inline-block;
}
.nav-btn:hover,.nav-btn.active { color:white; transform:translateY(-1px); }
.nav-btn.home   { background:var(--yellow); color:var(--dark); border-color:var(--yellow); }
.nav-btn.home:hover { background:var(--orange); border-color:var(--orange); color:white; }
.nav-btn.c3:hover,.nav-btn.c3.active { background:var(--c3); border-color:var(--c3); }
.nav-btn.c4:hover,.nav-btn.c4.active { background:var(--c4); border-color:var(--c4); }
.nav-btn.c5:hover,.nav-btn.c5.active { background:var(--c5); border-color:var(--c5); }

/* ── BREADCRUMB ── */
.breadcrumb { display:flex; align-items:center; gap:.5rem; font-size:.88rem; color:var(--muted); margin-bottom:1.5rem; flex-wrap:wrap; }
.breadcrumb a { color:var(--muted); text-decoration:none; transition:color .2s; }
.breadcrumb a:hover { color:var(--purple); }
.breadcrumb .sep { color:#ccc; }
.breadcrumb .cur { color:var(--text); font-weight:700; }

/* ── BACK BUTTON ── */
.back-btn {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem 1.2rem; background:white; border:2px solid #E5E7EB;
  border-radius:999px; font-family:'Nunito',sans-serif; font-weight:700;
  font-size:.9rem; cursor:pointer; color:var(--text); text-decoration:none;
  transition:all .2s; margin-bottom:1.5rem;
}
.back-btn:hover { border-color:var(--purple); color:var(--purple); }

/* ── HERO BANNER ── */
.page-hero {
  border-radius:var(--r-xl); padding:2.2rem 2.5rem;
  display:flex; align-items:center; gap:1.5rem; color:white; margin-bottom:2rem;
}
.page-hero .hero-icon { font-size:3.5rem; flex-shrink:0; }
.page-hero h1 { font-family:'Baloo 2',cursive; font-size:1.9rem; font-weight:800; margin-bottom:.2rem; }
.page-hero p  { opacity:.88; font-size:.98rem; }

/* ── CARDS & GRID ── */
.card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:1.4rem; }
.card {
  background:var(--white); border-radius:var(--r-lg);
  box-shadow:var(--shadow); cursor:pointer; transition:all .3s cubic-bezier(.34,1.56,.64,1);
  text-decoration:none; display:block; overflow:hidden; border:2px solid transparent;
}
.card:hover { transform:translateY(-6px) scale(1.02); box-shadow:var(--shadow-hover); }
.card-top { padding:1.4rem; display:flex; align-items:center; gap:1rem; }
.card-icon-wrap {
  width:58px; height:58px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center; font-size:1.9rem; flex-shrink:0;
}
.card-info h3 { font-family:'Baloo 2',cursive; font-size:1.15rem; font-weight:700; color:var(--dark); margin-bottom:.1rem; }
.card-info p  { font-size:.8rem; color:var(--muted); font-weight:600; }
.card-bottom { padding:.7rem 1.4rem; border-top:1px solid #F0F0F5; display:flex; align-items:center; justify-content:space-between; font-size:.83rem; color:var(--muted); font-weight:600; }
.card-arrow { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:transform .2s; }
.card:hover .card-arrow { transform:translateX(4px); }

/* ── CHAPTER ACCORDION ── */
.chapter-list { display:flex; flex-direction:column; gap:1rem; }
.chapter-card { background:var(--white); border-radius:var(--r-md); box-shadow:var(--shadow); overflow:hidden; }
.chapter-card:hover { box-shadow:var(--shadow-hover); }
.chapter-header { padding:1.2rem 1.4rem; display:flex; align-items:center; gap:1rem; cursor:pointer; user-select:none; }
.chapter-num { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.88rem; font-weight:800; color:white; flex-shrink:0; }
.chapter-title { font-weight:800; font-size:1rem; color:var(--dark); flex:1; }
.chapter-chevron { font-size:1.1rem; color:var(--muted); transition:transform .3s; }
.chapter-card.open .chapter-chevron { transform:rotate(180deg); }
.chapter-body { display:none; padding:0 1.4rem 1.4rem; }
.chapter-card.open .chapter-body { display:block; }
.resource-links { display:flex; flex-wrap:wrap; gap:.7rem; }
.res-btn {
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.5rem 1rem; border-radius:999px;
  font-family:'Nunito',sans-serif; font-size:.86rem; font-weight:700;
  cursor:pointer; text-decoration:none; transition:all .2s; border:2px solid transparent;
}
.res-btn:hover { transform:translateY(-2px); filter:brightness(1.08); }
.res-ws   { background:#FFF3CD; color:#856404; border-color:#FFD93D; }
.res-info { background:#D1ECF1; color:#0C5460; border-color:#17A2B8; }
.res-quiz { background:#D4EDDA; color:#155724; border-color:#28A745; }
.res-vid  { background:#F8D7DA; color:#721C24; border-color:#FF6B6B; }
.res-note { background:#E2D9F3; color:#4B2D8F; border-color:#845EF7; }
.res-act  { background:#FFE4D6; color:#9A3412; border-color:#FF6B35; }

/* ── CONTENT PAGE (worksheet / quiz / notes etc.) ── */
.content-wrap { max-width:860px; margin:0 auto; padding:2.5rem 2rem 4rem; }
.content-box {
  background:var(--white); border-radius:var(--r-xl);
  box-shadow:var(--shadow); overflow:hidden;
}
.content-box-header {
  padding:2rem 2.5rem; color:white;
  display:flex; align-items:center; gap:1.2rem;
}
.content-box-header .ch-icon { font-size:3rem; }
.content-box-header h2 { font-family:'Baloo 2',cursive; font-size:1.7rem; font-weight:800; margin-bottom:.15rem; }
.content-box-header p { opacity:.88; font-size:.95rem; }
.content-body { padding:2.5rem; }

/* Worksheet specific */
.ws-section { margin-bottom:2.2rem; }
.ws-section:last-child { margin-bottom:0; }
.ws-section-title {
  font-family:'Baloo 2',cursive; font-size:1.1rem; font-weight:800;
  color:var(--dark); margin-bottom:1rem; display:flex; align-items:center; gap:.5rem;
  padding-bottom:.5rem; border-bottom:2px dashed #E5E7EB;
}
.ws-q { margin-bottom:1rem; font-size:.97rem; line-height:1.6; }
.ws-q span { font-weight:700; }
.blank { display:inline-block; min-width:120px; border-bottom:2px solid var(--text); margin:0 4px; }
.ws-options { margin:.4rem 0 .4rem 1.5rem; list-style:none; }
.ws-options li { margin:.3rem 0; display:flex; align-items:center; gap:.6rem; }
.ws-options li::before { content:'○'; font-size:1.1rem; color:var(--muted); }
.ws-draw-box {
  border:2px dashed #CCC; border-radius:var(--r-sm);
  min-height:120px; display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:.9rem; margin-top:.5rem; font-style:italic;
}
.match-table { width:100%; border-collapse:collapse; font-size:.95rem; }
.match-table td { padding:.6rem .8rem; border:1px solid #E5E7EB; }
.match-table td:first-child { font-weight:700; width:45%; }
.match-table td:last-child { color:var(--muted); }

/* Quiz specific */
.quiz-q { background:#F8F6FF; border-radius:var(--r-md); padding:1.2rem 1.4rem; margin-bottom:1.2rem; }
.quiz-q .q-text { font-weight:800; font-size:.97rem; margin-bottom:.8rem; }
.quiz-options { display:flex; flex-direction:column; gap:.5rem; }
.quiz-opt {
  padding:.6rem 1rem; border-radius:var(--r-sm); border:2px solid #E5E7EB;
  cursor:pointer; transition:all .2s; font-size:.9rem; background:white;
  font-family:'Nunito',sans-serif; text-align:left; font-weight:600;
}
.quiz-opt:hover { border-color:var(--purple); background:#F3F0FF; }
.quiz-opt.correct { background:#D4EDDA; border-color:#28A745; color:#155724; }
.quiz-opt.wrong   { background:#F8D7DA; border-color:#FF6B6B; color:#721C24; }
.quiz-result { display:none; padding:.6rem 1rem; border-radius:var(--r-sm); font-weight:700; font-size:.9rem; margin-top:.6rem; }
.quiz-result.show { display:block; }
.quiz-result.pass { background:#D4EDDA; color:#155724; }
.quiz-result.fail { background:#F8D7DA; color:#721C24; }
.quiz-score-bar { background:#F8F6FF; border-radius:var(--r-lg); padding:1.5rem 2rem; text-align:center; margin-top:1.5rem; display:none; }
.quiz-score-bar.show { display:block; }
.quiz-score-bar .score-num { font-family:'Baloo 2',cursive; font-size:3rem; font-weight:800; color:var(--purple); }
.quiz-score-bar p { color:var(--muted); font-size:.95rem; margin-top:.3rem; }
.quiz-submit-btn {
  margin-top:1.5rem; padding:.8rem 2.5rem; border-radius:999px;
  background:var(--purple); color:white; border:none; font-family:'Nunito',sans-serif;
  font-size:1rem; font-weight:800; cursor:pointer; transition:all .2s;
}
.quiz-submit-btn:hover { transform:translateY(-2px); filter:brightness(1.1); }

/* Infographic */
.info-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1.2rem; }
.info-card { border-radius:var(--r-md); padding:1.4rem; text-align:center; }
.info-card .icon { font-size:2.5rem; margin-bottom:.6rem; }
.info-card h4 { font-family:'Baloo 2',cursive; font-size:1.05rem; font-weight:700; margin-bottom:.4rem; }
.info-card p  { font-size:.88rem; line-height:1.5; }

/* Notes */
.notes-section { margin-bottom:1.8rem; }
.notes-section h3 { font-family:'Baloo 2',cursive; font-size:1.15rem; font-weight:800; color:var(--dark); margin-bottom:.6rem; border-left:4px solid var(--purple); padding-left:.7rem; }
.notes-section p { font-size:.96rem; line-height:1.7; margin-bottom:.5rem; }
.notes-section ul { margin:.5rem 0 .5rem 1.4rem; }
.notes-section ul li { font-size:.95rem; line-height:1.6; margin-bottom:.3rem; }
.highlight-box { background:#F3F0FF; border-radius:var(--r-sm); padding:1rem 1.2rem; border-left:4px solid var(--purple); margin:.8rem 0; font-size:.93rem; line-height:1.6; }

/* ==========================
   FOOTER
   ========================== */

.site-footer {
  background: #1A1A2E;
  color: rgba(255,255,255,0.85);
  margin-top: 5rem;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 2rem;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 3rem;
}

.footer-brand h3,
.footer-links h4,
.footer-contact h4 {
  color: white;
  margin-bottom: 1rem;
  font-family: 'Baloo 2', cursive;
}

.footer-brand p {
  line-height: 1.7;
  max-width: 400px;
}

.footer-links,
.footer-contact {
  display: flex;
  flex-direction: column;
}

.footer-links a,
.footer-contact a {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  margin-bottom: 0.7rem;
  transition: color 0.2s ease;
}

.footer-links a:hover,
.footer-contact a:hover {
  color: #FFD93D;
}

.footer-bottom {
  text-align: center;
  padding: 1.2rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.6);
  font-size: 0.9rem;
}

/* Mobile */

@media (max-width: 768px) {
  .footer-container {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2rem;
  }

  .footer-brand p {
    margin: 0 auto;
  }
}

/* ── UTILITY ── */
.page-wrap { max-width:1200px; margin:0 auto; padding:2.5rem 2rem 4rem; }
@media(max-width:600px) {
  .nav-inner { height:auto; padding:.7rem 0; flex-wrap:wrap; gap:.5rem; }
  .page-hero  { flex-direction:column; text-align:center; padding:1.5rem; }
  .card-grid  { grid-template-columns:1fr; }
  .content-body { padding:1.5rem; }
}