/*
Theme Name: Olympia Tienen
Theme URI: https://www.olympiatienen.com
Author: Wielerpromotieclub Olympia vzw
Description: Thema voor BIQS-Brainsquare Olympia Tienen, Koninklijke Olympia Wielerschool. Een pagina met alle clubinfo: het traject van wielerschool tot profpeloton, de afdelingen, trainingen, alumni, begeleiders, nieuws en sponsors. Kleuren volgen de BIQS-huisstijl.
Version: 1.3
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: olympia-tienen
*/

/* ==========================================================================
   Alle stijlen staan hier. Kleuren en het lettertype passen zich aan via de
   variabelen in :root, helemaal bovenaan. Wil je een kleur wijzigen, dan doe
   je dat daar en volgt de rest van de site vanzelf.
   ========================================================================== */

:root{
  /* --- BIQS-huisstijl --- */
  --blauw:#123758;        /* Dark Blue  - primair  */
  --blauw-2:#1B4870;      /* tint, voor kaarten op donkere achtergrond */
  --groen:#8FC043;        /* Green      - accent   */
  --wit:#FFFFFF;
  --grijs-licht:#F5F7FA;
  --grijs-mid:#E0E4E8;
  --tekst:#2C3E50;
  --gedempt:#8FA6B8;

  /* Eén lettertype voor de hele site. 'sofia-pro' = Adobe Fonts,
     'Sofia Pro' = lokaal geinstalleerd, Poppins = vrije vervanger. */
  --letter:'sofia-pro','Sofia Pro','Poppins',Calibri,system-ui,-apple-system,sans-serif;
  --display:var(--letter);
  --body:var(--letter);
  --data:var(--letter);

  --marge:clamp(20px,5vw,72px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--grijs-licht);color:var(--tekst);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}

.eyebrow{font-family:var(--data);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--blauw);font-weight:600}
.eyebrow--licht{color:var(--groen)}
h2.titel{font-family:var(--display);font-size:clamp(30px,5vw,52px);line-height:1.02;letter-spacing:-.01em;margin:10px 0 22px;text-transform:uppercase;color:var(--blauw)}
h3.sub{font-family:var(--display);font-size:20px;text-transform:uppercase;margin-bottom:10px;color:var(--blauw)}
.sectie{padding:clamp(64px,9vw,116px) var(--marge)}
.wrap{max-width:1180px;margin:0 auto}
.lood{font-size:clamp(18px,2vw,21px);max-width:62ch;color:var(--tekst)}

/* ---------- nav ---------- */
header.nav{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:8px var(--marge);background:rgba(18,55,88,.95);backdrop-filter:blur(8px);border-bottom:2px solid var(--groen)}
.merk{display:flex;align-items:center;gap:12px;color:var(--wit);text-decoration:none}
.merk .logo{height:52px;width:auto;flex:0 0 auto}
/* Het beeldmerk is wit met donkerblauwe lijnen. De blauwe band onderaan valt
   samen met de balk, waardoor 'CYCLING TEAM' er wit uit lijkt te zweven. */
.merk b{font-family:var(--display);font-size:15px;letter-spacing:.02em;text-transform:uppercase;display:block}
.merk small{font-family:var(--data);font-size:10px;color:var(--gedempt);letter-spacing:.1em;text-transform:uppercase}
nav.links{display:flex;align-items:center;gap:22px}
nav.links a{color:#D6DFE7;text-decoration:none;font-family:var(--data);font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:6px 0;border-bottom:2px solid transparent}
nav.links a:hover,nav.links a:focus-visible{color:var(--wit);border-bottom-color:var(--groen)}
nav.links a.knop{background:var(--groen);color:var(--blauw);font-weight:600;padding:9px 16px;border-radius:3px;border-bottom:none}
nav.links a.knop:hover{background:var(--wit)}
.menu-knop{display:none;background:none;border:1px solid rgba(255,255,255,.35);color:var(--wit);font-family:var(--data);
  font-size:12px;letter-spacing:.12em;padding:8px 12px;border-radius:3px;cursor:pointer;text-transform:uppercase}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--blauw);color:var(--wit);padding:clamp(56px,8vw,92px) var(--marge) 0;overflow:hidden;isolation:isolate}
