/* ===================================================================
   Ellora — praktijk voor stress & mindfulness (Ellen Verhulst)
   Design tokens
   =================================================================== */
:root {
  /* Earth palette: groen en aarde (Ellen vond de eerste versie te roze).

     Vijf basiskleuren. Ellen kan --bg, --accent, --olive en --clay zelf aanpassen in het beheer
     (knop Kleuren); de server zet dan een <style id="ellora-theme"> met nieuwe waarden na deze
     stylesheet. De standaardwaarden hieronder moeten gelijk blijven aan STANDARD in
     public/admin/editor.js. --ink staat vast, zodat tekst altijd leesbaar blijft. */
  --bg:            #F3EFE2; /* warm linen, licht groenig */
  --ink:           #2C2A1E; /* dark olive brown, main text */
  --accent:        #4A6741; /* primary accent: moss green */
  --olive:         #758556; /* secondary accent: sage (borders, large text) */
  --clay:          #A07A4A; /* warm earth accent (borders, details) */

  /* Letters: Ellen kiest in het beheer (knop Uiterlijk) lettertype en grootte; de server zet dan
     nieuwe waarden na deze stylesheet. De standaardwaarden moeten gelijk blijven aan FONTS en
     STANDARD_TYPE in public/admin/editor.js en aan FONTS in src/worker.js. */
  --font-head:     "Fraunces", Georgia, serif;
  --font-body:     "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --text-scale:    1; /* alle tekst: html-lettergrootte (dus alle rem-maten) wordt hiermee vermenigvuldigd */
  --head-scale:    1; /* alleen de koppen */
  --title-size:    clamp(1.5rem, 1.1rem + 1vw, 1.8rem); /* alle titels (h1 en h2) even groot; schaalt mee met de kopgrootte */

  /* Maten en afstanden: overal dezelfde, zodat alles op een lijn en in hetzelfde ritme staat. */
  --measure:       44rem; /* leesbare tekstbreedte voor intro's en opsommingen (schaalt mee met de tekstgrootte) */
  --space-section: 64px;  /* ruimte boven en onder een sectie */
  --space-block:   40px;  /* ruimte boven een blok (kaartjes, tijdlijn, lijst) na een kop of intro */

  /* Afgeleid van de basiskleuren. Eerst vaste waarden (voor browsers zonder color-mix),
     daaronder dezelfde kleuren berekend, zodat ze meeveranderen met de basiskleuren. */
  --bg-alt:        #E4E2D1;
  --surface:       #FAF9F3;
  --line:          #D7D8C3;
  --ink-soft:      #545145;
  --accent-dp:     #354A2F;
  --olive-dp:      #50583A;
  --clay-dp:       #775E3B;
  --focus:         #354A2F;

  --radius-sm: 4px;
  --radius-md: 10px;

  --maxw: 1120px;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
  :root {
    --bg-alt:    color-mix(in srgb, var(--bg) 88%, var(--olive));
    --surface:   color-mix(in srgb, var(--bg) 40%, white);
    --line:      color-mix(in srgb, var(--bg) 78%, var(--olive));
    --ink-soft:  color-mix(in srgb, var(--ink) 80%, var(--bg));
    --accent-dp: color-mix(in srgb, var(--accent) 72%, black);
    --olive-dp:  color-mix(in srgb, var(--olive) 50%, var(--ink));
    --clay-dp:   color-mix(in srgb, var(--clay) 65%, var(--ink));
    --focus:     var(--accent-dp);
  }
}

@media (prefers-color-scheme: dark) {
  /* Intentionally not offering a dark theme: earth palette is the brand. */
}

/* ===================================================================
   Reset
   =================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: calc(100% * var(--text-scale)); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem; /* 17px bij standaardgrootte */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 0.5em;
}

h1, h2, h3 { text-wrap: balance; } /* geen kop met een los woord op de tweede regel */
p, li { text-wrap: pretty; }       /* geen weesregels aan het einde van een alinea */
/* Alle titels (de kop bovenaan een pagina en de kop van elke sectie) zijn even groot en even vet. */
h1, h2 { font-size: calc(var(--title-size) * var(--head-scale)); font-weight: 600; }
h3 { font-size: calc(1.25rem * var(--head-scale)); font-weight: 600; }
.hero-copy h1 { margin-bottom: 16px; }
/* De tekst loopt even breed als de titel en de knop, met nette regeleinden (geen weesregel). */
.hero-copy .lede { max-width: none; text-wrap: pretty; }

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

