/* ==========================================================================
   godsliefdesbrief.nl
   Alle kleuren en lettergroottes komen uit 24137_Evangelisatieactie_flyer_v6.pdf:
   de fonts en letterkleuren uit de tekstlaag, de vlakken uit een pixelmeting.
   Zie CLAUDE.md in de werkmap voor de meettabel.
   ========================================================================== */

@font-face{
  font-family:"Berkshire Swash";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/berkshireswash-regular.woff2") format("woff2");
}
@font-face{
  font-family:"Merriweather";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/merriweather-regular.woff2") format("woff2");
}
@font-face{
  font-family:"Merriweather";font-style:normal;font-weight:900;font-display:swap;
  src:url("/assets/fonts/merriweather-black.woff2") format("woff2");
}
@font-face{
  font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;
  src:url("/assets/fonts/barlow-bold.woff2") format("woff2");
}

:root{
  color-scheme:light;

  /* gemeten uit de flyer */
  --wax:#AE1918;
  --inkt:#1D1D1B;
  --label:#31302F;
  --perkament:#E0C8B0;
  --perkament-licht:#ECDAC9;

  /* afgeleid, niet gemeten */
  --wax-diep:#6E1010;
  --inkt-zacht:#5A504A;
  --lijn:#C4A88E;
  --lijn-zacht:#D8BFA6;
  --rand:#8C6A4C;      /* grens van invoervelden, ruim boven 3:1 op het perkament */
  --fout:#8E1210;
  --licht:#F6EADF;
  --linnen:#F3E9DD;   /* rustig leesvlak onder het perkament (achtergrondoptie 2) */
  --wit:#FFFFFF;

  --display:"Berkshire Swash",Georgia,"Times New Roman",serif;
  --brood:"Merriweather",Georgia,"Times New Roman",serif;
  --labelfont:"Barlow","Helvetica Neue",Arial,sans-serif;

  --kolom:34rem;      /* leesbreedte, ongeveer 60 tekens in Merriweather */
  --cap:1180px;       /* bovengrens voor brede composities, zie les 21 */
  --band:clamp(3.2rem,7vw,5.4rem);
}

*,*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}

body{
  margin:0;
  background-color:var(--linnen);
  color:var(--inkt);
  font-family:var(--brood);
  font-size:1.0625rem;
  line-height:1.78;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-wrap:break-word;
}

img{max-width:100%;height:auto;display:block;}

a{color:var(--wax);text-underline-offset:.18em;text-decoration-thickness:.06em;}
a:hover{color:var(--wax-diep);}
:focus-visible{outline:3px solid var(--wax-diep);outline-offset:3px;}

.overslaan{
  position:absolute;left:-9999px;top:0;
  background:var(--wax);color:var(--licht);padding:.7rem 1.1rem;z-index:20;
  font-family:var(--labelfont);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.9rem;
}
.overslaan:focus{left:.6rem;top:.6rem;}

/* --------------------------------------------------------------- structuur */

/* Perkament is de kaart en de brief zelf; linnen is alles eromheen. Elke pagina begint
   op perkament en loopt een keer over in linnen, zonder heen-en-weer. */
.band{padding:var(--band) clamp(1.15rem,5vw,2rem);}
.band--kaft{
  position:relative;overflow:hidden;
  background-color:var(--perkament);
  background-image:
    linear-gradient(180deg,rgba(243,233,221,0) 70%,rgba(243,233,221,.8) 92%,var(--linnen) 100%),
    url("/assets/img/perkament.webp");
  background-size:100% 100%,cover;background-position:center;
  /* De kaft vult altijd het scherm, met onderaan al een zweem linnen die uitnodigt
     tot scrollen. svh volgt de browserbalken op een telefoon; vh is de terugval. */
  min-height:100vh;
  min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  padding-top:clamp(4rem,8vh,6rem);
  padding-bottom:clamp(2.6rem,7vh,4.5rem);
}
/* Landschap op een telefoon: geen schermvullende kaft, anders past er niets. */
@media (max-height:520px){
  .band--kaft{min-height:0;}
}
/* De 404 hoeft het scherm niet te vullen. */
.band--kaft-kort{min-height:0;}
.band--brief{
  position:relative;
  background-color:var(--perkament);
  background-image:
    linear-gradient(180deg,rgba(243,233,221,0) calc(100% - 16rem),var(--linnen) 100%),
    url("/assets/img/perkament.webp");
  background-size:100% 100%,1400px auto;
  padding-top:clamp(4.5rem,9vh,6rem);
  padding-bottom:clamp(6rem,14vh,9rem);
}
.band--voet{
  border-top:1px solid var(--lijn-zacht);
  padding-top:clamp(2.4rem,5vw,3.4rem);
  padding-bottom:clamp(2.4rem,5vw,3.4rem);
}

