/* ==========================================================================
   Zeerust — HSP kindercoaching
   Ontwerpsysteem (design tokens + basiscomponenten)
   Stijl: rustig, zacht, "zand & zee"
   ========================================================================== */

/* Lettertypes: Lora (strakke serif, koppen) + Raleway (sans-serif, tekst) */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Raleway:wght@300;400;500;600&display=swap');

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Kleuren — zand & zee (zonder goud/bruin) */
  --kleur-creme:        #f9f9f7;  /* achtergrond, lichtste — afgestemd op lichtste logo-tint zodat het logo opgaat */
  --kleur-zand-licht:   #f3ece0;  /* zachte vlakken, neutraler dan goud */
  --kleur-zand:         #e7ddca;  /* subtiele zandrand */

  --kleur-zee:          #5a8c8c;  /* rustig zeegroen-blauw */
  --kleur-zee-diep:     #2f5d6e;  /* dieper zeeblauw — hoofd-accent: knoppen, links */
  --kleur-zee-donker:   #244957;  /* hover/nadruk */
  --kleur-zee-mist:     #e3edec;  /* zachte zee-tint achtergrond */

  /* Warm amber-accent — afgestemd op de zonsondergang in de hero */
  --kleur-amber:        #d99a4e;  /* warm amber, tweede accent: overlijn, details */
  --kleur-amber-diep:   #c07f33;  /* nadruk/hover op amber */
  --kleur-amber-mist:   #f6ecdd;  /* zachte warme achtergrond-tint */

  --kleur-tekst:        #2b2a26;  /* donkerder warm grijs — meer contrast */
  --kleur-tekst-zacht:  #565249;  /* bijschriften, secundair */
  --kleur-wit:          #ffffff;
  --kleur-rand:         #e7ded0;  /* subtiele randen */

  /* Typografie */
  --font-kop:   'Lora', Georgia, 'Times New Roman', serif;
  --font-tekst: 'Raleway', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Schaal (rustig, ademend) */
  --tekst-xs:   0.8125rem;
  --tekst-sm:   0.9375rem;
  --tekst-base: 1.0625rem;
  --tekst-lg:   1.25rem;
  --tekst-xl:   1.5rem;
  --kop-sm:     2rem;
  --kop-md:     3rem;   /* gelijk aan kop-lg: alle pagina- en sectiekoppen even groot */
  --kop-lg:     3rem;

  /* Witruimte */
  --ruimte-xs: 0.5rem;
  --ruimte-sm: 1rem;
  --ruimte-md: 2rem;
  --ruimte-lg: 4rem;
  --ruimte-xl: 7rem;

  /* Vorm & schaduw */
  --rond-sm: 8px;
  --rond-md: 16px;
  --rond-lg: 28px;
  --schaduw-zacht: 0 12px 40px rgba(60, 58, 53, 0.06);
  --schaduw-kaart: 0 6px 24px rgba(60, 58, 53, 0.08);

  --max-breedte: 1140px;
  --max-tekst:   720px;
}

/* --------------------------------------------------------------------------
   2. Reset & basis
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-tekst);
  font-weight: 300;
  font-size: var(--tekst-base);
  /* Raleway heeft standaard 'old-style' cijfers die onder de regel hangen;
     lining-nums zet alle cijfers netjes op de basislijn */
  font-variant-numeric: lining-nums;
  line-height: 1.75;
  color: var(--kleur-tekst);
  background-color: var(--kleur-creme);
  -webkit-font-smoothing: antialiased;
}

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

/* --------------------------------------------------------------------------
   3. Typografie
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-kop);
  font-weight: 500;
  line-height: 1.15;
  color: var(--kleur-tekst);
  margin: 0 0 var(--ruimte-sm);
  letter-spacing: 0.01em;
}

h1 { font-size: var(--kop-lg); font-weight: 600; }
h2 { font-size: var(--kop-md); }
h3 { font-size: var(--kop-sm); }
h4 { font-size: var(--tekst-xl); font-family: var(--font-tekst); font-weight: 600; }

p { margin: 0 0 var(--ruimte-sm); }

a { color: var(--kleur-zee-diep); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--kleur-amber-diep); }

.lead {
  font-size: var(--tekst-base);
  color: var(--kleur-tekst-zacht);
  font-weight: 300;
}

/* Cursieve serif quote, zoals in het logo */
.quote {
  font-family: var(--font-kop);
  font-style: italic;
  font-size: var(--tekst-xl);
  line-height: 1.5;
  color: var(--kleur-zee-diep);
  max-width: var(--max-tekst);
}

