/* ============================================================
   CountCamp — site-styling
   Sluit aan op de werkboeken: Tol-Vibrant-palet (Mech 2026-05-29),
   KAAPA/gt_apa-tabellen, APA-typografie, rust & witruimte.
   Bronnen: feedback_quarto_callout_palet, feedback_kleurenpalet,
            feedback_kaapa_compacte_tabellen, feedback_apa_typografie.
   ============================================================ */

/* ---- Kleur-variabelen (Tol-Vibrant, Mech-versie) ---- */
:root {
  --cc-paper:      #fdfcf9;  /* warm papier-wit, achtergrond              */
  --cc-card:       #ffffff;  /* kaart-vlak                                */
  --cc-ink:        #1a1a1a;  /* lopende tekst                             */
  --cc-ink-soft:   #4a4a4a;  /* secundaire tekst                         */
  --cc-blue:       #2A79A7;  /* concept / accent / links                  */
  --cc-blue-deep:  #1a3a5c;  /* koppen                                    */
  --cc-mauve:      #AD8EB4;  /* vuistregel / manuscript                   */
  --cc-green:      #4D8962;  /* antwoord / archief                        */
  --cc-purple:     #6A6EAF;  /* opgave / over                             */
  --cc-orange:     #EC8346;  /* waarschuwing                              */
  --cc-red:        #F05633;  /* belangrijk                                */
  --cc-line:       #ece8e0;  /* zachte randen                             */
}

/* ---- Basis: rust ---- */
body {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--cc-ink);
  background-color: var(--cc-paper);
  font-variant-numeric: tabular-nums;   /* nette cijfer-uitlijning (APA) */
}

p  { margin-bottom: 1.4rem; }
ul, ol { margin-bottom: 1.4rem; }

/* ---- Koppen: Helvetica Neue, royale ruimte ---- */
h1, h2, h3, h4, h5 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  color: var(--cc-blue-deep);
}
h2 { margin-top: 3.2rem; margin-bottom: 1.2rem; }
h3 { margin-top: 2.4rem; margin-bottom: 0.9rem; }

/* ---- Links: spaarzaam accent ---- */
a            { color: var(--cc-blue); text-decoration: none; }
a:hover      { color: var(--cc-blue-deep); text-decoration: underline; }

/* ---- Navbar: stil en papierachtig ---- */
.navbar {
  background-color: var(--cc-paper) !important;
  border-bottom: 1px solid var(--cc-line);
  font-family: "Helvetica Neue", sans-serif;
}
.navbar .navbar-brand {
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--cc-blue-deep) !important;
}
.navbar .nav-link        { color: var(--cc-ink-soft) !important; }
.navbar .nav-link:hover  { color: var(--cc-blue) !important; }

/* ---- Footer: klein en zacht ---- */
.nav-footer {
  background-color: var(--cc-paper);
  border-top: 1px solid var(--cc-line);
  color: #8a8378;
  font-size: 0.9rem;
}
.nav-footer a { color: #8a8378; }

/* ---- Blockquote ---- */
blockquote {
  border-left: 4px solid var(--cc-blue);
  background-color: #DFEBF2;
  padding: 0.6rem 1rem;
  color: var(--cc-blue-deep);
  font-style: italic;
}

/* ============================================================
   Homepage: hero + kleur-kaarten
   ============================================================ */
.cc-hero {
  max-width: 820px;
  margin: 4.5rem auto 1rem;
  padding: 0 1.2rem;
}
.cc-hero h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 3.4rem;
  font-weight: 700;
  color: var(--cc-blue-deep);
  letter-spacing: -0.5px;
  margin: 0;
}
.cc-rule {
  width: 64px;
  height: 4px;
  background: var(--cc-blue);
  border-radius: 2px;
  margin: 0.8rem 0 1.5rem;
}
.cc-tagline {
  font-size: 1.4rem;
  line-height: 1.5;
  color: #3a4a59;
  font-style: italic;
  max-width: 34ch;
}
.cc-tagline em { font-style: normal; font-weight: 600; color: var(--cc-blue); }

.cc-cards {
  max-width: 1000px;
  margin: 3rem auto 5rem;
  padding: 0 1.2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.4rem;
}
.cc-card {
  background: var(--cc-card);
  border: 1px solid var(--cc-line);
  border-top: 4px solid #ccc;
  border-radius: 8px;
  padding: 1.4rem 1.6rem 1.6rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cc-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(26, 58, 92, 0.09);
}
.cc-card h3 {
  font-size: 1.25rem;
  margin: 0.1rem 0 0.6rem;
}
.cc-card h3 a { color: var(--cc-blue-deep); }
.cc-card h3 a:hover { color: var(--cc-blue); text-decoration: none; }
.cc-card p {
  font-family: Georgia, serif;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--cc-ink-soft);
  margin: 0;
}
.cc-card-werkboeken { border-top-color: var(--cc-blue); }
.cc-card-manuscript { border-top-color: var(--cc-mauve); }
.cc-card-archief    { border-top-color: var(--cc-green); }
.cc-card-over       { border-top-color: var(--cc-purple); }

/* ============================================================
   Callouts: Tol-Vibrant-palet (klaar voor werkboek-inhoud)
   appearance: default, icon: false
   ============================================================ */
.callout {
  border: none;
  border-radius: 6px;
  overflow: hidden;
  margin: 2.6rem 0 !important;
}
.callout.callout-style-default > .callout-header {
  padding: 0.5rem 1rem;
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 600;
}

.callout-note    > .callout-header { background: var(--cc-blue);   color: #fff; }
.callout-note      { background: #DFEBF2; }
.callout-tip     > .callout-header { background: var(--cc-mauve);  color: #3a2f40; }
.callout-tip       { background: #F3EEF4; }
.callout-warning > .callout-header { background: var(--cc-orange); color: #fff; }
.callout-warning   { background: #FCECE3; }
.callout-important > .callout-header { background: var(--cc-red);  color: #fff; }
.callout-important { background: #FDE6E0; }
.callout-caution > .callout-header { background: var(--cc-green);  color: #fff; }
.callout-caution   { background: #E4EDE7; }

/* Eigen modifiers uit de werkboeken (alvast klaar) */
.callout-note.opgave   > .callout-header { background: var(--cc-purple); color: #fff; }
.callout-note.opgave     { background: #E9E9F3; }
.callout-note.tidy-alt > .callout-header { background: #9CC4A3; color: #24402c; }
.callout-note.tidy-alt   { background: #F0F6F1; }

/* ============================================================
   KAAPA / gt_apa-tabellen (APA 7)
   ============================================================ */
.gt_table_container {
  width: fit-content !important;
  max-width: 100% !important;
  margin: 2rem auto;
}
.gt_table { font-family: "Times New Roman", Georgia, serif; }
.gt_title {
  text-align: left !important;
  font-weight: normal !important;
  font-style: normal !important;
  line-height: 1.4 !important;
}
.gt_title em { font-style: italic !important; }

/* ============================================================
   APA-typografie (italic-spacing voor r =, p =, M, SD)
   ============================================================ */
em      { margin-right: 0.08em; }
em em   { margin-right: 0; }

/* ---- Inline-helpers uit de werkboeken ---- */
.getal { color: #b56028; font-weight: 500; }
.eng   { color: #7d8a93; font-style: italic; font-size: 0.88em; }
.eng::before { content: "("; }
.eng::after  { content: ")"; }