.kolom{max-width:var(--kolom);margin-inline:auto;}
/* Opeenvolgende blokken op linnen: de rode streep scheidt al, dus minder witruimte ertussen. */
main .band + .band{padding-top:clamp(1.2rem,3vw,2.2rem);}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ------------------------------------------------------------- typografie */

h1,h2,h3{margin:0;text-wrap:balance;}

.titel{
  font-family:var(--display);font-weight:400;color:var(--wax);
  font-size:clamp(2.3rem,11vw,5rem);line-height:1;hyphens:auto;
}
.opschrift{
  font-family:var(--labelfont);font-weight:700;
  font-size:clamp(.88rem,2.8vw,.95rem);letter-spacing:.3em;text-transform:uppercase;
  color:var(--label);
}
h2{
  font-family:var(--display);font-weight:400;color:var(--wax);
  font-size:clamp(1.55rem,5vw,2.3rem);line-height:1.18;
}
h3{font-family:var(--brood);font-weight:900;font-size:1.02rem;line-height:1.5;}
/* korte rode streep boven een kop op linnen */
.met-streep::before{content:"";display:block;width:2.2rem;height:2px;background:var(--wax);margin-bottom:.9rem;}

p{margin:0;}
.tekst > * + *{margin-top:1.15em;}
.tekst p{max-width:var(--kolom);}

.aanhef{
  font-family:var(--display);color:var(--wax);
  font-size:1.55em;line-height:1;
}

/* ------------------------------------------------------------------- kaft */

.kaft{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0;}
.kaft .titel{margin-bottom:.35rem;}
.kaft__hint{
  margin-top:.1rem;font-family:var(--labelfont);font-weight:700;font-size:.9rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--wax);
}
.hint-tik{display:none;}
@media (hover:none){.hint-klik{display:none;}.hint-tik{display:inline;}}
.kaft__knop{margin-top:1rem;}

/* ---------------------------------------------------------------- tentkaart */

/* Dubbelgevouwen met de vouw bovenaan, staand als een tent, zoals de gedrukte kaart.
   Voor- en achterkant hangen aan de vouw; je kijkt schuin van linksvoor en iets van boven.
   Alle maten in em, zodat de hele kaart meeschaalt met de font-size van .kaart-link. */
.kaart-link{
  display:block;color:inherit;text-decoration:none;
  margin-top:clamp(.2rem,1.5vh,1.2rem);
  font-size:clamp(6px,min(3.3vw,2.2vh),19px);
  -webkit-tap-highlight-color:transparent;
}
@supports (height:1svh){
  .kaart-link{font-size:clamp(6px,min(3.3vw,2.2svh),19px);}
}
.kaart-link:focus-visible{outline:3px solid var(--wax-diep);outline-offset:-.6em;}
.kaart-scene{position:relative;display:block;width:26.25em;height:20.625em;perspective:62.5em;perspective-origin:28% -45%;}
.kaart{
  position:absolute;left:3.625em;top:3.875em;width:18.75em;height:13.25em;display:block;
  transform-style:preserve-3d;transform:rotateY(32deg);transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.kaart .voor,.kaart .achter{position:absolute;inset:0;transform-origin:top center;}
.kaart .papier{
  background-color:#F1E3D4;
  background-image:
    linear-gradient(160deg,rgba(255,255,255,.55),rgba(255,255,255,0) 38%,rgba(120,70,40,.07) 100%),
    url("/assets/img/perkament.webp");
  background-size:100% 100%,32.5em auto;background-blend-mode:normal,multiply;
}
.kaart .voor{
  transform:rotateX(19deg);display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 0 0 .5px rgba(120,70,40,.32),inset 0 -1.6em 1.9em -1.6em rgba(90,45,25,.22);
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.kaart .voor::before{
  content:"";position:absolute;left:0;right:0;top:0;height:.5625em;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,0));
}
.voor__titel{display:block;font-family:var(--display);color:var(--wax);font-size:2.1875em;line-height:1;}
.voor__label{
  display:block;font-family:var(--labelfont);font-weight:700;font-size:.53em;letter-spacing:.28em;
  text-transform:uppercase;color:var(--label);margin-top:.94em;
}
.voor__zegel{width:4.125em;height:auto;margin-top:.875em;filter:drop-shadow(0 .25em .375em rgba(80,20,16,.35));}
.kaart .achter{
  transform:rotateX(-19deg);padding:1.375em 1.5em 1.625em 1.75em;
  display:flex;flex-direction:column;justify-content:flex-end;
  box-shadow:0 0 0 .5px rgba(120,70,40,.3),inset 0 2.875em 2.75em -1.5em rgba(70,35,20,.34);
}
.achter__tekst{display:block;font-family:var(--brood);font-size:.656em;line-height:1.8;color:var(--inkt);text-align:left;}
.achter__tekst .aanhef{font-size:1.714em;}
.kaart-schaduw{
  position:absolute;left:0;top:14.625em;width:24.375em;height:4.875em;display:block;pointer-events:none;
  background:radial-gradient(ellipse at 38% 40%,rgba(40,20,10,.5),rgba(40,20,10,.16) 50%,transparent 74%);
  filter:blur(.5em);transform:skewX(38deg);transform-origin:left top;
}
.glans{position:absolute;inset:0;display:block;pointer-events:none;overflow:hidden;}
.glans::before{
  content:"";position:absolute;top:-40%;bottom:-40%;width:34%;left:-60%;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.62) 48%,rgba(255,255,255,0) 100%);
  transform:skewX(-18deg);mix-blend-mode:screen;opacity:.75;transition:left 1s cubic-bezier(.2,.7,.2,1);
}
.glans::after{
  content:"";position:absolute;inset:0;mix-blend-mode:screen;
  background:linear-gradient(128deg,rgba(255,255,255,0) 34%,rgba(255,255,255,.2) 46%,rgba(255,255,255,.04) 53%,rgba(255,255,255,0) 62%);
}
/* Open: de voorkant klapt omhoog en je leest de brief binnenin. Aanwijzen alleen op apparaten
   met een muis; op een telefoon doet kaart.js het bij aantikken, vlak voor het doorgaan. */
