/*
Theme Name: destemvanpaterpio2026
Theme URI: https://www.destemvanpaterpio.nl/
Author: Studio Stuurman
Author URI: https://studiostuurman.com
Description: Blokthema voor De Stem van Pater Pio. Het woord "stem" letterlijk genomen: donker, stil, de tekst doet het werk, met Pio's eigen handschrift als achtergrond. Crimson Pro en Public Sans, warm zwart, crème en sepia uit de foto. Bewust géén familiegelijkenis met rk-alphacentrum, conform de afspraak met Helen Opstal van 20 juli 2026. Ontwerp gekozen door Harry op 13-09-2026 (richting B).
Version: 0.1.5
Requires at least: 6.6
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: destemvanpaterpio2026
*/

/* ---------- basis ---------- */
:root{
  --grond:#17130f; --grond2:#1f1a15; --lijn:#3a3128; --lijn2:#2c2520;
  --creme:#eee4d3; --creme2:#cdbfa9; --gedempt:#8c7f6e; --sepia:#c4844f;
  --papier:#f3ebdd; --inkt:#1b1712; --inkt2:#3b342c;
  --serif:"Crimson Pro","Iowan Old Style",Georgia,serif;
  --sans:"Public Sans","Helvetica Neue",Arial,sans-serif;
  --rand:72px;
}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--grond);color:var(--creme);font-family:var(--serif);font-size:19px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:hover{color:var(--sepia)}
img{max-width:100%;height:auto}
.ui{font-family:var(--sans)}
.kicker{font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;color:var(--sepia)}
.in{max-width:1440px;margin:0 auto;padding-left:var(--rand);padding-right:var(--rand)}