/* Rustig ingesprongen citaat — consistente stijl voor de hele site */
.citaat {
  font-family: var(--font-kop);
  font-style: italic;
  font-size: var(--tekst-lg);
  line-height: 1.6;
  color: var(--kleur-zee-diep);
  max-width: var(--max-tekst);
  margin: var(--ruimte-md) 0 0;
  padding-left: var(--ruimte-md);
  border-left: 3px solid var(--kleur-zee-mist);
}
/* Gecentreerde variant — als rustige afsluiter, zonder linkerbalk */
.citaat--midden {
  border-left: 0; padding-left: 0;
  margin-inline: auto; text-align: center;
  font-size: var(--tekst-lg);
}

.overlijn {
  font-family: var(--font-tekst);
  font-weight: 600;
  font-size: var(--tekst-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kleur-amber-diep);
  margin-bottom: var(--ruimte-xs);
  display: block;
}

/* --------------------------------------------------------------------------
   4. Layout-helpers
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--max-breedte);
  margin-inline: auto;
  padding-inline: var(--ruimte-md);
}

.sectie { padding-block: var(--ruimte-xl); }
.sectie--zand { background-color: var(--kleur-zand-licht); }
.sectie--zee  { background-color: var(--kleur-zee-mist); }

.tekst-blok { max-width: var(--max-tekst); }
.tekst-midden { margin-inline: auto; text-align: center; }
/* Blok gecentreerd op de pagina, maar de tekst zelf links uitgelijnd */
.blok-midden { margin-inline: auto; }

/* --------------------------------------------------------------------------
   5. Knoppen
   -------------------------------------------------------------------------- */
.knop {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-xs);
  font-family: var(--font-tekst);
  font-weight: 500;
  font-size: var(--tekst-sm);
  letter-spacing: 0.04em;
  padding: 0.85em 1.8em;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all 0.25s ease;
  text-align: center;
}

.knop--primair {
  background-color: var(--kleur-zee-diep);
  color: var(--kleur-wit);
}
.knop--primair:hover {
  background-color: var(--kleur-zee-donker);
  color: var(--kleur-wit);
  transform: translateY(-2px);
}

.knop--lijn {
  background-color: transparent;
  border-color: var(--kleur-zee-diep);
  color: var(--kleur-zee-diep);
}
.knop--lijn:hover {
  background-color: var(--kleur-zee-diep);
  color: var(--kleur-wit);
}

.knop--whatsapp {
  background-color: #4f8a6d;
  color: var(--kleur-wit);
}
.knop--whatsapp:hover { background-color: #3f7058; color: var(--kleur-wit); transform: translateY(-2px); }

/* WhatsApp-knop op de hero: transparant met witte rand en witte tekst */
.hero .knop--whatsapp {
  background-color: transparent;
  color: var(--kleur-wit);
  border-color: var(--kleur-wit);
}
.hero .knop--whatsapp:hover {
  background-color: var(--kleur-wit);
  color: var(--kleur-zee-donker);
  border-color: var(--kleur-wit);
}

/* --------------------------------------------------------------------------
   6. Kaarten
   -------------------------------------------------------------------------- */
.kaart {
  background-color: var(--kleur-wit);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--rond-md);
  padding: var(--ruimte-md);
  box-shadow: var(--schaduw-kaart);
}

.kaart__icoon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background-color: var(--kleur-zee-mist);
  color: var(--kleur-zee-diep);
  margin-bottom: var(--ruimte-sm);
}
.kaart__icoon svg { width: 28px; height: 28px; stroke: var(--kleur-zee-diep); fill: none; }

