/* pagina.css — extra klassen voor de vier verdiepingspagina's:
   rekenkunde.html, constraints.html, visie.html en kennis.html.

   Laadt altijd ná styles.css en gebruikt dezelfde variabelen en dezelfde
   twee stemmen: .vraag (serif cursief), .antwoord (serif rechtop) en
   .neutraal (feiten). Hier staat alleen wat styles.css nog niet heeft.

   Geen inline style-attributen: de CSP van deze site staat ze niet toe. */

/* ---------- leesritme ---------- */

.essay { max-width: 74ch; }

/* de CFO die zichzelf antwoordt, in gewone alinealengte */
.ik {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(20px, 2vw, 24px); line-height: 1.3;
  color: var(--nacht); margin: 0 0 16px; max-width: 46ch;
}
.nacht .ik { color: var(--wit); }

.blok { margin-top: 56px; }
.blok:first-child { margin-top: 0; }
.subkop + .neutraal, .subkop + p { margin-top: 12px; }

/* neutrale feiten onder een antwoord */
.punten { list-style: none; margin: 20px 0 0; padding: 0; max-width: 78ch; border-top: 1px solid var(--lijn); }
.punten li { position: relative; padding: 11px 0 11px 24px; border-bottom: 1px solid var(--lijn); font-size: 16px; }
.punten li::before { content: "·"; position: absolute; left: 4px; color: var(--messing-inkt); }
.nacht .punten { border-top-color: var(--lijn-n); }
.nacht .punten li { border-bottom-color: var(--lijn-n); color: var(--op-n); }
.nacht .punten li::before { color: var(--messing); }

.noot { font-size: 15px; color: var(--zacht); margin-top: 20px; max-width: 74ch; }
.nacht .noot { color: var(--op-n-z); }

/* ---------- de zes stappen op een lichte band ---------- */
/* styles.css tekent .stappen voor een nachtband; dit is de papierversie. */

.band:not(.nacht) .stappen { border-top-color: var(--nacht); border-top-width: 2px; }
.band:not(.nacht) .stappen li { color: var(--nacht); border-bottom-color: var(--lijn); }
.band:not(.nacht) .stappen li::before { color: var(--messing-inkt); }
.stappen { max-width: 78ch; }
.stappen li > b, .stappen li > span { grid-column: 2; }
.stappen b { font-weight: 400; }
.stappen span { display: block; font-family: var(--sans); font-size: 15.5px; line-height: 1.5; color: var(--zacht); margin-top: 4px; }
.nacht .stappen span { color: var(--op-n-z); }

/* ---------- twee- en drieluik ---------- */

.tweeluik { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: 44px; border-top: 2px solid var(--nacht); }
.tweeluik > div { padding: 26px 30px 12px 0; }
.tweeluik > div + div { padding-left: 30px; border-left: 1px solid var(--lijn); }
.nacht .tweeluik { border-top-color: var(--wit); }
.nacht .tweeluik > div + div { border-left-color: var(--lijn-n); }
/* vier blokken in twee rijen: geen scheidslijn links op een rijbegin */
.tweeluik.vier > div:nth-child(odd) { border-left: 0; padding-left: 0; }
.tweeluik.vier > div:nth-child(n+3) { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--lijn); }
.nacht .tweeluik.vier > div:nth-child(n+3) { border-top-color: var(--lijn-n); }

@media (max-width: 900px) {
  .tweeluik { grid-template-columns: 1fr; }
  .tweeluik.vier > div:nth-child(3) { margin-top: 0; }
  .tweeluik > div { padding-right: 0; }
  .tweeluik > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--lijn); }
  .nacht .tweeluik > div + div { border-top-color: var(--lijn-n); }
}

.drieluik { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 44px; border-top: 2px solid var(--nacht); }
.drieluik > div { padding: 26px 26px 12px 0; }
.drieluik > div + div { padding-left: 26px; border-left: 1px solid var(--lijn); }
.nacht .drieluik { border-top-color: var(--wit); }
.nacht .drieluik > div + div { border-left-color: var(--lijn-n); }
@media (max-width: 900px) {
  .drieluik { grid-template-columns: 1fr; }
  .drieluik > div { padding-right: 0; }
  .drieluik > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--lijn); }
  .nacht .drieluik > div + div { border-top-color: var(--lijn-n); }
}

