/* CountCamp Lab — callout-stijl
   ----------------------------------------------------------------------
   Kleurpalet — gekozen door Mech (2026-05-29), zachter/pastel.
   Synchroon te houden met styles/countcamp.tex.

     ccConcept   #2A79A7  concept (note)               blauw
     ccOpg       #6A6EAF  opgave (note .opgave)        indigo-paars
     ccTip       #AD8EB4  vuistregel (tip)             mauve  (donkere titel)
     ccAlarm     #EC8346  alarm (warning)              oranje
     ccDont      #F05633  don't (important)            rood-oranje
     ccAns       #4D8962  antwoord (caution)           groen
     ccAlt       #9CC4A3  reserve (.tidy-alt)          licht groen (donkere titel)
     ccSpss      #4A5D7E  SPSS-syntax (.spss-syntax)   slate-blue
     ccConv      #D3D182  conventie (.conventie / .rotterdam-conventie)  olijf (donkere titel)

   Stijl: gevulde gekleurde title-balk + lichte body. Header-tekst wit,
   behalve op de lichtere kleuren (tip / tidy-alt / conventie) waar wit
   onleesbaar is — daar donkere tekst.
   ---------------------------------------------------------------------- */

body {
  font-family: 'Georgia', serif;
  font-size: 1.05rem;
  line-height: 1.85;
  color: #1a1a1a;
}

h1, h2, h3 {
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 600;
  color: #1a3a5c;
}
h1 { margin-top: 5rem;    margin-bottom: 1.75rem; }
h2 { margin-top: 4rem;    margin-bottom: 1.4rem; }
h3 { margin-top: 3rem;    margin-bottom: 1.1rem; }

p { margin-bottom: 1.4rem; }

div.sourceCode,
pre {
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
}

.callout {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
  border-radius: 6px;
  overflow: hidden;
}

.callout > .callout-header {
  padding: 0.6rem 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: 1rem 1.2rem !important;
}

.callout div.sourceCode,
.callout pre {
  margin-top: 1.2rem !important;
  margin-bottom: 1.2rem !important;
}

.callout p strong:first-child {
  display: inline-block;
  margin-top: 0.4rem;
}

blockquote {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.callout li { margin-bottom: 0.55rem; }
ul, ol { margin-bottom: 1.4rem; }

/* =====================================================================
   De callouts — gevulde header-balk + lichte body
   ===================================================================== */

/* ---------- 1. Concept (callout-note, #2A79A7) ---------------------- */
.callout-note:not(.opgave):not(.tidy-alt):not(.spss-syntax):not(.rotterdam-conventie):not(.conventie) {
  border-color: #2A79A7 !important;
  border-left: none !important;
}
.callout-note:not(.opgave):not(.tidy-alt):not(.spss-syntax):not(.rotterdam-conventie):not(.conventie) > .callout-header,
.callout-note:not(.opgave):not(.tidy-alt):not(.spss-syntax):not(.rotterdam-conventie):not(.conventie) > .callout-header .callout-title-container {
  background-color: #2A79A7 !important;
  color: #ffffff !important;
}
.callout-note:not(.opgave):not(.tidy-alt):not(.spss-syntax):not(.rotterdam-conventie):not(.conventie) > .callout-body-container,
.callout-note:not(.opgave):not(.tidy-alt):not(.spss-syntax):not(.rotterdam-conventie):not(.conventie) > div.callout-collapse {
  background-color: #DFEBF2 !important;
}

/* ---------- 2. Opgave (callout-note .opgave, #6A6EAF) --------------- */
.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;
}

/* ---------- 3. Vuistregel (callout-tip, #AD8EB4, donkere titel) ----- */
.callout-tip {
  border-color: #AD8EB4 !important;
  border-left: none !important;
}
.callout-tip > .callout-header,
.callout-tip > .callout-header .callout-title-container {
  background-color: #AD8EB4 !important;
  color: #3a2f40 !important;
}
.callout-tip > .callout-body-container,
.callout-tip > div.callout-collapse {
  background-color: #F3EEF4 !important;
}

