/* =========================================================================
   pagina.css — gedeelde stijl van de losse pagina's rond het spel:
   contact, steunen, privacyverklaring, de twee bedankpagina's en de
   kerken-pagina's. Donkerblauw/goud, Cinzel voor de koppen.

   Dit bestand verving vijf identiek gekopieerde inline <style>-blokken. Wijzig
   de stijl dus HIER, niet in de pagina's zelf.

   CACHE-BUSTER: pagina.css draagt een EIGEN ?v=N, los van de teller van
   style.css / lang/nl.js / script.js (het spel) en los van die van de
   scèneplaten. Hoog dit nummer alleen op als dit bestand wijzigt, en werk het
   dan bij in alle pagina's die het laden. index.html laadt pagina.css NIET.
   ========================================================================= */
@font-face {
    font-family: 'Cinzel';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/cinzel-700.woff2") format("woff2");
}

:root {
    --diepblauw: #0a1836;
    --blauw: #12295c;
    --goud: #d9ab3f;
    --goud-zacht: #f0d38a;
    --tekst: #e8e6df;
    --tekst-gedempt: #a8b2c8;
    --lijn: rgba(217, 171, 63, 0.28);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0 1.25rem 5rem;
    background: var(--diepblauw);
    background-image: radial-gradient(ellipse at 50% 0%, #1c3566 0%, transparent 60%);
    color: var(--tekst);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.0625rem;
    line-height: 1.7;
}

.omhulsel {
    max-width: 45rem;
    margin: 0 auto;
}

header {
    padding: 3.5rem 0 2.5rem;
    border-bottom: 1px solid var(--lijn);
    margin-bottom: 2.5rem;
}

.kruimel {
    font-size: 0.875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tekst-gedempt);
    margin: 0 0 1rem;
}

.kruimel a { color: var(--goud); text-decoration: none; }
.kruimel a:hover { text-decoration: underline; }

h1 {
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 700;
    font-size: clamp(2rem, 6vw, 2.75rem);
    line-height: 1.15;
    color: var(--goud-zacht);
    margin: 0 0 0.75rem;
}

.datum {
    font-size: 0.9375rem;
    color: var(--tekst-gedempt);
    margin: 0;
}

.kern {
    background: var(--blauw);
    border: 1px solid var(--lijn);
    border-radius: 0.5rem;
    padding: 1.5rem 1.75rem;
    margin: 0 0 3rem;
}

.kern p { margin: 0; }
.kern strong { color: var(--goud-zacht); }

h2 {
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 700;
    font-size: 1.375rem;
    color: var(--goud);
    margin: 2.75rem 0 0.75rem;
    line-height: 1.3;
}

h3 {
    font-family: Georgia, serif;
    font-size: 1.0625rem;
    color: var(--goud-zacht);
    margin: 1.75rem 0 0.5rem;
}

p { margin: 0 0 1rem; }

ul { padding-left: 1.25rem; margin: 0 0 1rem; }
li { margin-bottom: 0.5rem; }

a { color: var(--goud); }

.uitgelicht {
    border-left: 3px solid var(--goud);
    padding-left: 1.25rem;
    margin: 1.5rem 0;
    color: var(--tekst-gedempt);
}

footer {
    margin-top: 4rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--lijn);
    font-size: 0.9375rem;
    color: var(--tekst-gedempt);
}

/* De ©-regel onder de links, een fractie kleiner. */
footer .copyright { font-size: 0.875rem; }

[hidden] { display: none !important; }

form { margin: 0 0 1rem; }

.veld { margin: 0 0 1.25rem; }

.veld label {
    display: block;
    font-size: 0.9375rem;
    color: var(--goud-zacht);
    margin-bottom: 0.375rem;
}

.veld .hint {
    display: block;
    font-size: 0.875rem;
    color: var(--tekst-gedempt);
    margin-bottom: 0.375rem;
}

input[type="text"],
input[type="email"],
select,
textarea {
    width: 100%;
    padding: 0.625rem 0.75rem;
    background: var(--diepblauw);
    border: 1px solid var(--lijn);
    border-radius: 0.375rem;
    color: var(--tekst);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
}

textarea { min-height: 8rem; resize: vertical; }

select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--goud) 50%),
                      linear-gradient(135deg, var(--goud) 50%, transparent 50%);
    background-position: calc(100% - 1.15rem) 1.15rem, calc(100% - 0.8rem) 1.15rem;
    background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
    background-repeat: no-repeat;
    padding-right: 2.5rem;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--goud);
    outline: none;
}

/* Gouden knop. Wordt gebruikt op een <a> (donatieknop, kerken-keuzeknoppen) en
   op de verstuurknop van het contactformulier, die een <button> is. Vandaar
   zowel display:inline-block en text-decoration:none (nodig voor de links) als
   cursor:pointer (nodig voor de button). */
.knop {
    display: inline-block;
    background: linear-gradient(180deg, #e5bc55 0%, #c39429 100%);
    color: #17264a;
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    padding: 0.95rem 2.25rem;
    border-radius: 0.4rem;
    border: 1px solid #f0d38a;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    cursor: pointer;
}

.knop:hover { background: linear-gradient(180deg, #f0d38a 0%, #d9ab3f 100%); }

/* Donatieblok: de knop gecentreerd, met de Mollie-melding er direct onder.
   Staat op de plek van het oude "binnenkort"-kader. */
.doneer {
    text-align: center;
    margin: 2.5rem 0 3rem;
}

.doneer .toelichting {
    font-size: 0.9375rem;
    color: var(--tekst-gedempt);
    margin: 0.9rem 0 0;
}

/* Keuzeblok van de kerken-pagina's: gouden .knop-knoppen onder elkaar,
   gecentreerd en even breed. Er kunnen knoppen bij zonder de opmaak te raken. */
.keuze {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    margin: 2.5rem 0 3rem;
}

.keuze .knop {
    width: min(24rem, 100%);
    text-align: center;
}

/* Oriëntatieregel in de header van de kerken-pagina's: vertelt bij welke tak de
   pagina hoort en wijst naar de andere. Kleiner en gedempt zodat hij niet met de
   titel concurreert, maar ruim genoeg voor een meelezende volwassene. De link
   erin pakt vanzelf de gouden linkkleur op. Klassenaam zonder trema, net als de
   andere klassen in dit bestand. */
.orientatie {
    font-size: 0.9375rem;
    color: var(--tekst-gedempt);
    margin: 1rem 0 0;
}

/* Tweede terugknop onderaan een lange leespagina, boven de footer. Zelfde
   vormgeving als de kruimel bovenaan (die klassen staan er samen op); alleen de
   marge draait om, want hier is ruimte ERBOVEN nodig in plaats van eronder. */
.kruimel-onder {
    margin: 2.5rem 0 0;
}

/* Scheiding tussen de blokken op een lange leespagina. Zelfde gouden lijn als
   de rand onder de header en boven de footer. */
hr {
    border: none;
    border-top: 1px solid var(--lijn);
    margin: 3rem 0;
}

:focus-visible {
    outline: 2px solid var(--goud);
    outline-offset: 3px;
}

/* Ruimte boven een kop als iemand via een anker (#wijding enz.)
   naar een sectie springt. */
h2[id], h3[id] {
    scroll-margin-top: 1.5rem;
}