.hero .hero-foto{position:absolute!important;inset:0;z-index:0;pointer-events:none}
.hero-foto img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
/* Twee lagen: horizontaal donker links (leesbare tekst), verticaal donker onderaan
   (leesbaar traject). De rechterbovenhoek van de foto blijft open. */
.hero-foto::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(18,55,88,.30) 0%,rgba(18,55,88,.55) 45%,rgba(18,55,88,.92) 100%),
    linear-gradient(90deg,rgba(18,55,88,.86) 0%,rgba(18,55,88,.62) 42%,rgba(18,55,88,.15) 100%)}
.hero > *:not(.hero-foto){position:relative;z-index:1}
.hero-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.4fr .6fr;gap:44px;align-items:end}
.hero h1{font-family:var(--display);font-size:clamp(44px,8.4vw,112px);line-height:.9;letter-spacing:-.025em;
  text-transform:uppercase;text-shadow:0 2px 30px rgba(18,55,88,.75)}
.hero h1 em{font-style:normal;color:var(--groen);display:block}
.hero .onder{margin-top:22px;max-width:48ch;color:#E3EAF0;font-size:clamp(17px,1.6vw,19px);
  text-shadow:0 1px 14px rgba(18,55,88,.85)}
.hero .eyebrow{text-shadow:0 1px 12px rgba(18,55,88,.9)}
.hero-acties{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn{display:inline-block;text-decoration:none;font-family:var(--data);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;padding:15px 24px;border-radius:3px;transition:transform .15s ease,background .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn--groen{background:var(--groen);color:var(--blauw)}
.btn--lijn{border:1px solid rgba(255,255,255,.45);color:var(--wit)}
.btn--lijn:hover{border-color:var(--wit)}

.kaart-hero{background:rgba(27,72,112,.85);border:1px solid rgba(255,255,255,.18);border-top:3px solid var(--groen);border-radius:3px;padding:22px;backdrop-filter:blur(3px)}
.kaart-hero h3{font-family:var(--data);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--groen);font-weight:600;margin-bottom:16px}
.kaart-hero dl{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;font-family:var(--data);font-size:13px}
.kaart-hero dt{color:var(--gedempt);text-transform:uppercase;letter-spacing:.08em;font-size:11px;align-self:center}
.kaart-hero dd{color:var(--wit);font-weight:500;text-align:right}

/* ---------- SIGNATUUR: het traject ---------- */
.traject{max-width:1180px;margin:clamp(44px,6vw,76px) auto 0;padding-bottom:clamp(40px,5vw,60px)}
.traject-kop{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:10px;
  border-bottom:1px solid rgba(255,255,255,.22);padding-bottom:12px;margin-bottom:26px}
.traject-kop span{font-family:var(--data);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gedempt)}
.traject-kop span b{color:var(--wit)}
.spoor{display:grid;grid-template-columns:repeat(5,1fr);position:relative;list-style:none}
.spoor::before{content:"";position:absolute;left:0;right:0;top:11px;height:2px;background:rgba(255,255,255,.2)}
.spoor .voortgang{position:absolute;left:0;top:11px;height:2px;background:var(--groen);width:0;
  animation:groei 2.6s cubic-bezier(.6,.05,.25,1) .3s forwards}
@keyframes groei{to{width:100%}}
.halte{position:relative;padding-top:34px;padding-right:18px}
.halte .stip{position:absolute;top:4px;left:0;width:16px;height:16px;border-radius:50%;background:var(--blauw);
  border:2px solid var(--groen);opacity:0;animation:pop .4s ease forwards}
.halte:nth-child(2) .stip{animation-delay:.5s}
.halte:nth-child(3) .stip{animation-delay:1.05s}
.halte:nth-child(4) .stip{animation-delay:1.6s}
.halte:nth-child(5) .stip{animation-delay:2.15s}
.halte:nth-child(6) .stip{animation-delay:2.7s;background:var(--groen)}
@keyframes pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
.halte .leeftijd{font-family:var(--data);font-size:11px;letter-spacing:.14em;color:var(--groen);font-weight:600}
.halte h4{font-family:var(--display);font-size:clamp(15px,1.5vw,19px);text-transform:uppercase;color:var(--wit);margin:6px 0;letter-spacing:-.01em}
.halte p{font-size:14px;color:var(--gedempt);line-height:1.5;max-width:22ch}
.halte:last-child h4{color:var(--groen)}

