/* Basislaag — Project Leonidas
 *
 * Bewust minimaal. Alles wat een Bricks Global Class kan doen, hoort in een
 * Global Class en niet hier. Dit bestand zet alleen de standaarden die anders
 * op elk element opnieuw ingesteld zouden moeten worden.
 */

/* Standaard is de site donker; lichte secties zetten dat zelf om via
   .sectie-cream. Deze twee regels vervingen de legacy custom CSS in
   bricks_global_settings, die dit met !important en harde hex-waarden deed
   en daardoor elke lichte sectie onleesbaar maakte. */
body {
  background-color: var(--pl-ink);
  color:            var(--pl-cream);
  font-family: var(--pl-font-tekst);
  font-size:   var(--pl-fs-tekst);
  line-height: var(--pl-lh-tekst);
  font-weight: var(--pl-tekst-normaal);
}

h1, h2, h3, h4, h5, h6,
.kop-hero, .kop-pagina, .kop-sectie, .kop-cta, .kop-kaart {
  font-family: var(--pl-font-kop);
  font-weight: var(--pl-kop-gewicht);
}

/* Playfair cursief: hero-onderkop, intro's en citaten. font-family kan niet in
   een Bricks-class (Bricks zet er aanhalingstekens omheen), dus hier. */
.intro,
.citaat,
blockquote {
  font-family: var(--pl-font-accent);
  font-style: italic;
  font-weight: var(--pl-tekst-normaal);
}

/* Tekst gevolgd door een knoprij: de knoprij zet zelf 48px erboven. Zonder
   deze regel telt de marge onder de tekst erbij op (in een flexcontainer
   vallen marges niet samen) en wordt het 72px. */
:is(.intro, .tekst, .tekstkolom):has(+ .knoprij) {
  margin-bottom: 0;
}

/* Tweekleurige koppen: het deel in <span class="kop-accent"> krijgt de accentkleur
   van de sectie. Op donker is dat goud-500; op cream goud-700, omdat goud-500 daar
   maar 2,55 contrast haalt (ook voor grote koppen onder de 3:1-norm). */
.kop-accent { color: var(--accent, var(--pl-goud-500)); }

/* Op mobiel geen vaste regelbreuk in sectiekoppen: gecombineerd met de gewone
   woordafbreking gaf dat weeswoorden ("VALT", "HET") op een eigen regel.
   De kleurwissel blijft; de spatie komt terug via ::before. De hero-kop houdt
   zijn drie regels. */
@media (max-width: 767px) {
  :is(.kop-sectie, .kop-cta) br { display: none; }
  :is(.kop-sectie, .kop-cta) .kop-accent::before { content: " "; }
}

/* Lijsten: het ritme van de oude site, 8px tussen items. */
li + li { margin-top: var(--pl-lijstitem); }

/* Accentkleur per sectietype.
 *
 * DESIGN-SYSTEM.md: goud-500 haalt 6,33 contrast op zwart maar slechts 2,55 op
 * cream; goud-700 precies andersom (2,48 op zwart, 6,49 op cream). Eén vaste
 * goudtint voor accenten kan dus niet - hij moet meebewegen met de achtergrond.
 *
 * De global class .eyebrow gebruikt var(--accent) en past zich daardoor vanzelf
 * aan de sectie aan, in plaats van dat de bouwer per sectie de juiste variant
 * moet kiezen.
 *
 * Waarom hier en niet in de Bricks-class: Bricks kan geen custom property op een
 * global class zetten. Het _cssCustom-veld met %root% wordt voor classes niet
 * uitgestuurd (getest op 2.3.13). Dit is het geval waar het design system zegt
 * "child theme voor CSS die Bricks niet native aankan".
 */
.sectie-donker { --accent: var(--pl-goud-500); }
.sectie-cream  { --accent: var(--pl-goud-700); }

/* Geen cursief in koppen - staat zo in het design system. */
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em,
h1 i, h2 i, h3 i, h4 i, h5 i, h6 i {
  font-style: normal;
}