@media (hover:hover){
  .kaart-link:hover .kaart .voor{transform:rotateX(80deg);}
  .kaart-link:hover .kaart{transform:rotateY(32deg) translateY(-.3125em);}
  .kaart-link:hover .glans::before{left:125%;}
}
.kaart-link.is-open .kaart .voor,.kaart-link:focus-visible .kaart .voor{transform:rotateX(80deg);}
.kaart-link.is-open .kaart,.kaart-link:focus-visible .kaart{transform:rotateY(32deg) translateY(-.3125em);}
.kaart-link.is-open .glans::before,.kaart-link:focus-visible .glans::before{left:125%;}

/* --------------------------------------------------------------- taalwissel */

/* Vast rechtsboven, zodat de bezoeker op elke hoogte van de brief kan wisselen. */
.taal{
  position:fixed;top:.85rem;right:.85rem;z-index:15;
  display:inline-flex;align-items:center;gap:.15rem;
  background:rgba(236,218,201,.92);
  border:1px solid var(--lijn);
  padding:.15rem;
}
.taal button{
  display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;padding:.45rem .5rem;
  min-width:44px;min-height:44px;
  opacity:.45;transition:opacity .15s ease;
}
.taal button:hover{opacity:.85;}
.taal button.active{opacity:1;}
.taal button.active img{box-shadow:0 0 0 2px var(--wax);}
.taal img{display:block;width:24px;height:auto;}

/* ----------------------------------------------------------------- knoppen */

.knop{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--labelfont);font-weight:700;font-size:.9rem;
  letter-spacing:.16em;text-transform:uppercase;
  background:var(--wax);color:var(--licht);
  border:2px solid var(--wax);border-radius:0;
  padding:.85rem 1.6rem;text-decoration:none;cursor:pointer;
  transition:background-color .18s ease,color .18s ease;
}
.knop:hover{background:var(--wax-diep);border-color:var(--wax-diep);color:var(--licht);}
.knop--licht{background:var(--perkament-licht);border-color:var(--perkament-licht);color:var(--wax-diep);}
.knop--licht:hover{background:var(--licht);border-color:var(--licht);color:var(--wax-diep);}
.knop[disabled]{opacity:.55;cursor:not-allowed;}

/* ------------------------------------------------------------------ gebed */

.gebed{
  border-left:3px solid var(--wax);
  padding-left:clamp(1rem,3.5vw,1.6rem);
  font-style:italic;
}
.vers{
  margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid var(--lijn-zacht);
}
.vers .toezegging{font-weight:900;font-style:normal;}

/* ----------------------------------------------------------------- stappen */

.stappen{list-style:none;margin:1.6rem 0 0;padding:0;display:flex;flex-direction:column;gap:1rem;}
.stappen li{position:relative;padding-left:1.7rem;}
.stappen li::before{
  content:">";position:absolute;left:0;top:0;
  font-family:var(--brood);font-weight:900;color:var(--wax);
}

/* ------------------------------------------------------------------ bijbel */

.kaartje{
  background:var(--wit);padding:clamp(1.4rem,4vw,2.2rem);
  box-shadow:0 1px 0 rgba(120,70,40,.12),0 14px 30px -20px rgba(90,45,25,.45);
}
.bijbel{display:flex;flex-direction:column;gap:1.1rem;align-items:flex-start;}