/* ---------- club ---------- */
.club-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,64px);align-items:start}
.club p+p{margin-top:16px}
.club-foto{border-radius:4px;overflow:hidden;border:1px solid var(--grijs-mid);background:var(--wit)}
.club-foto img{width:100%;aspect-ratio:4/3;object-fit:cover}
.club-foto figcaption{font-family:var(--data);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gedempt);padding:12px 16px;border-top:1px solid var(--grijs-mid)}
.cijfers{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--grijs-mid);border:1px solid var(--grijs-mid);margin-top:24px}
.cijfer{background:var(--grijs-licht);padding:22px}
.cijfer b{display:block;font-family:var(--display);font-size:clamp(28px,3.6vw,40px);line-height:1;color:var(--blauw)}
.cijfer span{display:block;margin-top:8px;font-family:var(--data);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gedempt)}

.panathlon{margin-top:28px;border-left:4px solid var(--groen);background:var(--wit);padding:20px 22px;border-radius:0 4px 4px 0}
.panathlon h3{font-family:var(--display);font-size:16px;text-transform:uppercase;margin-bottom:10px;color:var(--blauw)}
.panathlon ul{list-style:none;font-size:15px}
.panathlon li{padding:5px 0 5px 20px;position:relative}
.panathlon li::before{content:"";position:absolute;left:0;top:14px;width:9px;height:2px;background:var(--groen)}

/* ---------- afdelingen ---------- */
.wit-blok{background:var(--wit);border-top:1px solid var(--grijs-mid);border-bottom:1px solid var(--grijs-mid)}
.afd-rij{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:10px}
.afd{background:var(--grijs-licht);border:1px solid var(--grijs-mid);border-radius:4px;padding:22px;
  transition:transform .18s ease,box-shadow .18s ease}
.afd:hover{transform:translateY(-4px);box-shadow:0 12px 0 -6px var(--groen)}
.afd .cat{font-family:var(--data);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--groen);font-weight:600}
.afd h3{font-family:var(--display);font-size:clamp(22px,2.4vw,27px);text-transform:uppercase;margin:8px 0 12px;color:var(--blauw)}
.afd p{font-size:15px;line-height:1.55}
.afd ul{list-style:none;margin-top:14px;border-top:1px solid var(--grijs-mid);padding-top:12px;font-family:var(--data);font-size:12px}
.afd li{display:flex;justify-content:space-between;gap:12px;padding:5px 0;color:var(--gedempt)}
.afd li b{color:var(--blauw);font-weight:600;text-align:right}

.ploegfoto{margin-top:40px;border:1px solid var(--grijs-mid);border-radius:4px;overflow:hidden;background:var(--grijs-licht)}
.ploegfoto img{width:100%}
.ploegfoto figcaption{font-family:var(--data);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gedempt);padding:14px 18px;border-top:1px solid var(--grijs-mid)}

/* ---------- training ---------- */
.train-rij{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;margin-top:10px;
  border:1px solid var(--grijs-mid);background:var(--grijs-mid)}
.train{background:var(--grijs-licht);padding:26px}
.train .kop{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:14px}
.train .kop span{font-family:var(--data);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--wit);
  background:var(--blauw);padding:4px 8px;border-radius:2px;white-space:nowrap}
.train .kop span[data-tint="groen"]{background:var(--groen);color:var(--blauw)}
.train dl{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-family:var(--data);font-size:12px;margin-bottom:14px}
.train dt{color:var(--gedempt);text-transform:uppercase;letter-spacing:.08em;font-size:10px;align-self:center}
.train dd{text-align:right;font-weight:600;color:var(--blauw)}
.train p{font-size:15px;line-height:1.55}

/* ---------- galerij ---------- */
.galerij{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-top:36px}
.galerij button{border:none;padding:0;background:var(--grijs-mid);cursor:zoom-in;border-radius:3px;overflow:hidden;position:relative}
.galerij img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .35s ease,filter .25s ease}
.galerij button:hover img,.galerij button:focus-visible img{transform:scale(1.05);filter:saturate(1.1)}
.galerij button::after{content:"";position:absolute;inset:0;border:2px solid transparent;transition:border-color .2s ease}
.galerij button:hover::after,.galerij button:focus-visible::after{border-color:var(--groen)}

