/*
Theme Name: Genade van God
Description: Eigen thema voor Kerkgemeenschap Genade van God. Tweetalig (NL/FR), zonder
             externe afhankelijkheden en zonder verwijzingen naar de gebruikte software.
Version: 1.0
*/

/* ---------------------------------------------------------------- ontwerpsysteem */
:root{
  --inkt:#16202e;          /* hoofdtekst */
  --inkt-zacht:#4a5668;    /* bijschrift  */
  --diep:#122b45;          /* donkerblauw, kop- en voettekst */
  --diep-2:#1b3d5f;
  --goud:#b8893b;          /* accent voor decoratie (streepjes, randen) */
  --goud-tekst:#8a6320;    /* accent voor TEKST: 5,4:1 op wit en 5,2:1 op de warme vlakken.
                              Het lichtere #b8893b haalde maar 3,14:1 en voldeed niet aan WCAG AA. */
  --goud-licht:#e8c98f;    /* alleen op donkere ondergrond (hero, voettekst) */
  --papier:#ffffff;
  --papier-warm:#faf7f2;
  --lijn:#e6e0d6;
  --max:1140px;
  --radius:14px;
  --schaduw:0 1px 2px rgba(18,43,69,.06), 0 8px 24px rgba(18,43,69,.08);
  --schaduw-diep:0 2px 4px rgba(18,43,69,.08), 0 18px 48px rgba(18,43,69,.14);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--sans);font-size:1.0625rem;line-height:1.7;
  color:var(--inkt);background:var(--papier);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--diep-2);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--goud-tekst)}
