/* ═══════════════════════════════════════════════════════════════
   HERALDIEK — stijllaag voor saintlazarus.nl  (concept nov 2026)
   Heraldisch-editoriaal: perkament, ordegroen, goud als detail.
   Deze laag ligt OVER de bestaande stijl heen. Terugdraaien =
   de <link> naar dit bestand in index.html verwijderen.
   ═══════════════════════════════════════════════════════════════ */

/* ── Lettertypen (zelf gehost, geen Google-verbinding) ── */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url('/fonts/cormorant-garamond-latin-500-italic.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:600;font-display:swap;src:url('/fonts/cormorant-garamond-latin-600-italic.woff2') format('woff2');}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/eb-garamond-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/eb-garamond-latin-400-italic.woff2') format('woff2');}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/eb-garamond-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:500;font-display:swap;src:url('/fonts/eb-garamond-latin-500-italic.woff2') format('woff2');}
@font-face{font-family:'Libre Franklin';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/libre-franklin-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Libre Franklin';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/libre-franklin-latin-500-normal.woff2') format('woff2');}

/* ── Palet: licht (perkament) als standaard ──
   De oude variabelenamen blijven bestaan, maar krijgen een nieuwe rol:
   --ink/--dk  = achtergronden   --white/--cream = hoofdtekst
   --stone*    = bijtekst        --gold-pale     = accent in koppen (nu ordegroen) */
:root{
  --ink:#f5f0e5; --dk:#ece4d3; --forest:#173a27; --deep:#1d4631;
  --white:#18211a; --cream:#2a3027; --stone-lt:#4a5145; --stone:#78725f;
  --gold:#8a6913; --gold-lt:#7b5c0e; --gold-pale:#1e4d33;
  --vert:#1e4d33; --vert-dk:#143524; --line:rgba(30,77,51,.18);
  --f-display:'Cormorant Garamond','Palatino Linotype',Georgia,serif;
  --f-text:'EB Garamond','Palatino Linotype',Georgia,serif;
  --f-ui:'Libre Franklin','Helvetica Neue',Arial,sans-serif;
}

/* ── Donkere vlakken: ordegroen met lichte tekst ── */
#groep,#pillars,#caritas,#donate,.parallax,footer,#lb,#pwa-popup,
section[style*="var(--forest)"],section[style*="var(--deep)"],
[style*="background:var(--deep)"],[style*="background:var(--forest)"],
.pillar-body,.cc{
  --ink:#122d1f; --dk:#163526;
  --white:#f8f3e7; --cream:#ece4d1; --stone-lt:#c5cab6; --stone:#a0a68f;
  --gold:#d3b35a; --gold-lt:#dfc26c; --gold-pale:#e9d48c;
  --line:rgba(233,212,140,.2);
  color:var(--cream);
}

/* ── Basis ── */
html body{background:var(--ink);color:var(--cream);-webkit-font-smoothing:antialiased;}
html body, html body *:not(svg):not(svg *){font-family:var(--f-text)!important;}
html ::selection{background:rgba(30,77,51,.18);}

/* Koppen in Cormorant */
html :is(h1,h2,h3,.h2,.hero-title,.groep-h,.cc-h,.tl-h,.nv,.pillar-n,.rt-h,.about-badge b,.about-quote,.nav-logo-t){
  font-family:var(--f-display)!important;
}
html .h2{font-size:clamp(2.5rem,4.2vw,4rem);font-weight:500;line-height:1.02;letter-spacing:-.01em;}
html .h2 em,html .hero-title em,html .rt-h em,html .groep-h em{font-style:italic;font-weight:500;}
html .rule{width:56px;background:var(--gold);opacity:.7;}
html .body-txt,html .tl-p,html .pillar-b,html .cc-p,html .d-txt,html .rt-p{font-size:1.14rem;line-height:1.72;}
html .body-txt{max-width:600px;}

