/*
Theme Name: geloofsinfo
Theme URI: https://www.geloofsinfo.nl/
Author: Studio Stuurman
Author URI: https://studiostuurman.com
Description: Blokthema voor Geloofsinfo, de wegwijzer naar katholieke initiatieven in Nederland. Ivoor en perkament met groenblauw accent, Cormorant Garamond + Mulish.
Version: 0.2.1
Requires at least: 6.6
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: geloofsinfo
*/

:root{
  --ivory:#faf6ee;
  --parchment:#f3ecdd;
  --stone:#e7ddc9;
  --ink:#231d17;
  --ink-soft:#5c5247;
  --bordeaux:#1a6b5a;
  --bordeaux-deep:#0f4339;
  --gold:#2a9d82;
  --gold-soft:#cfae6b;
  --serif:"Cormorant Garamond", Georgia, serif;
  --sans:"Mulish", "Segoe UI", sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  font-size:17.5px;
  line-height:1.65;
  color:var(--ink);
  background:var(--ivory);
  -webkit-font-smoothing:antialiased;
}
body::before{ /* fijne korrel over alles */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}

/* ───────── ornamenten ───────── */
.eyebrow{
  font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.32em;
  text-transform:uppercase;color:var(--bordeaux);
}

/* ───────── topbalk ───────── */
.topbar{
  background:var(--bordeaux-deep);color:#f0e2c8;font-size:13.5px;
  display:flex;justify-content:center;gap:2.5em;padding:8px 24px;
  letter-spacing:.04em;
}
.topbar span b{color:var(--gold-soft);font-weight:700}
.topbar .en{margin-left:1.5em;border-left:1px solid rgba(240,226,200,.3);padding-left:1.5em}
.topbar a{text-decoration:none}
.topbar a:hover{color:#fff}

/* ───────── header ───────── */
.site-kop{
  position:sticky;top:0;z-index:100;
  background:rgba(250,246,238,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--stone);
}
.header-inner{
  max-width:1240px;margin:0 auto;padding:18px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:32px;
  position:relative;
}
.nav-open,.nav-toggle{display:none}
.wordmark{display:flex;align-items:center;gap:16px;text-decoration:none}
.logo-mark{
  width:52px;height:52px;flex:0 0 52px;color:var(--gold);
  border:1.5px solid var(--gold-soft);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 35%, #fffdf6, var(--parchment));
  box-shadow:inset 0 0 0 3px var(--ivory);
}
.logo-mark svg{width:30px;height:34px;display:block}
.wordmark .naam{
  font-family:var(--serif);font-weight:600;font-size:25px;letter-spacing:.06em;
  color:var(--ink);white-space:nowrap;line-height:1.1;
}
.wordmark .naam small{
  display:block;font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:var(--bordeaux);margin-top:2px;
}
nav.hoofdmenu > ul{list-style:none;display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;margin:0;padding:0}
nav.hoofdmenu li{position:relative}
nav.hoofdmenu a{
  display:block;font-size:14px;font-weight:700;letter-spacing:.04em;text-decoration:none;
  padding:9px 13px;border-radius:3px;color:var(--ink-soft);white-space:nowrap;
  transition:color .2s,background .2s;
}
nav.hoofdmenu a:hover{color:var(--bordeaux);background:var(--parchment)}
/* dropdown-submenu's (zoals de oude site) */
nav.hoofdmenu .sub{
  list-style:none;display:none;position:absolute;top:100%;left:0;z-index:60;
  flex-direction:column;min-width:235px;margin:0;padding:6px 0;
  background:#fffdf8;border:1px solid var(--stone);border-top:2px solid var(--gold);
  box-shadow:0 26px 44px -22px rgba(35,29,23,.35);
}
nav.hoofdmenu li:hover > .sub,
nav.hoofdmenu li:focus-within > .sub{display:flex}
nav.hoofdmenu .sub a{padding:10px 18px;border-radius:0;font-weight:600;letter-spacing:.02em}

/* ───────── hero ───────── */
.hero{position:relative;min-height:78vh;display:flex;align-items:center;overflow:hidden}
.hero .bg{position:absolute;inset:0;background:url("assets/img/altaar.jpg") center 35%/cover no-repeat;transform:scale(1.04)}
.hero .scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(100deg, rgba(28,16,12,.82) 0%, rgba(48,22,18,.55) 46%, rgba(48,22,18,.12) 75%),
    linear-gradient(0deg, rgba(28,16,12,.55) 0%, transparent 35%);
}
.hero-inner{position:relative;max-width:1240px;margin:0 auto;padding:96px 32px 150px;width:100%}
.hero .eyebrow{color:var(--gold-soft);display:flex;align-items:center;gap:14px;animation:rise .9s .1s both}
.hero .eyebrow::before{content:"";width:44px;height:1px;background:var(--gold-soft)}
.hero h1{
  font-family:var(--serif);font-weight:500;color:#fdf9f0;
  font-size:clamp(44px,6vw,76px);line-height:1.06;letter-spacing:.01em;
  max-width:13em;margin:22px 0 24px;animation:rise .9s .25s both;
}
.hero h1 em{font-style:italic;color:var(--gold-soft)}
.hero p.sub{
  color:#e9dcc6;font-size:19px;max-width:33em;font-weight:400;
  animation:rise .9s .4s both;
}
.hero .acties{display:flex;gap:16px;margin-top:38px;flex-wrap:wrap;animation:rise .9s .55s both}
.knop{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-size:14.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none;
  padding:16px 30px;border-radius:2px;transition:transform .2s,box-shadow .2s,background .2s;
}
.knop.primair{background:var(--bordeaux);color:#fdf6e9;box-shadow:0 10px 28px -10px rgba(81,16,25,.7)}
.knop.primair:hover{background:#1a6b5a;transform:translateY(-2px)}
.knop.ghost{color:#fdf6e9;border:1px solid rgba(253,246,233,.45)}
.knop.ghost:hover{border-color:var(--gold-soft);color:var(--gold-soft)}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* ───────── mistijden-kaart ───────── */
.tijden-wrap{max-width:1240px;margin:-92px auto 0;padding:0 32px;position:relative;z-index:5}
.tijden{
  background:#fffdf8;border:1px solid var(--stone);border-top:3px solid var(--gold);
  box-shadow:0 30px 60px -30px rgba(35,29,23,.35);
  display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;
}
.tijden > div{padding:30px 34px;border-left:1px solid var(--parchment)}
.tijden > div:first-child{border-left:none;background:var(--parchment)}
.tijden h3{font-family:var(--serif);font-size:27px;font-weight:600;line-height:1.15;color:var(--bordeaux)}
.tijden h3 small{display:block;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.tijden .dag{font-size:12.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.tijden .uur{font-family:var(--serif);font-size:30px;font-weight:600;margin:6px 0 2px}
.tijden .wat{font-size:14.5px;color:var(--ink-soft)}
.tijden a.alles{font-size:14px;font-weight:700;color:var(--bordeaux);display:inline-block;margin-top:14px}

/* ───────── livestream-band ───────── */
.live{background:var(--bordeaux-deep);margin-top:110px;position:relative;overflow:hidden}
.live::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 120% at 85% 10%, rgba(176,138,62,.18), transparent 60%)}
.live-inner{
  max-width:1240px;margin:0 auto;padding:84px 32px;position:relative;z-index:1;
  display:grid;grid-template-columns:1.25fr 1fr;gap:72px;align-items:center;
}
.speler{
  position:relative;aspect-ratio:16/9;background:#000;
  outline:1px solid rgba(207,174,107,.5);outline-offset:10px;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.8);
}
.speler iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.live-badge{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12.5px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold-soft);
}
.live-badge .dot{width:9px;height:9px;border-radius:50%;background:#e8453c;animation:puls 1.6s infinite}
@keyframes puls{0%,100%{box-shadow:0 0 0 0 rgba(232,69,60,.55)}50%{box-shadow:0 0 0 7px rgba(232,69,60,0)}}
.live h2{font-family:var(--serif);font-size:clamp(34px,3.8vw,50px);font-weight:500;line-height:1.1;color:#fdf8ec;margin:18px 0 20px}
.live h2 em{font-style:italic;color:var(--gold-soft)}
.live p{font-size:18px;color:#dcc9a8;max-width:30em}
.live .rooster{
  margin:26px 0 4px;padding:16px 22px;border-left:2px solid var(--gold);
  font-family:var(--serif);font-size:21px;color:#fdf8ec;
}
.live .rooster small{display:block;font-family:var(--sans);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft);font-weight:700;margin-bottom:4px}
.live .acties{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}
.live .knop.primair{background:var(--gold);color:var(--bordeaux-deep);box-shadow:none}
.live .knop.primair:hover{background:var(--gold-soft)}
.live .knop.ghost{color:#f2e6cd;border:1px solid rgba(242,230,205,.4)}

/* ───────── secties algemeen ───────── */
section.blok{max-width:1240px;margin:0 auto;padding:110px 32px 0}
.sectiekop{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:48px}
.sectiekop h2{font-family:var(--serif);font-size:clamp(34px,4vw,48px);font-weight:600;line-height:1.1}
.sectiekop .meer{font-size:14px;font-weight:700;letter-spacing:.06em;color:var(--bordeaux);text-decoration:none;white-space:nowrap}
.sectiekop .meer:hover{color:var(--gold)}

/* ───────── welkom / pastoor ───────── */
.welkom{display:grid;grid-template-columns:480px 1fr;gap:72px;align-items:center}
.welkom .foto{position:relative}
.welkom .foto img{aspect-ratio:4/4.6;object-fit:cover;filter:sepia(.12) saturate(.92)}
.welkom .foto::after{
  content:"";position:absolute;inset:18px -18px -18px 18px;border:1px solid var(--gold-soft);z-index:-1;
}
.welkom .foto figcaption{
  position:absolute;left:-14px;bottom:26px;background:var(--bordeaux);color:#f5e7cd;
  font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;padding:10px 18px;
}
.welkom h2{font-family:var(--serif);font-size:clamp(34px,3.6vw,46px);font-weight:600;line-height:1.12;margin:18px 0 26px}
.welkom .tekst p{font-size:18.5px;color:var(--ink-soft);margin-bottom:1.2em;max-width:34em}
.welkom .tekst p.groot{
  font-family:var(--serif);font-size:25px;line-height:1.45;color:var(--ink);font-style:italic;
}
.welkom .tekst p.groot::first-letter{
  font-size:64px;float:left;line-height:.85;padding:6px 12px 0 0;color:var(--bordeaux);font-style:normal;font-weight:600;
}
.ondertekening .naam{font-family:var(--serif);font-size:21px;font-weight:600}
.ondertekening .functie{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:700}

/* ───────── pijlers ───────── */
.pijlers{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--stone);border:1px solid var(--stone);margin-top:8px}
.pijler{background:var(--ivory);padding:42px 34px 46px;position:relative;transition:background .25s;text-decoration:none;display:block}
.pijler:hover{background:#fffdf8}
.pijler .num{font-family:var(--serif);font-size:15px;font-style:italic;color:var(--gold)}
.pijler h3{font-family:var(--serif);font-size:28px;font-weight:600;margin:14px 0 12px;color:var(--ink)}
.pijler p{font-size:15.5px;color:var(--ink-soft)}
.pijler .pijl{position:absolute;right:30px;bottom:26px;color:var(--bordeaux);font-size:20px;transition:transform .25s}
.pijler:hover .pijl{transform:translateX(6px)}
.pijler::after{content:"";position:absolute;left:34px;right:34px;bottom:0;height:3px;background:var(--bordeaux);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.pijler:hover::after{transform:scaleX(1)}

/* ───────── nieuws (Query Loop) ───────── */
.blok-nieuws{max-width:1240px;margin:0 auto;padding:0 32px}
.nieuws-grid{list-style:none;padding:0;display:grid;grid-template-columns:1.5fr 1fr;gap:36px}
.nieuws-grid .wp-block-post{
  position:relative;overflow:hidden;background:#fffdf8;border:1px solid var(--stone);
}
.nieuws-grid .wp-block-post:first-child{grid-row:span 2}
.nieuws-grid .wp-block-post-featured-image{margin:0}
.nieuws-grid .wp-block-post-featured-image img{
  width:100%;height:230px;object-fit:cover;filter:saturate(.95);transition:transform .5s;
}
.nieuws-grid .wp-block-post:first-child .wp-block-post-featured-image img{height:430px}
.nieuws-grid .wp-block-post:hover .wp-block-post-featured-image img{transform:scale(1.035)}
.nieuws-grid .kaart-body{padding:26px 30px 30px}
.nieuws-grid .wp-block-post:not(:has(img))::before{ /* kaart zonder foto: fleur-ornament */
  content:"\2720";display:block;font-family:var(--serif);font-size:40px;line-height:1;
  color:var(--gold-soft);padding:32px 30px 0;
}
.nieuws-grid .wp-block-post-date{
  font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
}
.nieuws-grid .wp-block-post-title{
  font-family:var(--serif);font-size:27px;font-weight:600;line-height:1.18;margin:10px 0 10px;
}
.nieuws-grid .wp-block-post:first-child .wp-block-post-title{font-size:34px}
.nieuws-grid .wp-block-post-title a{text-decoration:none;color:var(--ink);transition:color .2s}
.nieuws-grid .wp-block-post-title a:hover{color:var(--bordeaux)}
.nieuws-grid .wp-block-post-excerpt{font-size:15.5px;color:var(--ink-soft)}
.nieuws-grid .wp-block-post-excerpt__more-text{display:none}

/* ───────── aanbidding-band ───────── */
.kapel{margin-top:120px;background:var(--bordeaux-deep);color:#f2e6cd;position:relative;overflow:hidden}
.kapel::before{
  content:"\2720";position:absolute;right:-40px;top:50%;transform:translateY(-50%);
  font-family:var(--serif);font-size:480px;line-height:1;color:rgba(240,226,200,.05);
}
.kapel-inner{max-width:1240px;margin:0 auto;padding:96px 32px;display:grid;grid-template-columns:1.3fr 1fr;gap:80px;align-items:center}
.kapel .eyebrow{color:var(--gold-soft)}
.kapel h2{font-family:var(--serif);font-size:clamp(34px,4vw,52px);font-weight:500;line-height:1.12;margin:20px 0 22px;color:#fdf8ec}
.kapel h2 em{color:var(--gold-soft);font-style:italic}
.kapel p{font-size:18px;color:#dcc9a8;max-width:32em}
.kapel .knop.primair{background:var(--gold);color:var(--bordeaux-deep);box-shadow:none;margin-top:34px}
.kapel .knop.primair:hover{background:var(--gold-soft)}
.kapel .tijdenlijst{border-left:1px solid rgba(207,174,107,.35);padding-left:44px;display:flex;flex-direction:column;gap:22px}
.kapel .tijdenlijst .rij b{display:block;font-family:var(--serif);font-size:24px;font-weight:600;color:#fdf8ec}
.kapel .tijdenlijst .rij span{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);font-weight:700}

/* ───────── footer ───────── */
.site-voet{background:#1d1712;color:#cbb999}
.foot-inner{max-width:1240px;margin:0 auto;padding:84px 32px 40px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:56px}
/* De drie kolomkoppen in de voettekst stonden als h4, terwijl de laatste
   kop in de tekst erboven een h2 is. Dat sloeg een niveau over, wat een
   schermlezer als een gat in de structuur meldt (WCAG 1.3.1). Ze zijn nu
   h2; de weergave blijft exact gelijk. */
.site-voet h2{font-family:var(--serif);font-size:23px;font-weight:600;color:#f3e9d4;margin-bottom:18px}
.wordmark-foot{font-family:var(--serif);font-size:27px;color:#f3e9d4;letter-spacing:.05em;display:flex;gap:14px;align-items:center}
.wordmark-foot svg{width:24px;height:28px;color:var(--gold-soft);flex:0 0 24px}
.site-voet p,.site-voet a{font-size:15px;color:#b3a182;text-decoration:none;line-height:1.9}
.site-voet a:hover{color:var(--gold-soft)}
.site-voet ul{list-style:none}
.foot-onder{border-top:1px solid rgba(203,185,153,.18);margin-top:60px}
.foot-onder div{max-width:1240px;margin:0 auto;padding:22px 32px;display:flex;justify-content:space-between;font-size:13px;color:#8c7c61}
.socials{display:flex;gap:14px;margin-top:20px}
.socials a{
  width:42px;height:42px;border:1px solid rgba(203,185,153,.35);border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:border-color .2s,color .2s;
  font-size:16px;
}
.socials a:hover{border-color:var(--gold-soft);color:var(--gold-soft)}

/* ───────── artikel / pagina ───────── */
.artikel-kop{max-width:1240px;margin:0 auto;padding:80px 32px 0}
.artikel-kop .terug{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--bordeaux);text-decoration:none}
.artikel-kop .wp-block-post-date{font-size:12.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-top:26px}
.artikel-kop .wp-block-post-title{
  font-family:var(--serif);font-weight:600;font-size:clamp(38px,4.6vw,58px);line-height:1.08;
  max-width:18em;margin:14px 0 0;
}
.artikel-body{padding:48px 32px 110px}
.artikel-body > *{max-width:760px;margin-left:auto;margin-right:auto}
.artikel-body p{margin-bottom:1.25em;font-size:18px;color:#3b332b}
.artikel-body h2,.artikel-body h3{font-family:var(--serif);font-weight:600;line-height:1.15;margin:1.6em auto .6em}
.artikel-body h2{font-size:34px}
.artikel-body h3{font-size:27px}
.artikel-body a{color:var(--bordeaux);text-decoration-color:var(--gold-soft);text-underline-offset:3px}
.artikel-body img{margin:2em auto}
.artikel-body ul,.artikel-body ol{padding-left:1.3em;margin-bottom:1.25em}
.artikel-body li{margin-bottom:.35em}
.artikel-body li::marker{color:var(--gold)}
.artikel-body > p:first-of-type{font-size:19.5px}
.artikel-body hr{border:none;height:1px;background:linear-gradient(90deg,var(--gold-soft),transparent);margin:2.6em 0}
.artikel-body h2::after{content:"";display:block;width:44px;height:2px;background:var(--gold-soft);margin-top:10px}
.artikel-body a[href$=".pdf" i]::after,
.artikel-body a[href$=".PDF"]::after{content:" (pdf)";font-size:.75em;color:var(--gold);letter-spacing:.08em;font-weight:700}
.artikel-body figcaption{font-size:14px;color:var(--ink-soft);text-align:center;margin-top:.6em;font-style:italic}
.artikel-body blockquote{
  border-left:2px solid var(--gold);padding:6px 0 6px 26px;margin:2em auto;
  font-family:var(--serif);font-size:23px;font-style:italic;color:var(--ink);
}
.artikel-body .wp-block-post-featured-image{max-width:1000px;margin:0 auto 3em}
.artikel-body .video-embed{
  position:relative;aspect-ratio:16/9;margin:2em auto;background:#000;
  outline:1px solid var(--stone);outline-offset:8px;
}
.artikel-body .video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.artikel-body .agenda-embed{position:relative;height:640px;margin:2em auto;background:#fffdf8;outline:1px solid var(--stone);outline-offset:8px}
.artikel-body .agenda-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.artikel-body table{border-collapse:collapse;margin:1.5em auto;max-width:100%}
.artikel-body td,.artikel-body th{border:1px solid var(--stone);padding:9px 14px;vertical-align:top}
.artikel-body th{
  background:var(--parchment);font-family:var(--sans);font-size:13px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--bordeaux);
}
.artikel-body tr:nth-child(even) td{background:#fbf7ee}
/* layout-/galerijtabellen zonder koprij krijgen géén datatabel-opmaak */
.artikel-body table:not(:has(th)){border:none}
.artikel-body table:not(:has(th)) td{border:none;background:none!important;padding:6px 10px}
.artikel-body td:empty{border:none;padding:0}
.artikel-body span[style*="underline"]{text-decoration:none}
.artikel-body h3::after{content:"";display:block;width:28px;height:2px;background:var(--gold-soft);margin-top:8px;opacity:.7}
.artikel-body img{border-radius:2px}
.agenda-embed iframe.cal-m{display:none}

/* ───────── archief ───────── */
.archief-kop{max-width:1240px;margin:0 auto;padding:80px 32px 56px}
.archief-kop h1{font-family:var(--serif);font-size:clamp(38px,4.6vw,56px);font-weight:600;line-height:1.1;margin-top:14px}
.archief-lijst{max-width:1240px;margin:0 auto;padding:0 32px 110px}
.paginering{max-width:1240px;margin:0 auto;padding:40px 32px 110px;font-size:14px;font-weight:700;letter-spacing:.05em}
.paginering a{
  display:inline-block;color:var(--bordeaux);text-decoration:none;margin-right:14px;
  border:1px solid var(--gold-soft);border-radius:2px;padding:11px 22px;
  transition:background .2s,color .2s;
}
.paginering a:hover{background:var(--bordeaux);color:#fdf6e9;border-color:var(--bordeaux)}
/* catechese: lange linklijsten in twee kolommen op desktop */
@media (min-width:900px){
  .page-id-12 .artikel-body ul{columns:2;column-gap:44px}
  .page-id-12 .artikel-body li{break-inside:avoid}
}

/* ───────── responsief ───────── */
@media (max-width:1100px){
  .tijden{grid-template-columns:1fr 1fr}
  .welkom{grid-template-columns:1fr;gap:48px}
  .pijlers{grid-template-columns:1fr 1fr}
  .nieuws-grid{grid-template-columns:1fr}
  .nieuws-grid .wp-block-post:first-child .wp-block-post-featured-image img{height:320px}
  .kapel-inner{grid-template-columns:1fr;gap:48px}
  .live-inner{grid-template-columns:1fr;gap:48px}
  .foot-inner{grid-template-columns:1fr 1fr;gap:40px}
  /* mobiel menu: hamburger + uitklappaneel (CSS-only) */
  .nav-toggle{
    display:flex;flex-direction:column;gap:5px;cursor:pointer;
    padding:12px;margin:-12px 0 -12px -12px;
  }
  .nav-toggle span{width:26px;height:2px;background:var(--bordeaux);transition:transform .2s,opacity .2s}
  .nav-open:checked ~ .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-open:checked ~ .nav-toggle span:nth-child(2){opacity:0}
  .nav-open:checked ~ .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  nav.hoofdmenu{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--ivory);border-bottom:1px solid var(--stone);
    padding:8px 24px 16px;max-height:calc(100vh - 140px);overflow-y:auto;
    box-shadow:0 28px 44px -26px rgba(35,29,23,.35);
  }
  .nav-open:checked ~ nav.hoofdmenu{display:block}
  nav.hoofdmenu > ul{flex-direction:column;gap:0}
  nav.hoofdmenu a{padding:13px 8px;font-size:16px;border-bottom:1px solid var(--parchment);border-radius:0}
  /* submenu's op mobiel: altijd zichtbaar, ingesprongen */
  nav.hoofdmenu .sub{
    display:flex;position:static;min-width:0;margin:0;padding:0 0 4px 20px;
    background:transparent;border:none;box-shadow:none;
  }
  nav.hoofdmenu .sub a{font-size:15px;font-weight:600;color:var(--ink-soft);padding:10px 8px}
}
@media (max-width:640px){
  .tijden{grid-template-columns:1fr}
  .tijden > div{border-left:none;border-top:1px solid var(--parchment)}
  .pijlers{grid-template-columns:1fr}
  .topbar{flex-wrap:wrap;gap:.6em 1.5em}
  .foot-inner{grid-template-columns:1fr}
  .artikel-body table{display:block;overflow-x:auto;max-width:100%;font-size:13.5px}
  /* compacte header: voorkomt dat het woordmerk de pagina breder duwt dan de viewport */
  .header-inner{padding:14px 20px;gap:12px}
  .wordmark .naam{font-size:19px;letter-spacing:.04em}
  .wordmark .naam small{font-size:9.5px;letter-spacing:.22em}
  .logo-mark{width:44px;height:44px;flex:0 0 44px}
  .logo-mark svg{width:25px;height:29px}
  /* alleen gefloate legacy-plaatjes loslaten (inline plaatjes met rust laten) */
  .artikel-body img[style*="float"],.artikel-body img[align]{float:none!important;display:block;margin:1.2em auto}
  /* lange koppen: alleen écht lange woorden afbreken (Lodewijk niet, KINDERWOORDDIENST wel) */
  .artikel-kop .wp-block-post-title{font-size:clamp(26px,8vw,36px);letter-spacing:0;overflow-wrap:break-word;hyphens:auto;hyphenate-limit-chars:14 7 7}
  .artikel-body h2,.artikel-body h3{overflow-wrap:break-word;hyphens:auto;hyphenate-limit-chars:14 7 7}
  /* uitgevulde Joomla-tekst geeft witgaten op smalle schermen */
  .artikel-body [style*="justify"]{text-align:left!important}
  /* layout-/galerijtabellen (geen koprij) stapelen op mobiel; datatabellen scrollen compact */
  .artikel-body table:not(:has(th)),
  .artikel-body table:not(:has(th)) tbody,
  .artikel-body table:not(:has(th)) tr,
  .artikel-body table:not(:has(th)) td{display:block;width:100%!important;overflow:visible}
  .artikel-body table:not(:has(th)) td{padding:4px 0}
  .artikel-body td,.artikel-body th{padding:7px 9px}
  .agenda-embed iframe.cal-d{display:none}
  .agenda-embed iframe.cal-m{display:block}
}

/* SoundCloud-spelers (na migratie van Joomla {soundcloud}-tags) */
.artikel-body .audio-embed{margin:1.6em auto;max-width:100%}
.artikel-body .audio-embed iframe{width:100%;height:166px;border:0;border-radius:3px}

/* SoundCloud-luisterlink (track niet meer embedbaar) */
.artikel-body .audio-link{margin:1em 0}
.artikel-body .audio-link a{
  display:inline-block;font-weight:700;text-decoration:none;color:var(--bordeaux);
  border:1px solid var(--gold-soft);border-radius:3px;padding:11px 18px;transition:.2s;
}
.artikel-body .audio-link a:hover{background:var(--bordeaux);color:#fff;border-color:var(--bordeaux)}

/* Geloofsinfo: teal/groene hero */
.hero-gi{min-height:58vh}
.hero-gi .bg{background:radial-gradient(70% 90% at 80% 12%,rgba(42,157,130,.32),transparent 60%),linear-gradient(120deg,#0f4339 0%,#1a6b5a 60%,#2a9d82 100%);background-color:#0f4339}
.hero-gi .scrim{background:linear-gradient(100deg,rgba(8,32,27,.72) 0%,rgba(8,32,27,.38) 48%,rgba(8,32,27,.08) 78%),linear-gradient(0deg,rgba(6,26,22,.50),transparent 40%)}
/* Het accentwoord in de hero-kop ("initiatieven") is op 10-09-2026 vervallen,
   op verzoek van Harry: geen schuinstand en geen aparte kleur. De <em> wordt
   niet meer weggeschreven en het veld is uit de instellingenpagina gehaald,
   dus hier hoeft niets meer geneutraliseerd te worden. Het accentwoord in het
   groene blok eronder ("kaart") bestaat nog wel, zie .kapel h2 em. */

.credit{display:flex;align-items:center;gap:8px;white-space:nowrap;line-height:1}
.ss-logo{height:16px;width:auto;display:block;opacity:.75}
.ss-logo:hover{opacity:1}


/* --- Foto's in de artikeltekst -------------------------------------------
   De oude site zette foto's naast elkaar met een <table>. Dat past zich niet
   aan een telefoon aan en een tabel hoort inhoud te zijn, geen opmaak. De
   inhoud gebruikt nu twee patronen:

   .gi-fotorij  een rij foto's zonder onderschrift
   .gi-kaarten  foto met een onderschrift eronder, bijvoorbeeld een kerk met
                het adres van de website

   Beide vouwen vanzelf naar één kolom als het scherm smal is. De vaste
   width/height op de img blijft staan als verhoudingsaanduiding, maar de CSS
   hieronder wint, zodat een foto nooit breder wordt dan zijn kolom. */
.gi-fotorij{display:flex;flex-wrap:wrap;gap:16px;margin:28px 0;align-items:flex-start}
.gi-fotorij img{max-width:100%;height:auto;border-radius:6px;display:block}

.gi-kaarten{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:24px;margin:28px 0;
}
.gi-kaart img{width:100%;aspect-ratio:3/2;object-fit:cover;height:auto;border-radius:6px;display:block}
.gi-kaart p{margin:10px 0 0;font-size:15px;line-height:1.5}

/* Losse foto's in de tekst mogen ook nooit uit hun kolom lopen. */
.wp-block-post-content img{max-width:100%;height:auto}

/* --- Zwevende foto's in de tekst — rechtgetrokken 10-09-2026 --------------
   Uit de Joomla-editor kwam elke foto met een eigen pixelmaat en een eigen
   marge de tekst in zweven: zeventien foto's op twaalf pagina's, breedtes
   tussen 136 en 292 pixels, marges van 0, 3 of 5 pixels, allemaal in het
   style- en width-attribuut van de <img> zelf. Met CSS was dat niet recht te
   trekken, want een attribuut in de HTML bepaalt de intrinsieke maat en een
   max-width kan een te kleine foto niet laten groeien.

   Die attributen zijn daarom uit de paginatekst gehaald en vervangen door een
   klasse; de maat staat nu hier, op één plek. Een staande foto krijgt een
   smallere kolom dan een liggende, anders wordt een boekomslag op 290px een
   toren van bijna 400px hoog. De verhouding blijft intact, er wordt niets
   bijgesneden.

   De bronbestanden zijn ruim groot genoeg: Rosmalen 3 is 700x700 en stond op
   136px, Kaarsje 01 is 800x521 en stond op 182px.

   Terugdraaien: dit blok weg en de paginateksten terugzetten uit
   /opt/hs_backups/gi_paginateksten_voor_zwevers_20260910/ */
.artikel-body img.gi-zwever{
  float:right;height:auto;border-radius:3px;
  width:min(38%,290px);
  margin:.25em 0 1.3em 2rem;
  /* clear:right is hier het belangrijkste. Twee zwevers achter elkaar gaan
     anders NAAST elkaar staan, want samen passen ze op één regel. Op Heiloo
     was dat 289 + 205 pixels van een kolom van 741, waardoor achttien regels
     tekst door een strook van 198 pixels moesten. Dat geeft geen zijwaarts
     scrollen en valt dus buiten een gewone audit, maar het is onleesbaar.
     Met clear:right begint elke volgende foto netjes onder de vorige. */
  clear:right;
}
.artikel-body img.gi-zwever--staand{width:min(27%,205px)}

@media (max-width:760px){
  /* Naast een tekstkolom van nog geen 400px is een zwever van 38% onleesbaar
     smal aan beide kanten. Dan liever onder elkaar, gecentreerd. */
  .artikel-body img.gi-zwever,
  .artikel-body img.gi-zwever--staand{
    float:none;width:100%;max-width:420px;margin:1.5em auto;display:block
  }
  .artikel-body img.gi-zwever--staand{max-width:300px}
}

/* --- Studio Stuurman-logo in de voettekst --------------------------------
   Het logo werd nergens getoond: 0 pixels breed, terwijl het bestand prima
   laadt. Oorzaak is een kringetje in de opmaak. `.credit` is een flexrij, de
   <a> eromheen is dus een flexitem zonder eigen breedte. De <img> daarbinnen
   heeft `width:auto` plus de algemene regel `img{max-width:100%}`. Die 100%
   wordt gerekend over de breedte van de <a>, en die hangt weer af van de
   <img>. Twee onbekenden, dus de browser kiest nul.

   Doorbreken doe je door de <img> van die 100%-grens af te halen en het
   flexitem niet te laten krimpen. Hoogte blijft 16px, de breedte volgt uit
   de verhouding van de SVG (7929 bij 916). */
.credit a{flex:0 0 auto;display:inline-flex;align-items:center;line-height:0}
.ss-logo{max-width:none;flex:0 0 auto}


/* ══════════════════════════════════════════════════════════════════════════
   MOBIELE WEERGAVE — gemeten en aangepast 20-08-2026
   Zelfde ronde als rk-alphacentrum en lodewijkparochie, maar deze site is nog
   niet live: dit is vooraf opgeruimd, niet achteraf gerepareerd. Meting over
   alle gepubliceerde pagina's, op 390px en op 320px. Cijfers in
   sites/MOBIEL-AUDIT-2026-08-20.md in de projectmap. Terugdraaien: dit blok
   weg. Kopie van voor de wijziging in /opt/hs_backups/staging_mobiel_20260820/
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width:700px){
  /* De onderste balk van de voettekst is een flexrij zonder wrap, met
     white-space:nowrap op de credit. GEMETEN OP DEZE SITE: de credit stak op 320px 17px buiten het scherm, op alle 17 paginas
     Het sierteken is hier het laatste element, dus gestapeld leest het als een
     afsluiting; daarom blijft het staan (op lodewijk stond het ertussenin en
     is het daar wel verborgen). */
  .foot-onder div{flex-direction:column;align-items:center;gap:8px;padding:20px;text-align:center}
  .credit{white-space:normal;justify-content:center;flex-wrap:wrap}
}

/* Vangnet voor tekst zonder afbreekpunt uit de oude site: lange webadressen,
   reeksen harde spaties, of een streepjeslijn als scheiding. */
.artikel-body{overflow-wrap:break-word}
.artikel-body a{overflow-wrap:anywhere}

/* Losse video-embeds met een vaste breedte in een <p>, buiten de
   .video-embed-wikkel die wél meeschaalt. Op de andere sites van deze familie
   was dit goed voor pagina's tot 672px breed op een telefoon. Bewust
   p > iframe, want .video-embed en .agenda-embed hebben eigen regels met
   dezelfde specificiteit. */
.artikel-body p > iframe[src*="youtube"],
.artikel-body p > iframe[src*="youtu.be"],
.artikel-body p > iframe[src*="vimeo"]{
  width:100%;max-width:100%;height:auto;aspect-ratio:16/9;
  display:block;margin:1.5em auto;border:0
}