/* Sustiro · artikelopmaak · 2026-10-03
   Waarden: SuperHi Basic Income (Refero-stijl e57d9536, reference lock van het Methodepaneel):
   spacingschaal 8 · 16 · 24 · 32 · 64, sectiegat 64px, kop-onderruimte 8px, kaartpadding 32px,
   knopradius 16px, geen schaduwen, 1px lijnen in de merkkleur, typeschaal Major Second (1,125).
   Kleuren en letter blijven Sustiro (besluit Ronald 30-09): navy #2C5F8A, IBM Plex Sans, body 19px.
   Typeschaal op 19px × 1,125: 19 · 21 · 24 · 27 · 30 · 34. */

/* 1 · Eén lettergrootte voor lopende tekst, overal in het artikel */
#cvart .body > p, #cvart .body > ul li, #cvart .body > ol li{font-size:18px; line-height:1.6; color:var(--su-ink,#1a2332);} /* A2 09-10-2026 */
#cvart .body > p{margin:0 0 20px;}
#cvart .body > ul, #cvart .body > ol{margin:0 0 20px; padding-left:26px;}
#cvart .body > ul li, #cvart .body > ol li{margin:0 0 6px;}

/* 2 · Koppen: veel ruimte erboven, weinig eronder, zodat een kop bij wat volgt hoort */
#cvart .body > h2{font-size:28px; line-height:1.2; font-weight:700; color:var(--su-navy-dk,#1A2A3A); margin:44px 0 12px; letter-spacing:-.015em;} /* A1 09-10-2026: minder lucht */
#cvart .body > h3{font-size:22px; line-height:1.3; font-weight:700; color:var(--su-navy-dk,#1A2A3A); margin:28px 0 8px;}
#cvart .body > h2 + figure.kb-figure, #cvart .body > h3 + figure.kb-figure,
#cvart .body > h2 + blockquote, #cvart .body > h3 + blockquote,
#cvart .body > h2 + .su-direct, #cvart .body > h3 + .su-direct{margin-top:16px;}
#cvart .body > h2 + p, #cvart .body > h3 + p{margin-top:0;}

/* 3 · Laag-opener: het begin van een van de vier lagen is een hoofdstukband in paneelkleur */
body.has-methodepaneel #cvart .body > h2[data-mp-first]{
  position:relative; margin:40px 0 20px; padding:44px 28px 26px; border-radius:16px;
  background-color:var(--su-panel,#2C5F8A); color:#fff; font-size:30px; line-height:1.16;
  background-image:radial-gradient(rgba(255,255,255,.10) 1.2px,transparent 1.3px); background-size:9px 9px;
}
body.has-methodepaneel #cvart .body > h2[data-mp-first]::before{
  position:absolute; left:28px; top:18px; font-family:var(--su-mono,"IBM Plex Mono",monospace); font-size:13px;
  font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--su-panel-dim,#C9DBEA);
}
body.has-methodepaneel #cvart .body > h2[data-mp-first][data-mp-layer="1"]::before{content:"Laag 1 van 4 · Begrijpen";}
body.has-methodepaneel #cvart .body > h2[data-mp-first][data-mp-layer="2"]::before{content:"Laag 2 van 4 · Herkennen";}
body.has-methodepaneel #cvart .body > h2[data-mp-first][data-mp-layer="3"]::before{content:"Laag 3 van 4 · Beïnvloeden";}
body.has-methodepaneel #cvart .body > h2[data-mp-first][data-mp-layer="4"]::before{content:"Laag 4 van 4 · Structureren";}
body.has-methodepaneel #cvart .body > h2[data-mp-first] + figure.kb-figure{margin-top:20px;}
/* E21 09-10-2026: het laaglabel staat al in de band; het losse regeltje erboven en de scheidingsstreep ervoor verdwijnen. */
body.has-methodepaneel #cvart .body > p.mp-lyr{display:none;}
body.has-methodepaneel #cvart .body > hr:has(+ p.mp-lyr), body.has-methodepaneel #cvart .body > hr:has(+ h2[data-mp-first]){display:none;}
/* A1 09-10-2026: de "---" uit de brontekst staat vóór elke H2; de kop scheidt al, de streep geeft alleen lucht en een lijn. */
#cvart .body > hr:has(+ h2){display:none;}

/* 4 · Direct antwoord: omlijnd kader met navy tint */
#cvart .body > p.su-direct{
  margin:24px 0 32px; padding:24px 32px; border:1px solid rgba(44,95,138,.25); border-left:4px solid var(--su-panel,#2C5F8A);
  border-radius:16px; background:#EEF3F8; color:var(--su-ink,#1a2332);
}
#cvart .body > p.su-direct > strong:first-child{display:block; margin:0 0 8px; font-family:var(--su-mono,"IBM Plex Mono",monospace);
  font-size:13px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--su-panel,#2C5F8A);}