a { color: var(--accent-dp); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px;
}

@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  body { font-size: 1rem; }
}

section, section.tight { padding: var(--space-section) 0; }
@media (max-width: 780px) {
  section, section.tight { padding: 48px 0; }
}

.band-alt { background: var(--bg-alt); }
.band-surface { background: var(--surface); }

.eyebrow-note {
  color: var(--olive-dp);
  font-weight: 600;
  font-size: 0.95rem;
  margin: 0 0 0.9em;
}

/* Lege regel in een tekstblok (alinea-afstand): kleiner dan een hele regel. Zie renderMultiline in
   src/worker.js; de editor leest dit element als een lege regel. */
.pgap { display: block; height: 0.8em; }

.check-list + .lede { margin-top: 32px; } /* intro die onder een opsomming staat */

.lede {
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: var(--measure);
}

/* ===================================================================
   Header / nav
   =================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(243, 239, 226, 0.92);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
}

.wordmark {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
  line-height: 1.1;
}
.wordmark-text { display: flex; flex-direction: column; min-width: 0; }
.logo-mark { width: 46px; height: 46px; flex: none; }
/* Het logo is een foto in een ronde lijst, net als de foto's op de pagina's; het is aan te passen in het beheer. */
.logo-photo {
  display: block;
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate; /* ook een ingezoomd logo blijft netjes in de cirkel (Safari) */
  border: 2px solid var(--accent);
  background: var(--surface);
}
.logo-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transform-origin: 50% 50%;
}
@media (max-width: 640px) {
  .logo-mark { width: 38px; height: 38px; }
  .wordmark { gap: 10px; }
}
/* Op een breed scherm hangt het logo in de marge links van de tekst, zodat "PRAKTIJK ELLORA" op dezelfde lijn
   begint als de tekst op de pagina. Op smallere schermen is daar geen ruimte voor en staat het logo ervoor. */
@media (min-width: 1200px) {
  .wordmark { position: relative; }
  .logo-mark { position: absolute; left: -58px; top: 50%; transform: translateY(-50%); }
}
.wordmark .name {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.wordmark .role {
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-top: 2px;
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.main-nav a {
  display: inline-block;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--ink);
  font-weight: 500;
  font-size: 0.98rem;
  transition: background-color 150ms ease, color 150ms ease;
}
.main-nav a:hover { background: var(--bg-alt); }
.main-nav a[aria-current="page"] {
  color: var(--accent-dp);
  font-weight: 600;
}
.main-nav a.cta-link {
  background: var(--accent);
  color: var(--surface);
}
.main-nav a.cta-link:hover { background: var(--accent-dp); }

.nav-toggle {
  display: none;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  cursor: pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink);
  position: relative;
  transition: transform 150ms ease;
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }

@media (max-width: 780px) {
  .nav-toggle { display: block; }
  .main-nav {
    position: absolute;
    top: 84px;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    max-height: 0;
    overflow: hidden;
    transition: max-height 220ms ease;
  }
  .main-nav.open { max-height: 400px; }
  .main-nav ul {
    flex-direction: column;
    padding: 8px 20px 20px;
    gap: 4px;
  }
  .main-nav a { display: block; }
}

/* ===================================================================
   Buttons
   =================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: var(--radius-md);
  font-weight: 600;
  text-decoration: none;
  font-size: 1rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--accent);
  color: var(--surface);
}
.btn-primary:hover { background: var(--accent-dp); }
.btn-secondary {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn-secondary:hover { background: var(--ink); color: var(--surface); }

.btn-group { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }

/* ===================================================================
   Hero
   =================================================================== */
.hero-section { padding: 56px 0 var(--space-section); }
.hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}
.hero-copy { opacity: 0; transform: translateY(14px); animation: hero-in 700ms ease-out 80ms forwards; }
.hero-art  { opacity: 0; transform: translateY(14px); animation: hero-in 700ms ease-out 220ms forwards; }
@keyframes hero-in { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .hero-copy, .hero-art { animation: none; opacity: 1; transform: none; }
}

/* Ronde foto naast de intro (Werkwijze): dezelfde ronde lijst als de foto op "Over mij" (.about-portrait),
   in het midden van de kolom en standaard in het midden uitgesneden. */
.hero-portrait { margin: 0 auto; }
@media (min-width: 901px) { .hero-portrait { margin: 0 0 0 auto; } }
.hero-portrait img { object-position: 50% 50%; transform-origin: 50% 50%; }

