:root{
  --bg:#ffffff;
  --surface:#f7f8fa;
  --text:#1f2937;
  --muted:#6b7280;
  --border:rgba(31,41,55,.12);
  --primary:#1D4E89;
  --accent: var(--primary);
  --maxw:1100px;
  --radius:14px;
  --shadow:0 10px 24px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Segoe UI Emoji";color:var(--text);background:var(--bg);line-height:1.5}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}

.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;background:var(--bg);padding:10px 12px;border:1px solid var(--border);border-radius:10px;z-index:9999}

.layout{display:grid;grid-template-columns:320px 1fr;min-height:100vh}

.sidebar{position:sticky;top:0;align-self:start;height:100vh;overflow:auto;background:var(--surface);border-right:1px solid var(--border);padding:18px 16px}

.brand{display:flex;gap:10px;align-items:center;margin-bottom:14px}
.brand__mark{width:34px;height:34px;border-radius:10px;background:var(--primary);box-shadow:var(--shadow)}
.brand__title{font-weight:700}
.brand__subtitle{font-size:.9rem;color:var(--muted)}

.sidebar__controls{display:flex;gap:10px;align-items:center;margin:12px 0 14px}
.search{width:100%;display:flex;align-items:center;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:10px 12px}
.search input{border:0;outline:0;width:100%;font:inherit;background:transparent}

.nav{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.nav__item{display:grid;grid-template-columns:1fr;gap:4px;padding:10px 10px;border-radius:12px;border:1px solid transparent}
.nav__item:hover{background:rgba(29,78,137,.06);border-color:rgba(29,78,137,.12)}
.nav__link{font-weight:700;display:inline-flex;gap:8px;align-items:center}
.nav__link.is-active{color:var(--text);text-decoration:none}
.nav__label{font-size:.92rem;color:var(--muted)}

/* Actieve hoofdstukkaart (meer duidelijkheid in de sidebar) */
.nav__item.is-active{background:rgba(29,78,137,.06);border-color:rgba(29,78,137,.16)}

/* Subnavigatie (onderdelen binnen een hoofdstuk) */
.nav__sublist{list-style:none;margin:6px 0 0 0;padding:0 0 0 12px;border-left:2px solid rgba(29,78,137,.12);display:none;gap:4px}
.nav__sublist.is-open{display:grid}
.nav__subitem{padding:6px 0}
.nav__sublink{display:inline-flex;align-items:center;font-weight:600;font-size:.92rem;color:var(--muted);text-decoration:none}
.nav__sublink:hover{text-decoration:underline}
.nav__sublink.is-active{color:var(--text)}

/* Knoppen bovenaan hoofdstuk/onderdeel */
.chapter-actions{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 14px 0}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 12px;border-radius:12px;border:1px solid rgba(29,78,137,.18);background:rgba(29,78,137,.06);color:var(--text);text-decoration:none;font-weight:700}
.btn:hover{background:rgba(29,78,137,.1)}

.content{min-width:0}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.9);backdrop-filter:blur(10px)}

.menu-btn{display:none;align-items:center;justify-content:center;border:1px solid var(--border);background:var(--bg);border-radius:12px;padding:10px 12px;cursor:pointer}
.menu-btn:focus{outline:2px solid rgba(29,78,137,.35);outline-offset:2px}

.breadcrumb{color:var(--muted);font-size:.95rem}

.main{max-width:var(--maxw);margin:0 auto;padding:26px 16px 56px}

.card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.card--home{padding:18px}

/* ------------------------------------------------------------
   Markdown viewer (full width in main area)
   ------------------------------------------------------------ */

.course-head{padding:24px 28px 10px 28px}
.course-head h1{margin:0;font-size:28px;line-height:1.2}
.course-head p{margin:8px 0 0 0;color:var(--muted)}

/* Voortgang bovenaan (cursusniveau) */
.course-progress{margin-top:14px;display:grid;gap:10px}
.progress-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.progress-meta{color:var(--muted);font-size:.95rem}
.progressbar{height:10px;border-radius:999px;background:rgba(31,41,55,.08);overflow:hidden;border:1px solid var(--border)}
.progressbar__fill{height:100%;background:rgba(29,78,137,.75);width:0%}

/* Verdergaan-blok op de homepagina */
.resume{margin:14px 0 18px 0;padding:14px;border-radius:14px;border:1px solid var(--border);background:var(--surface);display:grid;gap:10px}
.resume__title{font-weight:800;margin:0}
.resume__meta{margin:0;color:var(--muted)}
.resume__actions{display:flex;gap:10px;flex-wrap:wrap}

