/* ============================================================
   werkboek.css — GGZ-VS/JASP-werkboek
   De DOEN-arm van "De regressieve ruggengraat".
   Versie 0.1 (23-7-2026).

   DUO-SIGNATUUR met het boek (besloten 23-7-2026):
   - Papier, bureau en typografie komen uit boek/01_schetsen/boek.css
     (waarden hier GEKOPIEERD met bron-commentaar — géén koppeling; het
     boek blijft onaangeraakt). Boek en werkboek liggen op één bureau.
   - De callout-familie komt uit de countcamp/OZP1-huisstijl
     (uni_leiden/.../_common/styles/countcamp.css + ONTWERP_A §3b),
     gedeeld voor cross-cursus-herkenning. .spss-syntax heet hier .jasp.
   - De voet-callout .boekvorm ("Zelfde vorm in het boek") is nieuw:
     zand + EB Garamond = typografisch een citaat uit het boek.

   Bewuste DIVERGENTIE t.o.v. het boek: de body is LINKS uitgelijnd
   (ragged right) i.p.v. justified — dit is een naslagwerk, geen leesboek.
   ============================================================ */

/* ============================================================
   A. PAPIER & BUREAU  (uit boek.css — zelfde bureau als het boek)
   ============================================================ */

html {
  background-color: #f0ece4;          /* bureau-beige (boek.css r.8) */
}

body {
  font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
  font-size: 17px;
  line-height: 1.75;
  color: #2a2520;
  background-color: #f0ece4;           /* bureau-beige loopt door — geen witte doos */
}

/* ============================================================
   WEBSITE-LAYOUT — de inhoudsopgave zweeft op het bureau (crème,
   geen wit kader), naar links met lucht; alleen de leeskolom is papier.
   ============================================================ */
.sidebar.sidebar-navigation,
.sidebar.sidebar-navigation.docked,
#quarto-sidebar,
nav.sidebar {
  background-color: transparent !important;
  border-right: none !important;
  box-shadow: none !important;
  padding-left: 0.5rem;
}
.sidebar-navigation .sidebar-item-text { color: #4a4540; }
.sidebar-navigation .sidebar-link.active { font-weight: 600; color: #2a2520; }
.sidebar-navigation .sidebar-title { color: #6a655c; }

/* De leeskolom = het papier-witte vel: lucht van de inhoudsopgave, iets breder,
   zachte schaduw zodat het los op het bureau ligt. */
main.content,
#quarto-document-content {
  background-color: #fdfcf9;
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.08);
  border-radius: 3px;
  padding: 2.6em 3.4em 4em !important;
  margin-left: auto;      /* gecentreerd: witruimte links en rechts in balans */
  margin-right: auto;
  max-width: none;    /* grid body-width (950px) bepaalt de breedte */       /* iets breder */
}

/* DIVERGENTIE: naslagwerk = links uitgelijnd, geen woordafbreking.
   (Het boek is hier justified; dat is het verschil tussen lezen en opzoeken.) */
p, li {
  text-align: left;
  hyphens: none;
  margin-bottom: 1.2em;
}

/* --- Koppen: de zes-slag-koppen ZIJN de vormgeving (geen kleur per slag) --- */
h1 {
  margin-top: 0;
  margin-bottom: 1.6em;
  font-weight: 600;
  font-size: 1.9em;
  color: #2a2520;
}
h2 {
  margin-top: 2.6em;
  margin-bottom: 1em;
  font-weight: 600;
  font-size: 1.35em;
  color: #2a2520;
}
h3 {
  margin-top: 2em;
  margin-bottom: 0.8em;
  font-weight: 500;
  font-size: 1.12em;
  color: #3a3530;
}
h1 + p, h2 + p, h3 + p { margin-top: 0.4em; }

/* Titelblok (Quarto #title-block-header) — boek-waardig, droog */
#title-block-header { margin: 0 0 2.4em; }
#title-block-header h1.title {
  font-size: 1.9em;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 0.35em;
  color: #2a2520;
}
#title-block-header p.subtitle.lead {
  font-size: 1.02em;
  font-weight: 400;
  color: #6a655c;
  margin: 0;
  text-align: left;
}