/* -------------------------------------------------------------- wegwijzer */

.wegwijzer{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.75rem;}
.wegwijzer a{
  display:flex;flex-direction:column;gap:.15rem;min-height:44px;
  background:var(--wit);padding:1rem 1.2rem;color:var(--inkt);text-decoration:none;
  box-shadow:0 1px 0 rgba(120,70,40,.12);transition:box-shadow .2s ease,transform .2s ease;
}
.wegwijzer a:hover{box-shadow:0 10px 24px -16px rgba(90,45,25,.55);transform:translateY(-1px);color:var(--inkt);}
.wegwijzer b{font-family:var(--brood);font-weight:900;color:var(--wax);}
.wegwijzer span{font-size:.95rem;line-height:1.55;color:var(--inkt-zacht);}

/* --------------------------------------------------------------- formulier */

.formulier{margin-top:1.9rem;display:flex;flex-direction:column;gap:1.1rem;max-width:var(--kolom);}
.veld{display:flex;flex-direction:column;gap:.35rem;}
.veld label{
  font-family:var(--labelfont);font-weight:700;font-size:.88rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--label);
}
.veld input,.veld textarea{
  font-family:var(--brood);font-size:1rem;line-height:1.6;color:var(--inkt);
  background:var(--wit);
  border:1.5px solid var(--rand);border-radius:0;
  padding:.7rem .85rem;width:100%;
}
.veld textarea{min-height:9rem;resize:vertical;}
.akkoord{display:grid;grid-template-columns:2.75rem 1fr;gap:.35rem;align-items:start;font-size:.95rem;line-height:1.85;}
/* Het vakje is optisch 24px maar het tikgebied is 44px, zodat het op een telefoon
   goed te raken is zonder dat het vinkje log wordt. */
.akkoord input{
  appearance:none;-webkit-appearance:none;
  width:2.75rem;height:2.75rem;margin:0;padding:0;border:0;background:none;
  display:grid;place-content:center;cursor:pointer;
}
.akkoord input::before{
  content:"";display:block;width:1.5rem;height:1.5rem;
  border:1.5px solid var(--rand);background:var(--wit);
}
.akkoord input:checked::before{
  border-color:var(--wax);
  background:var(--wax) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.3 3.3L13 4.8' fill='none' stroke='%23F6EADF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/1rem no-repeat;
}
.akkoord input:focus-visible{outline:3px solid var(--wax-diep);outline-offset:-6px;}
/* vergroot het tikgebied van de inline link zonder de regelhoogte te veranderen */
.akkoord a{padding-block:.8rem;}
.honeypot{display:none;}
.formulier .knop{align-self:flex-start;}
.veldfout{font-size:.9rem;line-height:1.5;color:var(--fout);font-weight:900;}
.veld input[aria-invalid="true"],.veld textarea[aria-invalid="true"]{border-color:var(--fout);border-width:2px;}
.melding{font-size:.95rem;line-height:1.7;min-height:1.7em;}
.melding.ok{color:var(--wax-diep);font-weight:900;}
.melding.err{color:var(--wax);font-weight:900;}

/* -------------------------------------------------------------------- voet */

.voet{max-width:var(--cap);margin-inline:auto;display:flex;flex-direction:column;gap:1.6rem;}
.voet p a{color:var(--wax-diep);overflow-wrap:anywhere;}
.voet p{font-size:.95rem;line-height:1.85;color:var(--inkt-zacht);max-width:46rem;}
.voet__links{
  display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;
  font-family:var(--labelfont);font-weight:700;font-size:.9rem;
  letter-spacing:.14em;text-transform:uppercase;
}
.voet__links a{color:var(--wax-diep);text-decoration:none;overflow-wrap:anywhere;display:inline-flex;align-items:center;min-height:44px;}
.voet__links a:hover{text-decoration:underline;}

/* ----------------------------------------------------------- documentpagina */

.doc{max-width:44rem;margin-inline:auto;}
.doc h2{margin-top:2.4rem;}
.doc h2:first-of-type{margin-top:1.6rem;}
.doc p,.doc li{max-width:none;}
.doc ul{margin:.8rem 0 0;padding-left:1.3rem;}
.doc li + li{margin-top:.45rem;}
.doc dl{margin:1.1rem 0 0;display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.2rem;}
.doc dt{font-family:var(--labelfont);font-weight:700;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:var(--label);padding-top:.35rem;}
.doc dd{margin:0;}
.invullen{
  background:rgba(174,25,24,.1);border-bottom:2px solid var(--wax);
  padding:0 .2em;font-weight:900;
}
.terug{
  display:inline-flex;align-items:center;min-height:44px;font-family:var(--labelfont);font-weight:700;font-size:.9rem;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;margin-bottom:1.6rem;
}
.terug:hover{text-decoration:underline;}