/* ============================================================================
   STRAIGHT-LINE LEADERSHIP INT. - DESIGN SYSTEM
   ----------------------------------------------------------------------------
   Gereverse-engineerd uit het live thema op straightlineleadership.com
   (wp-content/themes/sll). Alle waarden hieronder zijn 1-op-1 overgenomen,
   niet geinterpreteerd.

   Gebruik:
     <link rel="stylesheet" href="https://use.typekit.net/dar7vsp.css">
     <link rel="stylesheet" href="straight-line.css">

   Structuur van een pagina:
     <section class="sl-section sl-theme-white">
       <div class="sl-container">
         <p class="sl-eyebrow">Label</p>
         <h2 class="sl-title sl-title--2">Kop</h2>
         <p class="sl-text">Broodtekst</p>
         <a class="sl-button sl-button--cta">Call to action</a>
       </div>
     </section>

   Kernregels (zie ook STYLE-RULES.md):
     1. Serif (minion-pro) alleen voor hero- en inline-CTA-titels. Nooit voor UI.
     2. Alle overige typografie is Helvetica Neue, gewicht 400 of 500. Nooit 700.
     3. Radius is altijd 5px. Nooit een andere waarde, nooit pill, nooit 0.
     4. Geen box-shadows. Diepte komt uit vlakken en sectie-thema's.
     5. Kies per sectie een thema-class. Componenten lezen alleen tokens.
   ========================================================================= */


/* ---------------------------------------------------------------------------
   1. GLOBALE TOKENS
   ------------------------------------------------------------------------ */

