/* ==========================================================
   Gedeelde stylesheet — GitHub-markdown stijl (dark), voor
   alle pagina's (index, lesmateriaal, cheatsheets).
   Systeemlettertypes, geen externe fonts nodig.
   ========================================================== */

:root{
  --bg: #0d1117;
  --canvas-subtle: #161b22;
  --border: #30363d;
  --text: #e6edf3;
  --muted: #8b949e;
  --link: #58a6ff;
  --code-inline-bg: rgba(110,118,129,0.4);

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

*, *::before, *::after{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.6;
  -webkit-text-size-adjust:100%;
}

a{ color:var(--link); text-decoration:none; }
a:hover{ text-decoration:underline; }

img{ max-width:100%; }

/* ---------- Page container ---------- */

.page{
  width:100%;
  max-width:800px;
  margin:0 auto;
  padding:32px 20px 96px;
}

.page--wide{ max-width:960px; }

@media (min-width:700px){
  .page{ padding:48px 32px 96px; }
}

/* ---------- Backlink ---------- */

.backlink{
  display:inline-block;
  font-size:13px;
  color:var(--muted);
  margin-bottom:20px;
}
.backlink:hover{ color:var(--link); }

/* ---------- Page header ---------- */

header.title-block{
  margin-bottom:24px;
}

header.title-block .eyebrow{
  font-size:13px;
  color:var(--muted);
  margin-bottom:4px;
}

header.title-block h1{
  font-size:2em;
  font-weight:600;
  line-height:1.25;
  margin:0 0 8px;
  padding-bottom:0.3em;
  border-bottom:1px solid var(--border);
}

header.title-block p{
  margin:0;
  color:var(--muted);
  font-size:15px;
}

/* ---------- Table of contents (lesson page) ---------- */

nav.toc{
  border:1px solid var(--border);
  border-radius:6px;
  padding:16px 20px;
  margin-bottom:32px;
}

nav.toc h2{
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--muted);
  margin:0 0 10px;
  border:none;
  padding:0;
}

nav.toc ol{ margin:0; padding-left:20px; }
nav.toc li{ margin-bottom:4px; }
nav.toc a{ font-weight:500; }

/* ---------- Headings ---------- */

section.chapter{ margin-bottom:40px; scroll-margin-top:16px; }

section.chapter > h2{
  font-size:1.5em;
  font-weight:600;
  padding-bottom:0.3em;
  border-bottom:1px solid var(--border);
  margin:0 0 16px;
}

h3{
  font-size:1.25em;
  font-weight:600;
  margin:24px 0 12px;
}

h4{
  font-size:1em;
  font-weight:600;
  margin:20px 0 8px;
}

p{ margin:0 0 16px; }

ul, ol.plain{ margin:0 0 16px; padding-left:24px; }
li{ margin-bottom:4px; }

hr{
  border:none;
  border-top:1px solid var(--border);
  margin:32px 0;
}

strong{ color:var(--text); font-weight:600; }
em{ color:var(--muted); font-style:italic; }

/* ---------- Inline code & code blocks ---------- */
/* font-variant-ligatures:none voorkomt dat het monospace-font
   tekens als != >= <= omzet naar ≠ ≥ ≤ */

code{
  font-family:var(--font-mono);
  font-size:0.875em;
  background:var(--code-inline-bg);
  color:var(--text);
  padding:0.2em 0.4em;
  border-radius:6px;
  font-variant-ligatures:none;
  -webkit-font-feature-settings:"liga" 0, "calt" 0;
  font-feature-settings:"liga" 0, "calt" 0;
}

pre{
  background:var(--canvas-subtle);
  border:1px solid var(--border);
  border-radius:6px;
  padding:16px;
  overflow-x:auto;
  margin:0 0 16px;
  -webkit-overflow-scrolling:touch;
}

pre code{
  background:none;
  color:var(--text);
  padding:0;
  font-size:0.85em;
  line-height:1.45;
  border-radius:0;
  font-variant-ligatures:none;
  -webkit-font-feature-settings:"liga" 0, "calt" 0;
  font-feature-settings:"liga" 0, "calt" 0;
}

/* ---------- Tables ---------- */

.table-scroll{ overflow-x:auto; margin:0 0 16px; -webkit-overflow-scrolling:touch; }
.table-scroll table{ margin:0; }

table{
  width:100%;
  min-width:380px;
  border-collapse:collapse;
  margin:0 0 16px;
  font-size:14px;
}

th, td{
  padding:6px 13px;
  border:1px solid var(--border);
  text-align:left;
  vertical-align:top;
}

th{ font-weight:600; }

tr:nth-child(2n){ background:var(--canvas-subtle); }

/* ---------- Blockquote / note callouts ---------- */

blockquote{
  border-left:0.25em solid var(--border);
  color:var(--muted);
  margin:0 0 16px;
  padding:0 1em;
}
blockquote p{ margin:0 0 8px; }
blockquote p:last-child{ margin-bottom:0; }
blockquote pre{ margin:8px 0 0; }

.note{
  border-left:0.25em solid var(--border);
  color:var(--muted);
  padding:0 1em;
  font-size:14px;
  margin:12px 0 0;
}

/* ---------- Simple block links (cheatsheet grid & homepage) ---------- */

.grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}

@media (min-width:640px){
  .grid{ grid-template-columns:1fr 1fr; }
}

.card{
  border:1px solid var(--border);
  border-radius:6px;
  padding:16px 20px;
  break-inside:avoid;
}

.card.span2{ grid-column:1 / -1; }

.card h2{
  font-size:1.1em;
  font-weight:600;
  margin:0 0 12px;
  padding-bottom:8px;
  border-bottom:1px solid var(--border);
}

.card h3{
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.03em;
  color:var(--muted);
  margin:16px 0 6px;
}
.card h3:first-of-type{ margin-top:0; }

.card p{ font-size:14px; margin:0 0 8px; }

/* ---------- Homepage ---------- */

.wrap{ max-width:760px; margin:0 auto; }

.wrap h1{
  font-size:2em;
  font-weight:600;
  padding-bottom:0.3em;
  border-bottom:1px solid var(--border);
  margin:0 0 12px;
}

.intro{ color:var(--muted); margin:0 0 32px; }

.group{ margin-bottom:32px; }

.group-label{
  font-size:1.25em;
  font-weight:600;
  margin:0 0 12px;
}

.links{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

@media (min-width:640px){
  .links{ grid-template-columns:1fr 1fr; }
}

a.card{ display:block; color:var(--text); }
a.card:hover{ border-color:var(--link); text-decoration:none; background:var(--canvas-subtle); }

a.card.upcoming{ opacity:0.5; pointer-events:none; }

a.card h2{ border:none; padding:0; margin:0 0 4px; }
a.card p{ color:var(--muted); margin:0; }

/* ---------- Print ---------- */

@media print{
  body{ background:#fff !important; color:#111; }
  .card{ background:#fff; }
  section.chapter{ break-inside:avoid-page; }
  pre{ background:#f0f0f0 !important; border:none; }
  pre code{ color:#111 !important; }
  .grid{ grid-template-columns:1fr 1fr; }
}