/* De krul van het logo, groot en vrij op de homepage: hij staat rechts, helemaal in beeld, en loopt door
   tot in het blok eronder. De tekst staat altijd boven de krul; op een smal scherm staat hij gewoon boven de tekst. */
.hero-section { position: relative; overflow-x: clip; }
.hero-copy { position: relative; z-index: 2; }
main > section > .wrap { position: relative; z-index: 1; }
@keyframes swirl-drift {
  from { transform: translate(0, 0) rotate(0deg); }
  to   { transform: translate(-8px, 12px) rotate(-1.5deg); }
}
/* Een achtergrondafbeelding van een leeg vlak, geen <img>: niet te slepen, niet aan te klikken en zonder
   "afbeelding opslaan" in het rechtermuisknopmenu. (Echt onmogelijk te bewaren is een afbeelding op het web nooit.) */
.hero-swirl {
  display: block;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  background: url("images/logo-krul.webp") center / contain no-repeat;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
@media (min-width: 901px) {
  .hero-art {
    position: relative;
    align-self: stretch;
    --swirl-w: clamp(340px, 44vw, 840px);
    /* Waar de rechterkolom van de hero begint, gemeten vanaf de linkerrand van het scherm (kolommen 1.1fr en 0.9fr, 48px ertussen). */
    --art-left: calc(max(0px, (100vw - var(--maxw)) / 2) + 32px + (min(100vw, var(--maxw)) - 64px - 48px) * 0.55 + 48px);
  }
  .hero-swirl {
    position: absolute;
    top: -48px;
    /* De krul begint bij de rechterkolom (iets ernaast). Op een smaller scherm schuift hij zover naar links dat hij
       nog helemaal in beeld blijft. */
    left: min(24px, calc(100vw - var(--art-left) - var(--swirl-w) - 1vw));
    width: var(--swirl-w);
    max-width: none;
    margin: 0;
    animation: swirl-drift 18s ease-in-out infinite alternate; /* heel rustig heen en weer */
  }
}
@media (prefers-reduced-motion: reduce) { .hero-swirl { animation: none; } }

@media (max-width: 900px) {
  .hero-section { padding: 44px 0 56px; }
  .hero { grid-template-columns: 1fr; }
  .hero-art { order: -1; width: 100%; max-width: 320px; margin: 0 auto; }
}

/* ===================================================================
   Cards / grids
   =================================================================== */
/* Kaartjes op de homepage: twee per rij (makkelijker leesbaar) en allemaal even hoog. Ellen kan er
   kaartjes bij zetten of weghalen; bij een oneven aantal staat het laatste kaartje alleen op de rij. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 28px;
  margin-top: var(--space-block);
}
@media (max-width: 720px) {
  /* Onder elkaar: dan heeft een vaste hoogte voor alle kaartjes geen zin. */
  .card-grid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 20px; }
}

.info-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--olive);
  padding: 30px 28px;
}
.info-card:nth-child(even) { border-left-color: var(--clay); }
/* Afsluitende tekst onder een blok kaartjes: een fijne lijn en een rustige alinea. */
.section-end-row {
  margin-top: var(--space-block);
  padding-top: 26px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 20px 48px; /* de knop staat rechts naast de tekst, op een smal scherm eronder */
  flex-wrap: wrap;
}
.section-end {
  margin: 0;
  max-width: var(--measure);
  font-size: 1.1rem;
  color: var(--ink-soft);
}
.info-card h3 { margin-bottom: 10px; }
.info-card p { color: var(--ink-soft); margin-bottom: 0; }

/* ===================================================================
   Timeline (diploma's)
   =================================================================== */
.timeline { margin-top: var(--space-block); border-top: 1px solid var(--line); }
.timeline-item {
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
}
.timeline-item h3 { margin-bottom: 6px; }

/* ===================================================================
   Process steps (werkwijze)
   =================================================================== */
.steps {
  counter-reset: step;
  margin-top: var(--space-block);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 64px 1fr;
  column-gap: 24px;
  row-gap: 0;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  position: relative;
}
/* Alle tekst hoort in kolom 2; enkel het cijfer staat links. */
.step > * { grid-column: 2; }
.step:last-child { border-bottom: 1px solid var(--line); }
.step::before {
  content: counter(step);
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-head);
  font-size: 1.6rem;
  line-height: 1.15;
  color: var(--olive);
  align-self: start;
}
.step h3 { margin-bottom: 8px; }
.step p { color: var(--ink-soft); }
@media (max-width: 560px) {
  .step { grid-template-columns: 40px 1fr; column-gap: 14px; }
  .step::before { font-size: 1.3rem; }
}