/* 5 · Alarmsignalenblok: zelfde lettergrootte als de lopende tekst */
/* E19 09-10-2026: kleiner en compacter, blijft boven de vouw (ook als het blok in de kop staat, .su-kopblok) */
#cvart .body blockquote.alarmblok, #cvart .su-kopblok blockquote.alarmblok{font-size:16.5px; line-height:1.5; padding:14px 20px 12px 18px; margin:12px 0 20px;}
#cvart .body blockquote.alarmblok p, #cvart .su-kopblok blockquote.alarmblok p{margin:0 0 8px;}
#cvart .body blockquote.alarmblok ul, #cvart .su-kopblok blockquote.alarmblok ul{margin:0 0 8px; padding-left:20px;}
#cvart .body blockquote.alarmblok li, #cvart .su-kopblok blockquote.alarmblok li{font-size:16.5px; margin:0 0 4px;}

/* 6 · Figuren: bijschrift en uitklaptekst leesbaar */
/* A8 09-10-2026: bijschrift hoort zichtbaar bij het beeld; "in woorden" als los, licht kader in kleinere cursieve letter */
/* Levering 2 (09-10-2026): beeld · bron · bijschrift · uitleg in woorden = één blok, zonder witregels ertussen; de ruimte komt
   pas onder het hele blok. Het bijschrift en de uitleg vormen samen een lichte voet onder de plaat, even breed als de plaat. */
#cvart figure.kb-figure{margin:32px 0 32px;}
#cvart figure.kb-figure figcaption, #cvart figure.kb-figure figcaption:not(.vc){font-size:15px; line-height:1.5; color:var(--su-muted,#4a5868); margin:0; padding:10px 14px; background:var(--su-soft,#F4F7FA); border:1px solid var(--su-line,#DBE2E8); border-left:3px solid var(--su-panel-dim,#C9DBEA); border-radius:12px;}
#cvart figure.kb-figure:has(details.plaat-tekst) figcaption{border-radius:12px 12px 0 0; border-bottom:0;}
#cvart .body details.plaat-tekst{margin:14px 0 32px; padding:10px 14px; font-size:15px; line-height:1.55; font-style:italic; color:var(--su-muted,#4a5868); background:var(--su-soft,#F4F7FA); border:1px solid var(--su-line,#DBE2E8); border-radius:12px; width:auto; max-width:100%;}
#cvart figure.kb-figure details.plaat-tekst{margin:0; border-top:1px solid var(--su-line,#DBE2E8); border-left:3px solid var(--su-panel-dim,#C9DBEA); border-radius:0 0 12px 12px;}
#cvart .body details.plaat-tekst summary{font-size:14px; font-style:normal; font-weight:600; color:var(--su-panel,#2C5F8A); width:auto;}
#cvart .body details.plaat-tekst p{margin:8px 0 0; padding:0; background:none; border-radius:0; font-size:15px;}

/* 7 · Veelgestelde vragen: zelfde grootte als de lopende tekst, donkere letter, getinte kaarten */
#cvart .faq{margin-top:40px;}
#cvart .faq h2{font-size:28px; line-height:1.2; margin:0 0 20px;}
#cvart .faq details{background:var(--su-soft,#F4F7FA); border:1px solid rgba(44,95,138,.18); border-radius:16px; margin-bottom:16px;}
#cvart .faq details[open]{background:#fff; border-color:rgba(44,95,138,.35);}
#cvart .faq summary{padding:18px 24px; font-size:18px; line-height:1.4; font-weight:600; color:var(--su-navy-dk,#1A2A3A);}
#cvart .faq .faq-a{padding:0 24px 18px; font-size:18px; line-height:1.6; color:var(--su-ink,#1a2332);}
#cvart .faq summary .pm::before, #cvart .faq summary .pm::after{background:var(--su-panel,#2C5F8A);}

/* Smal scherm: zelfde verhoudingen, kleinere stappen van de schaal */
@media (max-width:760px){
  #cvart .body > p, #cvart .body > ul li, #cvart .body > ol li, #cvart .faq summary, #cvart .faq .faq-a{font-size:17px;}
  #cvart .body blockquote.alarmblok, #cvart .body blockquote.alarmblok li, #cvart .su-kopblok blockquote.alarmblok, #cvart .su-kopblok blockquote.alarmblok li{font-size:16px;}
  #cvart .body > h2, #cvart .faq h2{font-size:25px; margin-top:36px;}
  #cvart .body > h3{font-size:20px; margin-top:24px;}
  body.has-methodepaneel #cvart .body > h2[data-mp-first]{font-size:25px; padding:40px 22px 22px; margin-top:36px;}
  body.has-methodepaneel #cvart .body > h2[data-mp-first]::before{left:22px; top:16px;}
  #cvart .body > p.su-direct, #cvart .body blockquote.alarmblok{padding:16px 24px;}
  #cvart .faq summary{padding:16px 24px;} #cvart .faq .faq-a{padding:0 24px 16px;}
}