/* Kleine labels: geen gespatieerde hoofdletters meer, maar klein kapitaal */
html :is(.tag,.hero-kicker,.cc-tag,.rt-k,.nl,.cl,.groep-top,.strip-lbl,.pillar-t,.wapen-motto,.lc-name,.fl,.fls a,.nav-m-label,.ff label,.hero-scroll span),
html [style*="text-transform:uppercase"]{
  text-transform:none!important;font-variant-caps:all-small-caps;
  letter-spacing:.07em!important;font-size:1.02rem!important;
}
html .tag{color:var(--gold);margin-bottom:.9rem;}
html .tag::before{content:'✠';font-variant-caps:normal;margin-right:.55em;color:var(--vert);font-size:.85em;}
#pillars .tag::before,#caritas .tag::before,section[style*="var(--forest)"] .tag::before,section[style*="var(--deep)"] .tag::before,#donate .tag::before{color:var(--gold);}
html .pillar-t{font-size:1.25rem!important;color:var(--gold-lt);}
html .lc-name{font-size:1rem!important;}
html .ff label{font-size:1.05rem!important;}

/* ── Knoppen en navigatie: rustige schreefloze letter ── */
html :is(.nav-links a,.nav-btn,.btn-fill,.btn-line,.fsub,.d-amt,.cc-lnk,.rt-l,.pwa-install-btn,#langBtn,.mobile-tab span,.nav-mobile-portaal,.lang-sw button){
  font-family:var(--f-ui)!important;text-transform:none!important;font-variant-caps:normal;
  letter-spacing:.01em!important;
}
html :is(.btn-fill,.btn-line,.fsub){font-size:.92rem!important;font-weight:500;padding:.95rem 1.7rem;border-radius:0;}
html .btn-fill{background:var(--vert);color:#f7f2e6;border:1px solid var(--vert);}
html .btn-fill:hover{background:var(--vert-dk);color:#fff;transform:none;}
html .btn-line,html .fsub{color:var(--vert);background:transparent;border:1px solid rgba(30,77,51,.4);}
html .btn-line:hover,html .fsub:hover{border-color:var(--vert);background:rgba(30,77,51,.06);color:var(--vert);transform:none;}
:is(#pillars,#caritas,#donate,section[style*="var(--forest)"],section[style*="var(--deep)"]) .btn-fill{background:var(--gold);border-color:var(--gold);color:#13281b;}
:is(#pillars,#caritas,#donate,section[style*="var(--forest)"],section[style*="var(--deep)"]) :is(.btn-line,.fsub){color:var(--white);border-color:rgba(248,243,231,.35);}
:is(#pillars,#caritas,#donate,section[style*="var(--forest)"],section[style*="var(--deep)"]) :is(.btn-line,.fsub):hover{background:rgba(248,243,231,.08);border-color:var(--white);color:var(--white);}
html .cc-lnk,html .rt-l{font-size:.86rem!important;font-weight:500;}
html .d-amt{font-size:.92rem!important;}

/* Navigatie */
html #nav{padding:1.25rem 3.5rem;}
html #nav.solid{background:rgba(245,240,229,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(10px);padding:.85rem 3.5rem;}
html .nav-links{gap:1.7rem;}
html .nav-links a{font-size:.86rem!important;color:var(--cream);}
html .nav-links a:hover{color:var(--vert);}
html .nav-links a::after{background:var(--vert);}
html .nav-btn{font-size:.84rem!important;color:var(--vert);border:1px solid rgba(30,77,51,.45);padding:.5rem 1rem;}
html .nav-btn:hover{background:var(--vert);color:#f7f2e6;}
html #langBtn{font-size:.8rem!important;color:var(--stone-lt)!important;border-color:var(--line)!important;}
html .nav-hamburger span{background:var(--vert);}

/* Mobiel menu en onderbalk: licht */
html .nav-mobile{background:rgba(245,240,229,.99);}
html .nav-mobile a{color:var(--cream);border-bottom:1px solid var(--line);font-size:1.25rem;}
html .nav-mobile a:hover{background:rgba(30,77,51,.06);color:var(--vert);}
html .nav-mobile-close{color:var(--vert);}
html .nav-mobile-portaal{background:var(--vert)!important;color:#f7f2e6!important;}
html .mobile-tabbar{background:rgba(245,240,229,.97);border-top:1px solid var(--line);}
html .mobile-tab{color:var(--stone-lt);}
html .mobile-tab.gold{color:var(--vert);}

/* ── HERO: links uitgelijnd, ordekruis rechts, perkament ── */
html #hero{height:auto;min-height:94vh;justify-content:flex-start;align-items:center;padding:9rem 7vw 6rem;background:var(--ink);
  border-bottom:1px solid var(--line);}
html #hero::after{content:'';position:absolute;left:7vw;right:7vw;bottom:2.4rem;height:4px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
html .hero-bg,html .hero-ov,html .hero-scroll,html .hero-div{display:none;}
html .hero-cross-bg{left:auto;right:7vw;top:50%;transform:translateY(-50%);width:min(60vh,540px);height:min(60vh,540px);opacity:1;}
html .hero-cross-bg img{filter:drop-shadow(0 18px 40px rgba(20,53,36,.18));}
html .hero-content{text-align:left;max-width:min(760px,54vw);padding:0;margin:0;}
html .hero-kicker{color:var(--gold);margin-bottom:1.6rem;animation:none;}
html .hero-title{font-size:clamp(3.4rem,6.4vw,6.6rem);font-weight:500;line-height:.96;letter-spacing:-.015em;color:var(--white);margin-bottom:1.8rem;animation:none;}
html .hero-title em{color:var(--vert);}
html .hero-sub{font-size:1.3rem;font-style:italic;color:var(--stone-lt);letter-spacing:0;margin-bottom:2.6rem;padding-left:1.1rem;border-left:2px solid var(--gold);animation:none;}
html .hero-btns{justify-content:flex-start;animation:none;}

/* ── Routes ── */
html #routes{background:var(--dk)!important;border-color:var(--line)!important;}
html .rt{border-right:1px solid var(--line);padding:3rem 2.6rem;}
html .rt:hover{background:#e4dac5;}
html .rt-h{font-size:1.7rem;font-weight:500;line-height:1.15;}
html .rt-l{color:var(--vert);}

/* ── Foto's: minder verdonkerd, geen sepia-waas ── */
html .strip-item img{filter:brightness(.92) saturate(.92);}
html .strip-item:hover img{filter:none;}
html .strip-sep{background:rgba(245,240,229,.6);width:2px;}
html .strip-lbl{color:#f7f2e6;opacity:1;text-shadow:0 1px 8px rgba(0,0,0,.6);}
html .groep-h{font-size:clamp(1.8rem,3vw,2.9rem);font-weight:500;line-height:1.1;}
html .groep-ov{background:linear-gradient(to bottom,rgba(10,22,15,.45) 0%,transparent 20%,transparent 55%,rgba(10,25,17,.92) 100%);}
html .about-img,html .history-photo,html .contact-photo{filter:none;}
html .pillar-photo,html .cc-photo{filter:brightness(.8) saturate(.9);}
html .cc-ov{background:linear-gradient(to top,rgba(14,36,24,.96) 0%,rgba(14,36,24,.4) 55%,transparent 100%);}

/* ── Over de Orde ── */
html .about-frame{border-color:rgba(138,105,19,.4);}
html .about-badge{background:var(--vert);}
html .about-badge b,html .about-badge small{color:#f7f2e6;}
html .about-quote{font-size:1.55rem;line-height:1.35;color:var(--vert);border-left:2px solid var(--gold);}

/* ── Wapen ── */
html #wapen{background:var(--dk);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
html .wapen-img{filter:drop-shadow(0 10px 24px rgba(20,53,36,.2));}

/* ── Nieuws en kaarten: rand in plaats van schaduw ── */
html #nieuws{background:var(--ink)!important;}
html [style*="border:1px solid rgba(184,150,12,.15)"],html [style*="border:1px solid rgba(184,150,12,.2)"]{border-color:var(--line)!important;}
html [style*="background:rgba(184,150,12,.06)"]{background:rgba(30,77,51,.04)!important;}

/* ── Geschiedenis ── */
html #history{background:var(--dk);}
html .tl-yr{font-family:var(--f-display)!important;font-size:1.25rem;font-weight:600;color:var(--gold);}
html .tl-yr::after{border-color:var(--gold);background:var(--dk);}
html .tl-item::before{background:var(--line);}
html .tl-h{font-size:1.45rem;font-weight:600;}

/* ── Cijfers ── */
html .ng{background:var(--line);border-color:var(--line);}
html .nv{font-size:4rem;font-weight:500;color:var(--vert);}

/* ── Leiders ── */
html #leiders{background:var(--dk);}
html .lc-img{border:1px solid rgba(138,105,19,.45);padding:4px;background:var(--ink);filter:none;}
html .lc-period{color:var(--gold);}

/* ── Donatie ── */
html .donate-bg{filter:brightness(.28) saturate(.5);}
html .donate-ov{background:rgba(14,36,24,.6);}

/* ── Contact ── */
html .cv{color:var(--cream);}
html .cv a{color:var(--vert);}
html .ff input,html .ff textarea{border-bottom:1px solid rgba(30,77,51,.3);color:var(--cream);font-size:1.1rem;}
html .ff input:focus,html .ff textarea:focus{border-color:var(--vert);}

/* ── Voettekst ── */
html footer{background:var(--forest);border-top:none;}

/* ── PWA-melding ── */
html #pwa-popup{background:var(--forest);}

/* ── Kleinere schermen ── */
@media(max-width:1060px){
  html #nav,html #nav.solid{padding:1rem 2rem;}
  html #hero{min-height:auto;padding:8rem 2rem 6rem;}
  html .hero-cross-bg{right:-8vw;width:70vw;height:70vw;opacity:.12;top:58%;}
  html .hero-content{max-width:100%;}
  html .rt{border-right:none;border-bottom:1px solid var(--line);}
}
@media(max-width:600px){
  html #hero{padding:7rem 1.5rem 5rem;}
  html #hero::after{left:1.5rem;right:1.5rem;}
  html .hero-title{font-size:2.9rem;}
  html .h2{font-size:2.3rem;}
}

/* Groepsfoto op telefoon: tekst onder de foto in plaats van eroverheen
   (op smalle schermen viel de tekst over de gezichten) */
@media(max-width:700px){
  html #groep .groep-bottom{position:static;padding:2.2rem 1.5rem 2.6rem;background:var(--forest);}
  html #groep .groep-ov,html #groep .groep-top{display:none;}
  html #groep .groep-h{font-size:1.7rem;}
}

/* ── Subpagina's: navigatiebalk licht ── */
html body > nav:not(#nav),html .top-nav{background:rgba(245,240,229,.96)!important;border-bottom:1px solid var(--line)!important;}
html :is(.nav-back,.top-nav a,body > nav:not(#nav) a:not(.nav-logo)){color:var(--vert)!important;font-family:var(--f-ui)!important;font-variant-caps:normal;text-transform:none!important;letter-spacing:.01em!important;font-size:.9rem!important;}
html .nav-logo-t{color:var(--vert);}
html .nav-logo-t small{color:var(--stone);}

/* ── Subpagina's: kop zonder donkere foto (rustige editoriale opening) ── */
html .hero-txt{padding-top:7rem;}
html .nav-logo-t{text-transform:none!important;font-variant-caps:all-small-caps;letter-spacing:.08em!important;font-size:1rem!important;line-height:1.25;}
html .nav-logo-t small{font-size:.95rem!important;letter-spacing:.06em!important;}
html .hero-txt .hero-sub{line-height:1.5;}
@media(max-width:700px){
  html .hero-txt{padding-top:8.5rem;}
  html .nav-logo-t small{display:none;}
}

/* Overige labels op subpagina's: ook klein kapitaal */
html :is(.hero-tag,.section-tag,.datum,.rubriek,.motto,.pijler span,.donateur h3,.inzamel-cat h4,.transport h3,.prayer .amen,.about-badge small){
  text-transform:none!important;font-variant-caps:all-small-caps;letter-spacing:.07em!important;
}
html :is(.hero-tag,.section-tag,.datum,.rubriek){font-size:1.02rem!important;color:var(--gold);}
html :is(.back,.cta a,.footer a){font-family:var(--f-ui)!important;text-transform:none!important;font-variant-caps:normal;letter-spacing:.01em!important;}