h1,h2,h3,h4{font-family:var(--serif);line-height:1.22;color:var(--diep);margin:0 0 .5em;font-weight:600}
h1{font-size:clamp(2.1rem,5vw,3.35rem);letter-spacing:-.015em}
h2{font-size:clamp(1.6rem,3.4vw,2.35rem);letter-spacing:-.01em}
h3{font-size:1.28rem}
p{margin:0 0 1.15em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.smal{max-width:760px}

/* toegankelijkheid: sla navigatie over */
.skip{position:absolute;left:-9999px;top:0;background:var(--diep);color:#fff;padding:12px 20px;z-index:200}
.skip:focus{left:8px;top:8px}
/* De focusring moet op ELKE ondergrond zichtbaar zijn. Een enkele ring in --diep was
   op de donkerblauwe voettekst, paginakop en hero exact de achtergrondkleur (1,00:1):
   toetsenbordgebruikers zagen daar niet waar ze stonden. Nu een dubbele ring — donker
   met een witte buitenrand — die het op licht én op donker haalt. */
:focus-visible{outline:3px solid var(--diep);outline-offset:2px;border-radius:3px;
               box-shadow:0 0 0 6px rgba(255,255,255,.95)}
.voet :focus-visible,.paginakop :focus-visible,.hero :focus-visible{
  outline-color:#fff;box-shadow:0 0 0 6px rgba(18,43,69,.9)}

/* ------------------------------------------------------------------ koptekst */
.kop{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
     border-bottom:1px solid var(--lijn)}
.kop__in{display:flex;align-items:center;gap:20px;min-height:76px;flex-wrap:nowrap}
.merk{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--diep);min-width:0;flex:0 1 auto}
.merk img{width:46px;height:46px;object-fit:contain}
.merk__naam{font-family:var(--serif);font-weight:600;font-size:1.05rem;line-height:1.15;letter-spacing:.005em;min-width:0}
/* Hier stond overflow-x:hidden op html EN body. Dat verhielp het horizontaal scrollen,
   maar zette tegelijk de plakkende kopbalk buiten werking: een scroll-container op een
   voorouder maakt position:sticky zinloos. De oorzaak zelf (een kopbalk die niet kon
   krimpen) is hierboven al weggenomen met min-width:0 en flex-shrink, dus dit hoeft niet. */
.merk__naam span{display:block;font-family:var(--sans);font-size:.7rem;font-weight:500;
                 letter-spacing:.14em;text-transform:uppercase;color:var(--goud-tekst)}
.nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav a{padding:9px 13px;border-radius:8px;text-decoration:none;color:var(--inkt);font-size:.95rem;font-weight:500}
.nav a:hover{background:var(--papier-warm);color:var(--diep)}
.nav a[aria-current="page"]{color:var(--goud-tekst);font-weight:600}
.taal{display:flex;gap:2px;margin-left:10px;padding-left:14px;border-left:1px solid var(--lijn)}
.taal a{padding:6px 9px;font-size:.8rem;font-weight:700;letter-spacing:.06em;border-radius:6px;
        text-decoration:none;color:var(--inkt-zacht)}
.taal a[aria-current="true"],.taal span[aria-current="true"]{background:var(--diep);color:#fff}
.taal span{padding:6px 9px;font-size:.8rem;font-weight:700;letter-spacing:.06em;border-radius:6px}
.knopmenu{display:none;margin-left:auto;background:none;border:1px solid var(--lijn);border-radius:9px;
          padding:9px 12px;cursor:pointer;font-size:1rem;color:var(--diep)}

@media(max-width:900px){
  .knopmenu{display:block}
  .nav{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--lijn);
       flex-direction:column;align-items:stretch;gap:0;padding:8px 16px 16px;box-shadow:var(--schaduw);margin:0}
  .nav[hidden]{display:none}
  .nav a{padding:13px 8px;border-bottom:1px solid var(--lijn)}
  .taal{border-left:0;padding:10px 0 0;margin:0}
}

/* --------------------------------------------------------------------- hero */
.hero{position:relative;color:#fff;isolation:isolate}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
             background:linear-gradient(180deg,rgba(10,25,42,.82) 0%,rgba(10,25,42,.66) 45%,rgba(10,25,42,.86) 100%)}
.hero__in{padding-top:clamp(76px,13vw,140px);padding-bottom:clamp(76px,13vw,140px);max-width:720px}
.hero h1{color:#fff;margin-bottom:.35em;text-shadow:0 2px 24px rgba(0,0,0,.3)}
.hero p{font-size:clamp(1.05rem,2vw,1.28rem);color:#eef3f8;margin-bottom:1.8em}
.oogje{display:inline-block;font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
       color:var(--goud-tekst);margin-bottom:1.1em}
/* Op donkere ondergrond mag het lichte goud wel: daar is het contrast juist hoog. */
.hero .oogje{color:var(--goud-licht)}

/* -------------------------------------------------------------------- knop */
.knop{display:inline-block;padding:14px 28px;border-radius:999px;font-weight:600;font-size:.97rem;
      text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}
.knop--primair{background:var(--goud-tekst);color:#fff;box-shadow:0 6px 18px rgba(138,99,32,.34)}
.knop--primair:hover{background:#75551b;color:#fff;transform:translateY(-1px);box-shadow:0 10px 26px rgba(138,99,32,.42)}
.knop--rand{border:1.5px solid rgba(255,255,255,.65);color:#fff;margin-left:10px}
.knop--rand:hover{background:rgba(255,255,255,.14);color:#fff}
.knop--donker{background:var(--diep);color:#fff}
.knop--donker:hover{background:var(--diep-2);color:#fff}
@media(max-width:520px){.knop--rand{margin:10px 0 0;display:block;text-align:center}}

/* ------------------------------------------------------------------ secties */
.sectie{padding:clamp(56px,8vw,96px) 0}
.sectie--warm{background:var(--papier-warm)}
.sectie__kop{max-width:680px;margin-bottom:44px}
.sectie__kop p{color:var(--inkt-zacht);font-size:1.06rem;margin:0}

/* ------------------------------------------------------------------- kaarten */
.raster{display:grid;gap:22px}
.raster--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.raster--3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.kaart{background:#fff;border:1px solid var(--lijn);border-radius:var(--radius);padding:28px;
       box-shadow:var(--schaduw);transition:transform .18s ease,box-shadow .18s ease}
.kaart:hover{transform:translateY(-3px);box-shadow:var(--schaduw-diep)}
.kaart h3{margin-bottom:.4em}
.kaart p:last-child{margin-bottom:0}
.kaart__merk{width:38px;height:3px;background:var(--goud);border-radius:2px;margin-bottom:18px}
.inhoud blockquote,.duo blockquote{border-left-color:var(--goud)}

/* ---------------------------------------------------------------- twee kolommen */
.duo{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,64px);align-items:center}
.duo--om{grid-template-columns:.95fr 1.05fr}
.duo img{border-radius:var(--radius);box-shadow:var(--schaduw-diep);width:100%;aspect-ratio:4/3;object-fit:cover}
@media(max-width:860px){.duo,.duo--om{grid-template-columns:1fr}.duo__beeld{order:-1}}

/* ------------------------------------------------------------------- feiten */
.feiten{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;
        background:var(--lijn);border:1px solid var(--lijn);border-radius:var(--radius);overflow:hidden}
.feit{background:#fff;padding:26px 24px}
.feit dt{font-size:.74rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--goud-tekst);margin-bottom:7px}
.feit dd{margin:0;font-size:1.04rem;font-weight:600;color:var(--diep);font-family:var(--serif)}

/* ------------------------------------------------------------------ inhoud */
.inhoud h2{margin-top:1.7em}
.inhoud h3{margin-top:1.5em}
.inhoud ul{padding-left:1.15em}
.inhoud li{margin-bottom:.45em}
.inhoud blockquote{margin:1.8em 0;padding:4px 0 4px 26px;border-left:3px solid var(--goud);
                   font-family:var(--serif);font-size:1.2rem;color:var(--diep);font-style:italic}
.vers{display:block;font-family:var(--sans);font-style:normal;font-size:.82rem;font-weight:600;
      letter-spacing:.09em;text-transform:uppercase;color:var(--goud-tekst);margin-top:12px}

/* -------------------------------------------------------------- paginakop */
.paginakop{background:var(--diep);color:#fff;padding:clamp(52px,8vw,84px) 0 clamp(44px,6vw,68px)}
.paginakop h1{color:#fff;margin:0}
.paginakop p{color:#c3d3e2;margin:.6em 0 0;font-size:1.08rem;max-width:620px}
.kruimel{font-size:.82rem;color:#8fa8bf;margin-bottom:1em}
.kruimel a{color:#c3d3e2}

/* ------------------------------------------------------------------ voettekst */
.voet{background:var(--diep);color:#c3d3e2;padding:64px 0 0;margin-top:0}
.voet a{color:#e4ecf3}
.voet a:hover{color:var(--goud-licht)}
.voet__raster{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px;padding-bottom:48px}
@media(max-width:820px){.voet__raster{grid-template-columns:1fr;gap:34px}}
.voet h4{color:#fff;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-family:var(--sans);
         font-weight:700;margin-bottom:16px}
.voet p{margin:0 0 .6em;font-size:.95rem}
.voet ul{list-style:none;margin:0;padding:0}
.voet li{margin-bottom:9px;font-size:.95rem}
.voet__merk{display:flex;align-items:center;gap:13px;margin-bottom:18px}
.voet__merk img{width:52px;height:52px;object-fit:contain;background:#fff;border-radius:10px;padding:5px}
.voet__merk strong{color:#fff;font-family:var(--serif);font-size:1.1rem;font-weight:600}
.voet__onder{border-top:1px solid rgba(255,255,255,.12);padding:22px 0;display:flex;flex-wrap:wrap;
             gap:14px;justify-content:space-between;font-size:.86rem}
.voet__onder p{margin:0}

/* --------------------------------------------------------------------- klein */
.let{background:#fff;border:1px solid var(--lijn);border-left:3px solid var(--goud);
     border-radius:10px;padding:20px 24px;margin:1.6em 0}
.let p:last-child{margin-bottom:0}
.doc{display:flex;align-items:center;gap:12px;padding:14px 18px;border:1px solid var(--lijn);
     border-radius:10px;background:#fff;margin-bottom:10px;text-decoration:none;color:var(--inkt)}
.doc:hover{border-color:var(--goud);background:var(--papier-warm)}
.doc span{margin-left:auto;font-size:.8rem;color:var(--inkt-zacht)}
@media print{
  .kop,.voet,.knopmenu,.taal,.hero img{display:none!important}
  /* De hero en de paginakop hebben witte tekst op een donkere ondergrond die niet
     mee wordt afgedrukt; zonder deze regels bleef er wit op wit over. */
  .hero,.paginakop{background:#fff!important;color:#000!important;padding:0 0 1cm}
  .hero::after{display:none}
  .hero h1,.hero p,.paginakop h1,.paginakop p,.oogje{color:#000!important;text-shadow:none}
  body{font-size:11pt;color:#000}
  a{color:#000;text-decoration:underline}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444}
  /* De knoppen hebben witte tekst op een gekleurde achtergrond die niet meeprint. */
  .knop{background:none!important;color:#000!important;border:1px solid #000;box-shadow:none!important;
        padding:4px 10px;border-radius:4px}
  .kaart,.feit,.let{break-inside:avoid;box-shadow:none}
}

/* De voettekstkoppen zijn h2 (een sprong van h2 naar h4 slaat een niveau over en
   maakt de structuur onlogisch voor schermlezers), maar houden hun kleine uiterlijk. */
.voet .voetkop{color:#fff;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
               font-family:var(--sans);font-weight:700;margin:0 0 16px}

/* Zonder JavaScript stond de mobiele navigatie open en flitste hij bij het laden even
   op. Nu is hij op smalle schermen dicht tenzij JavaScript hem opent; op brede
   schermen staat hij altijd open, ook zonder JavaScript. */
@media(max-width:900px){
  /* Dicht bij het laden, ook zonder JavaScript: anders staat het menu bij elke
     paginaovergang even open en klapt het daarna dicht. De knop opent hem. */
  .nav[data-inklapbaar]{display:none}
  .nav[data-inklapbaar][data-open="1"]{display:flex}
}
.taal a,.taal span[aria-current]{display:inline-block}

/* Sfeerbeeld boven de inhoud van een subpagina. Ligt half over de donkere paginakop
   heen, zodat de pagina niet als een blok tekst begint. */
.paginabeeld__houder{margin-top:-40px;margin-bottom:8px;position:relative;z-index:1}
.paginabeeld{width:100%;height:clamp(190px,30vw,340px);object-fit:cover;
             border-radius:var(--radius);box-shadow:var(--schaduw-diep)}
.sectie--nakop{padding-top:clamp(34px,5vw,54px)}

/* Het ANBI-logo is een merkteken, geen sfeerfoto: niet bijsnijden, wel bescheiden tonen. */
.paginabeeld--logo{height:auto;max-width:320px;object-fit:contain;box-shadow:none;
                   background:#fff;padding:18px;border:1px solid var(--lijn)}

/* Portret met onderschrift. Zwevend naast de tekst op ruime schermen, daarboven op
   telefoon — een staande foto naast een smalle tekstkolom wordt anders onleesbaar smal. */
.portret{margin:0 0 1.4em;max-width:320px}
.portret img{width:100%;height:auto;border-radius:var(--radius);box-shadow:var(--schaduw-diep);display:block}
.portret figcaption{margin-top:.7em;font-size:.9rem;color:var(--inkt-zacht);line-height:1.5}
@media(min-width:700px){
  .inhoud .portret{float:right;margin:.3em 0 1.2em 2em;max-width:290px}
}
.inhoud h2{clear:both}

/* ------------------------------------------------- live meekijken + sociale kanalen */

/* Smalle band direct onder de hero. Bewust een eigen vlak en geen derde knop in de
   hero: de vraag "kan ik ook thuis meekijken?" verdient een eigen antwoord, en drie
   knoppen naast elkaar leest niemand meer. */
.live{background:#0e2338;color:#fff}
.live__in{display:flex;align-items:center;gap:18px;padding:18px 24px;flex-wrap:wrap}
.live__tekst{margin:0;flex:1 1 320px;font-size:.97rem;color:#e4ecf3}
.live__tekst strong{color:#fff}
.live__punt{width:11px;height:11px;border-radius:50%;background:#ff5a5a;flex:0 0 auto;
            box-shadow:0 0 0 4px rgba(255,90,90,.25);animation:gvg-puls 2.4s ease-in-out infinite}
@keyframes gvg-puls{0%,100%{opacity:1}50%{opacity:.45}}
/* Wie bewegende beelden liever niet ziet, krijgt een stilstaande stip. */
@media(prefers-reduced-motion:reduce){.live__punt{animation:none}}

.knop--live{background:#fff;color:#0e2338;display:inline-flex;align-items:center;gap:9px;
            padding:12px 22px;flex:0 0 auto}
.knop--live:hover{background:var(--goud-licht);color:#0e2338}
.knop--live svg{flex:0 0 auto}

.sociaal{list-style:none;margin:0 0 14px;padding:0;display:flex;gap:10px;flex-wrap:wrap}
.sociaal a{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border-radius:999px;
           text-decoration:none;font-size:.93rem;font-weight:600;
           border:1px solid var(--lijn);color:var(--diep);background:#fff}
.sociaal a:hover{border-color:var(--goud);background:var(--papier-warm);color:var(--diep)}
.sociaal--voet a{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff}
.sociaal--voet a:hover{background:rgba(255,255,255,.16);border-color:var(--goud-licht);color:#fff}
.voet__live{font-size:.9rem;color:#a9bed2;margin:0}

/* ------------------------------------------------------------- contactformulier */
.cf{background:#fff;border:1px solid var(--lijn);border-radius:var(--radius);
    padding:clamp(22px,4vw,34px);box-shadow:var(--schaduw);margin:1.6em 0}
.cf__rij{margin:0 0 1.05em}
.cf label{display:block;font-weight:600;font-size:.94rem;color:var(--diep);margin-bottom:.4em}
.cf input,.cf textarea{width:100%;padding:12px 14px;border:1.5px solid var(--lijn);border-radius:9px;
                       font:inherit;color:var(--inkt);background:#fff}
.cf input:focus,.cf textarea:focus{border-color:var(--diep);outline:none;
                                   box-shadow:0 0 0 3px rgba(18,43,69,.14)}
.cf textarea{resize:vertical;min-height:130px}
/* De lokval staat buiten beeld maar blijft in de DOM: display:none zou hem ook voor
   robots onzichtbaar maken, en dan werkt hij niet meer. */
.cf__val{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf__voet{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:1.4em 0 0}
.cf__klein{font-size:.86rem;color:var(--inkt-zacht);flex:1 1 240px;line-height:1.5}
.let--goed{border-left-color:#2e7d4f;background:#f2f9f5}
.let--fout{border-left-color:#b3261e;background:#fdf3f2}