/* Oefening-afvinkers in de viewer */
.exercise-toggle{display:inline-flex;align-items:center;gap:10px;margin:16px 0 18px 0;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.exercise-toggle input{width:18px;height:18px}
.exercise-toggle__label{font-weight:700}
.exercise-toggle__hint{color:var(--muted);font-size:.92rem}

.markdown{
  padding:18px 28px 40px 28px;
  max-width:980px;
  margin:0 auto;
  line-height:1.7;
  font-size:16px;
}

.markdown h1,.markdown h2,.markdown h3,.markdown h4{line-height:1.25}
.markdown h1{font-size:32px;margin:0 0 16px 0}
.markdown h2{font-size:24px;margin:28px 0 12px 0;border-bottom:1px solid var(--border);padding-bottom:8px}
.markdown h3{font-size:20px;margin:22px 0 10px 0}
.markdown h4{font-size:18px;margin:18px 0 8px 0}

.markdown p{margin:0 0 14px 0}
.markdown ul,.markdown ol{margin:0 0 14px 1.2em;padding:0}
.markdown li{margin:6px 0}

.markdown a{text-decoration:underline;text-underline-offset:3px}

.markdown blockquote{
  margin:18px 0;
  padding:12px 14px;
  border-left:3px solid var(--accent);
  background:rgba(29,78,137,.06);
  border-radius:12px;
}

.markdown hr{border:0;border-top:1px solid var(--border);margin:24px 0}

/* Inline code */
.markdown :not(pre) > code{
  padding:.12em .35em;
  border-radius:6px;
  background:rgba(31,41,55,.06);
  border:1px solid rgba(31,41,55,.08);
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:.95em;
}

/* Code blocks (Prism will color tokens; we style the container) */
.markdown pre{
  margin:16px 0 20px 0;
  border-radius:10px;
  overflow:auto;
}

/* Prism theme tweaks for readability */
pre[class*="language-"]{padding:16px 18px}
code[class*="language-"]{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:14px;line-height:1.6}

/* Tables */
.markdown table{width:100%;border-collapse:collapse;margin:18px 0}
.markdown th,.markdown td{border:1px solid var(--border);padding:10px;vertical-align:top}
.markdown th{background:rgba(31,41,55,.04);text-align:left}

/* Responsive spacing */
@media (max-width:640px){
  .course-head{padding:18px 16px 8px 16px}
  .markdown{padding:14px 16px 32px 16px}
  .markdown h1{font-size:26px}
  .markdown h2{font-size:20px}
}
.home-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
.home-grid a{display:block;padding:14px;border-radius:14px;border:1px solid var(--border);background:var(--surface)}
.home-grid a:hover{border-color:rgba(29,78,137,.25)}
.home-grid .kicker{color:var(--muted);font-size:.9rem;margin:0 0 6px}
.home-grid .title{margin:0;font-weight:700}

/* Content typography (keep close to Typora feel but clean) */
article{font-size:1rem}
article h1{font-size:2rem;margin:0 0 1rem}
article h2{font-size:1.6rem;margin:1.8rem 0 .8rem}
article h3{font-size:1.25rem;margin:1.2rem 0 .6rem}
article h4{font-size:1.1rem;margin:1rem 0 .5rem}
article p{margin:.8rem 0}
article hr{border:0;border-top:1px solid var(--border);margin:1.4rem 0}
article ul, article ol{padding-left:1.2rem}
article li{margin:.35rem 0}
article code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:.95em}

.codeblock{margin:1rem 0;padding:14px;border-radius:14px;background:#0b1220;color:#e5e7eb;overflow:auto;border:1px solid rgba(255,255,255,.06)}
.codeblock code{color:inherit}

blockquote{margin:1rem 0;padding:12px 14px;border-left:4px solid rgba(29,78,137,.45);background:rgba(29,78,137,.06);border-radius:12px}

.footer-nav{display:flex;gap:12px;justify-content:space-between;margin-top:26px}
.footer-nav a{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}

/* Mobile */
@media (max-width: 980px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:fixed;inset:0 auto 0 0;width:320px;max-width:88vw;transform:translateX(-105%);transition:transform .2s ease;z-index:40;box-shadow:var(--shadow)}
  .sidebar.is-open{transform:translateX(0)}
  .menu-btn{display:inline-flex}
  .topbar{justify-content:flex-start}
  .overlay{position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:30;display:none}
  .overlay.is-open{display:block}
  .home-grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .sidebar{transition:none}
}

/* Portal additions (cursuskeuze) */
.layout--portal{ min-height: 100vh; }
.page-header{ margin-bottom: 1.25rem; }
.card-grid{ display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.card{ border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; padding: 1rem; background: rgba(255,255,255,0.04); }
.card--link{ display: block; text-decoration: none; color: inherit; }
.card--link:hover{ background: rgba(255,255,255,0.06); }
.card__title{ font-weight: 700; font-size: 1.05rem; margin-bottom: .25rem; }
.card__meta{ opacity: .85; font-size: .95rem; }