:root {
  /* --- Merkkleuren (de enige bron van waarheid) --- */
  --sl-ink:              #061525;  /* dark blue. Primaire tekst en donkere secties */
  --sl-slate:            #1f2d3b;  /* grey blue. Tweede donkere vlak */
  --sl-blue:             #0b24df;  /* bright blue. Accent en CTA-hover */
  --sl-blue-hover:       #0a20c7;  /* CTA-blauw in ingedrukte/hover staat */
  --sl-blue-bright:      #102bf3;  /* wysiwyg-variant van de blauwe hover */
  --sl-lavender:         #d3d8ff;  /* labelvlak op licht */
  --sl-lavender-soft:    #c7ceff;  /* subtitel op donker */
  --sl-gold:             #b09043;  /* subtitel-accent, spaarzaam */
  --sl-gold-tint:        #ede6d6;  /* tag-achtergrond */

  /* --- Neutralen --- */
  --sl-white:            #ffffff;
  --sl-grey-50:          #f9f9f9;  /* hover op wit */
  --sl-grey-100:         #f2f3f7;  /* light grey sectie-achtergrond */
  --sl-grey-150:         #eaecf2;  /* hover op light grey */
  --sl-grey-200:         #e4e5eb;  /* neutrale buttonvulling */
  --sl-grey-250:         #d5d7e0;  /* neutrale button hover */
  --sl-border:           #e9e9e9;
  --sl-border-block:     #e2e5f0;
  --sl-muted:            #7e7b8b;  /* broodtekst op licht */
  --sl-muted-dark:       #b5b9be;  /* broodtekst op donker */
  --sl-block-dark:       #384451;  /* blok binnen donkere sectie */
  --sl-block-dark-hover: #425160;
  --sl-border-dark:      #5e6771;
  --sl-heavy:            #192f48;  /* zwaar blok */
  --sl-heavy-button:     #374351;
  --sl-heavy-button-hv:  #415060;

  /* --- Typografie --- */
  --sl-font-sans:  "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sl-font-serif: minion-pro, "Minion Pro", Georgia, serif;

  --sl-title-tracking:   -0.01em;  /* geldt voor ELKE kop */
  --sl-title-leading:    0.98em;   /* geldt voor ELKE kop */
  --sl-body-size:        1rem;
  --sl-body-leading:     1.375;    /* 16 / 22 */
  --sl-small-font-size:  0.875rem;

  /* --- Maatvoering --- */
  --sl-radius:           0.3125rem;  /* 5px. De enige radius in het systeem */
  --sl-padding-small:    0.625rem;
  --sl-offset-side:      2rem;       /* horizontale sectie-inspringing */
  --sl-offset-section:   5rem;       /* verticale sectie-inspringing */
  --sl-offset-columns:   5.25rem;    /* kolomafstand */
  --sl-offset-block:     1.6rem 1.875rem;
  --sl-offset-block-top: 1.6rem;
  --sl-offset-block-side:1.875rem;

  --sl-container:        70rem;
  --sl-container-narrow: 54rem;
  --sl-container-wide:   86rem;

  --sl-transition:       0.15s ease;

  /* --- Semantische defaults (worden per thema overschreven) --- */
  --section-background:  linear-gradient(180deg, #f2f3f7, #fff);
  --section-text-color:  var(--sl-muted-dark);
  --title-color:         var(--sl-white);
  --light-title-color:   var(--sl-muted-dark);
  --subtitle-color:      var(--sl-gold);
  --highlight-color:     var(--sl-ink);
  --color:               var(--sl-muted);

  --block-background:        var(--sl-heavy);
  --block-background-active: var(--sl-white);
  --block-hover-background:  var(--sl-grey-50);
  --block-color:             var(--sl-muted);
  --block-color-active:      var(--sl-ink);
  --block-border-color:      var(--sl-border-block);
  --border-color:            var(--sl-border);

  --button-background:        var(--sl-grey-200);
  --button-color:             var(--sl-ink);
  --button-hover-background:  transparent;
  --button-hover-color:       var(--sl-ink);
  --button-cta-background:       var(--sl-blue);
  --button-cta-color:            var(--sl-white);
  --button-cta-hover-background: var(--sl-blue-hover);
  --button-cta-hover-color:      var(--sl-white);

  --form-background:        var(--sl-white);
  --form-background-active: var(--sl-white);
  --form-border:            var(--sl-white);
  --form-border-active:     var(--sl-white);
  --form-color:             var(--sl-ink);
  --form-placeholder:       var(--sl-muted);

  --tag-background: var(--sl-gold-tint);
  --tag-color:      var(--sl-ink);
  --link-color:       var(--sl-blue);
  --link-color-hover: var(--sl-blue-hover);
}

/* Responsieve maatvoering. Breekpunten van het originele thema. */
@media only screen and (max-width: 1024px) {
  :root { --sl-container: 67rem; --sl-container-narrow: 51rem; --sl-container-wide: 83rem; }
}
@media only screen and (max-width: 768px) {
  :root { --sl-offset-side: 1.5rem; }
}
@media only screen and (max-width: 576px) {
  :root {
    --sl-container: 64rem; --sl-container-narrow: 48rem; --sl-container-wide: 80rem;
    --sl-offset-side: 1em; --sl-offset-columns: 2.5rem;
  }
}


/* ---------------------------------------------------------------------------
   2. BASIS
   ------------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background-color: var(--sl-white);
  color: var(--sl-ink);
  font-family: var(--sl-font-sans);
  font-size: var(--sl-body-size);
  line-height: var(--sl-body-leading);
  font-feature-settings: "kern";
  font-kerning: normal;
  text-rendering: optimizeSpeed;
}

img, video { display: block; max-width: 100%; height: auto; }


/* ---------------------------------------------------------------------------
   3. SECTIE-THEMA'S
   Zet een thema op de <section>. Alles daarbinnen leest de tokens.
   ------------------------------------------------------------------------ */

.sl-section {
  position: relative;
  padding: 5em var(--sl-offset-side);
  background: var(--section-background);
  color: var(--section-text-color);
}
.sl-section.sl-padding-small { padding: 2.5em var(--sl-offset-side); }
.sl-section.sl-padding-large { padding: 7em var(--sl-offset-side); }

@media only screen and (max-width: 1024px) {
  .sl-section { padding: 3.5em var(--sl-offset-side); }
  .sl-section.sl-padding-large { padding: 5em var(--sl-offset-side); }
}

/* Twee opeenvolgende secties met hetzelfde thema lopen door als een vlak. */
.sl-theme-white + .sl-theme-white,
.sl-theme-light-grey + .sl-theme-light-grey,
.sl-theme-dark-blue + .sl-theme-dark-blue,
.sl-theme-grey-blue + .sl-theme-grey-blue { padding-top: 0; }

.sl-theme-white + .sl-theme-white.sl-padding-large,
.sl-theme-light-grey + .sl-theme-light-grey.sl-padding-large,
.sl-theme-dark-blue + .sl-theme-dark-blue.sl-padding-large,
.sl-theme-grey-blue + .sl-theme-grey-blue.sl-padding-large { padding-top: 2rem; }

/* --- Wit. Standaardsectie voor content. --- */
.sl-theme-white {
  --section-background: var(--sl-white);
  --section-text-color: var(--sl-ink);
  --title-color: var(--sl-ink);
  --light-title-color: var(--sl-muted);
  --subtitle-color: var(--sl-blue);
  --block-background: var(--sl-grey-100);
  --block-hover-background: var(--sl-grey-150);
  --border-color: var(--sl-border);
  --block-button-background: var(--sl-grey-200);
  --block-button-hover-background: var(--sl-grey-250);
  --heavy-block-background: var(--sl-ink);
  --heavy-block-color: var(--sl-white);
  --heavy-block-color-soft: hsla(0, 0%, 100%, 0.75);
  --heavy-block-button-background: var(--sl-heavy-button);
  --heavy-block-button-color: var(--sl-white);
  --heavy-block-button-hover-background: var(--sl-heavy-button-hv);
  --overlay-background: var(--sl-grey-100);
  --button-background: var(--sl-grey-100);
  --button-color: var(--sl-ink);
  --button-hover-background: var(--sl-grey-150);
  --button-hover-color: var(--sl-ink);
  --button-cta-background: var(--sl-ink);
  --button-cta-color: var(--sl-white);
  --button-cta-hover-background: var(--sl-blue);
  --button-cta-hover-color: var(--sl-white);
}

/* --- Licht grijs. Voor afwisseling tussen witte secties. --- */
.sl-theme-light-grey {
  --section-background: var(--sl-grey-100);
  --section-text-color: var(--sl-ink);
  --title-color: var(--sl-ink);
  --light-title-color: var(--sl-muted);
  --subtitle-color: var(--sl-blue);
  --block-background: var(--sl-white);
  --block-hover-background: var(--sl-grey-50);
  --block-border-color: var(--sl-border-block);
  --block-button-background: var(--sl-grey-200);
  --block-button-hover-background: var(--sl-grey-250);
  --heavy-block-background: var(--sl-ink);
  --heavy-block-color: var(--sl-white);
  --heavy-block-color-soft: hsla(0, 0%, 100%, 0.75);
  --overlay-background: var(--sl-white);
  --button-background: var(--sl-white);
  --button-color: var(--sl-ink);
  --button-hover-background: var(--sl-grey-50);
  --button-hover-color: var(--sl-ink);
  --button-cta-background: var(--sl-ink);
  --button-cta-color: var(--sl-white);
  --button-cta-hover-background: var(--sl-blue);
  --button-cta-hover-color: var(--sl-white);
  --form-background: var(--sl-white);
  --form-color: var(--sl-ink);
  --form-placeholder: var(--sl-muted);
}

.sl-theme-light-grey-to-white {
  --section-background: linear-gradient(180deg, #f2f3f7, #fff);
}

/* --- Donkerblauw. Hero, statements, hoge-impact secties. --- */
.sl-theme-dark-blue,
.sl-theme-dark-blue-to-dark-grey {
  --section-background: var(--sl-ink);
  --section-text-color: var(--sl-muted-dark);
  --title-color: var(--sl-white);
  --light-title-color: hsla(0, 0%, 100%, 0.9);
  --subtitle-color: var(--sl-lavender-soft);
  --block-background: var(--sl-block-dark);
  --block-hover-background: var(--sl-block-dark-hover);
  --border-color: var(--sl-border-dark);
  --block-button-background: var(--sl-ink);
  --block-button-hover-background: #02090f;
  --heavy-block-background: var(--sl-white);
  --heavy-block-color: var(--sl-ink);
  --heavy-block-color-soft: rgba(6, 21, 37, 0.75);
  --overlay-background: hsla(0, 0%, 100%, 0.2);
  --form-background: var(--sl-slate);
  --form-color: var(--sl-white);
  --form-border: var(--sl-slate);
  --form-border-active: var(--sl-white);
  --form-placeholder: var(--sl-muted-dark);
  --form-background-active: #515c67;
  --button-background: var(--sl-heavy-button);
  --button-color: var(--sl-white);
  --button-hover-background: var(--sl-heavy-button-hv);
  --button-hover-color: var(--sl-white);
  --button-cta-background: var(--sl-white);
  --button-cta-color: var(--sl-ink);
  --button-cta-hover-background: #f2f2f2;
  --button-cta-hover-color: var(--sl-ink);
}

.sl-theme-dark-blue-to-dark-grey {
  --section-background: linear-gradient(180deg, #061525, #1f2d3b);
}

/* --- Grijsblauw. Zachtere donkere sectie. --- */
.sl-theme-grey-blue {
  --section-background: var(--sl-slate);
  --section-text-color: var(--sl-muted-dark);
  --title-color: var(--sl-white);
  --light-title-color: hsla(0, 0%, 100%, 0.9);
  --light-block-background: var(--sl-white);
  --light-block-color: var(--sl-ink);
  --light-block-color-soft: rgba(6, 21, 37, 0.75);
  --dark-block-background: var(--sl-ink);
  --dark-block-color: var(--sl-white);
  --dark-block-color-soft: hsla(0, 0%, 100%, 0.75);
  --button-background: var(--sl-heavy-button);
  --button-color: var(--sl-white);
  --button-hover-background: var(--sl-heavy-button-hv);
  --button-hover-color: var(--sl-white);
  --button-cta-background: var(--sl-white);
  --button-cta-color: var(--sl-ink);
  --button-cta-hover-background: #f2f2f2;
  --button-cta-hover-color: var(--sl-ink);
}


/* ---------------------------------------------------------------------------
   4. CONTAINER EN GRID
   ------------------------------------------------------------------------ */

.sl-container         { width: 100%; max-width: var(--sl-container); margin-inline: auto; }
.sl-container--narrow { max-width: var(--sl-container-narrow); }
.sl-container--wide   { max-width: var(--sl-container-wide); }

.sl-columns {
  display: grid;
  gap: var(--sl-offset-columns);
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}
.sl-columns--2 { grid-template-columns: repeat(2, 1fr); }
.sl-columns--3 { grid-template-columns: repeat(3, 1fr); }
.sl-columns--4 { grid-template-columns: repeat(4, 1fr); }

@media only screen and (max-width: 1024px) {
  .sl-columns--3, .sl-columns--4 { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 576px) {
  .sl-columns, .sl-columns--2, .sl-columns--3, .sl-columns--4 { grid-template-columns: 1fr; }
}


/* ---------------------------------------------------------------------------
   5. TYPOGRAFIE
   Alle koppen delen tracking -0.01em en leading 0.98em. Dat strakke,
   bijna aanrakende regelbeeld is het handschrift van het merk.
   ------------------------------------------------------------------------ */

.sl-title {
  margin: var(--sl-offset-block-top) 0;
  color: var(--title-color);
  font-family: var(--sl-font-sans);
  font-weight: 400;
  letter-spacing: var(--sl-title-tracking);
  line-height: var(--sl-title-leading);
}
.sl-title:first-child { margin-top: 0; }
.sl-title:last-child  { margin-bottom: 0; }
.sl-title strong      { font-weight: 400; }

/* Sans-schaal */
.sl-title--0 { font-size: 7em; }
.sl-title--1 { font-size: 4.5em; }
.sl-title--2 { font-size: 3em; }
.sl-title--3 { font-size: 2.5em; }
.sl-title--4 { font-size: 2em; }
.sl-title--5 { font-size: 1.5em; font-weight: 500; }
.sl-title--6 { font-size: 1.25em; font-weight: 500; }

@media only screen and (max-width: 1920px) { .sl-title--1 { font-size: 4em; } }
@media only screen and (max-width: 1024px) {
  .sl-title--1 { font-size: 3.5em; }
  .sl-title--2 { font-size: 2.5em; }
  .sl-title--3 { font-size: 2.25em; }
  .sl-title--4 { font-size: 1.75em; }
}
@media only screen and (max-width: 576px) {
  .sl-title--1 { font-size: 3em; }
  .sl-title--2 { font-size: 2em; }
  .sl-title--3 { font-size: 2em; }
  .sl-title--4 { font-size: 1.5em; }
}

/* Serif hero. Alleen voor de belofte bovenaan een pagina. */
.sl-title--hero {
  font-family: var(--sl-font-serif);
  font-size: 3.5rem;
  font-weight: 600;
  margin: 1.5625rem 0;
}
.sl-title--hero strong { font-weight: 600; }

/* Serif inline CTA. Voor een statement midden op de pagina. */
.sl-title--inline-cta {
  font-family: var(--sl-font-serif);
  font-size: 3.75rem;
  font-weight: 500;
  margin: 1.5625rem 0;
}
.sl-title--inline-cta strong { font-weight: 600; }

/* Sans hero. Voor pagina's zonder serif-moment. */
.sl-title--hero-plain {
  font-size: 4.5rem;
  font-weight: 500;
  margin: 1.5625rem 0;
}
.sl-title--hero-plain strong { font-weight: 500; }

@media only screen and (max-width: 1920px) {
  .sl-title--hero { font-size: 3.25rem; }
  .sl-title--inline-cta { font-size: 3.125em; }
  .sl-title--hero-plain { font-size: 4em; }
}
@media only screen and (max-width: 1024px) {
  .sl-title--hero { font-size: 3rem; }
  .sl-title--hero-plain { font-size: 3.5em; }
}
@media only screen and (max-width: 576px) {
  .sl-title--hero { font-size: 2.75rem; }
  .sl-title--inline-cta { font-size: 2.5em; }
  .sl-title--hero-plain { font-size: 3em; }
}

/* Subtitel. Staat direct onder een kop, in accentkleur per thema. */
.sl-subtitle {
  color: var(--subtitle-color);
  font-family: var(--sl-font-sans);
  font-weight: 400;
  letter-spacing: var(--sl-title-tracking);
  line-height: var(--sl-title-leading);
  font-size: 2em;
  margin: var(--sl-offset-block-top) 0;
}

/* Lichte kop. De rustige variant boven of onder een blok. */
.sl-title--light { color: var(--light-title-color); }

/* Broodtekst */
.sl-text {
  color: var(--color);
  font-size: var(--sl-body-size);
  line-height: var(--sl-body-leading);
  margin: var(--sl-offset-block-top) 0;
}
.sl-theme-white .sl-text,
.sl-theme-light-grey .sl-text { color: var(--sl-muted); }
.sl-theme-dark-blue .sl-text,
.sl-theme-grey-blue .sl-text  { color: var(--sl-muted-dark); }

.sl-text--small { font-size: var(--sl-small-font-size); }
.sl-text strong, .sl-text b { color: var(--title-color); font-weight: 500; }
.sl-text a {
  color: var(--link-color);
  text-decoration: underline;
  transition: color 0.2s ease;
}
.sl-text a:hover { color: var(--link-color-hover); }

/* Eyebrow. Klein label boven een kop. */
.sl-eyebrow {
  color: var(--subtitle-color);
  font-size: var(--sl-small-font-size);
  font-weight: 500;
  letter-spacing: var(--sl-title-tracking);
  margin: 0 0 0.75rem;
}


/* ---------------------------------------------------------------------------
   6. BUTTONS
   Twee niveaus, meer niet. Neutraal (.sl-button) en CTA (.sl-button--cta).
   ------------------------------------------------------------------------ */

.sl-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.75rem 1rem;
  border: 0;
  border-radius: var(--sl-radius);
  background: var(--button-background);
  color: var(--button-color);
  font-family: var(--sl-font-sans);
  font-size: var(--sl-small-font-size);
  font-weight: 500;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--sl-transition), color var(--sl-transition), border-color var(--sl-transition);
}
.sl-button:hover,
.sl-button:focus {
  background: var(--button-hover-background);
  color: var(--button-hover-color);
}

.sl-button--cta {
  background: var(--button-cta-background);
  color: var(--button-cta-color);
}
.sl-button--cta:hover,
.sl-button--cta:focus {
  background: var(--button-cta-hover-background);
  color: var(--button-cta-hover-color);
}

/* Ruimere variant voor een losstaande CTA. */
.sl-button--large { padding: 1em 2rem; }

/* Blauwe en donkere expliciete varianten (wysiwyg-equivalenten). */
.sl-button--blue {
  --button-background: var(--sl-blue);
  --button-color: var(--sl-white);
  --button-hover-background: var(--sl-blue-bright);
  --button-hover-color: var(--sl-white);
}
.sl-button--ink {
  --button-background: var(--sl-ink);
  --button-color: var(--sl-white);
  --button-hover-background: var(--sl-blue-bright);
  --button-hover-color: var(--sl-white);
}

/* Pijl schuift mee bij hover. Klein detail, wel het handschrift. */
.sl-button i, .sl-button .sl-icon {
  font-size: 0.8em;
  transition: transform var(--sl-transition);
}
.sl-button:hover i, .sl-button:hover .sl-icon { transform: translateX(0.1875rem); }

.sl-button + .sl-button { margin-left: 0.5rem; }


/* ---------------------------------------------------------------------------
   7. BLOKKEN EN KAARTEN
   ------------------------------------------------------------------------ */

.sl-block {
  padding: var(--sl-offset-block);
  border-radius: var(--sl-radius);
  background: var(--block-background);
  color: var(--block-color);
  transition: background var(--sl-transition);
}
.sl-block:hover { background: var(--block-hover-background); }
.sl-block .sl-title { color: var(--block-color-active); }

.sl-block--bordered {
  background: transparent;
  border: 1px solid var(--block-border-color);
}

/* Zwaar blok. Omgekeerd contrast binnen de sectie, voor een uitgelicht item. */
.sl-block--heavy {
  background: var(--heavy-block-background);
  color: var(--heavy-block-color-soft);
}
.sl-block--heavy .sl-title { color: var(--heavy-block-color); }
.sl-block--heavy .sl-button {
  --button-background: var(--heavy-block-button-background);
  --button-color: var(--heavy-block-button-color);
  --button-hover-background: var(--heavy-block-button-hover-background);
  --button-hover-color: var(--heavy-block-button-hover-color);
}


/* ---------------------------------------------------------------------------
   8. LABELS EN TAGS
   ------------------------------------------------------------------------ */

/* Lavendel label. Categorie of contentsoort, bijvoorbeeld "Webinar". */
.sl-label {
  display: inline-block;
  padding: 5px 8px;
  border-radius: var(--sl-radius);
  background: var(--sl-lavender);
  color: var(--sl-ink);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.375;
}

/* Gouden tag. Spaarzaam, voor premium of exclusief aanbod. */
.sl-tag {
  display: inline-block;
  padding: 5px 8px;
  border-radius: var(--sl-radius);
  background: var(--tag-background);
  color: var(--tag-color);
  font-size: var(--sl-small-font-size);
  font-weight: 500;
}


/* ---------------------------------------------------------------------------
   9. FORMULIEREN
   ------------------------------------------------------------------------ */

.sl-input, .sl-textarea, .sl-select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--form-border);
  border-radius: var(--sl-radius);
  background: var(--form-background);
  color: var(--form-color);
  font-family: var(--sl-font-sans);
  font-size: var(--sl-body-size);
  line-height: var(--sl-body-leading);
  transition: background var(--sl-transition), border-color var(--sl-transition);
}
.sl-input::placeholder, .sl-textarea::placeholder { color: var(--form-placeholder); }
.sl-input:focus, .sl-textarea:focus, .sl-select:focus {
  outline: none;
  background: var(--form-background-active);
  border-color: var(--form-border-active);
}


/* ---------------------------------------------------------------------------
   10. HULPKLASSEN
   ------------------------------------------------------------------------ */

.sl-divider { height: 1px; border: 0; background: var(--border-color); margin: var(--sl-offset-block-top) 0; }
.sl-stack > * + * { margin-top: var(--sl-offset-block-top); }
.sl-center { text-align: center; }
.sl-center .sl-container { margin-inline: auto; }