/* PassNova — Light Blue Theme Override
   Replaces the dark navy palette (#0D0D14) with a clean blue/white design
   matching the course landing pages. Loaded after styles.min.css.
   ─────────────────────────────────────────────────────────────────────── */

/* ── CSS variable overrides ──────────────────────────────────────────── */
:root {
  --bg:        #FFFFFF;
  --surface:   #F8FAFC;
  --surface2:  #F1F5F9;
  --surface3:  #E2E8F0;
  --text:      #1E293B;
  --text-muted:#64748B;
  --text-dim:  #64748B; /* intentionally = text-muted on light bg; #94A3B8 fails WCAG AA */
  --border:    rgba(0, 0, 0, 0.08);
  --shadow:    0 4px 24px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.15);
  --focus-ring:0 0 0 2px #fff, 0 0 0 4px var(--amber);
}

/* ── Body base ───────────────────────────────────────────────────────── */
body { background: var(--bg); color: var(--text); }

/* ── Navigation ──────────────────────────────────────────────────────── */
.pn-nav {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}
.pn-nav-logo { color: #1E293B; }
.pn-nav-logo span { color: #B45309; }
.pn-nav-links a { color: #64748B; }
.pn-nav-links a:hover, .pn-nav-links a.active { color: #1E293B; background: #F1F5F9; }
.pn-nav-hamburger span { background: #64748B; }
.pn-nav-mobile { background: #FFFFFF; border-bottom-color: rgba(0,0,0,0.08); }
.pn-nav-mobile a { color: #64748B; }
.pn-nav-mobile a:hover { background: #F1F5F9; color: #1E293B; }

/* ── Hero section ────────────────────────────────────────────────────── */
.pn-hero {
  background: linear-gradient(135deg, #2563EB 0%, #1E40AF 100%) !important;
}
.pn-hero::before {
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
}
.pn-hero h1 { color: #FFFFFF; }
.pn-hero h1 .hi { color: #FCD34D; }
.pn-hero p { color: rgba(255, 255, 255, 0.85); }
.pn-hero-tag {
  background: rgba(245, 158, 11, 0.2);
  border-color: rgba(245, 158, 11, 0.4);
  color: #FCD34D;
}
.pn-hero-stat-n { color: #FFFFFF; }
.pn-hero-stat-l { color: rgba(255, 255, 255, 0.8); }
.pn-hero-btns .btn-outline {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.5);
}
.pn-hero-btns .btn-outline:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.8);
}

/* ── Scrollbar ───────────────────────────────────────────────────────── */
::-webkit-scrollbar-track { background: #F1F5F9; }
::-webkit-scrollbar-thumb { background: #CBD5E1; }

/* ── Accessible amber text on light backgrounds ─────────────────────── */
/* #F59E0B amber = 2.15:1 on white (FAIL). #B45309 = 5.02:1 (PASS AA)  */
.pn-section-tag,
.pn-course-cta,
.pn-testi-stars { color: #B45309; }

/* ── Course cards ────────────────────────────────────────────────────── */
.pn-course-card { background: #FFFFFF; border-color: #E2E8F0; }
.pn-course-card:hover { border-color: #CBD5E1; box-shadow: 0 8px 24px rgba(0,0,0,0.10); }
.pn-course-icon { background: rgba(37, 99, 235, 0.06); }
.pn-course-badge { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.25); }
.pn-course-footer { border-top-color: #E2E8F0; }

/* ── Feature blocks ──────────────────────────────────────────────────── */
.pn-feature { background: #FFFFFF; border-color: #E2E8F0; }
.pn-feature:hover { border-color: rgba(37,99,235,0.2); box-shadow: 0 4px 20px rgba(37,99,235,0.06); }

/* ── Testimonials ────────────────────────────────────────────────────── */
.pn-testimonials { background: #F8FAFC; border-top-color: #E2E8F0; border-bottom-color: #E2E8F0; }
.pn-testi { background: #FFFFFF; border-color: #E2E8F0; }

/* ── Pricing ─────────────────────────────────────────────────────────── */
.pn-plan { background: #FFFFFF; border-color: #E2E8F0; }
.pn-plan.featured { border-color: var(--amber); }

/* ── Auth forms ──────────────────────────────────────────────────────── */
.pn-auth-wrap { background: radial-gradient(ellipse at top, rgba(37,99,235,0.08) 0%, transparent 60%); }
.pn-auth-box { background: #FFFFFF; border-color: #E2E8F0; }
.pn-form-row input { background: #F8FAFC; border-color: #E2E8F0; color: #1E293B; }
.pn-form-row input:focus { background: #FFFFFF; border-color: var(--amber); }
.pn-form-row input::placeholder { color: #94A3B8; }

/* ── Dashboard ───────────────────────────────────────────────────────── */
.pn-dash-card { background: #FFFFFF; border-color: #E2E8F0; }
.pn-dash-empty { background: #FFFFFF; border-color: #E2E8F0; }

/* ── Footer ──────────────────────────────────────────────────────────── */
.pn-footer { background: #F8FAFC; border-top-color: #E2E8F0; }
.pn-footer-bottom { border-top-color: #E2E8F0; }

/* ── Static pages ────────────────────────────────────────────────────── */
.pn-static th { background: #F1F5F9; }

/* ── Quiz ────────────────────────────────────────────────────────────── */
.pn-quiz-pick { background: #FFFFFF; border-color: #E2E8F0; }
.pn-quiz-opt { background: #FFFFFF; border-color: #E2E8F0; color: #1E293B; }
.pn-quiz-progress { background: #E2E8F0; }
.pn-quiz-explanation { background: #F8FAFC; }

/* ── Toast ───────────────────────────────────────────────────────────── */
.pn-toast { background: #FFFFFF; border-color: #E2E8F0; color: #1E293B; }

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.pn-faq-item { border-color: #E2E8F0; }
.pn-faq-q:hover { background: #F8FAFC; }

/* ── Filter bar ──────────────────────────────────────────────────────── */
.pn-filter-btn { border-color: #E2E8F0; color: #64748B; }

/* ── Loading overlay ─────────────────────────────────────────────────── */
.pn-loading { background: #FFFFFF; }

/* ── Cookie banner ───────────────────────────────────────────────────── */
#pn-cookie-banner { background: #1E293B !important; }

/* ── About ───────────────────────────────────────────────────────────── */
.pn-about-value { background: #FFFFFF; border-color: #E2E8F0; }

/* ── Footer logo "Nova" — base CSS uses var(--amber), override to accessible colour ── */
.pn-footer-brand .logo span { color: #B45309; }

/* ── Zone tiles — light card style to match white theme ─────────────── */
.pn-zones { margin: 0; }
.pn-zone {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  padding: 24px 28px;
}
.pn-zone:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.10);
  border-color: #CBD5E1;
}
.pn-zone-kids  { background: #FFFFFF; border-left: 4px solid #F97316; }
.pn-zone-skills{ background: #FFFFFF; border-left: 4px solid #7C6FFF; }
.pn-zone-pro   { background: #FFFFFF; border-left: 4px solid #10B981; }
.pn-zone-kids:hover  { border-color: #E2E8F0; border-left-color: #F97316; }
.pn-zone-skills:hover{ border-color: #E2E8F0; border-left-color: #7C6FFF; }
.pn-zone-pro:hover   { border-color: #E2E8F0; border-left-color: #10B981; }
.pn-zone-kids  .pn-zone-text h3 { color: #EA580C; }
.pn-zone-skills .pn-zone-text h3 { color: #5B52D0; }
.pn-zone-pro   .pn-zone-text h3 { color: #059669; }
.pn-zone-text p { color: #64748B; }

/* ── Zones section — tighter vertical padding ────────────────────────── */
.pn-zones-section { padding-top: 40px; padding-bottom: 40px; }

/* ── Loading overlay — never block interaction ───────────────────────── */
.pn-loading { pointer-events: none; }