/* ==========================================================================
   MdB Consultancy — stijlblad
   Losse CSS, geen build-stap, geen externe afhankelijkheden.

   Opbouw:
     1. Instellingen (kleuren, maten)
     2. Basis
     3. Hulpklassen
     4. Koptekst en navigatie
     5. Hero
     6. Secties
     7. Kaarten, stappen, ervaring, over mij, contact
     8. Voettekst
   ========================================================================== */


/* 1. Instellingen ========================================================= */

:root {
  /* Kleuren — pas deze waarden aan om de hele site van kleur te laten
     veranderen. De accentkleur is nu een rustig, zakelijk blauw. */
  /* Vertelt de browser welke kant we op zitten, zodat schuifbalken en
     formulierelementen meekleuren. */
  color-scheme: light;

  --kleur-accent:        #1f5f8b;
  --kleur-accent-donker: #164863;
  --kleur-tekst:         #1b2229;
  --kleur-tekst-zacht:   #5a6672;
  --kleur-achtergrond:   #ffffff;
  --kleur-grijs:         #f4f6f8;
  --kleur-donker:        #16212b;
  --kleur-rand:          #dfe4e9;

  /* Maten */
  --breedte-container: 1120px;
  --ruimte-sectie:     6rem;
  --radius:            10px;

  /* Typografie — systeemlettertypen, dus niets in te laden */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

/* De donkere kleuren staan hieronder twee keer:

     1. voor wie de donkere modus in zijn besturingssysteem aan heeft staan
        en zelf niets gekozen heeft, en
     2. voor wie op de schakelaar in de koptekst heeft gedrukt.

   Pas je de ene lijst aan, pas dan ook de andere aan — ze horen gelijk te
   blijven. De `:not([data-thema="licht"])` zorgt ervoor dat iemand die in een
   donker systeem bewust voor licht kiest, ook echt licht krijgt. */

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) {
    color-scheme: dark;

    --kleur-accent:        #5aa9d6;
    --kleur-accent-donker: #8cc6e8;
    --kleur-tekst:         #e7edf3;
    --kleur-tekst-zacht:   #9fb0bf;
    --kleur-achtergrond:   #10171e;
    --kleur-grijs:         #16202a;
    --kleur-donker:        #0b1218;
    --kleur-rand:          #253340;
  }
}

:root[data-thema="donker"] {
  color-scheme: dark;

  --kleur-accent:        #5aa9d6;
  --kleur-accent-donker: #8cc6e8;
  --kleur-tekst:         #e7edf3;
  --kleur-tekst-zacht:   #9fb0bf;
  --kleur-achtergrond:   #10171e;
  --kleur-grijs:         #16202a;
  --kleur-donker:        #0b1218;
  --kleur-rand:          #253340;
}


/* 2. Basis =============================================================== */

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

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--kleur-tekst);
  background: var(--kleur-achtergrond);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 0.6em; font-weight: 650; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); letter-spacing: -0.01em; }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--kleur-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--kleur-accent-donker); }

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

:focus-visible {
  outline: 3px solid var(--kleur-accent);
  outline-offset: 3px;
  border-radius: 3px;
}


/* 3. Hulpklassen ========================================================= */

.container {
  width: 100%;
  max-width: var(--breedte-container);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--kleur-accent); color: #fff;
  padding: 0.75rem 1.25rem; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

.kop-boven {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--kleur-accent);
  margin-bottom: 0.75rem;
}

.knop {
  display: inline-block;
  background: var(--kleur-accent);
  color: #fff;
  padding: 0.8rem 1.6rem;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}
.knop:hover { background: var(--kleur-accent-donker); color: #fff; transform: translateY(-1px); }

.knop-secundair {
  background: transparent;
  color: var(--kleur-accent);
  box-shadow: inset 0 0 0 2px var(--kleur-rand);
}
.knop-secundair:hover { background: var(--kleur-grijs); color: var(--kleur-accent); }

.knop-klein { padding: 0.45rem 1.1rem; font-size: 0.95rem; }


/* 4. Koptekst en navigatie =============================================== */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--kleur-achtergrond) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--kleur-rand);
}

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 4.5rem; gap: 1rem;
}