/* ===================================================================
   Quote / values block
   =================================================================== */
.quote-block {
  max-width: 62ch;
  text-align: center; /* het citaat staat in het midden van de pagina */
}
.quote-block blockquote {
  margin: 0;
  font-family: var(--font-head);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.45;
  color: var(--ink);
}
.quote-block cite {
  display: block;
  margin-top: 18px;
  font-style: normal;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* ===================================================================
   CTA band
   =================================================================== */
.cta-band {
  background: var(--accent-dp);
  color: var(--surface);
}
.cta-band h2 { color: var(--surface); }
.cta-band .lede { color: #D7DAD0; color: color-mix(in srgb, var(--surface) 82%, var(--accent-dp)); }
.cta-band .btn-secondary { border-color: var(--surface); color: var(--surface); }
.cta-band .btn-secondary:hover { background: var(--surface); color: var(--accent-dp); }
.cta-flex {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* de knop staat vlak naast de tekst, niet aan de andere kant van de pagina */
  gap: 20px 40px;
  flex-wrap: wrap;
}

/* ===================================================================
   Forms (afspraak / contact)
   =================================================================== */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 36px;
}
@media (max-width: 640px) { .panel { padding: 24px; } }

.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 0.95rem;
}
.field input,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:not([type="checkbox"]) { height: 48px; } /* ook het datumveld even hoog als de andere velden */
.field select {
  width: 100%;
  padding: 12px 34px 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;
}
.field .req { color: var(--clay-dp); }
.field .opt { font-weight: 400; color: var(--ink-soft); }
.field textarea::placeholder { font-style: italic; } /* de voorbeeldtekst in "Je bericht" */
.field select:required:invalid { color: var(--ink-soft); } /* "Kies een onderwerp" zolang er niets gekozen is */
.field select option { color: var(--ink); }

.field.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  margin-top: 28px;
}
.field.consent input { margin-top: 5px; width: 18px; height: 18px; accent-color: var(--accent); }
.field.consent label { font-weight: 400; font-size: 0.95rem; color: var(--ink-soft); margin-bottom: 0; }

.contact-form button[type="submit"] { margin-top: 28px; }

/* Tijdelijke markering van tekst die nog nagekeken moet worden ({{...}} geel, {{mail:...}} oranje): zie renderMultiline. */
mark.wip { background: #fff0a8; color: inherit; padding: 0.05em 0.2em; border-radius: 3px; }
mark.wip-mail { background: #ffd3a1; }

/* Privacyverklaring op de contactpagina: ingeklapt tot iemand erop klikt. */
.privacy { margin-top: var(--space-block); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.privacy summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.privacy summary::-webkit-details-marker { display: none; }
.privacy summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform 160ms ease;
}
.privacy[open] summary::after { transform: rotate(-135deg); }
.privacy summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.privacy-body { padding: 0 0 20px; }
.policy-section h3 { font-size: calc(1.05rem * var(--head-scale)); margin: 20px 0 6px; }
.policy-section:first-child h3 { margin-top: 0; }
.policy-section p { margin: 0; font-size: 0.95rem; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .privacy summary::after { transition: none; } }

/* Spamval: onzichtbaar, maar niet met display:none (bots vullen die ook in). */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 560px) { .two-col { grid-template-columns: 1fr; } }

.booking-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
  margin-top: var(--space-block);
}
/* De kop rechts staat op dezelfde hoogte als de kop in het formulier (binnenruimte plus rand van het kader). */
.booking-grid > :not(.panel) { padding-top: 37px; }
@media (max-width: 900px) {
  .booking-grid { grid-template-columns: 1fr; }
  .booking-grid > :not(.panel) { padding-top: 0; }
}

