/* MBSR-live — statische site
   Lettertype en kleuren overgenomen van de huidige WordPress-site (Twenty Twenty-Four).
   Montserrat · base #FAF9F5 · contrast #111111 · accenten #C2A990 / #D8613C / #B1C5A4 */

:root {
  --base:        #faf9f5;
  --base-2:      #ffffff;
  --contrast:    #111111;
  --contrast-2:  #636363;
  --contrast-3:  #a4a4a4;
  --accent-sand: #c2a990;
  --accent-terra:#d8613c;
  --accent-sage: #b1c5a4;
  --accent-mist: #b5bdbc;
  --line:        #e6e2d8;

  --font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --wrap: 1120px;
  --measure: 68ch;
  --radius: 6px;
  --radius-lg: 14px;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--base);
  color: var(--contrast);
  font-family: var(--font);
  font-size: 1.05rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--contrast); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-terra); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent-terra); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3 { font-weight: 400; line-height: 1.15; text-wrap: balance; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 4.6vw, 2.9rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.15rem); }
h3 { font-size: 1.12rem; font-weight: 600; letter-spacing: 0.01em; }
p  { margin: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.measure { max-width: var(--measure); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 249, 245, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; gap: 20px;
  min-height: 68px;
}
.brand {
  font-weight: 600; font-size: 1.02rem; letter-spacing: 0.01em;
  text-decoration: none; white-space: nowrap;
}
.brand span { color: var(--contrast-2); font-weight: 400; }

.site-nav { display: flex; gap: 22px; margin-left: auto; }
.site-nav a {
  text-decoration: none; font-size: 0.94rem; color: var(--contrast-2);
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--contrast); }
.site-nav a[aria-current="page"] { color: var(--contrast); border-bottom-color: var(--accent-terra); }

/* bezoekersteller, rechts in de header */
.counter {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--base-2);
  font-size: 0.78rem; color: var(--contrast-2);
  white-space: nowrap;
}
.counter b {
  font-weight: 600; color: var(--contrast);
  font-variant-numeric: tabular-nums; font-size: 0.92rem;
}
.counter[data-state="loading"] b { color: var(--contrast-3); }

@media (max-width: 720px) {
  .header-inner { flex-wrap: wrap; min-height: 0; padding-block: 12px; gap: 10px 18px; }
  .site-nav { margin-left: auto; order: 3; width: 100%; }
  .counter { order: 2; margin-left: auto; }
}

/* ---------- sections ---------- */
main { display: block; }
section { padding-block: clamp(48px, 7vw, 88px); }
section + section { border-top: 1px solid var(--line); }
.section-white { background: var(--base-2); }

.eyebrow {
  display: inline-block;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--contrast-2); margin-bottom: 14px;
}

.stack   { display: flex; flex-direction: column; gap: 22px; }
.stack-s { display: flex; flex-direction: column; gap: 12px; }

/* ---------- hero ---------- */
.hero { padding-top: clamp(40px, 6vw, 76px); }
.hero-grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 5vw, 64px); align-items: center;
}
.hero-figure img {
  width: 100%; border-radius: var(--radius-lg);
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
}

.lead { font-size: 1.14rem; color: #2a2a2a; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.btn {
  display: inline-block; text-decoration: none;
  padding: 12px 22px; border-radius: var(--radius);
  font-size: 0.92rem; font-weight: 500; letter-spacing: 0.01em;
  border: 1px solid var(--contrast);
  background: var(--contrast); color: var(--base);
  transition: background .15s ease, color .15s ease;
}
.btn:hover { background: #2c2c2c; color: var(--base); }
.btn-ghost { background: transparent; color: var(--contrast); }
.btn-ghost:hover { background: var(--contrast); color: var(--base); }

/* start-datum badge */
.startdate {
  display: inline-flex; align-items: flex-start; gap: 10px;
  font-size: 0.85rem; color: var(--contrast-2);
}
.startdate::before {
  content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-terra); margin-top: 0.48em;
}