/* ---------- kop ---------- */
.kop{position:relative;z-index:3}
.kop-in{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:26px;padding-bottom:26px}
.merk{display:flex;align-items:baseline;gap:12px;white-space:nowrap}
.merk .naam{font-size:20px;font-weight:500;letter-spacing:.01em}
.merk .sub{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gedempt)}
.hoofdmenu ul{list-style:none;margin:0;padding:0;display:flex;gap:30px;flex-wrap:wrap;justify-content:flex-end}
.hoofdmenu a{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--creme2)}
.hoofdmenu a:hover,.hoofdmenu .current-menu-item>a,.hoofdmenu .current-menu-ancestor>a{color:var(--sepia)}
.nav-knop{display:none}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden}
.hero-hand{position:absolute;right:-20px;top:-120px;width:780px;height:1170px;object-fit:cover;opacity:.34;
  filter:grayscale(1) contrast(1.35) brightness(1.15);mix-blend-mode:screen;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 60% 55% at 55% 45%,#000 26%,transparent 74%);
  mask-image:radial-gradient(ellipse 60% 55% at 55% 45%,#000 26%,transparent 74%)}
.hero-in{position:relative;z-index:2;padding-top:96px;padding-bottom:110px;display:flex;flex-direction:column;gap:34px}
.hero-titel{margin:0;font-size:clamp(58px,10.4vw,150px);line-height:.94;font-weight:400;letter-spacing:-.025em;color:var(--creme)}
.hero-citaat{font-size:clamp(28px,3vw,44px);line-height:1.15;font-weight:300;font-style:italic;color:var(--creme2);max-width:900px}
.hero-citaat .bron{font-style:normal;font-size:.5em;color:var(--gedempt);white-space:nowrap}
.hero-intro{margin:6px 0 0;font-size:24px;line-height:1.5;color:var(--creme2);max-width:640px;font-weight:300}
.knoppen{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px}
.knop{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;min-height:44px;box-sizing:border-box}
.knop-vol{background:var(--sepia);color:var(--grond)}
.knop-vol:hover{background:var(--creme);color:var(--grond)}
.knop-lijn{border:1px solid #5c5044;color:var(--creme)}
.knop-lijn:hover{border-color:var(--sepia);color:var(--sepia)}

/* ---------- over ---------- */
.over{position:relative;z-index:2;padding-bottom:96px;display:grid;grid-template-columns:5fr 7fr;gap:40px;align-items:stretch}
.over-portret img{width:100%;height:640px;object-fit:cover;object-position:center 15%;display:block;filter:sepia(.35) contrast(1.05) brightness(.92)}
.over-portret figcaption{font-family:var(--sans);font-size:12px;color:var(--gedempt);margin-top:10px}
.over-tekst{display:flex;flex-direction:column;justify-content:center;gap:8px}
.over-tekst h2{margin:0 0 24px;font-size:clamp(30px,3.3vw,46px);line-height:1.05;font-weight:400}
.rij{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;border-top:1px solid var(--lijn);min-height:44px}
.rij:last-child{border-bottom:1px solid var(--lijn)}
.rij:hover{border-color:var(--sepia)}
.rij .t{font-size:30px;font-weight:400;display:block}
.rij .s{font-family:var(--sans);font-size:14px;color:var(--gedempt);display:block;margin-top:4px}
.rij svg{flex:0 0 auto}

/* ---------- luisteren ---------- */
.luister{position:relative;z-index:2;padding-top:72px;padding-bottom:72px;border-top:1px solid var(--lijn);display:grid;grid-template-columns:4fr 8fr;gap:40px}
.luister-kop{display:flex;flex-direction:column;gap:14px}
.luister-kop h2{margin:0;font-size:clamp(30px,3.3vw,46px);line-height:1.05;font-weight:400}
.luister-kop p{margin:0;color:var(--creme2);font-weight:300}
.preken{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.preek{display:flex;align-items:center;gap:18px;padding:22px 24px;background:var(--grond2);border:1px solid var(--lijn2);min-height:44px}
.preek:hover{border-color:var(--sepia)}
.preek .n{font-family:var(--sans);font-size:11px;letter-spacing:.18em;color:#a89b88;text-transform:uppercase;display:block}
.preek .t{font-size:22px;display:block;margin-top:2px}
.preek svg{flex:0 0 auto}

/* ---------- tijdschrift + gebedsgroepen ---------- */
.band2{position:relative;z-index:2;padding-top:72px;padding-bottom:96px;border-top:1px solid var(--lijn);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
.tijd{display:flex;gap:28px;align-items:center}
.tijd img{width:170px;height:238px;object-fit:cover;display:block;flex:0 0 auto}
.b2-tekst{display:flex;flex-direction:column;gap:10px}
.b2-tekst .t{font-size:34px;line-height:1.08}
.b2-tekst p{margin:0;font-size:17px;color:var(--creme2);font-weight:300}
.pijl{font-family:var(--sans);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--sepia);font-weight:600;margin-top:6px;display:inline-block;min-height:44px;line-height:44px}
.gebed{display:flex;flex-direction:column;gap:10px;justify-content:center;border-left:1px solid var(--lijn);padding-left:40px}

/* ---------- voet ---------- */
.voet{border-top:1px solid var(--lijn)}
.voet-in{padding-top:36px;padding-bottom:36px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;font-family:var(--sans);font-size:13px;color:var(--gedempt)}
.voet a{color:var(--gedempt)}
.voet a:hover{color:var(--sepia)}
.voet .links{display:flex;gap:24px;flex-wrap:wrap}
.credit{display:inline-flex;align-items:center;gap:8px}
.credit a{flex:0 0 auto;display:inline-flex}
.ss-logo{max-width:none;flex:0 0 auto;width:139px;height:16px;opacity:.75}

/* ---------- artikelpagina's: donkere kop, crème blad ---------- */
.artikel-kop{position:relative;padding-top:56px;padding-bottom:40px}
.artikel-kop h1{margin:0;font-size:clamp(38px,5vw,72px);line-height:1;font-weight:400;letter-spacing:-.02em;max-width:22ch}
.artikel-kop .kruimel{font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gedempt);margin-bottom:18px}
.artikel-kop .kruimel a{color:var(--gedempt)}
.artikel-blad{background:var(--papier);color:var(--inkt)}
.artikel-body{max-width:46rem;margin:0 auto;padding:56px var(--rand) 96px;font-size:19.5px;line-height:1.65}
.artikel-body>*:first-child{margin-top:0}
.artikel-body h2,.artikel-body h3,.artikel-body h4{font-weight:400;line-height:1.15;letter-spacing:-.01em;margin:1.6em 0 .5em}
.artikel-body h2{font-size:34px}.artikel-body h3{font-size:27px}.artikel-body h4{font-size:22px}
/* h3.h4: een koptitel op h4-formaat, maar in de juiste volgorde na een h2 (toegankelijkheid) */
.artikel-body h3.h4{font-size:22px}
.artikel-body p{margin:0 0 1.1em}
.artikel-body a{color:#8a4a1f;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.artikel-body a:hover{color:var(--sepia)}
.artikel-body img{height:auto;max-width:100%;display:block;margin:1.4em auto}
.artikel-body blockquote{margin:1.6em 0;padding-left:1.2em;border-left:2px solid var(--sepia);font-style:italic;color:var(--inkt2)}
.artikel-body ul,.artikel-body ol{padding-left:1.4em}
.artikel-body table{width:100%;border-collapse:collapse;font-size:17px}
.artikel-body td,.artikel-body th{padding:.5em .6em;border-bottom:1px solid #d8cdb8;vertical-align:top;text-align:left}
/* losse video-embeds uit de Joomla-tijd: alleen op de bekende hosts, niet iframe breed */
.artikel-body p>iframe[src*="youtube"],.artikel-body p>iframe[src*="youtu.be"],.artikel-body p>iframe[src*="vimeo"],
.artikel-body h3.h4>iframe[src*="youtube"],.artikel-body h3.h4>iframe[src*="youtu.be"],.artikel-body h4>iframe[src*="youtube"],.artikel-body h4>iframe[src*="youtu.be"]{width:100%;max-width:100%;aspect-ratio:16/9;height:auto}
.artikel-body audio{width:100%;display:block;margin:1em 0}
.artikel-body .alignleft,.artikel-body .alignright{float:none;margin:1.4em auto}

/* ---------- 404 ---------- */
.leeg{padding-top:96px;padding-bottom:140px;max-width:640px}
.leeg h1{font-size:clamp(38px,5vw,72px);font-weight:400;margin:0 0 20px;line-height:1}

/* ---------- mobiel ---------- */
@media (max-width:1000px){
  :root{--rand:40px}
  .over,.luister,.band2{grid-template-columns:1fr}
  .over-portret img{height:480px}
  .gebed{border-left:0;padding-left:0;border-top:1px solid var(--lijn);padding-top:40px}
  .hero-hand{right:-160px;width:640px;height:960px;opacity:.26}
}
@media (max-width:860px){
  :root{--rand:22px}
  .kop-in{flex-wrap:wrap;padding-top:18px;padding-bottom:18px}
  .nav-schakel{position:absolute;left:-9999px}
  .nav-knop{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--creme2);cursor:pointer;min-height:44px;margin-left:auto}
  .nav-knop span{display:block;width:22px;height:2px;background:currentColor;box-shadow:0 -7px 0 currentColor,0 7px 0 currentColor}
  .hoofdmenu{display:none;flex-basis:100%}
  .nav-schakel:checked~.hoofdmenu{display:block}
  .hoofdmenu ul{flex-direction:column;gap:0;padding:8px 0 4px}
  .hoofdmenu a{display:block;padding:12px 0;border-top:1px solid var(--lijn);font-size:15px}
  .hero-in{padding-top:56px;padding-bottom:72px;gap:24px}
  .hero-hand{right:-200px;top:-40px;width:560px;height:840px;opacity:.2}
  .hero-intro{font-size:20px}
  .over{gap:28px;padding-bottom:64px}
  .over-portret img{height:400px}
  .rij .t{font-size:24px}
  .luister,.band2{padding-top:48px;padding-bottom:64px;gap:28px}
  .preken{grid-template-columns:1fr}
  .tijd{flex-direction:column;align-items:flex-start}
  .b2-tekst .t{font-size:28px}
  .artikel-body{padding-top:36px;padding-bottom:64px;font-size:18px}
  .voet-in{flex-direction:column;align-items:flex-start}
}
@media (max-width:400px){
  .merk .sub{display:none}
  .merk .naam{font-size:17px}
  .nav-knop{font-size:12px}
  .hero-citaat .bron{white-space:normal;display:block;margin-top:.4em}
}