/*
Theme Name: HoevindjeGod
Theme URI: https://www.lodewijkparochie.nl/
Author: Studio Stuurman
Author URI: https://studiostuurman.com
Description: Custom block theme voor Hoe vind je God? — fris hemelsblauw, Cormorant Garamond + Mulish.
Version: 0.1.40
Requires at least: 6.6
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: hoevindjegod
*/

:root{
  --ivory:#f3f9fd;
  --parchment:#e3f0f9;
  --stone:#cfe2f1;
  --ink:#1b2a36;
  --ink-soft:#4c5e6b;
  --bordeaux:#1f7fc4;
  --bordeaux-deep:#155a8f;
  --gold:#e8915a;
  --gold-soft:#f0b88f;
  --green-tint:#e3f5c4;   /* KAC geel-groen, gelijk aan rk-alphacentrum */
  --green-band:#e6ef6b;   /* volle bandkleur, gelijk aan .catalogus op rk-alphacentrum.
                             Daar staat hij hardgecodeerd op regel 532; wijzigt die,
                             dan hier mee. Dit is de kleur die Helen 'limoengroen' noemt. */
  --green:#DBDE2F;
  --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);
}



/* ============ HERO 2b — homepage ============ */
.hero2b{display:grid;grid-template-columns:47% 53%;min-height:668px}
.hero2b-content{
  background:linear-gradient(180deg,#9CCBE9 0%,#D5EBF8 70%,#E9F5FC 100%);
  padding:56px 52px 44px;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box;
}
.hero2b .eyebrow{display:flex;align-items:center;gap:12px;color:#3D6B94;font-size:12px;letter-spacing:2.4px}
.hero2b .eyebrow::before{content:"";width:40px;height:1px;background:#3D6B94;flex:none}
.hero2b h1{font-family:var(--serif);font-weight:600;font-size:64px;line-height:1.06;color:#1F3B5B;margin:16px 0 0}
.hero2b h1 em{font-style:italic;font-weight:500;color:#4A88B8}
.hero2b-intro{font-family:"Nunito Sans","Segoe UI",sans-serif;font-size:17px;line-height:1.6;color:#3A5570;margin:16px 0 0}

.hero2b-cards{display:flex;flex-direction:column;gap:16px;margin-top:30px}
.h2b-card{
  display:flex;align-items:center;gap:16px;background:rgba(255,255,255,.9);border-radius:14px;
  padding:16px 20px;box-shadow:0 10px 28px rgba(31,59,91,.14);text-decoration:none;
  transition:box-shadow .15s ease;
}
.h2b-card:hover{box-shadow:0 12px 32px rgba(31,59,91,.22)}
.h2b-thumb{width:76px;height:76px;border-radius:11px;object-fit:cover;object-position:center;flex:none;display:block;background-size:cover;background-position:center}
.h2b-thumb--face{background-size:260% auto;background-position:center 22%}
.h2b-card-body{flex:1;min-width:0}
.h2b-kicker{font-family:"Nunito Sans","Segoe UI",sans-serif;font-size:10px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;color:#C98F3D}
.h2b-title{font-family:var(--serif);font-weight:700;font-size:23px;color:#1F3B5B;margin-top:2px}
.h2b-cta{
  background:#2E7FBF;color:#fff;font-family:"Nunito Sans","Segoe UI",sans-serif;font-size:11.5px;font-weight:800;
  letter-spacing:1.4px;padding:13px 20px;border-radius:4px;flex:none;transition:background .15s ease;
  text-transform:uppercase;white-space:nowrap;
}
.h2b-card:hover .h2b-cta{background:#256CA5}

.hero2b-trust{
  display:flex;gap:20px;font-family:"Nunito Sans","Segoe UI",sans-serif;font-size:13px;font-weight:600;color:#3D6B94;
  margin-top:26px;
}
.hero2b-trust .sep{color:#8FB4D2}

.hero2b-photo{position:relative;min-height:280px}
.hero2b-photo-ph{
  position:absolute;inset:0;background:#D8DFE6;color:#5B7185;display:flex;align-items:center;justify-content:center;
  text-align:center;font-family:"Nunito Sans",sans-serif;font-size:13px;font-weight:600;line-height:1.5;
  border:1.5px dashed #A9BACA;box-sizing:border-box;padding:20px;
}
.hero2b-quote{
  position:absolute;left:36px;right:36px;bottom:32px;background:rgba(22,41,63,.82);
  backdrop-filter:blur(6px);border-radius:12px;padding:22px 26px;
}
.hero2b-quote p{font-family:var(--serif);font-style:italic;font-weight:500;font-size:24px;line-height:1.35;color:#FDF9F0;margin:0}
.hero2b-quote span{display:block;font-family:"Nunito Sans",sans-serif;font-size:12px;font-weight:700;letter-spacing:1.6px;color:#B8D9F0;margin-top:10px;text-transform:uppercase}

.d-mobile{display:none}

@media(max-width:1000px){
  .hero2b{grid-template-columns:1fr;min-height:auto}
  .hero2b-content{padding:32px 22px 30px}
  .hero2b h1{font-size:clamp(36px,9vw,44px);line-height:1.08}
  .hero2b-intro{font-size:15px;line-height:1.55;margin:12px 0 20px}
  .hero2b-cards{gap:12px;margin-top:0}
  .h2b-card{border-radius:12px;padding:12px 14px;gap:12px}
  .h2b-thumb{width:54px;height:54px;border-radius:9px}
  .h2b-kicker{font-size:9px;letter-spacing:1.6px}
  .h2b-title{font-size:18px}
  .h2b-cta{background:none;color:#2E7FBF;font-size:16px;font-weight:800;padding:0;letter-spacing:0;text-transform:none;box-shadow:none}
  .h2b-cta-label{display:none}
  .hero2b-trust{margin-top:18px;font-size:12px;gap:12px;justify-content:center}
  .hero2b-photo{min-height:230px}
  .hero2b-quote{left:16px;right:16px;bottom:14px;border-radius:10px;padding:12px 16px}
  .hero2b-quote p{font-size:16px}
  .hero2b-quote span{display:none}
  .d-desktop{display:none}
  .d-mobile{display:inline}
}

/* ───────── 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:#fbfdff;border:1px solid var(--stone);border-top:2px solid var(--gold);
  box-shadow:0 26px 44px -22px rgba(16,36,54,.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(10,30,48,.82) 0%, rgba(12,42,66,.55) 46%, rgba(12,42,66,.12) 75%),
    linear-gradient(0deg, rgba(10,30,48,.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:#f8fcff;
  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:#d2e6f4;font-size:19px;max-width:33em;font-weight:400;
  animation:rise .9s .4s both;
}
.hero-vragen{margin:26px 0 10px;display:flex;flex-direction:column;gap:10px;animation:rise .9s .48s both}
.hero-vragen .vraag{display:flex;align-items:center;gap:22px;text-decoration:none;padding:8px 10px;margin:-8px -10px;border-radius:16px;transition:background-color .25s}
.hero-vragen .vraag:hover{background-color:rgba(255,255,255,.14)}
.hero-vragen p{font-family:var(--serif);font-style:italic;font-size:23px;margin:0;color:#d2e6f4;transition:color .25s}
.hero-vragen .vraag:hover p{color:#f8fcff}
.hero-vragen .vraag-nr{font-style:normal;font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--gold-soft);margin-right:12px}
.vraag-foto{display:block;width:108px;height:108px;border-radius:50%;object-fit:cover;object-position:center;flex:none;border:3px solid rgba(255,255,255,.55);box-shadow:0 6px 18px -8px rgba(0,0,0,.4);background-size:cover;background-position:center;transition:transform .25s,border-color .25s,box-shadow .25s}
.vraag-foto--face{background-size:260% auto;background-position:center 22%}
.hero-vragen .vraag:hover .vraag-foto{transform:scale(1.08);box-shadow:0 12px 30px -10px rgba(0,0,0,.55)}
.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:#f6fbff;box-shadow:0 10px 28px -10px rgba(12,70,120,.7)}
.knop.primair:hover{background:#2391d6;transform:translateY(-2px)}
.knop.ghost{color:#f6fbff;border:1px solid rgba(245,250,253,.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:#fbfdff;border:1px solid var(--stone);border-top:3px solid var(--gold);
  box-shadow:0 30px 60px -30px rgba(16,36,54,.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(31,127,196,.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(232,145,90,.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:#f6fbff;margin:18px 0 20px}
.live h2 em{font-style:italic;color:var(--gold-soft)}
.live p{font-size:18px;color:#bcd9ee;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:#f6fbff;
}
.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:#dcecf8;border:1px solid rgba(220,236,247,.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:#dcecf8;
  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:#fbfdff}
.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:#fbfdff;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:#dcecf8;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(207,228,242,.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:#f6fbff}
.kapel h2 em{color:var(--gold-soft);font-style:italic}
.kapel p{font-size:18px;color:#bcd9ee;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(232,145,90,.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:#f6fbff}
.kapel .tijdenlijst .rij span{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);font-weight:700}

/* ───────── footer ───────── */
.site-voet{background:#13212e;color:#9fc1da}
.foot-inner{max-width:1240px;margin:0 auto;padding:84px 32px 40px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:56px}
.site-voet h4{font-family:var(--serif);font-size:23px;font-weight:600;color:#e2eef8;margin-bottom:18px}
.wordmark-foot{font-family:var(--serif);font-size:27px;color:#e2eef8;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:#8aacc4;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(159,193,218,.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:#6f93ad}
.socials{display:flex;gap:14px;margin-top:20px}
.socials a{
  width:42px;height:42px;border:1px solid rgba(159,193,218,.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:#fbfdff;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:#f2f8fc}
/* 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:#f6fbff;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(16,36,54,.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}
  .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)}

/* ═══════════ HoevindjeGod — sky-hero + routes ═══════════ */
.hero-sky{min-height:72vh;background:linear-gradient(180deg,#7fc4f0 0%,#a9d6f2 45%,#dcefff 100%)}
.hero-sky .wolken{position:absolute;inset:0;opacity:.5;
  background:
    radial-gradient(60% 40% at 18% 78%, #fff 0%, transparent 60%),
    radial-gradient(48% 36% at 82% 70%, #fff 0%, transparent 62%),
    radial-gradient(40% 30% at 50% 92%, #fff 0%, transparent 60%);}
.hero-sky .straal{position:absolute;inset:0;
  background:radial-gradient(50% 60% at 78% 8%, rgba(255,255,255,.85), transparent 55%);mix-blend-mode:screen}
.hero-sky .hero-inner{position:relative;padding:84px 32px 96px}
.hero-sky .eyebrow{color:#155a8f}
.hero-sky .eyebrow::before{background:#155a8f}
.hero-sky h1{color:#10324a;text-shadow:0 1px 0 rgba(255,255,255,.4)}
.hero-sky h1 em{color:#1f7fc4;font-style:italic}
.hero-sky p.sub{color:#274a60}
.hero-sky .hero-vragen p{color:#274a60}
.hero-sky .hero-vragen .vraag-nr{color:#155a8f}
.hero-sky .vraag-foto{border-color:rgba(21,90,143,.35)}
.hero-sky .hero-vragen .vraag:hover{background-color:rgba(21,90,143,.08)}
.hero-sky .hero-vragen .vraag:hover p{color:#10324a}
.hero-sky .hero-vragen .vraag:hover .vraag-foto{border-color:#1f7fc4}
.hero-sky .knop.ghost{color:#10324a;border-color:rgba(16,50,74,.45)}
.hero-sky .knop.ghost:hover{border-color:#1f7fc4;color:#1f7fc4}

/* twee route-kaarten */
.routes{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.route{display:block;text-decoration:none;background:#fbfdff;border:1px solid var(--stone);
  border-top:3px solid var(--gold);border-radius:4px;scroll-margin-top:100px;
  transition:transform .25s,box-shadow .25s,border-color .25s;position:relative;overflow:hidden}
.route:hover{transform:translateY(-3px);box-shadow:0 26px 48px -28px rgba(16,36,54,.4);border-color:var(--gold-soft)}
.route-img{display:block;width:100%;height:190px;object-fit:cover;object-position:center;transition:transform .5s}
.route-img--face{object-position:center 28%}
.route:hover .route-img{transform:scale(1.04)}
.route-body{padding:28px 36px 34px}
.route-tag{font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.route h3{font-family:var(--serif);font-size:32px;font-weight:600;color:var(--bordeaux);margin:8px 0 12px}
.route p{font-size:16.5px;color:var(--ink-soft);margin-bottom:18px}
.route-cta{font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:.06em;color:var(--bordeaux)}

/* footer-woordmerk tekst i.p.v. svg */
.wordmark-foot span{color:var(--gold-soft)}
.foot-merk{display:flex;align-items:center}
.foot-merk img{height:26px;width:26px;opacity:.9}

@media(max-width:760px){.routes{grid-template-columns:1fr}.route-img{height:170px}.hero-vragen .vraag{gap:14px}.vraag-foto{width:40px;height:40px;border-width:2px}.vraag-foto--face{background-size:260% auto}.hero-vragen p{font-size:20px}}

.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}

/* KAC-logo in de footer is klikbaar */
.foot-merk a{display:block;width:26px;height:26px;line-height:0;opacity:.9;transition:opacity .2s,transform .2s}
.foot-merk a img{max-width:none}
.foot-merk a:hover{opacity:1;transform:translateY(-2px)}
.foot-merk a:focus-visible{outline:2px solid #e8915a;outline-offset:4px;border-radius:4px}

/* ───────── Sycamore-pagina ───────── */

.syc-hero{position:relative;margin:0 0 46px;border-radius:6px;overflow:hidden;min-height:380px;display:flex;align-items:flex-end}
.syc-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
/* .artikel-body img{height:auto} staat later in dit bestand en wint bij gelijke
   specificiteit; hierdoor vulde de hero-foto de sectie niet. Hogere specificiteit. */
.artikel-body .syc-hero img{margin:0;width:100%;height:100%;max-width:none;border-radius:0}
.syc-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,24,38,.10) 0%,rgba(10,24,38,.42) 100%)}
.syc-hero-tekst{position:relative;z-index:1;margin:26px;padding:28px 32px;color:#fff;max-width:34em;background:rgba(10,24,38,.62);border-radius:5px;backdrop-filter:blur(4px)}
.syc-eyebrow{margin:0;font-size:12.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-soft)}
.syc-hero-tekst h2{margin:8px 0 12px;font-size:clamp(30px,4vw,46px);line-height:1.08;color:#fff}
.syc-hero-tekst h2 em{font-style:italic;color:var(--gold-soft)}
.syc-lead{margin:0;font-size:18px;color:#e6eef6;max-width:32em}
/* de artikelopmaak zet alinea-kleur op donkerbruin; hier moet licht blijven */
.syc-hero-tekst .syc-eyebrow{color:var(--gold-soft)}
.syc-hero-tekst .syc-lead,.syc-hero-tekst p{color:#e6eef6}
.syc-buurt p,.syc-buurt .syc-buurt-knoppen a{color:#cfe2f1}
.syc-buurt h3,.syc-buurt .knop.primair{color:#fff}

.syc-intro{display:grid;grid-template-columns:1.15fr .85fr;gap:38px;align-items:start;margin:0 0 46px}
.syc-intro-tekst p{font-size:18px;line-height:1.65;margin:0}
.syc-kaart{background:var(--parchment);border-radius:6px;padding:26px 28px}
.syc-kaart h3{margin:0 0 16px;font-size:17px;letter-spacing:.02em}
.syc-stappen{list-style:none;margin:0;padding:0;counter-reset:s}
.syc-stappen li{display:flex;gap:14px;align-items:flex-start;margin:0 0 14px;font-size:15.5px;line-height:1.5}
.syc-stappen li span{flex:0 0 26px;height:26px;border-radius:50%;background:var(--bordeaux);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}

.syc-video{margin:0 0 46px}
.syc-video-inner{max-width:840px;margin:0 auto}
.syc-video .video-embed{border-radius:6px;overflow:hidden;box-shadow:0 24px 50px -30px rgba(12,28,44,.55)}

.syc-themas{margin:0 0 46px}
.syc-themas h3{margin:0 0 18px;font-size:17px}
.syc-thema-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.syc-thema-grid li{background:#fff;border:1px solid var(--stone);border-radius:5px;padding:14px 16px;font-size:15.5px;color:var(--ink)}
.syc-themas-voet{margin:16px 0 0;font-size:15px}

.syc-reacties{margin:0 0 46px}
.syc-reacties h3{margin:0 0 18px;font-size:17px}
.syc-quotes{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.syc-quotes blockquote{margin:0;background:var(--ivory);border-left:3px solid var(--gold);border-radius:0 5px 5px 0;padding:22px 24px}
.syc-quotes blockquote p{margin:0;font-family:var(--serif,Georgia,serif);font-size:23px;line-height:1.45;font-style:italic;color:var(--ink)}
/* 23px en niet 18: Cormorant Garamond heeft een lage x-hoogte, waardoor 18px
   optisch op 84% van de omringende Nunito-tekst uitkwam. Gemeten x-hoogte:
   Cormorant 18px = 6,95px, Nunito 17px = 8,27px, Cormorant 23px = 8,88px. */

.syc-buurt{background:var(--bordeaux-deep);border-radius:6px;color:#dcecf8;padding:38px 40px}
.syc-buurt h3{margin:0 0 10px;color:#fff;font-size:24px}
.syc-buurt p{margin:0 0 22px;max-width:40em;color:#cfe2f1}
.syc-buurt-knoppen{display:flex;gap:14px;flex-wrap:wrap}
.syc-buurt .knop.ghost{color:#f0f7fc;border:1px solid rgba(240,247,252,.45)}

@media (max-width:820px){
  .syc-intro,.syc-quotes{grid-template-columns:1fr}
  .syc-thema-grid{grid-template-columns:1fr 1fr}
  .syc-hero-tekst,.syc-buurt{padding:26px 22px}
}
@media (max-width:520px){ .syc-thema-grid{grid-template-columns:1fr} }

/* logo met naam linksboven */
.logo-mark img{width:46px;height:46px;max-width:none;display:block}

/* ───────── homepage: volle breedte, kleurvlakken, grotere routekaarten ───────── */
/* 1e vlak geel-groen, zoals op rk-alphacentrum */
.hero2b--breed{display:block;background:var(--green-band);
  border-radius:0;padding:56px 0 64px}
.hero2b--breed .hero2b-content{max-width:1120px;margin:0 auto;padding:0 32px;width:100%;background:none}
/* de banner is breed; met cover viel de sitenaam onderaan weg */
.hero2b-cards--groot img.h2b-thumb{object-position:center 72%}
.hero2b--breed .hero2b-photo{max-width:1120px;margin:34px auto 0;padding:0 32px;position:relative}
.hero2b--breed .hero2b-photo-img{width:100%;height:clamp(240px,32vw,420px);object-fit:cover;border-radius:6px;display:block}
.hero2b--breed .hero2b-quote{position:absolute;left:56px;bottom:24px;right:56px;max-width:36em}

/* routekaarten: groter, met een leesbare brede afbeelding */
.hero2b-cards--groot{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:30px}
.hero2b-cards--groot .h2b-card{display:flex;flex-direction:column;align-items:stretch;gap:0;
  background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 18px 40px -28px rgba(12,28,44,.45);
  transition:transform .2s,box-shadow .2s}
.hero2b-cards--groot .h2b-card:hover{transform:translateY(-3px);box-shadow:0 26px 54px -26px rgba(12,28,44,.55)}
.hero2b-cards--groot .h2b-thumb{width:100%;height:170px;object-fit:cover;object-position:center;border-radius:0;flex:0 0 auto}
.hero2b-cards--groot .h2b-thumb--face{width:100%;height:170px;background-size:cover;background-position:center;border-radius:0;flex:0 0 auto}
.hero2b-cards--groot .h2b-card-body{padding:18px 22px 4px}
.hero2b-cards--groot .h2b-title{font-size:22px}
.hero2b-cards--groot .h2b-cta{margin:12px 22px 20px;align-self:flex-start}

/* 2e vlak blauw, zoals op rk-alphacentrum */
.kapel{background:#2f7fbf}

@media (max-width:820px){
  .hero2b-cards--groot{grid-template-columns:1fr}
  .hero2b--breed{padding:38px 0 44px}
  .hero2b--breed .hero2b-quote{left:44px;right:44px;bottom:16px}
}

/* ───────── artikel-typografie: tilt alle inhoudspaginas tegelijk ───────── */
.artikel-body > p,.artikel-body > ul,.artikel-body > ol,.artikel-body > h2,.artikel-body > h3,.artikel-body > blockquote{max-width:38em}
.artikel-body p{font-size:17px;line-height:1.7;margin:0 0 1.05em}
.artikel-body h2{font-size:26px;line-height:1.2;margin:2em 0 .6em}
.artikel-body h3{font-size:20px;line-height:1.25;margin:1.8em 0 .5em}
.artikel-body ul,.artikel-body ol{padding-left:1.3em;margin:0 0 1.2em}
.artikel-body li{margin:0 0 .5em;line-height:1.6}
.artikel-body ul li::marker{color:var(--gold)}
.artikel-body blockquote{margin:1.6em 0;padding:18px 22px;background:var(--ivory);border-left:3px solid var(--gold);border-radius:0 5px 5px 0}
.artikel-body blockquote p{margin:0;font-style:italic;font-size:18px}
.artikel-body a{color:var(--bordeaux-deep);text-underline-offset:3px}
.artikel-body img{border-radius:5px;height:auto}
.artikel-body iframe{max-width:100%;border-radius:5px}
.artikel-body .syc-hero-tekst p,.artikel-body .syc-buurt p{color:inherit}

/* contactpagina */
.ct-blok{display:grid;grid-template-columns:1.1fr .9fr;gap:38px;align-items:start}
.ct-tekst h2{margin:0 0 14px}
.ct-mail{font-size:20px;font-weight:600}
.ct-kaart{background:var(--parchment);border-radius:6px;padding:26px 28px}
.ct-kicker{margin:0 0 14px;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.ct-logo{display:block;width:76px;height:76px;margin:0 0 16px}
.ct-logo img{width:76px;height:76px;max-width:none}
.ct-kaart p{font-size:15.5px;line-height:1.6;margin:0 0 .9em}
@media (max-width:820px){ .ct-blok{grid-template-columns:1fr} }


/* --- Sycamore: beeldblokken breken uit de 760px contentSize naar wideSize 1240px.
   Staat bewust achteraan MET .artikel-body ervoor: de losse .syc-*-regels hierboven
   gebruiken een margin-shorthand, die zou een simpele margin-inline overschrijven.
   .syc-intro blijft expres op leesbreedte. clamp() zet de uitbraak op 0 bij smalle
   schermen, dus mobiel verandert er niets. --- */
.artikel-body{overflow-x:clip}
.artikel-body .syc-hero,
.artikel-body .syc-intro,
.artikel-body .syc-video,
.artikel-body .syc-themas,
.artikel-body .syc-reacties,
.artikel-body .syc-buurt{
  margin-inline:calc(-1 * clamp(0px, (100vw - 64px - 760px) / 2, 240px));
}


/* Introblok loopt nu mee op 1216px, dus de tekstkolom moet zelf op leesbreedte
   worden gehouden - anders krijg je regels van ~85 tekens. Kaart vult de rest
   en eindigt op dezelfde rechterrand als de hero. */
@media (min-width:900px){
  .syc-intro{grid-template-columns:minmax(0,64ch) minmax(300px,1fr);gap:56px}
}




/* Taallink in de Sycamore-hero: het Engelse promomateriaal verwijst naar de
   Nederlandse /sycamore/, dus daar moet de overstap goed zichtbaar zijn. */
.syc-taal{margin:14px 0 0}
.syc-taal a{
  display:inline-block;color:#fff;font-family:var(--sans);font-size:13px;font-weight:700;
  letter-spacing:.04em;text-decoration:none;padding:8px 16px;border-radius:999px;
  border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.10);
}
.syc-taal a:hover{background:rgba(255,255,255,.20)}
.syc-hero-tekst .syc-taal a{color:#fff}


/* EN/NL. Twee complete menu's in de HTML; de body-class 'is-engels' uit
   functions.php bepaalt welke zichtbaar is. Zelfde patroon voor de tagline
   onder het logo en voor 'Website door' in de footer. Geen plugin. */
nav.hoofdmenu .menu-en,.tag-en{display:none}
body.is-engels nav.hoofdmenu .menu-nl,body.is-engels .tag-nl{display:none}
body.is-engels nav.hoofdmenu .menu-en{display:flex}
body.is-engels .tag-en{display:block}  /* .wordmark .naam small is block; revert gaf inline */
nav.hoofdmenu .lang-switch a{font-weight:700;letter-spacing:.02em}

/* Taallink in de Sycamore-hero: het Engelse promomateriaal verwijst naar de
   Nederlandse /sycamore/, dus daar moet de overstap goed zichtbaar zijn. */
.syc-taal{margin:14px 0 0}
.syc-taal a{
  display:inline-block;color:#fff;font-family:var(--sans);font-size:13px;font-weight:700;
  letter-spacing:.04em;text-decoration:none;padding:8px 16px;border-radius:999px;
  border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.10);
}
.syc-taal a:hover{background:rgba(255,255,255,.20)}
.syc-hero-tekst .syc-taal a{color:#fff}


/* --- Sycamore in de buurt -------------------------------------------------
   De kaart is de reden dat deze pagina bestaat, dus die breekt uit de 760px
   contentSize naar de volle 1240 en wordt hoger. De drie losse regels eronder
   (mailen, online meedoen, trailer) worden tegels, zodat ze niet alle drie in
   dezelfde toon staan als de introzin. De teksten zijn die van Helen; alleen
   de opmaak en de volgorde zijn nieuw.

   Alles staat met .artikel-body ervoor, want `.artikel-body p` en vooral
   `.artikel-body a` (regel 388 en 392) winnen anders van een losse klasse.
   Dat is precies de valkuil die op de andere KAC-sites een onleesbare knop
   heeft opgeleverd. --- */
.artikel-body .buurt-lead{
  /* zelfde uitbraak als kaart en tegels, anders staat de introzin 228px naar
     binnen terwijl alles eronder tegen de rand begint. Gemeten vóór deze regel:
     lead op 260, uitleg/kaart/tegels op 32. */
  margin-inline:calc(-1 * clamp(0px, (100vw - 64px - 760px) / 2, 240px));
  font-family:var(--serif);font-size:24px;line-height:1.4;color:var(--ink);
  margin-block:0 4px;
}
.artikel-body .buurt-uitleg{
  font-family:var(--sans);font-size:15px;color:#4a6478;margin:0 0 16px;
}

.artikel-body .buurt-kaart{
  margin-inline:calc(-1 * clamp(0px, (100vw - 64px - 760px) / 2, 240px));
  margin-block:8px 0;
}
.artikel-body .buurt-kaart-frame{
  position:relative;height:clamp(360px,52vh,560px);
  border:1px solid var(--stone);border-radius:6px;overflow:hidden;
  background:var(--parchment);
}
.artikel-body .buurt-kaart-frame iframe{
  position:absolute;inset:0;width:100%;height:100%;
  border:0;display:block;margin:0;max-width:none;
}

.artikel-body .buurt-tegels{
  margin-inline:calc(-1 * clamp(0px, (100vw - 64px - 760px) / 2, 240px));
  margin-block:20px 0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
}
.artikel-body .buurt-tegel{
  display:block;background:var(--ivory);
  border:1px solid var(--stone);border-left:3px solid var(--gold);
  border-radius:0 5px 5px 0;padding:18px 20px;
  text-decoration:none;color:var(--ink);
  transition:background .18s ease,border-color .18s ease;
}
.artikel-body .buurt-tegel:hover{background:var(--parchment);border-color:var(--gold-soft)}
.artikel-body .buurt-tegel b{
  display:block;font-family:var(--sans);font-size:12.5px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--bordeaux);
  margin:0 0 7px;
}
.artikel-body .buurt-tegel span{
  display:block;font-family:var(--sans);font-size:15.5px;line-height:1.5;color:var(--ink);
}

@media (max-width:820px){
  .artikel-body .buurt-tegels{grid-template-columns:1fr}
  .artikel-body .buurt-kaart-frame{height:340px}
  .artikel-body .buurt-lead{font-size:21px}
}

/* De regel hierboven op .syc-quotes blockquote p (23px) verliest van
   `.artikel-body blockquote p{font-size:18px}`, die verderop in dit bestand
   staat en dezelfde specificiteit heeft: bij gelijkspel wint de laatste. De
   line-height kwam er wél doorheen, want die staat daar niet, en dat maakte
   het verwarrend. Daarom hier expliciet met .artikel-body ervoor. Zelfde
   valkuil als bij .artikel-body a en .artikel-body img. */
.artikel-body .syc-quotes blockquote p{font-size:23px;line-height:1.45}


/* --- Vlaggetje bij de taalkeuze in het menu -------------------------------
   Bewust een inline-SVG als data-URI en geen emoji: 🇬🇧 en 🇳🇱 worden op
   Windows niet als vlag weergegeven maar als de letters GB en NL, en dat
   ziet er kapot uit. Een SVG rendert overal hetzelfde en blijft scherp.

   Het vlaggetje hoort bij de taal waar je naartoe gaat, niet bij de taal
   waar je bent: in het Nederlandse menu staat de Britse vlag bij "English",
   in het Engelse menu de Nederlandse bij "Nederlands".

   De Union Jack is een vereenvoudigde tekening. De echte heeft verspringende
   diagonalen; op 18 bij 12 pixels is dat verschil niet te zien en zou het
   alleen ruis opleveren. --- */
nav.hoofdmenu .lang-switch a{display:inline-flex;align-items:center;gap:8px}
nav.hoofdmenu .lang-switch a::before{
  content:"";width:18px;height:12px;flex:0 0 18px;border-radius:1px;
  background-size:cover;background-position:center;
  box-shadow:0 0 0 1px rgba(27,42,54,.18);
}
nav.hoofdmenu .menu-nl .lang-switch a::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Crect width='60' height='30' fill='%23012169'/%3E%3Cpath d='M0,0 L60,30 M60,0 L0,30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0,0 L60,30 M60,0 L0,30' stroke='%23C8102E' stroke-width='3'/%3E%3Cpath d='M30,0 L30,30 M0,15 L60,15' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30,0 L30,30 M0,15 L60,15' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E");
}
nav.hoofdmenu .menu-en .lang-switch a::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Crect width='9' height='6' fill='%23AE1C28'/%3E%3Crect y='2' width='9' height='4' fill='%23fff'/%3E%3Crect y='4' width='9' height='2' fill='%2321468B'/%3E%3C/svg%3E");
}

/* --- Tagline onder de sitenaam: NL en EN wisselen elkaar af ---------------
   Regel 744 zette `.tag-en{display:none}` (0-1-0), maar `.wordmark .naam small`
   staat op `display:block` met specificiteit 0-2-1 en wint dus altijd. Gevolg:
   op de Nederlandse pagina's stonden BEIDE talen onder de sitenaam. Op de
   Engelse ging het wel goed, want `body.is-engels .tag-nl` is zelf 0-2-1 en
   staat later in het bestand. Vandaar dat het alleen aan de Nederlandse kant
   opviel. Hieronder alles op 0-3-0 of hoger, dus ruim boven die block-regel. */
.wordmark .naam .tag-en{display:none}
body.is-engels .wordmark .naam .tag-nl{display:none}
body.is-engels .wordmark .naam .tag-en{display:block}

/* Vlaggetje op de knop "Read this page in English" in de Sycamore-hero.
   Zelfde SVG als in het menu, maar met een lichte rand in plaats van een
   donkere: deze knop staat wit-op-donker op het heroblok. */
.syc-taal a{display:inline-flex;align-items:center;gap:9px}
.syc-taal a::before{
  content:"";width:18px;height:12px;flex:0 0 18px;border-radius:1px;
  background-size:cover;background-position:center;
  box-shadow:0 0 0 1px rgba(255,255,255,.55);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Crect width='60' height='30' fill='%23012169'/%3E%3Cpath d='M0,0 L60,30 M60,0 L0,30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0,0 L60,30 M60,0 L0,30' stroke='%23C8102E' stroke-width='3'/%3E%3Cpath d='M30,0 L30,30 M0,15 L60,15' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30,0 L30,30 M0,15 L60,15' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E");
}


/* --- Taalknop naast de hamburger op smalle schermen ----------------------
   Op desktop staat "English" gewoon in de menubalk. Onder 1100px klapt dat
   menu weg achter de hamburger, en dan is de Engelse sectie alleen te vinden
   door het menu open te klappen. Helen merkte dat op de iPad. Daarom hier een
   tweede, kleine ingang die BUITEN het menu staat.

   Vlag plus de letters EN of NL: een vlag alleen is voor een schermlezer en
   voor kleurenblinden niets, en zegt strikt genomen ook niets over taal.

   De header is een space-between-rij met twee zichtbare kinderen. Een derde
   kind zou de hamburger naar het midden duwen, vandaar flex-start met
   margin-right:auto op het woordmerk. */
.lang-mini{display:none}
.lang-mini span{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--bordeaux)}
.lang-mini::before{
  content:"";width:18px;height:12px;flex:0 0 18px;border-radius:1px;
  background-size:cover;background-position:center;
  box-shadow:0 0 0 1px rgba(27,42,54,.18);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Crect width='60' height='30' fill='%23012169'/%3E%3Cpath d='M0,0 L60,30 M60,0 L0,30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0,0 L60,30 M60,0 L0,30' stroke='%23C8102E' stroke-width='3'/%3E%3Cpath d='M30,0 L30,30 M0,15 L60,15' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30,0 L30,30 M0,15 L60,15' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E");
}
.lang-mini--nl::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Crect width='9' height='6' fill='%23AE1C28'/%3E%3Crect y='2' width='9' height='4' fill='%23fff'/%3E%3Crect y='4' width='9' height='2' fill='%2321468B'/%3E%3C/svg%3E");
}
@media (max-width:1100px){
  .header-inner{justify-content:flex-start}
  .wordmark{margin-right:auto}
  .lang-mini--en{display:inline-flex}
  body.is-engels .lang-mini--en{display:none}
  body.is-engels .lang-mini--nl{display:inline-flex}
  .lang-mini{
    align-items:center;gap:7px;text-decoration:none;
    padding:8px 11px;margin-right:14px;
    border:1px solid var(--stone);border-radius:999px;
    background:rgba(255,255,255,.55);
  }
}

/* Op telefoonbreedte past woordmerk + taalknop + hamburger niet naast elkaar:
   335px beschikbaar tegen 413px nodig, dus de pagina ging horizontaal scrollen.
   De ondertitel onder de sitenaam is met zijn ruime letterafstand het breedste
   element van de drie; die krimpt hier. De taalknop wordt tegelijk compacter.
   Specificiteit: de ondertitels worden elders op 0-3-0 en 0-4-0 gezet, dus hier
   dezelfde structuur aanhouden, anders wint die oudere regel. */
@media (max-width:640px){
  .wordmark .naam .tag-nl,
  body.is-engels .wordmark .naam .tag-en{font-size:8px;letter-spacing:.1em}
  .lang-mini{padding:7px 10px;margin-right:10px;gap:6px}
  .lang-mini span{font-size:11px;letter-spacing:.06em}
  .header-inner{gap:8px}
}

/* Onder 400px is er domweg te weinig ruimte voor sitenaam, ondertitel,
   taalknop en hamburger samen: 280px beschikbaar tegen ruim 340px nodig.
   Hier valt de ondertitel weg. Leesbaar houden gaat voor compleet houden;
   het alternatief was de ondertitel naar 7px duwen of horizontaal scrollen.
   De ondertitel staat ook onder aan elke pagina in de voettekst.
   Specificiteit: .wordmark .naam small staat op display:block (0-2-1) en
   body.is-engels .wordmark .naam .tag-en op display:block (0-4-0), vandaar
   deze twee selectors en niet een simpele `small`. */
@media (max-width:400px){
  .wordmark .naam .tag-nl,
  body.is-engels .wordmark .naam .tag-en{display:none}
  .wordmark .naam{font-size:17px}
  .wordmark{gap:10px}
}