/* lightbox */
.doos{position:fixed;inset:0;z-index:100;background:rgba(18,55,88,.94);display:none;align-items:center;justify-content:center;padding:24px}
.doos.open{display:flex}
.doos img{max-width:min(1100px,92vw);max-height:86vh;width:auto;border-radius:3px;border:2px solid var(--groen)}
.doos button{position:absolute;top:20px;right:20px;background:var(--groen);color:var(--blauw);border:none;border-radius:3px;
  font-family:var(--data);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:11px 16px;cursor:pointer}

/* ---------- alumni ---------- */
.alumni{background:var(--blauw);color:var(--wit)}
.alumni h2.titel{color:var(--wit)}
.alumni .lood{color:#D6DFE7}
.namen{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-top:36px}
.naam{background:var(--blauw-2);border:1px solid rgba(255,255,255,.16);border-radius:4px;overflow:hidden;
  transition:transform .18s ease}
.naam:hover{transform:translateY(-4px)}
.naam .portret{aspect-ratio:3/4;background:rgba(255,255,255,.06);overflow:hidden}
.naam .portret img{width:100%;height:100%;object-fit:cover;object-position:center 25%}
.naam .geen{width:100%;height:100%;display:grid;place-items:center;font-family:var(--display);font-size:38px;color:rgba(255,255,255,.22)}
.naam .tekst{padding:16px 18px;border-top:3px solid var(--groen)}
.naam b{display:block;font-family:var(--display);font-size:17px;text-transform:uppercase;letter-spacing:-.01em}
.naam span{display:block;margin-top:6px;font-family:var(--data);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gedempt)}
.naam.uitgelicht .tekst{background:var(--groen);color:var(--blauw);border-top-color:var(--wit)}
.naam.uitgelicht span{color:rgba(18,55,88,.75)}

/* ---------- begeleiders ---------- */
.staf-blok+.staf-blok{margin-top:44px}
.staf{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:16px;margin-top:16px}
.persoon{background:var(--grijs-licht);border:1px solid var(--grijs-mid);border-radius:4px;overflow:hidden}
.persoon .portret{aspect-ratio:3/4;background:var(--grijs-mid);overflow:hidden}
.persoon .portret img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.persoon .geen{width:100%;height:100%;display:grid;place-items:center;font-family:var(--display);font-size:30px;color:var(--gedempt)}
.persoon .tekst{padding:12px 14px;border-top:3px solid var(--groen)}
.persoon b{display:block;font-size:15px;font-weight:600;color:var(--blauw);line-height:1.3}
.persoon span{display:block;margin-top:4px;font-family:var(--data);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--gedempt)}

/* ---------- sponsors ---------- */
.sponsors{background:var(--wit);border-top:1px solid var(--grijs-mid);text-align:center}

/* ---------- sponsors ----------
   Vier niveaus. Het raster telt zes kolommen, en elk niveau neemt er een
   ander aantal in. Zo staat de hoofdsponsor over de volle breedte en schuiven
   de steunende leden samen onderaan. */
.sponsor-rij{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;margin-top:32px;
  border:1px solid var(--grijs-mid);background:var(--grijs-mid)}
.sponsor{background:var(--wit);display:grid;place-items:center;padding:22px 18px;
  text-decoration:none;color:var(--blauw);transition:background .18s ease;grid-column:span 2;min-height:110px}
a.sponsor:hover{background:var(--grijs-licht)}
.sponsor img{max-width:100%;width:auto;object-fit:contain;
  filter:grayscale(1);opacity:.72;transition:filter .2s ease,opacity .2s ease}
a.sponsor:hover img{filter:grayscale(0);opacity:1}
.sponsor span{font-weight:600;font-size:15px;text-align:center;line-height:1.3}

/* Hoofdsponsor: volle breedte, groot logo, groene rand die hem markeert. */
.sponsor--hoofd{grid-column:1 / -1;min-height:190px;padding:36px 24px;
  border-top:3px solid var(--groen);background:var(--wit)}
.sponsor--hoofd img{max-height:110px;filter:none;opacity:1}
.sponsor--hoofd::before{content:"Hoofdsponsor";position:absolute;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--groen);font-weight:600;transform:translateY(-58px)}
.sponsor--hoofd{position:relative}

