/*
Theme Name: Bedevaart 2026
Theme URI: https://www.bedevaart.nl/
Author: Studio Stuurman
Author URI: https://studiostuurman.com
Description: Blokthema voor de Haagse Bedevaarten naar het ontwerp van Len de Vries-Blom: warm papierwit, diepgroene missieband, oranje accenten; Italiana + Nunito Sans.
Version: 1.5.0
Requires at least: 6.6
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: bedevaart2026
*/

/* ==========================================================================
   1. Lettertypen — zelf gehost, geen externe verbinding
   ========================================================================== */
/* Italiana staat hier als vervanger voor Ogg, het betaalde lettertype dat Len
   via WIX gebruikt. Van de elf geteste vrije schreefletters komt Italiana het
   dichtst bij het karakter van Ogg: hetzelfde sterke dun-dikverschil, dezelfde
   kleine x-hoogte en lange stokken. Zie LEESMIJ-LETTERTYPEN.md.
   Let op: Italiana heeft maar één snede, geen cursief en geen vet. */
@font-face{
  font-family:"Italiana";
  src:url("assets/fonts/italiana.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}

/* Nunito Sans staat hier als vervanger voor Avenir LT 35 Light, het betaalde
   lettertype dat Len via WIX gebruikt. Van de elf geteste vrije schreeflozen
   kwam Nunito Sans het dichtst bij de breedte van Avenir (-0,4%) en het is
   dezelfde soort letter: geometrisch met een humanistische inslag.
   Variabel bestand, dus 400 en 700 komen uit dezelfde woff2. */
@font-face{
  font-family:"Nunito Sans";
  src:url("assets/fonts/nunito-sans-normal.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Nunito Sans";
  src:url("assets/fonts/nunito-sans-italic.woff2") format("woff2");
  font-weight:400 700; font-style:italic; font-display:swap;
}
/* Lichte snit, om Wix' Avenir LT 35 Light te benaderen — die staat zelf ook
   op CSS-gewicht 400, maar is een dunnere snit dan Nunito Sans Regular. */
@font-face{
  font-family:"Nunito Sans";
  src:url("assets/fonts/nunito-sans-light.woff2") format("woff2");
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Nunito Sans";
  src:url("assets/fonts/nunito-sans-light-italic.woff2") format("woff2");
  font-weight:300; font-style:italic; font-display:swap;
}

/* ==========================================================================
   2. Ontwerptokens — afgemeten op de WIX-opzet van Len, 21-08-2026
   ========================================================================== */
:root{
  /* Alle kleuren zijn op 21-08-2026 met getComputedStyle van de WIX-site van
     Len afgelezen, niet geschat. Let op: haar tekst is nergens neutraal grijs,
     alles heeft een groene ondertoon. Dat is het halve karakter van dit ontwerp. */
  --papier:#fdfcf8;        /* paginavlak            rgb(253,252,248) */
  --sage:#e6e8db;          /* kaartvoet en lichte tekst op groen     */
  --sage-diep:#dee2d2;
  --groen:#2d3e33;         /* missieband            rgb(45,62,51)    */
  --groen-diep:#22301f;
  --oranje:#ed7809;        /* knoppen               rgb(237,120,9)   */
  --oranje-diep:#c96606;
  --ink:#1a2e1c;           /* koppen en donkere tekst rgb(26,46,28)  */
  --ink-zacht:#546256;     /* inleiding en bijtekst rgb(84,98,86)    */
  --nav:#2e3e33;           /* menu                  rgb(46,62,51)    */
  --lijn:rgba(26,46,28,.16);

  /* Zij gebruikt "ogg" en "Avenir LT 35 Light". Dat zijn betaalde lettertypen
     die WIX meelevert; wij mogen ze niet zomaar meesturen. Italiana en Nunito Sans
     staan hier als vervanger, zie LEESMIJ-LETTERTYPEN.md. */
  --serif:"Italiana",Georgia,"Times New Roman",serif;
  --sans:"Nunito Sans","Segoe UI",-apple-system,BlinkMacSystemFont,sans-serif;

  --kader:1900px;
  --rand:clamp(18px,2.5vw,47px);
  --ritme:clamp(50px,7vw,96px);

  /* Maatvoering, ook afgelezen. De vw-waarde geeft op 1870px exact haar
     pixelmaat; de clamp houdt het leesbaar op een telefoon. */
  --t-h1:clamp(2.4rem,5.06vw,5.92rem);      /* 94,6px  */
  --t-h2:clamp(2rem,3.75vw,4.38rem);        /* 70,1px  */
  --t-h2-klein:clamp(1.75rem,2.54vw,2.97rem);/* 47,5px */
  --t-kaartkop:clamp(1.5rem,2.5vw,2.92rem); /* 46,8px  */
  --t-groot:clamp(1.05rem,1.56vw,1.83rem);  /* 29,2px  */
  --t-intro:clamp(1.05rem,1.41vw,1.64rem);  /* 26,3px  */
  --t-body:clamp(.95rem,1.25vw,1.46rem);    /* 23,4px  */
  --t-nav:clamp(.95rem,1.09vw,1.28rem);     /* 20,5px  */
  --t-klein:clamp(.85rem,.94vw,1.1rem);     /* 17,5px  */
  --t-h1-pagina:clamp(2.2rem,4.69vw,5.48rem);/* 87,7px  H1 binnenpagina */
  --t-h2-sectie:clamp(1.6rem,1.877vw,2.19rem);/* 35,1px  Programma, Kosten, onderkop */
}

/* ==========================================================================
   3. Basis
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--papier);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  font-weight:300;
  line-height:1.30;
  -webkit-font-smoothing:antialiased;
  /* clip, niet hidden: hidden maakt van de body een scroll-container. */
  overflow-x:clip;
  overflow-wrap:break-word;
}
[id]{scroll-margin-top:90px}
img{max-width:100%;height:auto;display:block}
a{color:var(--groen);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--oranje-diep)}

/* Het lichte, brede schrift is het handschrift van dit ontwerp. Italiana heeft
   maar één gewicht, dus 400 is hier ook het enige juiste; zet er geen 600 op,
   dan maakt de browser er een nagemaakt vet van en verdwijnt het dun-dikverschil
   dat dit lettertype juist op Ogg doet lijken. */
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.10;
  margin:0;
  letter-spacing:.005em;
  color:var(--ink);
}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
ul,ol{margin:0 0 1.1em;padding-left:1.2em}
li{margin-bottom:.35em}

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