.tweeluik h3, .drieluik h3, .momenten h3 {
  font-family: var(--serif); font-weight: 400; font-size: 27px; line-height: 1.12;
  color: var(--nacht); margin: 0 0 10px;
}
.nacht .tweeluik h3, .nacht .drieluik h3 { color: var(--wit); }
.tweeluik .punten, .drieluik .punten, .momenten .punten { margin-top: 14px; }

/* ---------- de zes momenten (Kennis) ---------- */

.momenten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 36px; margin-top: 44px; border-top: 2px solid var(--nacht); }
.momenten > div { padding: 26px 0 24px; border-bottom: 1px solid var(--lijn); }
.momenten .vraag { font-size: 20px; margin-bottom: 10px; max-width: none; }
.momenten .module { margin: 14px 0 0; }
@media (max-width: 980px) { .momenten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .momenten { grid-template-columns: 1fr; } }

/* ---------- begrippenlijst ---------- */

.tabel .begrippen td:first-child { font-family: var(--serif); font-size: 19px; line-height: 1.2; min-width: 15ch; }
.tabel .begrippen td { padding-right: 24px; }
.tabel .begrippen .waar { color: var(--zacht); font-size: 14.5px; }

/* ---------- vraag en antwoord, uitklapbaar ---------- */

.vragenblok { margin-top: 36px; max-width: 80ch; border-top: 1px solid var(--lijn); }
details.vraag-antwoord { border-bottom: 1px solid var(--lijn); padding: 16px 0; }
details.vraag-antwoord summary {
  cursor: pointer; list-style: none;
  font-family: var(--serif); font-style: italic; font-size: 21px; line-height: 1.3;
  color: var(--messing-inkt);
}
details.vraag-antwoord summary::-webkit-details-marker { display: none; }
details.vraag-antwoord summary::after { content: " +"; font-family: var(--mono); font-size: 15px; font-style: normal; }
details.vraag-antwoord[open] summary::after { content: " –"; }
details.vraag-antwoord p { margin: 12px 0 0; font-size: 16px; max-width: 68ch; }
.nacht .vragenblok { border-top-color: var(--lijn-n); }
.nacht details.vraag-antwoord { border-bottom-color: var(--lijn-n); }
.nacht details.vraag-antwoord summary { color: var(--messing); }

/* ---------- verwante pagina's ---------- */

.verwant { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 44px; margin-top: 36px; border-top: 1px solid var(--lijn-n); }
.verwant > a {
  display: block; text-decoration: none; padding: 20px 0;
  border-bottom: 1px solid var(--lijn-n);
}
.verwant b { display: block; font-family: var(--serif); font-weight: 400; font-size: 24px; color: var(--wit); margin-bottom: 4px; }
.verwant span { display: block; font-size: 15.5px; color: var(--op-n-z); }
.verwant > a:hover b { color: var(--messing); }
.band:not(.nacht) .verwant { border-top-color: var(--lijn); }
.band:not(.nacht) .verwant > a { border-bottom-color: var(--lijn); }
.band:not(.nacht) .verwant b { color: var(--nacht); }
.band:not(.nacht) .verwant span { color: var(--zacht); }
.band:not(.nacht) .verwant > a:hover b { color: var(--messing-inkt); }
@media (max-width: 760px) { .verwant { grid-template-columns: 1fr; } }

/* ---------- kop van een verdiepingspagina ---------- */

.pagina-kop .modulenaam { margin-bottom: 18px; }
.nacht .pagina-kop .modulenaam { color: var(--wit); }
.pagina-kop .vragenlijst { margin-bottom: 26px; }
.nacht .pagina-kop .vragenlijst li { color: var(--messing); border-bottom-color: var(--lijn-n); }

/* ---------- het nagerekende voorbeeld onder de zes stappen ---------- */
/* Breekt met opzet het ritme van de pagina: dit is het enige blok met een
   volle achtergrond, want het is het enige dat de stappen laat kloppen. */

.voorbeeld { margin-top: 28px; padding: 26px 30px; background: var(--papier-2); border-left: 2px solid var(--messing); max-width: 74ch; }
.nacht .voorbeeld { background: var(--nacht-2); border-left-color: var(--messing); }
.voorbeeld .kopje { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--messing-inkt); margin-bottom: 10px; }
.nacht .voorbeeld .kopje { color: var(--messing); }
.voorbeeld p { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--nacht); font-variant-numeric: tabular-nums; }
.nacht .voorbeeld p { color: var(--op-n); }