.raster {
  display: grid;
  gap: var(--ruimte-md);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* Lijst met kernwaarden */
.waarden {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 0.6rem 0.75rem;
}
.waarden li {
  display: inline-flex; align-items: center; gap: 0.55em;
  background-color: var(--kleur-wit);
  border: 1px solid var(--kleur-zand);
  color: var(--kleur-tekst);
  padding: 0.55em 1.25em;
  border-radius: 999px;
  font-size: var(--tekst-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  box-shadow: 0 3px 12px rgba(60, 58, 53, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.waarden li:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(60, 58, 53, 0.10);
}
/* De eerste kernwaarde (holistisch) is tevens de kracht van waaruit ik werk */
.waarden li:first-child {
  background-color: var(--kleur-zee-diep);
  border-color: var(--kleur-zee-diep);
  color: var(--kleur-wit);
}

/* --------------------------------------------------------------------------
   6b. Site-header / navigatie
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background-color: rgba(249, 249, 247, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--kleur-rand);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ruimte-md);
  padding-block: 0.75rem;
}
.site-header__logo img { width: 64px; }
.site-header__logo { display: flex; align-items: center; gap: 0.7rem; }
.site-header__naam {
  font-family: var(--font-kop); font-size: 1.4rem; color: var(--kleur-tekst);
  letter-spacing: 0.02em; line-height: 1.1;
}
.site-header__naam small {
  display: block; font-family: var(--font-tekst); font-weight: 400;
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--kleur-zee); margin-top: 2px;
}

.hoofdnav { display: flex; align-items: center; gap: var(--ruimte-md); }
.hoofdnav ul {
  display: flex; gap: var(--ruimte-md); list-style: none; margin: 0; padding: 0;
}
.hoofdnav a {
  font-family: var(--font-tekst); font-weight: 500; font-size: var(--tekst-sm);
  color: var(--kleur-tekst); letter-spacing: 0.02em;
}
.hoofdnav ul a:hover, .hoofdnav ul a.actief { color: var(--kleur-zee-diep); }
.hoofdnav ul a.actief { border-bottom: 2px solid var(--kleur-zee-diep); padding-bottom: 2px; }
/* De knop in de nav houdt altijd witte tekst, ongeacht de nav-linkstijl */
.hoofdnav a.knop--primair, .hoofdnav a.knop--primair:hover { color: var(--kleur-wit); }
.hoofdnav a.knop--lijn { color: var(--kleur-zee-diep); }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--kleur-tekst); margin: 5px 0; transition: 0.25s; }

/* --------------------------------------------------------------------------
   6c. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 78vh;
  display: grid; align-items: center;
  color: var(--kleur-wit);
  text-align: center;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.82) contrast(0.95) brightness(1.02);
}
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(36,73,87,0.30) 0%, rgba(36,73,87,0.52) 100%);
}
.hero__inhoud { position: relative; z-index: 2; padding-block: var(--ruimte-xl); }
.hero__inhoud h1 {
  color: var(--kleur-wit);
  font-size: var(--kop-lg);
  margin-inline: auto;
  text-shadow: 0 1px 3px rgba(36, 73, 87, 0.85), 0 2px 16px rgba(36, 73, 87, 0.5);
}
/* Witte lopende tekst in de hero, leesbaar door donkere schaduw in de knop-blauwtint */
.hero__inhoud p {
  color: var(--kleur-wit);
  font-weight: 500;
  /* Fractie groter dan de standaardtekst: wit op foto oogt anders kleiner */
  font-size: 1.125rem;
  text-shadow: 0 1px 3px rgba(36, 73, 87, 0.85), 0 2px 14px rgba(36, 73, 87, 0.55);
}
.hero .quote {
  color: var(--kleur-wit); margin-inline: auto; margin-bottom: var(--ruimte-md);
  text-shadow: 0 1px 12px rgba(36,73,87,0.4);
}
.hero__knoppen { display: flex; gap: var(--ruimte-sm); justify-content: center; flex-wrap: wrap; margin-top: var(--ruimte-md); }

/* --------------------------------------------------------------------------
   6d. Twee-koloms blok (tekst + beeld)
   -------------------------------------------------------------------------- */
.duo {
  display: grid; gap: var(--ruimte-lg); align-items: stretch;
  grid-template-columns: 1fr 1fr;
}
.duo--omgekeerd .duo__beeld { order: -1; }
.duo__beeld { position: relative; border-radius: var(--rond-lg); overflow: hidden; box-shadow: var(--schaduw-zacht); }
.duo__beeld img {
  width: 100%; height: 100%; display: block; object-fit: cover;
  /* Zacht & rustig: iets minder verzadiging en contrast voor samenhang */
  filter: saturate(0.82) contrast(0.95) brightness(1.02);
}
/* Subtiele zeeblauw-waas zodat felle/gouden/grijze foto's naar één toon trekken */
.duo__beeld::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(90,140,140,0.10) 0%, rgba(47,93,110,0.16) 100%);
  mix-blend-mode: multiply;
}

