/* Englivision Online School — Design System (light + dark) */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@500;600;700;800;900&family=Outfit:wght@500;600;700;800&display=swap');

:root,
html[data-theme="light"] {
  --ev-navy: #0a2540;
  --ev-navy-2: #123456;
  --ev-teal: #0f9d8a;
  --ev-teal-2: #14b8a6;
  --ev-sky: #38bdf8;
  --ev-ink: #102a43;
  --ev-muted: #5b6b7c;
  --ev-line: rgba(10, 37, 64, 0.12);
  --ev-line-strong: rgba(10, 37, 64, 0.22);
  --ev-paper: #eef6f8;
  --ev-paper-2: #e4f1f4;
  --ev-surface: #ffffff;
  --ev-surface-soft: #f4fafb;
  --ev-sand: #d9f3ef;
  --ev-gold: #f0b429;
  --ev-danger: #dc2626;
  --ev-radius: 22px;
  --ev-shadow: 0 18px 50px rgba(10, 37, 64, 0.12);
  --ev-shadow-soft: 0 10px 28px rgba(10, 37, 64, 0.08);
  --ev-font-ar: "Cairo", "Segoe UI", Tahoma, sans-serif;
  --ev-font-en: "Outfit", "Cairo", sans-serif;
  --ev-header-bg: rgba(255, 255, 255, 0.88);
  --ev-footer-bg: #071b2e;
  --ev-footer-text: rgba(255, 255, 255, 0.78);
  --ev-page-grad:
    radial-gradient(1200px 500px at 100% -10%, rgba(20, 184, 166, 0.18), transparent 55%),
    radial-gradient(900px 420px at -10% 0%, rgba(56, 189, 248, 0.16), transparent 50%),
    linear-gradient(180deg, #f4fafb 0%, #eaf4f7 45%, #eef6f8 100%);

  /* aliases used by shared theme-switch */
  --bg: var(--ev-paper);
  --surface: var(--ev-surface);
  --surface-soft: var(--ev-surface-soft);
  --text: var(--ev-ink);
  --muted: var(--ev-muted);
  --border: var(--ev-line);
  --border-strong: var(--ev-line-strong);
  --primary: var(--ev-teal);
  --primary-2: var(--ev-navy);
  --page-bg: var(--ev-paper);
  --card-bg: var(--ev-surface);
  --text-strong: var(--ev-navy);
}

html[data-theme="dark"] {
  --ev-navy: #e8f1f7;
  --ev-navy-2: #b7c9d8;
  --ev-teal: #2dd4bf;
  --ev-teal-2: #5eead4;
  --ev-sky: #7dd3fc;
  --ev-ink: #e7eef5;
  --ev-muted: #9db0c2;
  --ev-line: rgba(148, 183, 210, 0.16);
  --ev-line-strong: rgba(148, 183, 210, 0.28);
  --ev-paper: #07131f;
  --ev-paper-2: #0b1a2a;
  --ev-surface: #0f2235;
  --ev-surface-soft: #132a40;
  --ev-sand: #12353a;
  --ev-gold: #fbbf24;
  --ev-danger: #f87171;
  --ev-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  --ev-shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.35);
  --ev-header-bg: rgba(7, 19, 31, 0.9);
  --ev-footer-bg: #040d16;
  --ev-footer-text: rgba(231, 238, 245, 0.72);
  --ev-page-grad:
    radial-gradient(1000px 460px at 100% -10%, rgba(45, 212, 191, 0.12), transparent 55%),
    radial-gradient(800px 400px at -10% 0%, rgba(56, 189, 248, 0.1), transparent 50%),
    linear-gradient(180deg, #07131f 0%, #0a1a2b 48%, #07131f 100%);

  --bg: var(--ev-paper);
  --surface: var(--ev-surface);
  --surface-soft: var(--ev-surface-soft);
  --text: var(--ev-ink);
  --muted: var(--ev-muted);
  --border: var(--ev-line);
  --border-strong: var(--ev-line-strong);
  --primary: var(--ev-teal);
  --primary-2: #7dd3fc;
  --page-bg: var(--ev-paper);
  --card-bg: var(--ev-surface);
  --text-strong: #f3f8fc;
  color-scheme: dark;
}

html { scroll-behavior: smooth; }

html.theme-switching,
html.theme-switching * {
  transition: background-color .28s ease, color .28s ease, border-color .28s ease, box-shadow .28s ease !important;
}

body.englivision-platform,
body.ev-platform {
  margin: 0;
  font-family: var(--ev-font-ar);
  color: var(--ev-ink);
  background: var(--ev-page-grad);
  min-height: 100vh;
}

body.englivision-platform *,
body.ev-platform * { box-sizing: border-box; }

/* Override shared site.css heading color inside Englivision */
body.englivision-platform h1,
body.englivision-platform h2,
body.englivision-platform h3,
body.englivision-platform h4,
body.ev-platform h1,
body.ev-platform h2,
body.ev-platform h3,
body.ev-platform h4 {
  color: var(--ev-navy);
  font-family: var(--ev-font-ar);
}

.ev-wrap {
  width: min(1180px, calc(100% - 32px));
  margin-inline: auto;
}

.ev-brand {
  font-family: var(--ev-font-en);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.ev-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(15, 157, 138, 0.12);
  color: var(--ev-teal);
  font-weight: 800;
  font-size: 0.92rem;
}
html[data-theme="dark"] .ev-kicker {
  background: rgba(45, 212, 191, 0.14);
}

.ev-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  border: 0;
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.ev-btn:hover { transform: translateY(-2px); }
.ev-btn--primary {
  background: linear-gradient(135deg, var(--ev-teal), #0b7f71);
  color: #fff;
  box-shadow: 0 12px 28px rgba(15, 157, 138, 0.35);
}
html[data-theme="dark"] .ev-btn--primary {
  background: linear-gradient(135deg, #14b8a6, #0f766e);
  box-shadow: 0 12px 28px rgba(45, 212, 191, 0.25);
}
.ev-btn--soft {
  background: rgba(255,255,255,0.88);
  color: #0a2540;
  border: 1px solid rgba(255,255,255,0.35);
}
html[data-theme="dark"] .ev-btn--soft {
  background: rgba(15, 34, 53, 0.88);
  color: #e7eef5;
  border-color: var(--ev-line);
}
.ev-btn--navy {
  background: #0a2540;
  color: #fff;
}
html[data-theme="dark"] .ev-btn--navy {
  background: #1d4f78;
}

.ev-section-head { margin-bottom: 28px; }
.ev-section-head h2 {
  margin: 0;
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  font-weight: 900;
  color: var(--ev-navy);
  line-height: 1.25;
}
.ev-section-head p {
  margin: 10px 0 0;
  color: var(--ev-muted);
  font-weight: 700;
  line-height: 1.8;
  max-width: 52ch;
}

/* Theme switch — Englivision visibility fix */
body.englivision-platform .theme-switch--pro,
body.ev-platform .theme-switch--pro {
  --ts-w: 96px;
  --ts-h: 44px;
  background: var(--surface-soft);
  border: 1.5px solid var(--border-strong);
  box-shadow: inset 0 1px 3px rgba(15,23,42,.06), 0 6px 16px rgba(10,37,64,.08);
}
html[data-theme="dark"] body.englivision-platform .theme-switch--pro,
html[data-theme="dark"] body.ev-platform .theme-switch--pro {
  background: rgba(19, 42, 64, 0.95);
  border-color: rgba(45, 212, 191, 0.35);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.35), 0 0 0 1px rgba(45,212,191,.08);
}
body.englivision-platform .theme-switch__knob {
  background: #fff;
  border: 1px solid var(--border);
}
html[data-theme="dark"] body.englivision-platform .theme-switch__knob {
  background: linear-gradient(180deg, #1f3b56, #122639);
  border-color: rgba(45, 212, 191, 0.3);
}