/* ==========================================================================
   Jozi Pre-School — Shared Games Stylesheet
   Used by: free-games.html + every category page
   ========================================================================== */

* { box-sizing: border-box; margin:0; padding:0; }
html { scroll-behavior: smooth; }
:root {
  --purple:#7C3AED; --purple-light:#EDE9FE; --blue:#2B6CB0; --orange:#ED7D31;
  --grey:#718096; --dark:#2D3748;
  --cat-body:#7C3AED; --cat-body-dark:#5B21B6; --cat-body-rgb:124,58,237;
  --cat-world:#38A169; --cat-world-dark:#276749; --cat-world-rgb:56,161,105;
  --cat-numbers:#2B6CB0; --cat-numbers-dark:#1A4E8A; --cat-numbers-rgb:43,108,176;
  --cat-life:#ED7D31; --cat-life-dark:#C05621; --cat-life-rgb:237,125,49;
  --cat-language:#805AD5; --cat-language-dark:#553C9A; --cat-language-rgb:128,90,213;
}
body {
  font-family: 'Nunito', sans-serif;
  background: #E8F4FD;
  color: #2D3748;
  padding: 0 0 60px 0;
}

/* ---------- top bar ---------- */
.top-bar {
  background:#fff; padding:10px 28px; display:flex; align-items:center; justify-content:space-between;
  box-shadow:0 2px 12px rgba(0,0,0,0.08); position:sticky; top:0; z-index:100; flex-wrap:wrap; gap:10px;
}
.top-bar .nav-logo { display:flex; align-items:center; flex:0 0 auto; }
.top-bar .nav-logo img { height:44px; width:auto; object-fit:contain; }
.top-bar .nav-menu { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.nav-btn { padding:10px 18px; border-radius:100px; font-family:'Nunito',sans-serif; font-weight:800; font-size:0.85rem; text-decoration:none; border:none; cursor:pointer; transition:all 0.15s; color:var(--dark); background:transparent; display:inline-flex; align-items:center; gap:6px; }
.nav-btn:hover { background:#F3F4F6; }
.nav-btn.active { background:var(--purple-light); color:var(--purple); }
.nav-btn.login { background:var(--purple); color:#fff; padding:10px 22px; box-shadow:0 3px 12px rgba(124,58,237,0.3); }
.nav-btn.login:hover { background:#6D28D9; }

/* ---------- banner header ---------- */
.banner-wrap {
  position:relative;
  background-image: url('../images/banner.jpg');
  background-size: cover;
  background-position: center 8%;
  overflow:hidden;
}
.banner-wrap::before {
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(237,239,242,0.88) 78%, #EDEFF2 100%);
}
.page-header { position:relative; z-index:1; text-align:center; padding: 60px 20px 30px 20px; }
.page-header h1 {
  font-family:'Fredoka One', cursive; font-size:2.4rem; color:#1A365D; margin-bottom:10px;
  text-shadow: 0 2px 14px rgba(255,255,255,0.8);
}
.page-header p { max-width:640px; margin:0 auto; color:#4A5568; font-weight:600; font-size:1.02rem; line-height:1.5; }

.back-link {
  display:inline-flex; align-items:center; gap:6px; position:relative; z-index:1;
  margin: 22px auto 0 auto; text-decoration:none; color:#1A365D; font-weight:800;
  font-size:0.9rem; background:rgba(255,255,255,0.85); padding:9px 18px; border-radius:100px;
  width:fit-content;
}
.back-link:hover { background:#fff; }
.back-link-wrap { text-align:center; position:relative; z-index:1; padding-top:20px; }

/* ---------- grade tabs ---------- */
.grade-tabs { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; padding: 22px 20px 4px 20px; }
.grade-tab { border:none; font-family:'Nunito',sans-serif; font-weight:800; font-size:0.85rem; padding:9px 16px; border-radius:20px; display:flex; align-items:center; gap:6px; cursor:default; }
.grade-tab.active { background:#2B6CB0; color:#fff; }
.grade-tab.locked { background:#fff; color:#A0AEC0; border:1.5px solid #E2E5E9; cursor:pointer; }
.grade-tab.locked:hover { border-color:#CBD5E0; }
.locked-grade-msg {
  display:none; text-align:center; max-width:520px; margin: 8px auto 0 auto; background:#fff;
  border:1.5px solid #E2E5E9; color:#718096; font-weight:700; font-size:0.9rem; padding:10px 18px; border-radius:14px;
}

/* ---------- section wrap (used on category detail pages) ---------- */
.section-wrap { max-width:1200px; margin: 0 auto; padding: 36px 24px 0 24px; }
.section-title { font-family:'Fredoka One', cursive; font-size:1.4rem; color:#2B6CB0; margin-bottom:4px; }
.section-title.lessons { color:#2F855A; }
.section-sub { color:#A0AEC0; font-size:0.9rem; margin-bottom:20px; font-weight:700; }

.lesson-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:24px; margin-bottom: 10px; }
@media (max-width: 980px) { .lesson-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) {
  .lesson-grid { grid-template-columns: repeat(2, 1fr); gap:16px; }
  .page-header h1 { font-size:1.9rem; }
}

.lesson-card {
  cursor:pointer; display:flex; flex-direction:column; border-radius:18px; overflow:hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.09); background:#fff; transition: transform 0.18s ease, box-shadow 0.18s ease;
  text-align:center;
}
.lesson-card:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(0,0,0,0.14); }
.lesson-card.locked, .lesson-card.coming-soon { cursor:not-allowed; }
.lesson-card.locked:hover, .lesson-card.coming-soon:hover { transform:none; box-shadow: 0 6px 18px rgba(0,0,0,0.09); }

.card-img-wrap { position:relative; width:100%; aspect-ratio: 1 / 1; overflow:hidden; background:#f1f1f1; }
.lesson-card img { width:100%; height:100%; object-fit:cover; display:block; }
.lesson-card.locked img { filter: grayscale(55%) brightness(0.75); }

.lock-overlay {
  position:absolute; inset:0; background:rgba(26,32,44,0.28); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:6px;
}
.lock-icon { background:rgba(0,0,0,0.45); width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.lock-overlay span { background:rgba(0,0,0,0.55); color:#fff; font-weight:800; font-size:0.78rem; padding:4px 12px; border-radius:20px; letter-spacing:0.3px; }

.new-badge {
  position:absolute; top:10px; left:10px; background:#ED64A6; color:#fff; font-weight:900;
  font-size:0.68rem; padding:4px 10px; border-radius:20px; letter-spacing:0.4px; box-shadow:0 3px 8px rgba(0,0,0,0.2);
}

.card-label { padding:12px 8px; font-weight:800; font-size:0.95rem; color:#2D3748; }
.lesson-card.locked .card-label, .lesson-card.coming-soon .card-label { color:#A0AEC0; }

/* ==========================================================================
   Category hub cards (free-games.html landing page)
   ========================================================================== */
.categories-wrap {
  max-width:1200px; margin:0 auto; padding: 36px 24px 0 24px;
  display:grid; grid-template-columns: 1fr 1fr; gap:26px; align-items:start;
}
.category-card.cat-numbers { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .categories-wrap { grid-template-columns: 1fr; }
}

.category-card {
  background:#fff; border-radius:24px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,0.08);
  transition: box-shadow 0.18s ease, transform 0.18s ease; border:5px solid transparent;
  scroll-margin-top: 88px;
}
.category-card:hover { box-shadow:0 14px 34px rgba(0,0,0,0.13); }
.category-card.cat-body { border-color: var(--cat-body-dark); }
.category-card.cat-world { border-color: var(--cat-world-dark); }
.category-card.cat-numbers { border-color: var(--cat-numbers-dark); }
.category-card.cat-life { border-color: var(--cat-life-dark); }
.category-card.cat-language { border-color: var(--cat-language-dark); }

.category-head {
  position:relative; display:flex; align-items:center; text-decoration:none; cursor:pointer;
  padding: 22px 110px 22px 26px; min-height:150px;
}
.category-head img.cat-banner-img { height:130px; width:auto; max-width:100%; object-fit:contain; display:block; }
.category-head .cat-arrow {
  position:absolute; right:22px; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; gap:6px; font-weight:800; font-size:0.85rem;
  color:#fff; padding:10px 18px; border-radius:100px; white-space:nowrap; box-shadow:0 4px 10px rgba(0,0,0,0.18);
}
.category-head:hover .cat-arrow { filter:brightness(1.08); }
.category-head.body { background: rgba(var(--cat-body-rgb), 0.32); }
.category-head.world { background: rgba(var(--cat-world-rgb), 0.32); }
.category-head.numbers { background: rgba(var(--cat-numbers-rgb), 0.32); }
.category-head.life { background: rgba(var(--cat-life-rgb), 0.32); }
.category-head.language { background: rgba(var(--cat-language-rgb), 0.32); }
.category-head.body .cat-arrow { background:var(--cat-body); }
.category-head.world .cat-arrow { background:var(--cat-world); }
.category-head.numbers .cat-arrow { background:var(--cat-numbers); }
.category-head.life .cat-arrow { background:var(--cat-life); }
.category-head.language .cat-arrow { background:var(--cat-language); }

.category-body {
  display:flex; flex-wrap:wrap; gap:16px; padding:20px 24px 24px 24px;
}
.category-body .mini-card { width:150px; flex:0 0 auto; }
.category-body.body-tint { background: rgba(var(--cat-body-rgb), 0.06); }
.category-body.world-tint { background: rgba(var(--cat-world-rgb), 0.06); }
.category-body.numbers-tint { background: rgba(var(--cat-numbers-rgb), 0.06); }
.category-body.life-tint { background: rgba(var(--cat-life-rgb), 0.06); }
.category-body.language-tint { background: rgba(var(--cat-language-rgb), 0.06); }

.mini-card {
  cursor:pointer; background:#fff; border-radius:14px; overflow:hidden; text-align:center;
  box-shadow:0 4px 12px rgba(0,0,0,0.08); transition: transform 0.15s ease; border:2.5px solid transparent;
}
.mini-card:hover { transform: translateY(-3px); }
.category-body.body-tint .mini-card { border-color: rgba(var(--cat-body-rgb), 0.45); }
.category-body.world-tint .mini-card { border-color: rgba(var(--cat-world-rgb), 0.45); }
.category-body.numbers-tint .mini-card { border-color: rgba(var(--cat-numbers-rgb), 0.45); }
.category-body.life-tint .mini-card { border-color: rgba(var(--cat-life-rgb), 0.45); }
.category-body.language-tint .mini-card { border-color: rgba(var(--cat-language-rgb), 0.45); }
.mini-card .mini-img-wrap { position:relative; width:100%; aspect-ratio:1/1; overflow:hidden; background:#eee; }
.mini-card img { width:100%; height:100%; object-fit:cover; display:block; }
.mini-card .mini-label { padding:8px 6px; font-weight:800; font-size:0.78rem; color:#2D3748; line-height:1.2; }
.mini-card.locked img { filter: grayscale(55%) brightness(0.75); }
.mini-card.locked .mini-label { color:#A0AEC0; }
.mini-card.coming-soon .mini-label { color:#A0AEC0; }

@media (max-width: 640px) {
  .category-head { padding:16px 70px 16px 18px; min-height:100px; }
  .category-head img.cat-banner-img { height:82px; }
  .category-head .cat-arrow { padding:7px 12px; font-size:0.72rem; right:14px; }
  .category-head .cat-arrow span.arrow-text { display:none; }
  .category-body { gap:12px; padding:16px; justify-content:center; }
  .category-body .mini-card { width: calc(33.333% - 8px); min-width:96px; }
}

/* ==========================================================================
   Quick-jump category nav pills (hub page header)
   ========================================================================== */
.quick-nav-wrap {
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:22px;
}
.quick-pill {
  background:#fff; border-radius:100px; padding:10px 18px; font-size:0.85rem; font-weight:800;
  display:flex; align-items:center; gap:7px; text-decoration:none; border:2px solid transparent;
  box-shadow:0 3px 10px rgba(0,0,0,0.08); transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.quick-pill:hover { transform: translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,0.14); }
.quick-pill-body { color: var(--cat-body-dark); }
.quick-pill-body:hover { border-color: var(--cat-body); }
.quick-pill-world { color: var(--cat-world-dark); }
.quick-pill-world:hover { border-color: var(--cat-world); }
.quick-pill-numbers { color: var(--cat-numbers-dark); }
.quick-pill-numbers:hover { border-color: var(--cat-numbers); }
.quick-pill-life { color: var(--cat-life-dark); }
.quick-pill-life:hover { border-color: var(--cat-life); }
.quick-pill-language { color: var(--cat-language-dark); }
.quick-pill-language:hover { border-color: var(--cat-language); }

@media (max-width: 640px) {
  .quick-pill { font-size:0.76rem; padding:8px 14px; }
}