.kader{width:100%;max-width:var(--kader);margin-inline:auto;padding-inline:var(--rand)}

/* Raster- en flexkinderen mogen nooit breder worden dan hun kolom. Dat is de
   oorzaak van vrijwel elke pixel zijwaarts scrollen op een smal scherm. */
.hero-rij>*,.broeder-rij>*,.reis-rij>*,.paginakop-rij>*,
.snel-rij>*,.detail-rij>*,.voet-rij>*,.programma-lijst li>*{min-width:0}

.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;
}
.overslaan{position:absolute;left:-9999px;top:0;z-index:200;background:var(--groen);color:#fff;padding:12px 20px}
.overslaan:focus{left:12px;top:12px}

/* ==========================================================================
   4. Knoppen
   ========================================================================== */
.knop{
  display:inline-block;
  background:var(--oranje);
  color:#fff;
  font-family:var(--sans);
  font-weight:500;
  font-size:var(--t-body);
  padding:14px 32px;
  border:0;
  border-radius:999px;
  text-decoration:none;
  transition:background .18s ease;
}
.knop:hover,.knop:focus-visible{background:var(--oranje-diep);color:#fff}
.knop-klein{padding:11px 26px;font-size:.9rem}

.oogje{
  display:block;font-family:var(--sans);font-size:var(--t-nav);font-weight:400;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-zacht);margin-bottom:12px;line-height:1.2;
}

/* Decoratieve rozet voor de feitenkolom en de snelkoppelingen. */
.rozet{display:block;width:15px;height:15px;color:var(--groen);flex:0 0 auto;opacity:.75}

/* ==========================================================================
   5. Koptekst — warm crème, alleen het beeldmerk links, menu rechts
   ========================================================================== */
.kop{background:var(--papier);position:relative;z-index:100}
.kop-rij{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px;min-height:122px;padding-block:52px 14px;
}
.merk{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.merk img{width:86px;height:88px;object-fit:contain}
/* Het beeldmerk bevat de naam al; een tweede woordmerk ernaast staat niet in
   het ontwerp van Len. Voor schermlezers blijft de naam wel bestaan. */
.merk-naam,.merk-sub{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.menuknop{
  display:none;align-items:center;gap:8px;background:none;
  border:1px solid var(--lijn);border-radius:999px;padding:9px 16px;
  font-family:var(--sans);font-weight:500;font-size:.85rem;color:var(--ink);cursor:pointer;
}
.menuknop svg{width:16px;height:16px}

.hoofdmenu ul{display:flex;flex-wrap:wrap;gap:clamp(20px,6.4vw,120px);list-style:none;margin:0;padding:0}
.hoofdmenu li{margin:0;position:relative}
.hoofdmenu a{
  font-family:var(--sans);font-size:var(--t-nav);font-weight:700;text-transform:capitalize;
  color:var(--nav);text-decoration:none;padding-block:8px;display:inline-block;
}
.hoofdmenu a:hover{color:var(--oranje-diep)}
.hoofdmenu .current-menu-item>a{color:var(--nav);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
/* Pijltje bij de twee items die een submenu hebben, net als op de WIX-site. */
.hoofdmenu .menu-item-has-children>a::after{
  content:"";display:inline-block;width:.42em;height:.42em;margin-left:.5em;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:translateY(-.18em) rotate(45deg);
}
.hoofdmenu .sub{
  display:none;position:absolute;left:-18px;top:100%;
  background:var(--papier);border:1px solid var(--lijn);
  min-width:250px;padding:8px 0;flex-direction:column;gap:0;
  box-shadow:0 14px 30px rgba(26,46,28,.10);z-index:20;
}
.hoofdmenu li:hover>.sub,.hoofdmenu li:focus-within>.sub{display:flex}
.hoofdmenu .sub li{width:100%}
.hoofdmenu .sub a{display:block;padding:9px 22px;font-size:.9rem}
.hoofdmenu .sub a:hover{background:var(--sage)}

/* Op de voorpagina staat het beeldmerk alleen in de hero, niet ook nog eens in
   de menubalk. Zo staat het in het ontwerp van Len; op alle andere pagina's
   staat het wel in de balk. */
.home .kop .merk{display:none}
.home .kop-rij{justify-content:flex-end}

/* ==========================================================================
   6. Voorpagina — hero. Beeld loopt door tot de rechterrand van het scherm.
   ========================================================================== */
.hero{background:var(--papier)}
/* De hero loopt bewust búiten het kader: de foto raakt de rechterrand van het
   scherm, zoals in het ontwerp. Daarom geen max-width en geen rechtermarge. */
.hero-rij{
  display:grid;
  grid-template-columns:minmax(0,760px) minmax(0,1fr);
  gap:clamp(22px,4vw,75px);
  align-items:start;
  max-width:none;margin-inline:0;
  padding-left:clamp(18px,5vw,95px);padding-right:0;
  padding-block:0;
}
.hero-kop{display:flex;align-items:flex-end;gap:0;margin-bottom:47px}
.hero-merk{width:clamp(92px,13.5vw,253px);height:auto;flex:0 0 auto}
.hero h1{
  font-size:var(--t-h1);line-height:1.0;
  color:var(--ink);
  margin:0;
  /* Bij Wix breekt "Haagse Bedevaarten" af naar twee regels (gemeten kop-
     breedte 389px bij 64px lettergrootte, ratio ~6,1). em i.p.v. px zodat
     die verhouding blijft kloppen bij elke viewport, ook op mobiel. */
  max-width:6.1em;
}
.hero-intro{color:var(--ink-zacht);max-width:24em;margin-bottom:62px;font-size:var(--t-intro)}
.hero-beeld{margin:0}
.hero-beeld img{width:100%;height:clamp(300px,35vw,660px);object-fit:cover;object-position:center 42%}

/* ==========================================================================
   7. Missieband
   ========================================================================== */
.missie{background:var(--groen);color:var(--sage);text-align:center;padding-block:clamp(40px,5vw,94px) clamp(40px,3.85vw,72px)}
.missie .oogje{color:var(--sage)}
.missie h2{font-size:var(--t-h2-klein);color:var(--papier);margin:0 auto 18px;max-width:1183px}
.missie p{max-width:1183px;margin-inline:auto;color:var(--sage);font-size:var(--t-groot)}
.missie-rij{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,5vw,72px);align-items:center;text-align:left;max-width:1402px;margin-inline:auto}
.missie-rij .missie-tekst h2,.missie-rij .missie-tekst p{margin-inline:0;max-width:none}
.missie-beeld{margin:0}
.missie-beeld img{width:100%;height:auto;border-radius:24px;display:block}
@media (max-width:820px){.missie-rij{grid-template-columns:1fr;text-align:center}.missie-rij .missie-tekst h2,.missie-rij .missie-tekst p{margin-inline:auto;max-width:1183px}}

/* ==========================================================================
   8. Activiteiten — kaarten met zachtgroene voet en oranje knop
   ========================================================================== */
.activiteiten{background:var(--papier);padding-block:clamp(50px,5.56vw,104px) var(--ritme)}
.sectiekop{text-align:center;max-width:1402px;margin:0 auto clamp(32px,6.6vw,123px)}
.sectiekop h2{font-size:var(--t-h2);margin-bottom:12px}
.sectiekop p{color:var(--ink);font-size:var(--t-groot)}

.kaarten{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(18px,3.2vw,60px);row-gap:clamp(26px,6.95vw,130px);list-style:none;margin:0;padding:0;
}
.kaart{display:flex;flex-direction:column;margin:0;background:var(--sage)}
.kaart img{width:100%;aspect-ratio:5/4;object-fit:cover}
.kaart-body{padding:47px 48px 40px;display:flex;flex-direction:column;flex:1 1 auto;background:var(--sage)}
.kaart h3{font-size:var(--t-kaartkop);margin-bottom:12px}
.kaart p{color:var(--ink);font-size:var(--t-body);margin-bottom:18px}
.kaart .knop{margin-top:auto;align-self:flex-start}

/* ==========================================================================
   9. Broederschap-blok op de voorpagina
   ========================================================================== */
.broeder{background:var(--papier);padding-block:var(--ritme)}
.broeder-rij{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,64px);align-items:center}
.broeder h2{font-size:var(--t-h2);margin-bottom:16px}
.broeder p{color:var(--ink);margin-bottom:22px;font-size:var(--t-body)}
.broeder-beeld{margin:0}
.broeder-beeld img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* ==========================================================================
   10. Overzichtspagina
   ========================================================================== */
.paginakop{background:var(--sage);padding-block:clamp(40px,5.5vw,103px) clamp(20px,5.4vw,101px)}
.paginakop .kader{max-width:none;padding-left:clamp(18px,13.26vw,248px);padding-right:clamp(18px,10.53vw,197px)}
.paginakop-rij{display:grid;grid-template-columns:minmax(0,765fr) minmax(0,415fr);gap:clamp(26px,4.4vw,82px);align-items:center}
.paginakop h1{font-size:var(--t-h1-pagina);color:var(--oranje);margin-bottom:clamp(20px,2.51vw,47px)}
.paginakop p{color:var(--ink);max-width:46em;font-size:var(--t-body);font-weight:700}
.paginakop p+p{margin-top:1.05em}
.paginakop-portret{margin:0;justify-self:center}
.paginakop-portret img{width:min(415px,74vw);aspect-ratio:1;border-radius:50%;object-fit:cover;box-shadow:0 16px 36px rgba(26,46,28,.18)}

/* Historie-sectie (Terugblik e.d.): het shortcode-blok zit ingebed in de
   smalle .pagina-body-kolom (max-width:48em, flush-left in .kader, NIET
   gecentreerd), dus de klassieke "calc(50% - 50vw)"-truc breekt verkeerd
   uit: die 50% rekent tegen de 768px-brede kolom, niet tegen het scherm.
   Vaste-lengte marges (geen percentage) schuiven .historie precies --rand
   naar links terug tot de kader-rand, width:100vw brengt 'm door tot de
   schermrand. body heeft overflow-x:clip, dus geen horizontale scrollbar. */
/* .pagina-body staat nu gecentreerd (margin-inline:auto, zie hierboven),
   niet meer vast tegen de kader-rand. Bij geneste symmetrische centrering
   (kader gecentreerd in .pagina, pagina-body gecentreerd in kader) vallen
   kader's eigen --rand-padding volledig weg tegen de rekensom: de linkerrand
   van pagina-body is exact 50vw - 384px (384px = de helft van .pagina-body's
   max-width:48em = 768px/2). Geldig zolang .kader's eigen max-width:1900px
   niet bindt, dus tot een viewport van ~1900px; daarboven een kleine, in de
   praktijk onzichtbare afwijking. */
.historie{width:100vw;margin-left:calc(384px - 50vw)}
.historie-rij{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;min-height:clamp(420px,38vw,620px);max-width:1800px;margin-inline:auto}
.historie-beeld{margin:0;height:100%}
.historie-rij .historie-beeld img{width:100%;height:100%;object-fit:cover;display:block;margin:0}
.historie-tekst{display:flex;flex-direction:column;justify-content:center;padding:clamp(32px,4.5vw,84px) clamp(24px,6.5vw,120px)}
.historie-tekst h2{font-size:var(--t-h2-sectie);margin-top:0;margin-bottom:.6em}
/* 2em (~47px bij 1870px) is op zowel Broederschap als Terugblik apart op Wix
   gemeten als de afstand tussen lopende alinea's — geen sage-scoping nodig,
   geldt voor beide. Broederschap wijkt hier later specifiek van af (zie
   page-id-14 hieronder), Terugblik gebruikt deze basiswaarde ongewijzigd. */
.historie-tekst p{color:var(--ink);font-size:var(--t-body);margin:0 0 2em}
.historie-tekst blockquote{margin:1.2em 0 0;padding-left:1.1em;border-left:3px solid var(--oranje);font-style:italic;color:var(--groen)}
.historie-tekst blockquote p{margin:0;color:inherit;font-size:inherit}
.historie-tekst ul,.historie-tekst ol{color:var(--ink);font-size:var(--t-body);margin:0 0 1.1em;padding-left:1.3em}
.historie-tekst li{margin-bottom:.35em}
/* thema="sage": titelband en introband lopen zo als één vlak door. Geldt nu
   voor zowel Broederschap als Terugblik (op Wix bij 1870px allebei gemeten:
   paneelkleur exact #e6e8db = --sage, via pixel-sampling, niet aan de DOM
   afgelezen — Wix' gelaagde achtergrond-divs zijn niet betrouwbaar via
   getComputedStyle te vinden). */
.historie--sage{background:var(--sage)}
.historie--sage .historie-rij{min-height:auto}
/* .pagina{padding-block:var(--ritme)} zet ruimte vóór de eerste sectie in
   entry-content; staat de sage-band daar als eerste blok, trek die ruimte
   er weer af zodat titelband en introband als één vlak doorlopen. */
.historie--sage:first-child{margin-top:calc(-1 * var(--ritme))}
.historie:first-child{margin-top:calc(-1 * var(--ritme))}
/* titel="groot": deze kop doet dienst als de facto paginatitel, dus dezelfde
   grootte als een echte H1 binnenpagina. Kleur bewust NIET hier: op Wix is
   dit oranje bij Broederschap maar donker (--ink) bij Terugblik — twee
   verschillende redactionele keuzes op twee losse pagina's, geen vaste regel.
   Zie page-id-14 hieronder voor de oranje uitzondering. */
.historie--titel-groot .historie-tekst h2{font-size:var(--t-h1-pagina);line-height:1.1;margin-top:0;margin-bottom:.55em}

/* ---- Broederschap (page-id-14): pagina-specifieke afwijkingen ----
   Wix laat de tekstblokken na de eerste alinea zonder tussenruimte
   doorlopen (uitlegzin, opsomming, slotalinea volgen direct op elkaar);
   Terugblik doet dat niet en gebruikt overal de gewone 2em hierboven. */
.page-id-14 .historie--titel-groot .historie-tekst h2{color:var(--oranje)}
.page-id-14 .historie-tekst p{margin:0}
.page-id-14 .historie-tekst p:first-of-type{margin-bottom:2em}
.page-id-14 .historie-tekst ul,.page-id-14 .historie-tekst ol{margin:0}
.page-id-14 .historie-tekst li{margin-bottom:0}
/* font-weight hier herhaald (niet enkel op .historie-tekst p/ul/ol): dat
   blok zit óók binnen .pagina-body (het post-content-omhulsel), en
   .pagina-body p (0,2,0, verderop in dit bestand) wint anders op
   brontekst-volgorde van de gelijk-specifieke .historie-tekst p — zelfde
   valkuil als de citaatband. */
.page-id-14 .historie-tekst p,.page-id-14 .historie-tekst ul,.page-id-14 .historie-tekst ol{font-weight:400}


/* Twee kolommen naast elkaar (ANBI e.d.): zelfde uitbraak-truc als .historie
   voor de sage-variant, vaste-lengte marges i.p.v. percentages. */
.kolommen--sage{background:var(--sage);width:100vw;margin-left:calc(384px - 50vw)}
.kolommen--sage:first-child{margin-top:calc(-1 * var(--ritme))}
.kolommen-rij{display:grid;grid-template-columns:minmax(0,340fr) minmax(0,560fr);gap:clamp(32px,5vw,80px);max-width:1800px;margin-inline:auto;padding:clamp(32px,4.5vw,84px) clamp(24px,6.5vw,120px)}
/* .kolommen-rij vooraan (0,3,0): dit blok zit óók binnen .pagina-body, en
   .pagina-body h2 (0,2,0, verderop) won hier anders op brontekst-volgorde
   van de gelijk-specifieke .kolommen-kol h2 — ANBI's kop "ANBI" viel daardoor
   terug op de kleine, gecentreerde .pagina-body-koptekst. Zelfde valkuil als
   de citaatband en de historie-band hierboven. */
.kolommen-rij .kolommen-kol h2{font-size:var(--t-h1-pagina);color:var(--oranje);margin:0 0 .5em;line-height:1.1;text-align:left}
.kolommen-rij .kolommen-kol h3{font-family:var(--sans);font-size:var(--t-body);font-weight:700;margin:0 0 .6em;color:var(--ink);text-align:left}
.kolommen-kol p{color:var(--ink);font-size:.95rem;line-height:1.55;margin:0 0 .9em}
.kolommen-kol p:last-child{margin-bottom:0}
@media (max-width:820px){.kolommen-rij{grid-template-columns:1fr;gap:28px}}

/* Citaatband (Broederschap e.d.): losstaand van de gewone .pagina-body
   blockquote, gecentreerd en groter, zoals bij Wix. Zelfde uitbraak-truc
   als .historie: vaste-lengte marges i.p.v. percentages, zie toelichting
   daar. */
.citaat{background:var(--papier);width:100vw;margin-left:calc(384px - 50vw);padding-block:clamp(48px,6vw,110px)}
/* .pagina-body blockquote (verderop, zelfde specificiteit 0,2,0) wint anders
   op brontekst-volgorde: linker oranje rand, Georgia, aanhalingstekens via
   ::before/::after. Hier bewust .citaat .kader blockquote (0,3,0) om dat
   altijd te verslaan, ongeacht waar dat andere blok in het bestand staat. */
.citaat .kader blockquote{all:unset;display:block;box-sizing:border-box;margin:0 auto;max-width:44ch;text-align:center}
.citaat .kader blockquote p{all:unset;display:block;box-sizing:border-box;font-family:var(--serif,inherit);font-style:italic;color:var(--groen);font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.4;margin:0}
.citaat .kader blockquote p::before,.citaat .kader blockquote p::after{content:none}
@media (max-width:900px){
  .historie-rij{grid-template-columns:1fr;min-height:0}
  .historie-beeld{height:clamp(220px,60vw,340px)}
  .historie--sage .historie-beeld{aspect-ratio:auto}
  /* De "384px - 50vw"-uitbraakformule hierboven klopt alleen zolang
     .pagina-body's max-width:48em (768px) ook echt bindt. Onder ~808px
     is pagina-body zelf al smaller dan 768px en dus weer vanzelf vol-breed
     (margin-inline:auto doet dan niets), dus dan geldt weer de oude
     platte-marge-truc tegen de kader-rand. 900px hergebruikt gewoon de
     bestaande mobiel-omslag hierboven, geen aparte drempelwaarde nodig. */
  .historie,.citaat,.kolommen--sage{margin-left:calc(-1 * var(--rand))}
}

.snel{background:var(--papier);border-block:1px solid var(--lijn);padding-block:clamp(30px,7.91vw,148px) var(--ritme)}
.snel .kader{max-width:none;padding-left:clamp(18px,16.68vw,312px);padding-right:clamp(18px,3.53vw,66px)}
.snel-rij{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.snel-item{padding-right:60px}
.snel-item h2{font-family:var(--sans);font-size:var(--t-body);font-weight:400;line-height:1.30;color:var(--ink);margin-bottom:8px}
.snel-item p{color:var(--ink);font-size:var(--t-nav);margin-bottom:10px}

.reis{padding-block:0 var(--ritme)}
.reis .kader{max-width:none;padding-left:clamp(12px,1.02vw,19px);padding-right:clamp(12px,6.52vw,122px)}
.reis-rij{display:grid;grid-template-columns:minmax(0,1207fr) minmax(0,490fr);gap:clamp(20px,1.7vw,32px);align-items:center;padding-block:clamp(14px,.8vw,15px)}
.reis-rij+.reis-rij{border-top:0}
/* niet wisselen: bij Len staat de foto altijd links */
.reis-beeld{margin:0}
.reis-beeld img{width:100%;aspect-ratio:2.215/1;object-fit:cover}
.reis h2{font-size:var(--t-kaartkop);margin-bottom:12px}
.reis p{color:var(--ink);margin-bottom:22px;font-size:var(--t-body)}

/* ==========================================================================
   11. Bedevaart-detailpagina
   ========================================================================== */
.banner{width:100%;overflow:hidden;background:var(--sage)}
.banner img{width:100%;aspect-ratio:4.42/1;object-fit:cover;object-position:center 45%}

.detail{background:var(--sage);padding-block:clamp(36px,4.49vw,84px) clamp(36px,11.44vw,214px)}
.detail .kader{max-width:none;padding-left:clamp(18px,8.72vw,163px);padding-right:clamp(18px,7.75vw,145px)}
.detail-rij{display:grid;grid-template-columns:minmax(0,305px) minmax(0,949px);gap:clamp(28px,16.47vw,308px);align-items:start}

/* De feitenkolom heeft in het ontwerp geen zichtbare kopjes: alleen een rozet
   en de waarde. De kopjes blijven wel in de opmaak staan voor schermlezers,
   anders is "Kevelaer, Duitsland" een los woord zonder betekenis. */
.feiten{margin:0;padding-top:clamp(0px,1.34vw,25px)}
.feit{display:flex;gap:12px;align-items:flex-start;padding-block:18px}
.feit dt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.feit dd{margin:0;color:var(--ink);font-size:var(--t-klein);line-height:1.30}
.feit dd span{display:block}
/* Bij "Bijzonderheden" staat het label bij Len wél in beeld, cursief, als
   onderdeel van dezelfde regel als de waarde — de andere drie feiten (Bedevaart,
   Plaats, Datum) blijven onzichtbaar-voor-schermlezers, precies zoals bij haar. */
.feit dt.feit-label-zichtbaar{
  position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;
  display:inline;font-style:italic;margin-right:.3em;
}
.feit dt.feit-label-zichtbaar + dd{display:inline}
.feiten-knop{margin-top:20px}
.detail-extra{margin-top:30px;color:var(--ink);font-size:var(--t-klein);line-height:1.30}

.detail h1{font-size:var(--t-h1-pagina);color:var(--oranje);margin-bottom:4px}
.detail-sub{font-family:var(--serif);font-size:var(--t-h2-sectie);font-weight:400;text-transform:capitalize;color:#000;margin-bottom:22px;line-height:1.10}
.detail-tekst p{color:var(--ink);font-size:var(--t-body)}

.video{background:var(--papier);padding-block:clamp(36px,5vw,64px)}
.video .kader{max-width:none;padding-left:clamp(18px,23.05vw,431px);padding-right:clamp(18px,2.4vw,45px)}
.video-wikkel{margin:0;max-width:1009px}
.video-kader{position:relative;padding-top:56.25%;background:var(--groen-diep)}
.video-kader iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.programma{background:var(--sage);padding-block:clamp(40px,5.4vw,70px) clamp(20px,1.6vw,30px)}
.programma .kader,.kosten .kader{max-width:none;padding-left:clamp(18px,22.51vw,421px);padding-right:clamp(18px,3vw,56px)}
.programma h2{font-size:clamp(1.48rem,1.877vw,2.19rem);color:#000;text-transform:capitalize;margin-bottom:4px}
.programma-datum{color:var(--ink);font-size:var(--t-body);margin-bottom:10px}
.programma-lijst{list-style:none;margin:0;padding:0;max-width:1100px}
/* Geen scheidingslijnen: in het ontwerp is dit één rustig blok. */
/* 120px, niet 96: bij --t-body (23,4px) meet "16.30 uur" zelf al ~102px breed,
   96px liet "uur" naar een eigen regel omklappen. */
.programma-lijst li{display:grid;grid-template-columns:93px 1fr;gap:16px;padding-block:2px;margin:0}
.programma-tijd{white-space:nowrap}
.programma-tijd{color:var(--ink);font-size:var(--t-body);font-variant-numeric:tabular-nums}
.programma-wat{color:var(--ink);font-size:var(--t-body)}

.kosten{background:var(--papier);padding-block:clamp(60px,10.4vw,200px) clamp(40px,5.4vw,70px)}
.kosten h2{font-size:clamp(1.48rem,1.877vw,2.19rem);color:#000;text-transform:capitalize;margin-bottom:16px}
.kosten .kader>p{max-width:52em;color:var(--ink);font-size:var(--t-body)}

/* Melding die alleen een ingelogde beheerder ziet. */
.nazicht{border-left:3px solid var(--oranje);background:#fff8ec;padding:12px 16px;margin:18px 0;font-size:.85rem;color:#5a4109}
.nazicht strong{color:#3d2c06}

/* ==========================================================================
   12. Inhoudspagina's
   ========================================================================== */
/* margin-top:0 overschrijft WordPress' standaard block-gap (24px) tussen
   .paginakop en .pagina als opeenvolgende top-level blokken; anders kan een
   sage-introband (.historie--sage) nooit precies aansluiten op de titelband. */
.pagina{padding-block:var(--ritme);margin-top:0}
/* margin-inline:auto: bij Wix staat de platte paginatekst (Lid worden,
   Overleden leden e.d.) gecentreerd op de pagina, niet links uitgelijnd
   tegen de kader-rand. Let op: de .historie/.kolommen/.citaat-uitbraken
   verderop gaan hierdoor NIET meer zomaar op met een simpele -1*--rand
   marge, want .pagina-body zit niet meer vast tegen de linkerrand — zie de
   toelichting bij die regels. */
.pagina-body{max-width:48em;margin-inline:auto}
.pagina-body h2{font-size:clamp(1.6rem,2.9vw,2.2rem);margin:1.9em 0 .5em;text-align:center}
.pagina-body h3{font-size:1.3rem;margin:1.3em 0 .4em}
/* Was --ink-zacht op .97rem/gewicht 300 (van body{font-weight:300}): op Wix is
   lopende pagina-tekst (Lid worden, Overleden leden e.d.) 23,375px/gewicht 400/
   --ink bij 1870px, exact zo gemeten als de tekst in de historie-band hierboven —
   zelfde bug, deze keer in de platte-pagina-tekst i.p.v. de shortcode-tekst. */
.pagina-body p{color:var(--ink);font-size:var(--t-body);font-weight:400}
.pagina-body li{margin-bottom:0}
.pagina-body img{margin-block:1.3em}
.pagina-body blockquote{
  margin:1.5em 0;padding:4px 0 4px 22px;border-left:2px solid var(--oranje);
  /* Bij Len staat het citaat cursief. Italiana heeft maar één snede en geen
     eigen cursief (zie LEESMIJ-LETTERTYPEN.md) — cursief zetten zou de
     browser een schuingetrokken namaakversie laten tekenen, en juist het
     dun-dikverschil verpesten dat Italiana op Ogg doet lijken. Daarom hier
     bewust Georgia, die wel een echte cursieve snede heeft. */
  font-family:Georgia,"Times New Roman",serif;font-style:italic;
  font-size:1.5rem;font-weight:400;line-height:1.35;color:var(--groen);
}
.pagina-body blockquote p{margin-bottom:0;color:inherit;font-size:inherit;font-style:inherit}
.pagina-body blockquote p::before{content:"\201C"}
.pagina-body blockquote p::after{content:"\201D"}

/* ==========================================================================
   13. Voettekst — licht, niet donkergroen
   ========================================================================== */
.voet{background:var(--sage);color:var(--ink);padding-block:clamp(30px,4vw,48px);font-size:var(--t-klein)}
.voet a{color:var(--ink);text-decoration:none}
.voet a:hover{color:var(--oranje-diep);text-decoration:underline}
.voet-rij{
  display:grid;grid-template-columns:auto 1fr auto;
  gap:clamp(20px,4vw,50px);align-items:center;
}
.voet-merk img{width:74px;height:76px;object-fit:contain}
.voet-midden{text-align:center}
.voet-midden strong{display:block;font-weight:700;color:var(--ink);margin-bottom:6px}
.voet-midden address{font-style:normal;line-height:1.6}
.voet-rechts{text-align:right;line-height:1.85}
.voet-rechts a{display:inline-block}

.voet-sociaal{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:12px;padding:0;list-style:none}
.voet-sociaal a{display:flex;align-items:center;justify-content:center;width:26px;height:26px}
.voet-sociaal svg{width:24px;height:24px}
.voet-mail{display:inline-flex;align-items:center;gap:7px}
.voet-mail svg{width:14px;height:14px;flex:0 0 auto;opacity:.7}

.credit{display:block;margin-top:10px}
.credit a{display:inline-flex;align-items:center;flex:0 0 auto}
.credit img{max-width:none;flex:0 0 auto;height:15px;width:auto;opacity:.6}
.credit a:hover img{opacity:.9}

/* ==========================================================================
   14. Responsief — meet altijd op 390 en 320 px
   ========================================================================== */
@media (max-width:1024px){
  .kaarten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .snel-rij{grid-template-columns:1fr;gap:26px}
  .snel-item{display:flex;gap:14px;align-items:flex-start}
  .detail-rij{grid-template-columns:1fr;gap:30px}
  .paginakop-rij{grid-template-columns:1fr;gap:30px}
  .paginakop-portret{justify-self:start}
  .voet-rij{grid-template-columns:1fr;justify-items:center;text-align:center}
  .voet-rechts{text-align:center}
}

@media (max-width:780px){
  .menuknop{display:inline-flex}
  .kop-rij{min-height:78px}
  .merk img{width:58px;height:60px}
  .hoofdmenu{display:none;flex-basis:100%;border-top:1px solid var(--lijn);padding-block:10px 6px;margin-top:4px}
  .hoofdmenu.open{display:block}
  .hoofdmenu ul{flex-direction:column;gap:0;width:100%}
  .hoofdmenu li{width:100%}
  .hoofdmenu>ul>li+li{border-top:1px solid var(--lijn)}
  .hoofdmenu a{display:block;padding:12px 2px;font-size:1rem;width:100%}
  .hoofdmenu .menu-item-has-children>a::after{float:right;margin-top:.45em}
  /* Submenu's op een telefoon gewoon uitklappen: hover bestaat daar niet. */
  .hoofdmenu .sub{display:flex;position:static;border:0;box-shadow:none;min-width:0;padding:0 0 8px 16px}
  .hoofdmenu .sub a{padding:9px 2px;font-size:.94rem}

  .hero-rij,.broeder-rij,.reis-rij{grid-template-columns:1fr !important}
  .hero-rij{padding-left:var(--rand);padding-right:var(--rand);padding-top:8px}
  .paginakop .kader,.reis .kader,.snel .kader,.detail .kader,.video .kader,
  .programma .kader,.kosten .kader{padding-left:var(--rand);padding-right:var(--rand)}
  .reis{margin-top:0}
  .snel-item{padding-right:0}
  .hero-beeld img{height:auto;aspect-ratio:3/2}
  .hero-kop{gap:12px}
  /* Beeld altijd ná de tekst op een telefoon, ook in de omgekeerde rijen. */
  .reis-rij:nth-child(even) .reis-beeld{order:0}
  .kaarten{grid-template-columns:1fr;gap:22px}
  .programma-lijst li{grid-template-columns:1fr;gap:0;padding-block:7px}
  .banner img{aspect-ratio:2.4/1}
}

@media (max-width:400px){
  .hero h1{font-size:2.1rem}
  .hero-merk{width:74px}
  .knop{padding:11px 22px}
  .kaart-body{padding:20px 18px 22px}
}

/* ==========================================================================
   15. Bewegingsvoorkeur en afdrukken
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}
@media print{
  .kop,.voet-sociaal,.menuknop,.knop{display:none !important}
  body{background:#fff;color:#000}
}

/* ANBI-downloadkaarten: icoon + tekst naast elkaar, i.p.v. een kale
   opsommingslijst, zoals bij Wix. */
.anbi-downloads{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,3vw,40px) clamp(24px,4vw,64px);margin:1.5em 0 2em;list-style:none;padding:0}
.anbi-kaart{display:flex;align-items:center;gap:16px;text-decoration:none;color:var(--ink)}
.anbi-icoon{flex:0 0 auto;width:38px;height:38px;color:var(--oranje)}
.anbi-kaart span{font-size:.97rem;line-height:1.45;color:var(--ink)}
.anbi-kaart:hover span{text-decoration:underline}
@media (max-width:600px){.anbi-downloads{grid-template-columns:1fr}}