/* Grote sponsor: half zo breed als de hoofdsponsor. */
.sponsor--groot{grid-column:span 3;min-height:150px;padding:28px}
.sponsor--groot img{max-height:80px;opacity:.9}

/* Gewone sponsor. */
.sponsor--standaard{grid-column:span 2}
.sponsor--standaard img{max-height:56px}

/* Steunend lid: klein vak, enkel de naam. */
.sponsor--steunend{grid-column:span 1;min-height:74px;padding:14px 10px;background:var(--grijs-licht)}
.sponsor--steunend span{font-size:13px;font-weight:500;color:var(--gedempt)}
a.sponsor--steunend:hover span{color:var(--blauw)}

@media (max-width:900px){
  .sponsor-rij{grid-template-columns:repeat(2,1fr)}
  .sponsor,.sponsor--standaard,.sponsor--groot{grid-column:span 1}
  .sponsor--hoofd{grid-column:1 / -1}
  .sponsor--steunend{grid-column:span 1;min-height:64px}
}

/* ---------- nieuws ---------- */
.nieuws-lijst{border-top:1px solid var(--grijs-mid);margin-top:10px}
.bericht{display:grid;grid-template-columns:150px 1fr auto;gap:24px;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--grijs-mid)}
.bericht time{font-family:var(--data);font-size:12px;color:var(--blauw);letter-spacing:.08em;font-weight:600}
.bericht h3{font-family:var(--display);font-size:clamp(18px,2.2vw,23px);text-transform:uppercase;line-height:1.2;color:var(--blauw)}
.bericht p{margin-top:8px;max-width:62ch}
.bericht .tag{font-family:var(--data);font-size:10px;letter-spacing:.14em;text-transform:uppercase;background:var(--blauw);
  color:var(--wit);padding:5px 9px;border-radius:2px;white-space:nowrap}
.bericht .tag[data-soort="club"]{background:var(--groen);color:var(--blauw)}

/* ---------- lid worden ---------- */
.lid{background:var(--blauw);color:var(--wit)}
.lid h2.titel{color:var(--wit)}
.lid-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px)}
.lid p{color:#D6DFE7}
.stappen{list-style:none;margin-top:28px;counter-reset:stap}
.stappen li{counter-increment:stap;display:grid;grid-template-columns:auto 1fr;gap:16px;padding:16px 0;border-top:1px solid rgba(255,255,255,.2)}
.stappen li::before{content:counter(stap,decimal-leading-zero);font-family:var(--data);font-size:12px;color:var(--groen);font-weight:600;padding-top:3px}
.stappen b{display:block;color:var(--wit);font-size:16px}
.stappen em{font-style:normal;color:var(--gedempt);font-size:15px}

form{background:var(--blauw-2);border:1px solid rgba(255,255,255,.16);border-radius:4px;padding:24px}
.veld{margin-bottom:16px}
label{display:block;font-family:var(--data);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gedempt);margin-bottom:7px}
input,select,textarea{width:100%;padding:12px 14px;background:var(--blauw);border:1px solid rgba(255,255,255,.25);
  border-radius:3px;color:var(--wit);font-family:var(--body);font-size:15px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--groen);outline-offset:1px;border-color:transparent}
textarea{resize:vertical;min-height:90px}
button.verstuur{width:100%;background:var(--groen);color:var(--blauw);border:none;border-radius:3px;padding:15px;
  font-family:var(--data);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;cursor:pointer;transition:background .15s ease}
button.verstuur:hover{background:var(--wit)}
.melding{margin-top:14px;font-family:var(--data);font-size:12px;color:var(--groen);display:none}
.melding.zichtbaar{display:block}

