/* GCSE Exam Success - Base Styles */

  <!-- Small helper so maths never overflows small screens -->

    /* Global MathJax behaviour */
    mjx-container { max-width: 100%; overflow-x: auto; }
    .example { background:#eef2ff; border-left:3px solid #1d4ed8; padding:12px; }
    .example p { margin:6px 0; }
:root{
  --bg:#ffffff;
  --card:#ffffff;
  --text:#0a0a0a;
  --muted:#3f3f46;
  --accent:#1d4ed8;
  --accent-2:#16a34a;
  --border:#e5e7eb;
  --warning:#b45309;
}
*{box-sizing:border-box}
html,body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color:var(--text);
  background:#f8fafc;
  line-height:1.6;
}
body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 600px at 10% -10%, #1d295a44, transparent),
              radial-gradient(1600px 800px at 120% 10%, #08334466, transparent),
              var(--bg);
  line-height:1.6;
}
.container{max-width:1100px;margin:0 auto;padding:24px}
.header{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding:24px;border-bottom:1px solid var(--border);
  position:sticky;top:0;background:linear-gradient(180deg, #0b1020 80%, transparent);
  z-index:10;
}
.logo-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo {
  width: 64px;
  height: 64px;
  border-radius: 50%; /* optional, keeps circular feel */
}

.title{font-size:1.6rem;margin:0}
.subtitle{color:var(--muted);margin:4px 0 0 0}
nav{margin-left:auto;display:flex;gap:14px;flex-wrap:wrap}
nav a{
  color:var(--text);text-decoration:none;padding:8px 12px;border:1px solid var(--border);
  border-radius:999px;font-size:.95rem;background:#0f152a88;backdrop-filter: blur(4px);
}
nav a:hover{border-color:#3a4a72;}

.hero{
  padding:56px 24px 8px 24px;
  display:grid;gap:14px;
}
.hero h1{font-size:2.2rem;margin:0}
.hero p{color:var(--muted);max-width:75ch}
.cta{
  display:flex;gap:12px;flex-wrap:wrap;margin-top:8px
}
.button{
  background:linear-gradient(135deg,var(--accent),#3b82f6);
  border:none;color:#061022;padding:12px 16px;border-radius:12px;font-weight:700;
  box-shadow:0 8px 26px #3b82f644;cursor:pointer
}
.button.secondary{
  background:transparent;border:1px solid var(--border);color:var(--text)
}
.grid{
  display:grid;grid-template-columns: repeat(12,1fr);gap:16px
}
.card{
  grid-column: span 12;
  background: linear-gradient(180deg, #0e162c, #0c1326);
  border:1px solid var(--border);border-radius:16px;padding:18px;
  box-shadow: 0 10px 30px #0008, inset 0 0 0 1px #ffffff08;
}
@media(min-width:900px){ .card{grid-column: span 6;} }
.card h3{margin:0 0 6px 0}
.card p{margin:0;color:var(--muted)}
.small{font-size:.9rem}
.section{padding:24px}
h2.section-title{margin:0 0 12px 0;font-size:1.6rem}
.formula{
  background:#0c142a;border:1px dashed #30406e;border-radius:12px;padding:10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  color:#dbeafe;overflow:auto
}
.example{margin-top:8px;padding:10px 12px;border-left:3px solid var(--accent);background:#0b1531}
footer{
  margin-top:40px;border-top:1px solid var(--border);padding:20px;color:var(--muted)
}
kbd{background:#1f2937;border:1px solid #374151;padding:2px 6px;border-radius:6px}
.toc{display:flex;gap:10px;flex-wrap:wrap}
.toc a{font-size:.92rem}

.badge{display:inline-block;padding:2px 8px;border:1px solid var(--border);border-radius:999px;margin-left:6px;color:var(--accent-2)}
hr{border:0;border-top:1px solid var(--border);margin:22px 0}

/* Light theme support */
:root.light{
  --bg:#f8fafc;
  --card:#ffffff;
  --text:#0b1020;
  --muted:#475569;
  --accent:#2563eb;
  --accent-2:#059669;
  --border:#e2e8f0;
  --warning:#b45309;
}
body.light{
  background: radial-gradient(1200px 600px at 10% -10%, #dbeafe66, transparent),
              radial-gradient(1600px 800px at 120% 10%, #ccfbf166, transparent),
              var(--bg);
}

.banner{
  position:relative;border:1px solid var(--border);border-radius:20px;overflow:hidden;
  padding:28px;margin-top:12px;background:
    radial-gradient(600px 280px at -10% -10%, #60a5fa22, transparent),
    radial-gradient(600px 280px at 110% 10%, #34d39922, transparent),
    linear-gradient(180deg, #0e172d, #0a1224);
}
:root.light .banner{
  background:
    radial-gradient(600px 280px at -10% -10%, #93c5fd55, transparent),
    radial-gradient(600px 280px at 110% 10%, #86efac55, transparent),
    linear-gradient(180deg, #f8fafc, #eef2ff);
}
.banner h1{margin:0;font-size:2.2rem}
.banner p{margin:6px 0 0 0;color:var(--muted)}

.theme-toggle{
  margin-left:12px;border:1px solid var(--border);border-radius:999px;background:transparent;
  padding:6px 10px;cursor:pointer
}
.level-toggle{
  display:inline-flex;gap:6px;margin:10px;border:1px solid var(--border);
  border-radius:999px;padding:4px 6px
}
.level-toggle button{border:none;background:transparent;color:var(--text);padding:6px 10px;border-radius:999px;cursor:pointer}
.level-toggle button.active{background:var(--accent);color:white}
.badge.foundation{color:#fbbf24;border-color:#fbbf24}


/* v3 readability adjustments */
.card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
}
nav a{ color:#111827; background:#f3f4f6; border:1px solid var(--border); }
nav a:hover{ border-color:#cbd5e1; }
.button{ background:linear-gradient(135deg, var(--accent), #3b82f6); color:white; }
.button.secondary{ background:#f3f4f6; color:#111827; }
.formula{ background:#f1f5f9; border:1px dashed #cbd5e1; color:#0b1227; }
.example{ background:#eef2ff; border-left:3px solid var(--accent); }
.badge{ color:var(--accent-2); border-color:#a7f3d0; }
.badge.foundation{ color:#a16207; border-color:#fcd34d; }
.header{ background:#ffffffdd; backdrop-filter: blur(2px); }


/* v5: better worked examples layout */
.example-line {
  margin:6px 0;
  padding:6px 8px;
  border-left:2px solid #cbd5e1;
}
.example-line:nth-child(odd){background:#f9fafb}
.example-line:nth-child(even){background:#f3f4f6}