/* --- Code (bestandsnamen, kolommen, JASP-velden in lopende tekst) --- */
code {
  background-color: #f5f0e8;
  padding: 0.1em 0.35em;
  border-radius: 3px;
  font-size: 0.9em;
  font-family: 'Fira Code', 'Source Code Pro', Menlo, Consolas, monospace;
  color: #4a3f30;
}
pre {
  background-color: #faf6f0;
  border-left: 3px solid #c8a97e;
  padding: 1.1em 1.4em;
  margin: 1.6em 0;
  font-size: 0.92em;
  line-height: 1.55;
  border-radius: 4px;
  overflow-x: auto;
}

/* --- Het "Vooraf, in één zin"-blockquote bovenaan + citaten --- */
blockquote {
  margin: 1.6em 0;
  padding: 0.6em 1.2em;
  border-left: 3px solid #c8b8a0;
  background-color: #f7f3ec;
  color: #4a4540;
  font-style: normal;
}
blockquote p { text-align: left; margin-bottom: 0.6em; }
blockquote p:last-child { margin-bottom: 0; }

/* --- Tabellen: APA-stijl (horizontale lijnen), als in het boek --- */
table {
  margin: 1.8em 0;
  border-collapse: collapse;
  border-top: 2.5px solid #000;
  border-bottom: 2.5px solid #000;
  line-height: 1.3;
  font-size: 0.96em;
}
thead th {
  border-bottom: 1px solid #000;
  text-align: left;
  padding: 0.42em 1em 0.22em;
  font-weight: 600;
}
tbody td { padding: 0.2em 1em; border: none; }

/* --- Horizontale separator --- */
hr {
  border: none;
  border-top: 1px solid #e0d4be;
  margin: 3em auto;
  width: 50%;
}

/* ============================================================
   B. CALLOUT-FAMILIE  (uit countcamp.css + ONTWERP_A §3b)
   Gevulde gekleurde titel-balk + lichte body. Gedeeld met de
   OZP1/MVDA-werkboeken voor cross-cursus-herkenning.
   ============================================================ */

.callout {
  margin-top: 2.4em !important;
  margin-bottom: 2.4em !important;
  border-radius: 6px;
  overflow: hidden;
}
.callout > .callout-header {
  padding: 0.55rem 1rem !important;
  font-weight: 700 !important;
  border-bottom: none !important;
}
.callout > .callout-header .callout-title-container {
  font-weight: 700 !important;
  letter-spacing: 0.01em;
}
.callout > .callout-body-container,
.callout > div.callout-collapse {
  padding: 0.9rem 1.15rem !important;
}
.callout li { margin-bottom: 0.5rem; }