.logo {
  font-weight: 750; font-size: 1.2rem; letter-spacing: -0.01em;
  color: var(--kleur-tekst); text-decoration: none;
}
.logo span { color: var(--kleur-accent); margin-left: 0.35em; font-weight: 500; }

.menu {
  display: flex; align-items: center; gap: 1.75rem;
  list-style: none; margin: 0; padding: 0;
}
.menu a { color: var(--kleur-tekst); text-decoration: none; font-weight: 500; }
.menu a:hover { color: var(--kleur-accent); }
.menu .knop { color: #fff; }

/* De schakelaar en het menu staan samen rechts in de koptekst. */
.header-rechts { display: flex; align-items: center; gap: 0.75rem; }

/* De schakelaar doet niets zonder JavaScript, dus hij verschijnt pas als dat
   aanstaat. Wie JavaScript uit heeft, volgt gewoon de systeeminstelling. */
.thema-knop { display: none; }
.js .thema-knop {
  display: grid; place-items: center;
  flex: none;
  width: 2.75rem; height: 2.75rem;
  background: none; border: 1px solid var(--kleur-rand);
  border-radius: var(--radius); cursor: pointer;
  color: var(--kleur-tekst);
}
.thema-knop:hover { border-color: var(--kleur-accent); color: var(--kleur-accent); }
.thema-knop .icoon { width: 1.15rem; height: 1.15rem; }

/* De knop toont waar je naartoe schakelt: een maan als het licht is, een zon
   als het donker is. Dat gaat met CSS, dus het icoon klopt al bij het laden. */
.icoon-maan { display: block; }
.icoon-zon  { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) .icoon-maan { display: none; }
  :root:not([data-thema="licht"]) .icoon-zon  { display: block; }
}

:root[data-thema="donker"] .icoon-maan { display: none; }
:root[data-thema="donker"] .icoon-zon  { display: block; }

.menu-knop {
  display: none;
  width: 2.75rem; height: 2.75rem;
  background: none; border: 1px solid var(--kleur-rand);
  border-radius: var(--radius); cursor: pointer;
  position: relative;
}
.menu-streep,
.menu-streep::before,
.menu-streep::after {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 1.15rem; height: 2px; background: var(--kleur-tekst); content: "";
}
.menu-streep { top: 50%; margin-top: -1px; }
.menu-streep::before { top: -6px; }
.menu-streep::after  { top: 6px; }

@media (max-width: 800px) {
  .menu-knop { display: block; }
  .menu {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--kleur-achtergrond);
    border-bottom: 1px solid var(--kleur-rand);
    padding: 0.5rem 1.5rem 1.25rem;
  }
  .menu.menu-open { display: flex; }
  .menu li { border-top: 1px solid var(--kleur-rand); }
  .menu a { display: block; padding: 0.9rem 0; }
  .menu .knop { text-align: center; margin-top: 0.75rem; }
  .menu li:last-child { border-top: 0; }
}


/* 5. Hero ================================================================ */

.hero {
  padding-block: clamp(4rem, 12vw, 8.5rem);
  background:
    radial-gradient(60rem 30rem at 15% -10%,
      color-mix(in srgb, var(--kleur-accent) 12%, transparent), transparent 70%),
    var(--kleur-achtergrond);
}

.hero h1 { max-width: 18ch; }

.hero .lead {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: var(--kleur-tekst-zacht);
  max-width: 58ch;
  margin-bottom: 2rem;
}

.hero-knoppen { display: flex; flex-wrap: wrap; gap: 0.85rem; }


/* 6. Secties ============================================================= */

.sectie { padding-block: var(--ruimte-sectie); }
.sectie-grijs { background: var(--kleur-grijs); }

.sectie-donker {
  background: var(--kleur-donker);
  color: #e7edf3;
}
.sectie-donker h2 { color: #fff; }
.sectie-donker .sectie-intro { color: #9fb0bf; }
.sectie-donker .kop-boven { color: #5aa9d6; }

.sectie-intro {
  max-width: 62ch;
  color: var(--kleur-tekst-zacht);
  font-size: 1.05rem;
  margin-bottom: 3rem;
}


/* 7. Onderdelen ========================================================== */

/* Kaarten (diensten) */
.kaarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.5rem;
}

.kaart {
  background: var(--kleur-achtergrond);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius);
  padding: 1.75rem;
}
.kaart h3 { color: var(--kleur-accent); }

/* Afbakening onderaan een dienstenkaart: waar houdt het op? */
.afbakening {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--kleur-rand);
  font-size: 0.9rem;
  color: var(--kleur-tekst-zacht);
}