/* --------------------------------------------------------------------------
   6e. Footer
   -------------------------------------------------------------------------- */
.site-footer { background-color: var(--kleur-zee-donker); color: #d8e4e6; }
.site-footer a { color: #d8e4e6; }
.site-footer a:hover { color: var(--kleur-wit); }
.site-footer__grid {
  display: grid; gap: var(--ruimte-lg);
  grid-template-columns: 1.2fr 0.8fr 1.4fr;
  padding-block: var(--ruimte-lg);
}
.site-footer h4 { color: var(--kleur-wit); font-family: var(--font-tekst); font-size: var(--tekst-sm); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: var(--ruimte-sm); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0.5rem; font-size: var(--tekst-sm); }
.site-footer__naam { font-family: var(--font-kop); font-size: var(--tekst-xl); color: var(--kleur-wit); margin-bottom: var(--ruimte-xs); }
.site-footer__onder {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-block: var(--ruimte-sm);
  font-size: var(--tekst-xs); color: #aac3c9;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--ruimte-sm);
}
/* Contactkolom in de footer: naam/adres links, formulier/WhatsApp rechts */
.site-footer__contact-kolommen { display: flex; gap: var(--ruimte-md); }
.site-footer__contact-kolommen ul { flex: none; }

/* --------------------------------------------------------------------------
   7. Stijlgids-specifiek (alleen voor de preview-pagina)
   -------------------------------------------------------------------------- */
.swatch { border-radius: var(--rond-sm); overflow: hidden; box-shadow: var(--schaduw-kaart); }
.swatch__kleur { height: 88px; }
.swatch__naam { padding: 0.6em 0.8em; font-size: var(--tekst-xs); background: var(--kleur-wit); }
.swatch__naam code { color: var(--kleur-tekst-zacht); }

/* --------------------------------------------------------------------------
   8. Responsief
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .duo, .site-footer__grid { grid-template-columns: 1fr; }
  .duo--omgekeerd .duo__beeld { order: 0; }
  .site-footer__grid { gap: var(--ruimte-md); }
}

/* Footer compacter op mobiel: alleen het essentiële tonen */
@media (max-width: 760px) {
  .site-footer__grid {
    padding-block: var(--ruimte-md);
    gap: var(--ruimte-md);
    text-align: left;
  }
  /* Verberg de lange intro-tekst en het dubbele menu-blok */
  .site-footer__intro,
  .site-footer__menu { display: none; }

  .site-footer h4 { margin-bottom: var(--ruimte-xs); }
  .site-footer__naam { font-size: var(--tekst-lg); }
  .site-footer__onder {
    flex-direction: column; align-items: flex-start; text-align: left;
    gap: var(--ruimte-xs); padding-block: var(--ruimte-sm);
  }
}

@media (max-width: 760px) {
  :root {
    --kop-lg: 2.4rem;
    --kop-md: 2.4rem;
    --kop-sm: 1.6rem;
    --ruimte-xl: 4rem;
    --ruimte-lg: 2.5rem;
  }
  .container { padding-inline: var(--ruimte-sm); }

  /* Op mobiel: lopende tekst links uitlijnen voor rust en leesbaarheid.
     Knoppenrijen en de waarden-tags blijven wél gecentreerd. */
  .tekst-midden { text-align: left; }
  .tekst-midden .overlijn { text-align: left; }
  .tekst-midden .hero__knoppen,
  .tekst-midden .waarden { justify-content: flex-start; }
  .tekst-midden.tekst-blok { margin-inline: 0; }

  /* Quote op mobiel ook links voor rustiger beeld */
  .quote { font-size: var(--tekst-lg); }

  /* Mobiele navigatie */
  .nav-toggle { display: block; }
  .hoofdnav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--kleur-creme);
    border-bottom: 1px solid var(--kleur-rand);
    padding: var(--ruimte-sm) var(--ruimte-md);
    display: none;
  }
  .hoofdnav.open { display: flex; }
  .hoofdnav ul { flex-direction: column; gap: 0; }
  .hoofdnav li { border-bottom: 1px solid var(--kleur-rand); }
  .hoofdnav li:last-child { border-bottom: 0; }
  .hoofdnav a { display: block; padding: 0.8rem 0; }
  .hoofdnav a.actief { border-bottom: 1px solid var(--kleur-rand); }
  .hoofdnav .knop { margin-top: var(--ruimte-sm); }

  .site-header { position: relative; }
}