/* ═══════════════════════════════════════════════════════════════
   GCSE Notes Factory — Chapter Page Styles
   Used by every chapter index.html via:
   <link rel="stylesheet" href="../../../../assets/css/chapter.css">
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;600;700&family=Nunito:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Fira+Code:wght@400;500&display=swap');

/* ── Variables ────────────────────────────────────────────────── */
:root {
  --accent:        #667EEA;
  --col-red:       #E53E3E;
  --col-green:     #2F855A;
  --col-blue:      #2B6CB0;
  --col-purple:    #6B46C1;
  --col-orange:    #C05621;
  --col-pink:      #B83280;
  --col-bg:        #FFFEF7;
  --col-line:      #E8E4D9;
  --col-card:      #FFFFFF;
  --col-text:      #1A202C;
  --col-muted:     #718096;
  --col-border:    #E2E8F0;
  --r-sm:  6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-full: 9999px;
  --sh-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --sh-md: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.06);
  --sh-lg: 0 8px 24px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.06);
  --font-h: 'Caveat', cursive;
  --font-b: 'Nunito', sans-serif;
  --font-c: 'Fira Code', monospace;
}

/* ── Reset ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font-b); font-size: 1rem; line-height: 1.7;
  color: var(--col-text); background-color: var(--col-bg);
  background-image: linear-gradient(var(--col-line) 1px, transparent 1px);
  background-size: 100% 32px;
}
h1,h2,h3,h4 { font-family: var(--font-h); line-height: 1.3; color: var(--col-text); }
p { margin-bottom: 1rem; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
strong { font-weight: 700; }
em { font-style: italic; }

/* ── Nav ──────────────────────────────────────────────────────── */
.nav {
  background: var(--col-card); border-bottom: 1px solid var(--col-border);
  padding: .75rem 1.5rem; display: flex; align-items: center;
  justify-content: space-between; position: sticky; top: 0; z-index: 100;
  box-shadow: var(--sh-sm);
}
.nav-brand { font-family: var(--font-h); font-size: 1.4rem; font-weight: 700; color: var(--col-text); }
.nav-links { display: flex; gap: 1.25rem; }
.nav-links a { color: var(--col-muted); font-weight: 600; font-size: .85rem; text-decoration: none; }
.nav-links a:hover { color: var(--col-text); }

/* ── Page Grid ────────────────────────────────────────────────── */
.page { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: var(--col-card); border-right: 1px solid var(--col-border);
  padding: 1.5rem 1rem; font-size: .85rem;
}
.main { max-width: 860px; margin: 0 auto; padding: 2.5rem 2rem 4rem; }

/* ── Sidebar TOC ──────────────────────────────────────────────── */
.toc-title { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--col-muted); font-weight: 700; margin-bottom: .5rem; }
.toc-list { list-style: none; display: grid; gap: 2px; }
.toc-list a { color: var(--col-muted); text-decoration: none; padding: .2rem .4rem; display: block; border-radius: var(--r-sm); transition: all .15s; }
.toc-list a:hover, .toc-list a.active { background: rgba(102,126,234,.12); color: var(--accent); font-weight: 600; }
hr.divider { border: none; border-top: 1px solid var(--col-border); margin: .75rem 0; }
.pbar { background: var(--col-border); border-radius: var(--r-full); height: 7px; overflow: hidden; }
.pfill { height: 100%; background: var(--accent); border-radius: var(--r-full); transition: width .3s; }

/* ── Breadcrumbs ──────────────────────────────────────────────── */
.crumbs { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--col-muted); margin-bottom: 1.5rem; flex-wrap: wrap; }
.crumbs a { color: var(--col-muted); }
.crumbs .sep { color: var(--col-border); }