.practical-list {
  list-style: none;
  margin: var(--space-block) 0 0;
  padding: 0;
}
.practical-list li {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.practical-list li:last-child { border-bottom: 1px solid var(--line); }
.practical-list .label { color: var(--ink-soft); font-weight: 600; font-size: 0.92rem; }

.notice {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-left: 3px solid var(--clay);
  padding: 18px 20px;
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin-top: 18px;
}

/* Inline formulierbevestiging (contact.html) — zelfde opbouw als .notice,
   groen voor gelukt, aardebruin voor mislukt, zodat er geen omweg via
   Formspree's eigen bedankpagina nodig is. */
.form-feedback {
  padding: 20px 22px;
  font-size: 0.98rem;
  margin-bottom: 24px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-left: 3px solid var(--olive);
}
.form-feedback h3 {
  margin-bottom: 8px;
  font-size: 1.1rem;
}
.form-feedback p { color: var(--ink-soft); margin-bottom: 0; }
.form-feedback.is-error { border-left-color: var(--clay-dp); }
.form-feedback:focus-visible { outline: none; }

/* ===================================================================
   Footer
   =================================================================== */
footer.site-footer {
  border-top: 1px solid var(--line);
  padding: 48px 0;
  background: var(--bg-alt);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 32px;
}
@media (max-width: 700px) {
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
}
.footer-grid h4 {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.footer-grid .footer-tagline { color: var(--ink-soft); margin: 0 0 12px; }
/* ondernemingsnummer en lidmaatschappen onder de omschrijving: kleiner en dicht op elkaar */
.footer-grid .footer-legal { color: var(--ink-soft); font-size: 0.85rem; line-height: 1.4; margin: 0 0 2px; }
.footer-bottom {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 6px; }
.footer-grid a { color: var(--ink); text-decoration: none; }
.footer-grid a:hover { color: var(--accent-dp); }

/* ===================================================================
   Aanbod: two-column cards, tags, checklists
   =================================================================== */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: var(--space-block);
}
@media (max-width: 780px) {
  .grid-2 { grid-template-columns: 1fr; }
}

.tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--olive-dp);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
  margin-bottom: 16px;
}
.band-alt .tag { background: var(--surface); }

.offer-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--olive);
  padding: 30px 28px;
  text-decoration: none;
  color: var(--ink);
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}
.offer-card:nth-child(2) { border-top-color: var(--clay); }
.offer-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(44, 42, 30, 0.09);
}
.offer-card p { color: var(--ink-soft); }
.offer-card .offer-link {
  display: inline-block;
  margin-top: 14px;
  font-weight: 600;
  color: var(--accent-dp);
}

.plain-card {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 30px 28px;
}
.plain-card p { color: var(--ink-soft); }

/* Brede kaart over de hele breedte, met onderaan een notitie links en een knop rechts. */
.plain-card-wide { margin-top: var(--space-block); padding: 38px 40px; }
.plain-card-wide p:not(.muted-note) { max-width: var(--measure); }
.plain-card-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 32px;
  flex-wrap: wrap;
  margin-top: 26px;
}
.plain-card-foot .muted-note { margin: 0; }
.plain-card-foot .btn { margin-left: auto; }

.check-list {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  max-width: var(--measure);
}
.check-list li {
  padding: 8px 0 8px 10px; /* zonder bolletjes, wel een klein beetje ingesprongen */
  font-style: italic; /* opsommingen staan schuin gedrukt */
  color: var(--ink-soft);
}

.muted-note {
  font-size: 0.92rem;
  color: var(--ink-soft);
}

/* Teksten bij Over mij lopen over de hele breedte, net als de opleidingen eronder. */
.prose { max-width: none; }
.lede-wide { max-width: none; }
.prose p { color: var(--ink-soft); }
/* Het eerste item van de tekst bij Over mij is de titel ("Waarom Ellora?"): opgemaakt als elke andere titel. */
[data-repeat="overmij.verhaal"] > p:first-child {
  font-family: var(--font-head);
  font-size: calc(var(--title-size) * var(--head-scale));
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 0.5em;
  text-wrap: balance;
}

/* Anchor links must clear the sticky header */
section[id] { scroll-margin-top: 100px; }

/* ===================================================================
   Portret naast de intro op "Over mij" (diplomas.html)
   =================================================================== */
.about-intro {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 720px) {
  .about-intro { grid-template-columns: 1fr; }
}

.about-portrait {
  justify-self: end; /* rechts op een lijn met de rand van de inhoud */
  width: 320px;
  height: 320px;
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate; /* zorgt dat ook een ingezoomde foto netjes in de cirkel blijft (Safari) */
  border: 4px solid var(--accent);
  box-shadow: 0 8px 24px rgba(44, 42, 30, 0.12);
}
@media (max-width: 720px) {
  .about-portrait { justify-self: start; width: 240px; height: 240px; }
}

.about-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 75%;
  transform-origin: 50% 75%; /* gelijk aan object-position: de zoom (transform) werkt vanuit dat punt */
}