.lijst-vink { list-style: none; margin: 1.1rem 0 0; padding: 0; }
.lijst-vink li {
  position: relative; padding-left: 1.6rem; margin-bottom: 0.5rem;
  color: var(--kleur-tekst-zacht); font-size: 0.97rem;
}
.lijst-vink li::before {
  content: "\2713";
  position: absolute; left: 0; top: 0;
  color: var(--kleur-accent); font-weight: 700;
}

/* Stappen (werkwijze) */
.stappen {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.75rem;
}
.stap { position: relative; padding-top: 3.25rem; }
.stap-nummer {
  position: absolute; top: 0; left: 0;
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--kleur-accent); color: #fff;
  font-weight: 700;
}
.stap p { color: var(--kleur-tekst-zacht); font-size: 0.97rem; }

/* Ervaring */
.ervaring-grid {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 2fr;
  gap: 3rem;
}
@media (max-width: 800px) {
  .ervaring-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

.lijst-simpel { list-style: none; margin: 0; padding: 0; }
.lijst-simpel li {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--kleur-rand);
  color: var(--kleur-tekst-zacht);
}

.opdrachten { margin: 0; }
.opdrachten dt {
  font-weight: 650; margin-top: 1.5rem;
  padding-top: 1.5rem; border-top: 1px solid var(--kleur-rand);
}
.opdrachten dt:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.opdrachten dd {
  margin: 0.3rem 0 0; color: var(--kleur-tekst-zacht); font-size: 0.97rem;
}
/* Een tweede dd onder dezelfde dt is een vervolgalinea, geen nieuw gegeven. */
.opdrachten dd + dd { margin-top: 0.9rem; }

/* Over mij */
.over-grid {
  display: grid;
  grid-template-columns: minmax(240px, 340px) 1fr;
  gap: 3.5rem;
  align-items: start;
}
@media (max-width: 800px) {
  .over-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .over-foto { max-width: 280px; }
}

/* De foto krijgt een decoratief accentvlak schuin erachter. Dat geeft de
   sectie diepte zonder dat de foto zelf bewerkt hoeft te worden. */
.over-foto { position: relative; }

.over-foto::before {
  content: "";
  position: absolute;
  inset: 1.5rem -1.5rem -1.5rem 1.5rem;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--kleur-accent) 16%, transparent);
  z-index: 0;
}

.over-foto picture { position: relative; z-index: 1; display: block; }

.over-foto img {
  width: 100%;
  aspect-ratio: 4 / 5;          /* blijft kloppen, ook bij een andere foto */
  object-fit: cover;
  object-position: 50% 30%;     /* houdt het gezicht in beeld bij bijsnijden */
  border-radius: var(--radius);
  box-shadow: 0 20px 45px -20px rgba(0, 0, 0, 0.5);
}

@media (max-width: 800px) {
  /* Op smalle schermen minder ver uitstekend, anders raakt het de rand. */
  .over-foto::before { inset: 1rem -1rem -1rem 1rem; }
}

/* Contact */
.contact-lijst {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.5rem;
}
.contact-lijst li {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 1.1rem;
}
.contact-label {
  display: block;
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: #9fb0bf; margin-bottom: 0.35rem;
}
.contact-lijst a {
  color: #fff; font-size: 1.05rem; font-weight: 500;
  text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.contact-lijst a:hover { color: #5aa9d6; border-bottom-color: #5aa9d6; }


/* 8. Voettekst =========================================================== */

.site-footer {
  border-top: 1px solid var(--kleur-rand);
  padding-block: 2rem;
  font-size: 0.92rem;
  color: var(--kleur-tekst-zacht);
}
.footer-inner {
  display: flex; flex-wrap: wrap; gap: 0.5rem 2rem;
  justify-content: space-between; align-items: center;
}
.site-footer p { margin: 0; }