/* Neutraliseer Quarto's default note-streepje (zoals boek.css r.814) */
.callout { border-left-color: #d8d3c8 !important; }

/* ---------- Opgave (.opgave, #6A6EAF indigo) ---------- */
.callout-note.opgave {
  border-color: #6A6EAF !important;
  border-left: none !important;
}
.callout-note.opgave > .callout-header,
.callout-note.opgave > .callout-header .callout-title-container {
  background-color: #6A6EAF !important;
  color: #ffffff !important;
}
.callout-note.opgave > .callout-body-container,
.callout-note.opgave > div.callout-collapse {
  background-color: #E9E9F3 !important;
}

/* ---------- Antwoord / uitwerking (callout-caution, #4D8962 groen, collapse) ---------- */
.callout-caution {
  border-color: #4D8962 !important;
  border-left: none !important;
}
.callout-caution > .callout-header,
.callout-caution > .callout-header .callout-title-container {
  background-color: #4D8962 !important;
  color: #ffffff !important;
}
.callout-caution .callout-icon-container,
.callout-caution .callout-icon::before { display: none !important; }
.callout-caution .callout-header { padding-left: 1rem !important; }
.callout-caution > .callout-body-container,
.callout-caution > div.callout-collapse {
  background-color: #E4EDE7 !important;
}

/* ---------- JASP-klikpad (.jasp, #4A5D7E slate — "de plek waar de software woont") ---------- */
/* Zelfde slate als .spss-syntax elders: de tool wisselt, de plek niet. */
.callout-note.jasp {
  border-color: #4A5D7E !important;
  border-left: none !important;
}
.callout-note.jasp > .callout-header,
.callout-note.jasp > .callout-header .callout-title-container {
  background-color: #4A5D7E !important;
  color: #ffffff !important;
}
.callout-note.jasp > .callout-body-container,
.callout-note.jasp > div.callout-collapse {
  background-color: #E1E7EF !important;
}
.callout-note.jasp code {
  font-family: 'Menlo', 'Monaco', 'Consolas', monospace !important;
  font-size: 0.9rem;
}
/* klikpad als pad-notatie: Analyses > T-Tests > Paired Samples */
.callout-note.jasp .klikpad { font-weight: 600; letter-spacing: 0.01em; }

/* ---------- SPSS-klikpad (.spss, zelfde #4A5D7E slate als .jasp) ---------- */
/* De tool wisselt, de plek niet: SPSS krijgt exact dezelfde slate-signatuur. */
.callout-note.spss {
  border-color: #4A5D7E !important;
  border-left: none !important;
}
.callout-note.spss > .callout-header,
.callout-note.spss > .callout-header .callout-title-container {
  background-color: #4A5D7E !important;
  color: #ffffff !important;
}
.callout-note.spss > .callout-body-container,
.callout-note.spss > div.callout-collapse {
  background-color: #E1E7EF !important;
}
.callout-note.spss code {
  font-family: 'Menlo', 'Monaco', 'Consolas', monospace !important;
  font-size: 0.9rem;
}
/* klikpad als pad-notatie: Analyze > Compare Means > Paired-Samples T Test */
.callout-note.spss .klikpad { font-weight: 600; letter-spacing: 0.01em; }

/* ---------- Formule (lezen, niet rekenen) (.formule, #2F7E78 teal, ƒ) ---------- */
.callout-note.formule {
  border-color: #2F7E78 !important;
  border-left: none !important;
}
.callout-note.formule > .callout-header,
.callout-note.formule > .callout-header .callout-title-container {
  background-color: #2F7E78 !important;
  color: #ffffff !important;
}
.callout-note.formule .callout-icon-container,
.callout-note.formule .callout-icon::before { display: none !important; }
.callout-note.formule > .callout-header { padding-left: 1rem !important; }
.callout-note.formule > .callout-header .callout-title-container::before {
  content: "\0192\00a0\00a0";        /* ƒ */
  font-style: italic;
  font-weight: 700;
}
.callout-note.formule > .callout-body-container,
.callout-note.formule > div.callout-collapse {
  background-color: #E6F0EE !important;
}
.callout-note.formule .callout-body-container hr {
  border: none;
  border-top: 1px solid #b9d6cf;
  margin: 0.6rem 0 0.9rem;
  width: 100%;
}

/* ---------- APA-oefening (.apa, #7A5A44 hout-bruin, ✎ — "Schrijf het op") ---------- */
.callout-note.apa {
  border-color: #7A5A44 !important;
  border-left: none !important;
}
.callout-note.apa > .callout-header,
.callout-note.apa > .callout-header .callout-title-container {
  background-color: #7A5A44 !important;
  color: #ffffff !important;
}
.callout-note.apa .callout-icon-container,
.callout-note.apa .callout-icon::before { display: none !important; }
.callout-note.apa > .callout-header { padding-left: 1rem !important; }
.callout-note.apa > .callout-header .callout-title-container::before {
  content: "\270E\00a0\00a0";         /* ✎ */
  font-weight: 700;
}
.callout-note.apa > .callout-body-container,
.callout-note.apa > div.callout-collapse {
  background-color: #F2ECE4 !important;
}

/* ============================================================
   C. VOET-CALLOUT .boekvorm — "Zelfde vorm in het boek" (nieuw)
   Een plain div (géén Quarto-callout) zodat het machine-anker
   data-w onaangeroerd in de HTML overleeft: <div class="boekvorm"
   data-w="W6">. Typografisch een citaat uit het boek: EB Garamond,
   zand, ◠. Smalle strook aan de voet, dunne zandlijn erboven.
   ============================================================ */
.boekvorm {
  font-family: 'EB Garamond', 'Crimson Pro', Georgia, serif;
  font-size: 0.98em;
  line-height: 1.7;
  color: #4a3f1e;
  background-color: #F8F4E8;          /* zand-body (ONTWERP_A) */
  border-top: 2px solid #C2A868;      /* dunne zandlijn */
  border-radius: 0 0 4px 4px;
  margin: 3.5em -1.5em 0;             /* smalle strook, iets in de marge */
  padding: 1em 1.5em 1.1em;
}
.boekvorm p {
  text-align: left;
  margin-bottom: 0.5em;
}
.boekvorm p:last-child { margin-bottom: 0; }
/* De titelregel (◠ **Zelfde vorm in het boek**) draagt het boogje al in
   de tekst; een stille bold-label in Garamond, géén kapitalen — dit is een
   citaat uit het boek, geen UI-etiket. */
.boekvorm > p:first-child {
  font-size: 0.94em;
  font-weight: 600;
  color: #8a7433;
  margin-bottom: 0.7em;
}
/* De cursieve slotzin (structuur-duiding) mag fluisteren */
.boekvorm em { color: #6a5a2e; }

/* ============================================================
   D. WERKNOTITIES + inline-helpers
   ============================================================ */

/* .werk — licht plakbriefje voor TODO's (bv. boek-hoofdstuk nog grof).
   Lichte variant: geen JS-rail/toggle (dat komt later uit boek's _afterbody). */
.werk {
  background-color: #fbf2ad;
  background-image: linear-gradient(180deg, #fdf8c9 0%, #f8eda1 100%);
  color: #4a4020;
  font-size: 0.82em;
  line-height: 1.5;
  padding: 0.7em 1em 0.8em;
  margin: 1.4em 0;
  box-shadow: 1px 3px 9px rgba(70, 55, 0, 0.18);
  border-radius: 1px;
}
.werk::before {
  content: "✎ werk";
  display: block;
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #96832e;
  margin-bottom: 0.35em;
}
.werk p { margin-bottom: 0.4em; }
.werk p:last-child { margin-bottom: 0; }

/* .eng — Engelse term tussen haakjes, gedempt (optionele helper) */
.eng { color: #7d8a93; font-style: italic; font-size: 0.9em; }

/* JASP-output-screenshots (later, in één ronde) — zachte kaderlijn */
img[src*="/pics/"], img[src*="screenshot"] {
  border: 1px solid #c5c8d4;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  margin: 1rem 0;
  max-width: 100%;
}

/* ============================================================
   E. PRINT — schaduw weg, wit papier
   ============================================================ */
@media print {
  html { background-color: white; }
  body {
    max-width: 100%; width: 100%; margin: 0;
    padding: 2.2cm 2.5cm 2.5cm;
    box-shadow: none; border-radius: 0; background-color: white;
    font-size: 11pt; line-height: 1.5; color: black;
  }
  .callout, .boekvorm, table { page-break-inside: avoid; break-inside: avoid; }
  h1, h2, h3 { page-break-after: avoid; break-after: avoid; }
  .werk { display: none; }
}

/* ============================================================
   F. INHOUD-TOGGLE — klein knopje om de inhoudsopgave weg te klappen
      voor breder lezen (JS-toggle in _quarto.yml include-after-body).
   ============================================================ */
html.toc-weg .sidebar.sidebar-navigation,
html.toc-weg #quarto-sidebar { display: none !important; }
html.toc-weg main.content,
html.toc-weg #quarto-document-content {
  max-width: 60rem;
  margin-left: auto;
  margin-right: auto;
}
#toc-toggle {
  position: fixed;
  bottom: 14px;
  left: 14px;
  z-index: 1000;
  font-size: .85rem;
  padding: .3em .7em;
  background: #F8F4E8;
  border: 1px solid #C2A868;
  border-radius: 16px;
  color: #4a3f1e;
  cursor: pointer;
  opacity: .85;
}

/* Downloadknop voor de dataset — in de doe-sectie van elk blok */
.data-download{display:inline-block;margin:.3rem 0 1.2rem;padding:.5em 1em;background:#4A5D7E;color:#fff !important;border-radius:6px;font-weight:600;text-decoration:none !important;font-size:.95em;}
.data-download:hover{background:#3a4a66;}