/* ── Chapter Cover ────────────────────────────────────────────── */
.cover {
  background: var(--col-card); border-radius: var(--r-xl); padding: 2.5rem;
  margin-bottom: 2.5rem; box-shadow: var(--sh-md);
  border-top: 5px solid var(--accent); position: relative; overflow: hidden;
}
.cover::before {
  content: ''; position: absolute; top: -50px; right: -50px;
  width: 220px; height: 220px; background: var(--accent); opacity: .06; border-radius: 50%;
}
.subject-pill {
  display: inline-block; padding: .3rem .9rem; background: var(--accent); color: #fff;
  border-radius: var(--r-full); font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: .9rem;
}
.ch-title { font-size: 2.6rem; font-weight: 700; line-height: 1.15; margin-bottom: .75rem; }
.ch-meta { display: flex; flex-wrap: wrap; gap: 1rem; color: var(--col-muted); font-size: .85rem; margin-bottom: 1.5rem; }
.stars { color: #F6AD55; }
.g9-badge {
  display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .7rem;
  background: linear-gradient(135deg, #667EEA, #B83280); color: #fff;
  border-radius: var(--r-full); font-size: .72rem; font-weight: 700; text-transform: uppercase;
}
.obj-list { list-style: none; display: grid; gap: .5rem; }
.obj-list li { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; }
.obj-list li::before { content: '◎'; color: var(--accent); flex-shrink: 0; margin-top: .25rem; }

/* ── Section Headings ─────────────────────────────────────────── */
.sec-h {
  font-size: 2rem; font-weight: 700; color: var(--col-green);
  border-bottom: 3px solid var(--col-green); padding-bottom: .4rem; margin: 3rem 0 1.5rem;
}
.sub-h {
  font-size: 1.5rem; font-weight: 700; color: var(--col-blue);
  margin: 2rem 0 .75rem; padding-left: .5rem; border-left: 4px solid var(--col-blue);
}
.concept-h { font-size: 1.1rem; font-weight: 700; color: var(--col-text); margin: 1.25rem 0 .5rem; }

/* ── Callout Boxes ────────────────────────────────────────────── */
.box {
  border-radius: var(--r-md); padding: 1rem 1.25rem; margin: 1rem 0;
  display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start;
}
.box-icon { font-size: 1.3em; line-height: 1.5; }
.box-title { font-family: var(--font-h); font-size: 1.05rem; font-weight: 700; margin-bottom: .2rem; }
.box-def  { background: #F0FFF4; border-left: 4px solid var(--col-green); }  .box-def  .box-title { color: var(--col-green);  }
.box-tip  { background: #FAF5FF; border-left: 4px solid var(--col-purple); } .box-tip  .box-title { color: var(--col-purple); }
.box-warn { background: #FFFAF0; border-left: 4px solid var(--col-orange); } .box-warn .box-title { color: var(--col-orange); }
.box-mem  { background: #FFF5F7; border-left: 4px solid var(--col-pink);   } .box-mem  .box-title { color: var(--col-pink);   }
.box-ex   { background: #EBF8FF; border-left: 4px solid var(--col-blue);   } .box-ex   .box-title { color: var(--col-blue);   }
.box-imp  { background: #FFF5F5; border-left: 4px solid var(--col-red);    } .box-imp  .box-title { color: var(--col-red);    }

/* ── Formula Card ─────────────────────────────────────────────── */
.fcard { background: var(--col-card); border: 2px solid var(--col-border); border-radius: var(--r-lg); padding: 1.25rem 1.5rem; margin: 1rem 0; box-shadow: var(--sh-sm); }
.fcard-title { font-family: var(--font-h); font-size: 1rem; color: var(--col-muted); margin-bottom: .75rem; display: flex; align-items: center; gap: .5rem; }
.fcard-body { font-size: 1.1rem; text-align: center; padding: .75rem; background: var(--col-bg); border-radius: var(--r-sm); margin: .5rem 0; }
.fcard-vars { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .4rem; font-size: .82rem; color: var(--col-muted); margin-top: .5rem; }
.fcard-vars span::before { content: '• '; }

/* ── Worked Examples ──────────────────────────────────────────── */
.worked { background: var(--col-card); border-radius: var(--r-lg); border: 2px solid var(--accent); padding: 1.5rem; margin: 1.25rem 0; box-shadow: var(--sh-sm); }
.worked-badge { display: inline-block; padding: .2rem .75rem; background: var(--accent); color: #fff; border-radius: var(--r-full); font-size: .72rem; font-weight: 700; text-transform: uppercase; margin-bottom: .75rem; }
.worked-q { font-weight: 700; margin-bottom: 1rem; padding: .75rem; background: rgba(102,126,234,.08); border-radius: var(--r-sm); }
.step { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; padding: .6rem 0; border-bottom: 1px dashed var(--col-border); }
.step:last-child { border-bottom: none; }
.step-num { background: var(--accent); color: #fff; border-radius: 50%; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; flex-shrink: 0; margin-top: 2px; }
.step-body { font-size: .95rem; }
.step-label { font-size: .78rem; color: var(--col-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .2rem; }
.answer-box { background: rgba(47,133,90,.1); border: 2px solid var(--col-green); border-radius: var(--r-sm); padding: .6rem 1rem; margin-top: 1rem; font-weight: 700; color: var(--col-green); }

/* ── Exam Questions ───────────────────────────────────────────── */
.qblock { background: var(--col-card); border-radius: var(--r-md); border: 1px solid var(--col-border); padding: 1.25rem; margin: .75rem 0; box-shadow: var(--sh-sm); }
.qblock-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: .75rem; gap: 1rem; }
.qnum { font-family: var(--font-h); font-size: 1.15rem; font-weight: 700; }
.marks { background: var(--accent); color: #fff; border-radius: var(--r-full); padding: .15rem .7rem; font-size: .78rem; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.reveal-btn { margin-top: .75rem; padding: .4rem 1rem; border: 2px solid var(--accent); background: transparent; color: var(--accent); border-radius: var(--r-full); font-family: var(--font-b); font-size: .82rem; font-weight: 700; cursor: pointer; transition: all .2s; }
.reveal-btn:hover { background: var(--accent); color: #fff; }
.answer-reveal { display: none; margin-top: .75rem; padding: .75rem 1rem; background: #F0FFF4; border-left: 4px solid var(--col-green); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: .9rem; }

/* ── Tables ───────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; background: var(--col-card); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-sm); }
thead { background: var(--accent); color: #fff; }
th { padding: .75rem 1rem; font-family: var(--font-h); font-size: .95rem; font-weight: 700; text-align: left; }
td { padding: .7rem 1rem; border-bottom: 1px solid var(--col-border); font-size: .9rem; }
tr:last-child td { border-bottom: none; }
tr:nth-child(even) td { background: #F7FAFC; }

/* ── Mind Map ─────────────────────────────────────────────────── */
.mindmap { background: var(--col-card); border-radius: var(--r-xl); padding: 1.5rem; box-shadow: var(--sh-md); margin: 1.25rem 0; text-align: center; }
.mm-centre { display: inline-block; padding: .75rem 2rem; background: var(--accent); color: #fff; border-radius: var(--r-full); font-family: var(--font-h); font-size: 1.4rem; font-weight: 700; margin-bottom: 1.5rem; }
.mm-branches { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; }
.mm-branch { background: rgba(102,126,234,.08); border: 2px solid var(--accent); border-radius: var(--r-lg); padding: .75rem; text-align: center; }
.mm-branch-title { font-family: var(--font-h); font-size: 1rem; font-weight: 700; color: var(--accent); margin-bottom: .5rem; }
.mm-branch ul { list-style: none; display: grid; gap: .25rem; }
.mm-branch ul li { font-size: .82rem; color: var(--col-muted); padding: .15rem 0; border-top: 1px dashed var(--col-border); }
.mm-branch ul li:first-child { border-top: none; }

/* ── Process Chain ────────────────────────────────────────────── */
.chain { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; justify-content: center; }
.chain-box { background: var(--accent); color: #fff; border-radius: var(--r-md); padding: .5rem 1rem; font-family: var(--font-h); font-size: .95rem; font-weight: 600; text-align: center; }
.chain-box.alt { background: rgba(102,126,234,.12); color: var(--accent); border: 2px solid var(--accent); }
.chain-arr { color: var(--accent); font-size: 1.3rem; font-weight: 700; }

/* ── Revision Grid ────────────────────────────────────────────── */
.rev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.rev-panel { background: var(--col-card); border-radius: var(--r-lg); padding: 1.25rem; box-shadow: var(--sh-sm); border-top: 3px solid var(--accent); }
.rev-panel-title { font-family: var(--font-h); font-size: 1.2rem; font-weight: 700; margin-bottom: .75rem; color: var(--accent); }

/* ── Flashcards ───────────────────────────────────────────────── */
.fc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; padding: .5rem 0; }
.fc-wrap { perspective: 1000px; height: 175px; cursor: pointer; }
.fc { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.4,0,.2,1); }
.fc.flipped { transform: rotateY(180deg); }
.fc-f, .fc-b { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: var(--r-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.25rem; text-align: center; box-shadow: var(--sh-md); }
.fc-f { background: var(--col-card); border: 2px solid var(--col-border); }
.fc-b { background: var(--accent); color: #fff; transform: rotateY(180deg); }
.fc-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; opacity: .6; margin-bottom: .4rem; }
.fc-text { font-family: var(--font-h); font-size: 1rem; font-weight: 600; line-height: 1.4; }

/* ── Checklist ────────────────────────────────────────────────── */
.cl { list-style: none; display: grid; gap: .5rem; }
.cl li { display: flex; align-items: center; gap: .75rem; padding: .4rem .6rem; border-radius: var(--r-sm); cursor: pointer; transition: background .15s; font-size: .95rem; }
.cl li:hover { background: var(--col-border); }
.cl-box { width: 22px; height: 22px; border: 2px solid var(--col-border); border-radius: 4px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: .8rem; transition: all .2s; color: #fff; }
.cl li.done .cl-box { background: var(--col-green); border-color: var(--col-green); }

/* ── Utility ──────────────────────────────────────────────────── */
.dl-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1.1rem; border-radius: var(--r-full); background: var(--col-card); border: 2px solid var(--col-border); font-size: .82rem; font-weight: 700; color: var(--col-text); text-decoration: none; cursor: pointer; transition: all .2s; font-family: var(--font-b); }
.dl-btn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 1024px) { .page { grid-template-columns: 1fr; } .sidebar { display: none; } }
@media (max-width: 768px) { .ch-title { font-size: 1.8rem; } .main { padding: 1.5rem 1rem 3rem; } .rev-grid { grid-template-columns: 1fr; } .fc-grid { grid-template-columns: 1fr; } }

/* ── Print ────────────────────────────────────────────────────── */
@media print {
  @page { size: A4; margin: 18mm; }
  nav, .sidebar, .reveal-btn, .dl-btn { display: none !important; }
  body { background: white; background-image: none; font-size: 11pt; }
  .page { grid-template-columns: 1fr; }
  .main { max-width: 100%; padding: 0; }
  .cover { page-break-after: always; box-shadow: none; border-radius: 0; }
  .sec-h { page-break-after: avoid; }
  .worked, .qblock, .box { page-break-inside: avoid; }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}