/* ---------- 4. Alarm (callout-warning, #EC8346) -------------------- */
.callout-warning {
  border-color: #EC8346 !important;
  border-left: none !important;
}
.callout-warning > .callout-header,
.callout-warning > .callout-header .callout-title-container {
  background-color: #EC8346 !important;
  color: #ffffff !important;
}
.callout-warning > .callout-body-container,
.callout-warning > div.callout-collapse {
  background-color: #FCECE3 !important;
}

/* ---------- 5. Don't (callout-important, #F05633) ------------------ */
.callout-important {
  border-color: #F05633 !important;
  border-left: none !important;
}
.callout-important > .callout-header,
.callout-important > .callout-header .callout-title-container {
  background-color: #F05633 !important;
  color: #ffffff !important;
}
.callout-important > .callout-body-container,
.callout-important > div.callout-collapse {
  background-color: #FDE6E0 !important;
}

/* ---------- 6. Antwoord (callout-caution, #4D8962) ----------------- */
.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;
}

/* ---------- 7. Reserve / alternatief (.tidy-alt, #9CC4A3, donkere titel) */
.callout-note.tidy-alt {
  border-color: #9CC4A3 !important;
  border-left: none !important;
}
.callout-note.tidy-alt > .callout-header,
.callout-note.tidy-alt > .callout-header .callout-title-container {
  background-color: #9CC4A3 !important;
  color: #24402c !important;
}
.callout-note.tidy-alt > .callout-body-container,
.callout-note.tidy-alt > div.callout-collapse {
  background-color: #F0F6F1 !important;
}

/* ---------- 8. SPSS-syntax (.spss-syntax, #4A5D7E) ----------------- */
.callout-note.spss-syntax {
  border-color: #4A5D7E !important;
  border-left: none !important;
}
.callout-note.spss-syntax > .callout-header,
.callout-note.spss-syntax > .callout-header .callout-title-container {
  background-color: #4A5D7E !important;
  color: #ffffff !important;
}
.callout-note.spss-syntax > .callout-body-container,
.callout-note.spss-syntax > div.callout-collapse {
  background-color: #E1E7EF !important;
}
.callout-note.spss-syntax pre,
.callout-note.spss-syntax code {
  font-family: 'Menlo', 'Monaco', 'Consolas', monospace !important;
  font-size: 0.92rem;
}

/* ---------- 9. Conventie (.conventie / .rotterdam-conventie, #D3D182, donkere titel) */
.callout-note.rotterdam-conventie,
.callout-note.conventie {
  border-color: #D3D182 !important;
  border-left: none !important;
}
.callout-note.rotterdam-conventie > .callout-header,
.callout-note.rotterdam-conventie > .callout-header .callout-title-container,
.callout-note.conventie > .callout-header,
.callout-note.conventie > .callout-header .callout-title-container {
  background-color: #D3D182 !important;
  color: #4a4516 !important;
}
.callout-note.rotterdam-conventie > .callout-body-container,
.callout-note.rotterdam-conventie > div.callout-collapse,
.callout-note.conventie > .callout-body-container,
.callout-note.conventie > div.callout-collapse {
  background-color: #F8F8EC !important;
}

/* ---------- SPSS-output-PNGs --------------------------------------- */
img[src*="/pics/"], img[src*="/output_raw/"] {
  border: 1px solid #c5c8d4;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  margin: 1rem 0;
  max-width: 100%;
}

/* ---------- inline-helpers ------------------------------------------- */

.dieren-subtitel {
  font-family: 'Georgia', serif;
  font-style: italic;
  color: #6c7a89;
  font-size: 1.05rem;
  margin-top: -0.6rem;
  margin-bottom: 1.4rem;
  padding-left: 0.1rem;
}

.getal {
  color: #b56028;
  font-weight: 500;
}

.eng {
  color: #7d8a93;
  font-style: italic;
  font-size: 0.88em;
}
.eng::before { content: "("; }
.eng::after  { content: ")"; }

blockquote {
  border-left: 4px solid #2A79A7;
  background-color: #DFEBF2;
  padding: 0.5rem 1rem;
  font-size: 1.05rem;
  color: #1a3a5c;
}

table {
  font-size: 0.95rem;
}