/* ---------- footer ---------- */
footer{background:var(--blauw-2);color:var(--gedempt);border-top:2px solid var(--groen);padding:56px var(--marge) 28px}
.voet-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:36px}
footer h4{font-family:var(--data);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--wit);margin-bottom:14px}
footer a{color:var(--gedempt);text-decoration:none;display:block;padding:4px 0;font-size:15px}
footer a:hover{color:var(--groen)}
footer .adres{font-size:15px;line-height:1.75}
footer .adres b{color:var(--wit)}
.mailrij{font-size:15px;padding:4px 0}
.mailrij span{font-family:var(--data);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#6C8497;display:block}
.copy{max-width:1180px;margin:40px auto 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.16);
  font-family:var(--data);font-size:11px;letter-spacing:.1em;text-transform:uppercase;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* ---------- responsief ---------- */
@media (max-width:1000px){
  .spoor{grid-template-columns:1fr}
  .spoor::before,.spoor .voortgang{left:7px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .spoor .voortgang{animation:groei-v 2.6s cubic-bezier(.6,.05,.25,1) .3s forwards;height:0;width:2px}
  @keyframes groei-v{to{height:100%}}
  .halte{padding:0 0 26px 32px}
  .halte .stip{top:2px;left:0}
  .halte p{max-width:none}
}
@media (max-width:900px){
  .hero-grid,.club-grid,.lid-grid,.voet-grid{grid-template-columns:1fr}
  .hero-foto::after{background:linear-gradient(180deg,rgba(18,55,88,.55) 0%,rgba(18,55,88,.82) 42%,rgba(18,55,88,.95) 100%)}
  .bericht{grid-template-columns:1fr;gap:8px}
  .bericht .tag{justify-self:start}
  nav.links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--blauw);border-bottom:2px solid var(--groen);padding:8px var(--marge) 18px}
  nav.links.open{display:flex}
  nav.links a{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.1)}
  nav.links a.knop{text-align:center;margin-top:12px}
  .menu-knop{display:block}
  header.nav{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .spoor .voortgang{animation:none;width:100%}
  .halte .stip{animation:none;opacity:1}
  *{transition:none!important}
}
:focus-visible{outline:2px solid var(--groen);outline-offset:2px}

/* ---------- typografie: één familie, gewicht doet het werk ----------
   Archivo Black was zwaar van zichzelf. Poppins/Sofia Pro niet, dus
   zetten we de titels expliciet op 800 en trekken we de tracking strak. */
.hero h1,
h2.titel,
h3.sub,
.merk b,
.halte h4,
.cijfer b,
.afd h3,
.panathlon h3,
.naam b,
.bericht h3,
.naam .geen,
.persoon .geen{font-weight:800}

.hero h1{letter-spacing:-.03em}
h2.titel{letter-spacing:-.02em}
.cijfer b{letter-spacing:-.02em}
.naam b,.afd h3,.bericht h3{letter-spacing:-.01em}

/* De blokjes die vroeger monospace waren, houden hun ritme via tracking. */
.eyebrow,
nav.links a,
.btn,
button.verstuur,
.kaart-hero h3,
.kaart-hero dt,
.traject-kop span,
.halte .leeftijd,
.afd .cat,
.train .kop span,
.train dt,
.bericht time,
.bericht .tag,
.cijfer span,
.naam span,
.persoon span,
.stappen li::before,
label,
footer h4,
.mailrij span,
.copy,
.club-foto figcaption,
.ploegfoto figcaption,
.melding,
.doos button{font-weight:600}

/* Tabelachtige waarden blijven netjes uitlijnen zonder monospace. */
.kaart-hero dd,
.train dd,
.afd li b{font-variant-numeric:tabular-nums;font-weight:600}

/* ---------- WordPress-specifiek ---------- */
body.admin-bar header.nav{top:32px}
@media (max-width:782px){body.admin-bar header.nav{top:46px}}

/* Berichtpagina (single) */
.single-inhoud{max-width:760px;margin:0 auto}
.single-inhoud .meta{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--gedempt);font-weight:600}
.single-inhoud h1{font-family:var(--display);font-weight:800;font-size:clamp(30px,5vw,48px);line-height:1.05;
  text-transform:uppercase;letter-spacing:-.02em;color:var(--blauw);margin:10px 0 22px}
.single-inhoud img{border-radius:4px;margin:24px 0}
.single-inhoud h2,.single-inhoud h3{color:var(--blauw);margin:28px 0 10px;font-weight:700}
.single-inhoud p{margin-bottom:16px}
.single-inhoud a{color:var(--blauw);text-underline-offset:3px}
.terug{display:inline-block;margin-top:32px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--blauw);text-decoration:none;border-bottom:2px solid var(--groen);padding-bottom:4px}

/* Meer-knop onder het nieuws */
.meer{display:flex;justify-content:center;margin-top:36px}

/* Wanneer een sectie leeg is (nog geen items ingevuld) */
.leeg{font-size:15px;color:var(--gedempt);padding:24px 0}