/* ---------- praktische informatie ---------- */
/* auto-fill (en niet auto-fit): de kolommen blijven bestaan ook als er minder
   kaarten zijn. Zo houdt één overgebleven kaart dezelfde breedte en blijft hij
   links uitgelijnd, in plaats van over de hele breedte uit te rekken. */
.cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px; margin-top: 34px;
}
.card {
  background: var(--base);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 8px;
}
.section-white .card { background: var(--base); }
.card h3 { color: var(--contrast); }
.card p { font-size: 0.97rem; color: #333; }
.card .big {
  font-size: 1.22rem; font-weight: 600; letter-spacing: -0.01em;
}

/* ---------- trainer ---------- */
.trainer-grid {
  display: grid; grid-template-columns: 260px 1fr;
  gap: clamp(28px, 5vw, 56px); align-items: center;
}
.portrait {
  width: 260px; height: 260px;
  border-radius: 50%;
  object-fit: cover; object-position: center;
  border: 6px solid var(--base-2);
  box-shadow: 0 0 0 1px var(--line), 0 18px 40px -28px rgba(17,17,17,.5);
}
@media (max-width: 760px) {
  .trainer-grid { grid-template-columns: 1fr; justify-items: center; text-align: left; }
  .portrait { width: 200px; height: 200px; }
}

/* ---------- aanmelden ---------- */
.signup-grid {
  display: grid; grid-template-columns: 1fr auto;
  gap: clamp(24px, 5vw, 56px); align-items: center;
}
.qr {
  width: 168px; border-radius: var(--radius);
  border: 1px solid var(--line); background: #fff; padding: 8px;
}
.qr-wrap { text-align: center; }
.qr-wrap figcaption { font-size: 0.76rem; color: var(--contrast-2); margin-top: 8px; }
@media (max-width: 700px) {
  .signup-grid { grid-template-columns: 1fr; }
}

/* ---------- contact ---------- */
.contact-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 56px); align-items: start;
}
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-list { display: flex; flex-direction: column; gap: 18px; margin: 0; }
.contact-list div { display: flex; flex-direction: column; gap: 2px; }
.contact-list dt {
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--contrast-2);
}
.contact-list dd { margin: 0; font-size: 1.02rem; }
.contact-list a { text-decoration-color: var(--accent-sand); }

form.mailform { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 0.82rem; color: var(--contrast-2); letter-spacing: .02em; }
.field input, .field textarea {
  font-family: var(--font); font-size: 0.98rem; color: var(--contrast);
  background: var(--base-2);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 11px 13px;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--accent-sand);
  box-shadow: 0 0 0 3px rgba(194,169,144,.25);
}
.form-note { font-size: 0.82rem; color: var(--contrast-2); }

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--base-2);
  padding-block: 44px 36px;
  font-size: 0.9rem; color: var(--contrast-2);
}
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px;
}
/* Valt er een kolom weg omdat hij leeg is, dan verdelen de rest de ruimte. */
.footer-grid.kolommen-1 { grid-template-columns: 1fr; max-width: var(--measure); }
.footer-grid.kolommen-2 { grid-template-columns: 1.4fr 1fr; }
.footer-grid h3 {
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--contrast-2); font-weight: 600; margin-bottom: 12px;
}
.footer-grid a { color: var(--contrast-2); text-decoration: none; }
.footer-grid a:hover { color: var(--contrast); text-decoration: underline; }
.footer-links { display: flex; flex-direction: column; gap: 7px; }
.colophon {
  margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 0.82rem;
}
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; gap: 26px; } }

.skip-link {
  position: absolute; left: -9999px;
  background: var(--contrast); color: var(--base); padding: 10px 16px; border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; top: 0; z-index: 100; }

/* Alinea's binnen een inleiding of kaart (de beheerpagina kan er meerdere maken) */
.lead p + p { margin-top: .8em; }
.card p + p { margin-top: .35em; }

/* Verborgen veldje dat spamrobots invullen en mensen nooit zien */
.honing { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }