/*
Theme Name: Belgeluk
Theme URI: https://www.belgeluk.nl
Author: Stichting Belgeluk
Description: Block theme voor Stichting Belgeluk. Navy, goud en groen; van sterke club naar sterke gemeenschap. Ontmoeting, verbinding, aandacht en betrokkenheid.
Version: 2.0.0
Requires at least: 6.5
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: belgeluk
Tags: full-site-editing, block-theme, one-column, accessibility-ready
*/

/* ==========================================================
   BELGELUK v2
   Visuele taal: navy als fundament, goud als accent, groen als
   signaal. Zware sans-serif, strakke letterafstand, ruime ronding.
   ========================================================== */

/* ----------------------------------------------------------
   TOKENS
   ---------------------------------------------------------- */

:root {
    /* Kleur (spiegelt theme.json, zodat losse CSS dezelfde taal spreekt) */
    --bg-navy: #17324d;
    --bg-navy-deep: #10283d;
    --bg-gold: #e8b84a;
    --bg-cream: #f7f3e8;
    --bg-green: #4c7a68;
    /* Groen als tekstkleur moet een tint dieper: op wit, crème en lichtgroen
       haalt #4c7a68 de WCAG-drempel van 4.5:1 net niet. */
    --groen-tekst: #46705f;
    --bg-dark: #1d2730;
    --bg-light: #eef3f1;

    --tekst-zacht: #50606d;
    --lijn: rgba(23, 50, 77, 0.09);
    --lijn-sterk: rgba(23, 50, 77, 0.16);

    /* Ronding */
    --r-sm: 14px;
    --r-md: 20px;
    --r-lg: 24px;
    --r-xl: 28px;
    --r-pill: 999px;

    /* Schaduw */
    --schaduw-zacht: 0 10px 30px rgba(23, 50, 77, 0.06);
    --schaduw: 0 20px 50px rgba(23, 50, 77, 0.12);
    --schaduw-diep: 0 26px 60px rgba(23, 50, 77, 0.18);

    /* Typografie */
    --t-eyebrow: 0.78rem;
    --ls-eyebrow: 0.14em;
    --t-lead: clamp(1.1rem, 1.6vw, 1.28rem);
    --t-display: clamp(3.2rem, 6vw, 6.2rem);
    --t-display-sm: clamp(2.2rem, 4vw, 4rem);

    /* Beweging */
    --t-fast: 200ms;
    --t-base: 400ms;
    --t-slow: 900ms;

    /* Sectieritme */
    --sectie: clamp(4.5rem, 8vw, 6.25rem);
}

/* ----------------------------------------------------------
   BASIS
   ---------------------------------------------------------- */

/* Padding telt binnen de opgegeven breedte en hoogte, zoals in het visuele
   concept. Zonder deze regel groeit ruwe HTML uit een wp:html-blok buiten zijn
   kolom: de kaarten met height:100% werden dan 56px te hoog en schoven over
   elkaar heen op mobiel. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Focus zichtbaar houden: toegankelijkheid boven esthetiek. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--bg-gold);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ----------------------------------------------------------
   TYPOGRAFIE
   ---------------------------------------------------------- */

.belgeluk-display {
    font-family: var(--wp--preset--font-family--sans);
    font-weight: 700;
    font-size: var(--t-display);
    line-height: 0.95;
    letter-spacing: -0.055em;
    color: var(--wp--preset--color--navy);
    margin-top: 0;
    margin-bottom: 0;
}

.belgeluk-display-sm {
    font-family: var(--wp--preset--font-family--sans);
    font-weight: 700;
    font-size: var(--t-display-sm);
    line-height: 1.03;
    letter-spacing: -0.04em;
    color: var(--wp--preset--color--navy);
    margin-top: 0;
    margin-bottom: 0;
}

/* Cursief uit de oude content niet meer schuin zetten: dit thema is recht.
   De nadruk verhuist naar kleur. */
.belgeluk-display em,
.belgeluk-display-sm em,
.belgeluk-section-title em,
.belgeluk-bigquote em {
    font-style: normal;
    color: var(--wp--preset--color--gold);
}

.belgeluk-lead {
    font-size: var(--t-lead);
    line-height: 1.55;
    color: var(--tekst-zacht);
    max-width: 48ch;
}

/* Label boven een sectie.
   Blok-element, geen inline-block: als direct kind van een constrained
   container krijgt een inline-block geen automatische marges, waardoor het
   label tegen de rand plakt terwijl de tekst eronder wel inspringt. */
.belgeluk-eyebrow {
    display: block;
    font-family: var(--wp--preset--font-family--sans);
    font-weight: 800;
    font-size: var(--t-eyebrow);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--groen-tekst);
    margin-top: 0;
    margin-bottom: 0;
}
.belgeluk-eyebrow .dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--wp--preset--color--gold);
    vertical-align: middle;
    margin: 0 0.4em;
}
/* De pil-variant blijft inline-block: de achtergrond hoort alleen om de
   tekst te staan, niet over de hele kolom. */
.belgeluk-eyebrow.is-pill {
    display: inline-block;
    padding: 0.55em 1.2em;
    border-radius: var(--r-pill);
    background: rgba(232, 184, 74, 0.2);
    color: #8a6410;
}
.belgeluk-eyebrow.on-dark {
    color: var(--wp--preset--color--gold);
}

/* Sectiekop: hetzelfde korte label, op kopformaat. */
.belgeluk-section-title {
    font-family: var(--wp--preset--font-family--sans);
    font-weight: 700;
    font-size: clamp(2rem, 3.6vw, 3.2rem);
    line-height: 1.05;
    letter-spacing: -0.04em;
    color: var(--wp--preset--color--navy);
    margin-top: 0;
    margin-bottom: 0;
}
.belgeluk-section-title.on-dark {
    color: var(--wp--preset--color--white);
}
.belgeluk-section-title.on-dark em {
    color: var(--wp--preset--color--gold);
}

.belgeluk-section-subtitle {
    font-family: var(--wp--preset--font-family--sans);
    font-weight: 700;
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--wp--preset--color--navy);
    margin-top: 0;
    margin-bottom: 0.5rem;
}

/* Kopregel met toelichting ernaast: 0.7fr / 1.3fr uit het voorstel. */
.belgeluk-section-head {
    display: grid;
    grid-template-columns: 0.7fr 1.3fr;
    gap: 60px;
    margin-bottom: 52px;
}
.belgeluk-section-head > :last-child {
    align-self: end;
    font-size: 1.12rem;
    color: var(--tekst-zacht);
    margin: 0;
}
.belgeluk-section-head .belgeluk-eyebrow {
    margin-bottom: 8px;
}
.belgeluk-section-head.on-dark > :last-child {
    color: #d7e2e8;
}

.belgeluk-bigquote {
    font-family: var(--wp--preset--font-family--sans);
    font-weight: 400;
    font-size: clamp(2rem, 4vw, 4rem);
    line-height: 1.14;
    letter-spacing: -0.03em;
    color: var(--wp--preset--color--navy);
    margin-top: 0;
    margin-bottom: 0;
}
.belgeluk-bigquote.on-dark {
    color: var(--wp--preset--color--white);
}
.belgeluk-bigquote strong {
    color: var(--wp--preset--color--gold);
}

/* ----------------------------------------------------------
   SECTIES & ACHTERGRONDEN
   ---------------------------------------------------------- */

.belgeluk-section {
    padding-top: var(--sectie);
    padding-bottom: var(--sectie);
}

/* Elke sectie is even breed, zodat de linkerrand op de hele site op dezelfde
   plek ligt. Lopende tekst krijgt een leeslengte, maar blijft links uitgelijnd:
   de constrained layout van WordPress centreert namelijk alles wat smaller is
   dan de kolom, en dan zou een alinea gaan zweven ten opzichte van de kop. */
.belgeluk-section > p:not(.belgeluk-eyebrow):not(.has-text-align-center),
.belgeluk-section > ul:not(.belgeluk-rules):not(.belgeluk-stappen),
.belgeluk-section > ol:not(.belgeluk-rules):not(.belgeluk-stappen) {
    max-width: 68ch;
    /* Begin op precies dezelfde plek als de kolom, zodat de tekst uitlijnt met
       de kop erboven in plaats van gecentreerd te gaan zweven. */
    margin-left: calc((100% - min(1180px, 100% - 40px)) / 2) !important;
    margin-right: auto !important;
}

/* De gouden band is bewust gecentreerd; die uitzondering hoort na de regel
   hierboven te staan om hem te kunnen overschrijven. */
.belgeluk-cta-band > p {
    max-width: 760px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.belgeluk-bg-cream { background: var(--wp--preset--color--cream); }
.belgeluk-bg-blue-soft { background: #f8faf9; }
.belgeluk-bg-gold-soft { background: var(--wp--preset--color--gold-soft); }
.belgeluk-bg-light { background: var(--wp--preset--color--blue-soft); }

/* Donkere sectie: navy met wit-gouden typografie. */
.belgeluk-bg-night {
    background: var(--wp--preset--color--navy);
    color: #dce6eb;
}
.belgeluk-bg-night h1,
.belgeluk-bg-night h2,
.belgeluk-bg-night h3,
.belgeluk-bg-night h4 {
    color: var(--wp--preset--color--white);
}
.belgeluk-bg-night p,
.belgeluk-bg-night li {
    color: #cfdbe4;
}
.belgeluk-bg-night strong {
    color: var(--wp--preset--color--white);
}
.belgeluk-bg-night a:not(.wp-element-button):not(.belgeluk-amount-card) {
    color: var(--wp--preset--color--gold);
}

/* Hero-achtergrond uit het voorstel. */
.belgeluk-bg-aura,
.belgeluk-hero {
    background:
        radial-gradient(circle at 80% 20%, rgba(232, 184, 74, 0.35), transparent 32%),
        linear-gradient(135deg, var(--bg-cream), #fff 52%, var(--bg-light));
}
.belgeluk-hero {
    position: relative;
    overflow: hidden;
}

/* ----------------------------------------------------------
   HEADER / NAVIGATIE
   ---------------------------------------------------------- */

.belgeluk-header {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid var(--lijn);
    transition: box-shadow var(--t-fast) ease;
}

/* De blur zit bewust op een pseudo-element en niet op de header zelf.
   backdrop-filter maakt van een element een containing block voor kinderen met
   position: fixed. Op de header zou het uitklapmenu op mobiel daardoor worden
   afgeknipt tot de hoogte van de balk, waarna er nog maar één link zichtbaar is. */
.belgeluk-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Staat het menu open, dan moet het boven de cookiemelding uit kunnen komen. */
body.has-modal-open .belgeluk-header {
    z-index: 100000;
}
.belgeluk-header.is-stuck {
    box-shadow: 0 6px 24px rgba(23, 50, 77, 0.08);
}

.belgeluk-brand-link {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
}
.belgeluk-brand-name {
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 1.05rem;
    color: var(--wp--preset--color--navy);
}
.belgeluk-logo-mark {
    display: inline-block;
    max-width: 100%;
    height: auto;
}
.belgeluk-logo-header { display: block; }

.belgeluk-header .wp-block-navigation {
    font-size: 0.92rem;
    font-weight: 600;
}
.belgeluk-header .wp-block-navigation .wp-block-navigation-item__content {
    color: #425261;
    text-decoration: none;
    padding: 0.35rem 0;
    transition: color var(--t-fast) ease;
}
.belgeluk-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.belgeluk-header .wp-block-navigation .current-menu-item .wp-block-navigation-item__content {
    color: var(--wp--preset--color--navy);
}

.belgeluk-header-cta .wp-block-button__link {
    background: var(--wp--preset--color--navy);
    color: var(--wp--preset--color--white);
    border-radius: var(--r-pill);
    padding: 0.75rem 1.15rem;
    font-weight: 800;
    font-size: 0.92rem;
}
.belgeluk-header-cta .wp-block-button__link:hover {
    background: var(--wp--preset--color--navy-deep);
}

@media (max-width: 600px) {
    .belgeluk-header-cta { display: none; }
}

/* ----------------------------------------------------------
   ORBIT — kern met satellieten (hero)
   ---------------------------------------------------------- */

.belgeluk-orbit {
    position: relative;
    min-height: 510px;
    width: 100%;
}
.belgeluk-orbit .ring {
    position: absolute;
    inset: 55px;
    border: 2px dashed rgba(76, 122, 104, 0.45);
    border-radius: 50%;
}
.belgeluk-orbit .core {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: var(--wp--preset--color--navy);
    color: #fff;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 30px;
    box-shadow: var(--schaduw);
    font-weight: 900;
    font-size: 1.3rem;
    line-height: 1.3;
}
.belgeluk-orbit .node {
    position: absolute;
    width: 150px;
    padding: 16px;
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--schaduw);
    text-align: center;
    font-weight: 800;
    font-size: 0.92rem;
    line-height: 1.3;
    color: var(--wp--preset--color--navy);
}
.belgeluk-orbit .n1 { top: 0; left: 50%; transform: translateX(-50%); }
.belgeluk-orbit .n2 { right: 0; top: 34%; }
.belgeluk-orbit .n3 { right: 12%; bottom: 0; }
.belgeluk-orbit .n4 { left: 12%; bottom: 0; }
.belgeluk-orbit .n5 { left: 0; top: 34%; }

/* De orbit heeft ruimte nodig: de kern is 210px en de knooppunten 150px, dus de
   kolom moet minstens ~510px breed blijven. Daaronder stapelt de hero al, in
   plaats van pas op het standaard kolom-breekpunt van WordPress (782px). */
@media (max-width: 1150px) {
    .belgeluk-hero .wp-block-columns {
        flex-direction: column;
        /* Gestapeld zet WordPress align-items op center. In kolomrichting laat
           dat een kind naar zijn eigen inhoudsbreedte krimpen, en de orbit heeft
           alleen absoluut gepositioneerde inhoud: die zou naar 0 klappen. */
        align-items: stretch;
    }
    .belgeluk-hero .wp-block-column {
        flex-basis: auto !important;
        width: 100%;
    }
    .belgeluk-orbit {
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
    }
}
@media (max-width: 900px) {
    .belgeluk-orbit { min-height: 470px; }
}
/* Op een telefoon past de cirkel niet: de kern en de knooppunten zouden elkaar
   sowieso overlappen, hoe klein we ze ook maken. Daar wordt het een gestapelde
   opsomming, met de kern bovenaan. */
@media (max-width: 600px) {
    .belgeluk-orbit {
        position: static;
        min-height: 0;
        max-width: none;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.7rem;
        align-items: stretch;
    }
    .belgeluk-orbit .ring {
        display: none;
    }
    .belgeluk-orbit .core,
    .belgeluk-orbit .node {
        position: static;
        inset: auto;
        transform: none;
    }
    .belgeluk-orbit .core {
        grid-column: 1 / -1;
        justify-self: center;
        width: 200px;
        height: 200px;
        margin-bottom: 0.6rem;
    }
    .belgeluk-orbit .node {
        width: 100%;
        display: grid;
        place-items: center;
        min-height: 62px;
        font-size: 0.85rem;
    }
    /* De langste omschrijving krijgt de volle breedte. */
    .belgeluk-orbit .n5 {
        grid-column: 1 / -1;
    }
}

/* ----------------------------------------------------------
   KAARTEN
   ---------------------------------------------------------- */

.belgeluk-card,
.belgeluk-pillar {
    border: 1px solid var(--lijn);
    border-radius: var(--r-lg);
    padding: 28px;
    background: #fff;
    box-shadow: var(--schaduw-zacht);
    height: 100%;
    transition: transform var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.belgeluk-card:hover,
.belgeluk-pillar:hover {
    transform: translateY(-3px);
    box-shadow: var(--schaduw);
}
.belgeluk-card h3,
.belgeluk-pillar h3 {
    margin: 0 0 10px;
    color: var(--wp--preset--color--navy);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.belgeluk-card p,
.belgeluk-pillar p {
    color: #586772;
    margin: 0;
}
.belgeluk-card p + p,
.belgeluk-pillar p + p {
    margin-top: 0.75rem;
}

/* Genummerd blokje linksboven op een kaart. */
.belgeluk-card .icon,
.belgeluk-pillar .num {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: var(--r-sm);
    background: var(--wp--preset--color--cream);
    margin-bottom: 18px;
    font-weight: 900;
    font-style: normal;
    color: var(--groen-tekst);
    font-size: 1rem;
}
.belgeluk-pillar.is-accent {
    border-color: rgba(232, 184, 74, 0.55);
    background: linear-gradient(180deg, rgba(232, 184, 74, 0.09), #fff 55%);
}
.belgeluk-pillar.is-accent .num {
    background: var(--wp--preset--color--gold);
    color: var(--wp--preset--color--navy);
}

/* Verhaalkaart in de archieven. */
.belgeluk-verhaal-card {
    border: 1px solid var(--lijn);
    border-radius: var(--r-lg);
    padding: 26px;
    background: #fff;
    box-shadow: var(--schaduw-zacht);
    transition: transform var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.belgeluk-verhaal-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--schaduw);
}
.belgeluk-verhaal-card .wp-block-post-title {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0.5rem 0;
}
.belgeluk-verhaal-card .wp-block-post-title a {
    text-decoration: none;
    color: var(--wp--preset--color--navy);
}
.belgeluk-verhaal-card .wp-block-post-terms {
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 0.75rem;
    color: var(--groen-tekst);
}

/* ----------------------------------------------------------
   VLIEGWIEL — genummerde stappen met pijlen
   ---------------------------------------------------------- */

.belgeluk-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}
.belgeluk-steps .step {
    background: #fff;
    border-radius: 22px;
    padding: 24px;
    position: relative;
    min-height: 230px;
    box-shadow: var(--schaduw-zacht);
}
.belgeluk-steps .step b {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--wp--preset--color--gold);
    margin-bottom: 28px;
    line-height: 1;
}
.belgeluk-steps .step h3 {
    color: var(--wp--preset--color--navy);
    margin: 0 0 10px;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.belgeluk-steps .step p {
    margin: 0;
    color: #586772;
    font-size: 0.98rem;
}
/* Pijl tussen de stappen, als vorm in plaats van als teken: zo leest een
   schermlezer er geen losse '→' voor. */
.belgeluk-steps .step:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -13px;
    top: 48%;
    width: 11px;
    height: 11px;
    border-top: 2px solid var(--wp--preset--color--green);
    border-right: 2px solid var(--wp--preset--color--green);
    transform: rotate(45deg);
    z-index: 2;
}

@media (max-width: 900px) {
    .belgeluk-steps { grid-template-columns: 1fr 1fr; }
    .belgeluk-steps .step { min-height: 0; }
    .belgeluk-steps .step::after { display: none !important; }
}
@media (max-width: 600px) {
    .belgeluk-steps { grid-template-columns: 1fr; }
}

/* Genummerde stappenlijst (shortcode belgeluk_stappenplan). */
.belgeluk-stappen {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
    counter-reset: stap;
    display: grid;
    gap: 1rem;
}
.belgeluk-stappen > li {
    counter-increment: stap;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.1rem;
    align-items: start;
    background: #fff;
    border: 1px solid var(--lijn);
    border-radius: var(--r-md);
    padding: 1.2rem 1.4rem;
    box-shadow: var(--schaduw-zacht);
}
.belgeluk-stappen > li::before {
    content: counter(stap);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--wp--preset--color--gold);
    color: var(--wp--preset--color--navy);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 0.95rem;
}
.belgeluk-stappen > li strong {
    color: var(--wp--preset--color--navy);
}

/* ----------------------------------------------------------
   REGELS — genummerde lijst, donker of licht
   ---------------------------------------------------------- */

.belgeluk-rules {
    list-style: none;
    padding: 0;
    margin: 2.5rem 0 0;
    counter-reset: rule;
    display: grid;
    gap: 1.25rem;
}
.belgeluk-rules > li {
    counter-increment: rule;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.25rem;
    align-items: baseline;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 1.08rem;
    line-height: 1.55;
    color: #cfdbe4;
}
.belgeluk-rules > li:last-child { border-bottom: none; }
.belgeluk-rules > li::before {
    content: counter(rule, decimal-leading-zero);
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--wp--preset--color--gold);
    min-width: 2rem;
}
.belgeluk-rules > li strong { color: var(--wp--preset--color--white); }

.belgeluk-rules.on-light > li {
    color: var(--tekst-zacht);
    border-bottom-color: var(--lijn);
}
.belgeluk-rules.on-light > li strong {
    color: var(--wp--preset--color--navy);
}

/* ----------------------------------------------------------
   SPLIT — twee panelen naast elkaar
   ---------------------------------------------------------- */

.belgeluk-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}
.belgeluk-panel {
    border-radius: var(--r-xl);
    padding: 34px;
}
.belgeluk-panel h3 {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    margin: 0 0 1rem;
}
.belgeluk-panel ul { padding-left: 20px; margin: 0; }
.belgeluk-panel li { margin: 10px 0; }
.belgeluk-panel.dark {
    background: var(--wp--preset--color--navy);
    color: #dce6eb;
}
.belgeluk-panel.dark h3 { color: #fff; }
.belgeluk-panel.green {
    background: #44695a;
    color: #ffffff;
}
.belgeluk-panel.green h3 { color: #fff; }

@media (max-width: 900px) {
    .belgeluk-split { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------
   IMPACT — cijfers
   ---------------------------------------------------------- */

.belgeluk-metrics-bg {
    background: linear-gradient(135deg, var(--bg-navy), #244c69);
    color: #fff;
}
.belgeluk-metrics-bg h1,
.belgeluk-metrics-bg h2,
.belgeluk-metrics-bg h3 { color: #fff; }

.belgeluk-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.belgeluk-metric {
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.07);
}
/* Met een cijfer: groot en goud. */
.belgeluk-metric .num {
    display: block;
    font-size: 2.7rem;
    font-weight: 900;
    color: var(--wp--preset--color--gold);
    line-height: 1.1;
}
/* De eenheid direct onder het cijfer: '12 partners'. */
.belgeluk-metric .label {
    display: block;
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.3;
    color: var(--wp--preset--color--white);
}

/* Zonder cijfer: de categorie draagt de tegel. */
.belgeluk-metric strong {
    display: block;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--wp--preset--color--gold);
    line-height: 1.2;
    letter-spacing: -0.02em;
}
.belgeluk-metric small {
    display: block;
    margin-top: 0.35rem;
    color: #d7e2e8;
    font-size: 0.95rem;
    line-height: 1.45;
}
.belgeluk-metrics-note {
    margin-top: 20px;
    color: #c8d5dd;
    font-size: 0.9rem;
}

@media (max-width: 900px) {
    .belgeluk-metric-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .belgeluk-metric-grid { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------
   ERKENNING — badges
   ---------------------------------------------------------- */

.belgeluk-badges {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}
.belgeluk-badge {
    border-radius: var(--r-md);
    padding: 24px;
    background: var(--wp--preset--color--blue-soft);
    text-align: center;
}
.belgeluk-badge .dot {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--wp--preset--color--gold);
    display: grid;
    place-items: center;
    margin: 0 auto;
    color: var(--wp--preset--color--navy);
    font-weight: 900;
    font-size: 1.25rem;
}
.belgeluk-badge strong {
    display: block;
    color: var(--wp--preset--color--navy);
    margin-top: 10px;
    font-weight: 700;
}
.belgeluk-badge span {
    display: block;
    font-size: 0.9rem;
    color: var(--tekst-zacht);
    margin-top: 2px;
}

@media (max-width: 900px) {
    .belgeluk-badges { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .belgeluk-badges { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------
   CTA-BAND — goud
   ---------------------------------------------------------- */

.belgeluk-cta-band {
    background: var(--wp--preset--color--gold);
    color: var(--wp--preset--color--navy);
    text-align: center;
}
.belgeluk-cta-band h2 {
    font-size: clamp(2.2rem, 5vw, 4.4rem);
    line-height: 0.99;
    letter-spacing: -0.045em;
    font-weight: 700;
    margin: 0 auto 24px;
    max-width: 950px;
    color: var(--wp--preset--color--navy);
}
.belgeluk-cta-band p {
    font-size: 1.18rem;
    max-width: 760px;
    margin: 0 auto 30px;
    color: #43382a;
}
.belgeluk-cta-band .wp-block-button__link {
    background: var(--wp--preset--color--navy);
    color: #fff;
}
.belgeluk-cta-band .wp-block-button__link:hover {
    background: var(--wp--preset--color--navy-deep);
}

/* ----------------------------------------------------------
   CALLOUT
   ---------------------------------------------------------- */

.belgeluk-callout {
    background: #fff;
    border: 1px solid var(--lijn);
    border-radius: var(--r-xl);
    padding: clamp(1.75rem, 4vw, 2.75rem);
    box-shadow: var(--schaduw-zacht);
}

/* ----------------------------------------------------------
   DONATIEBEDRAGEN
   ---------------------------------------------------------- */

.belgeluk-amounts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1rem;
    margin-top: 2.5rem;
}
.belgeluk-amount-card {
    display: block;
    padding: 1.5rem 1.25rem;
    border-radius: var(--r-md);
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.07);
    text-decoration: none;
    text-align: center;
    transition: transform var(--t-fast) ease, background var(--t-fast) ease;
}
.belgeluk-amount-card:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.13);
}
.belgeluk-amount-card .amount {
    display: block;
    font-size: 1.9rem;
    font-weight: 900;
    color: var(--wp--preset--color--gold);
}
.belgeluk-amount-card .desc {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.9rem;
    color: #d7e2e8;
}

/* ----------------------------------------------------------
   TABELLEN, BESTUUR, FAQ, PARTNERS
   ---------------------------------------------------------- */

.belgeluk-anbi-table,
.belgeluk-anbi table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid var(--lijn);
    border-radius: var(--r-md);
    overflow: hidden;
}
.belgeluk-anbi-table td,
.belgeluk-anbi table td {
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--lijn);
    vertical-align: top;
}
.belgeluk-anbi-table tr:last-child td,
.belgeluk-anbi table tr:last-child td {
    border-bottom: none;
}

.belgeluk-bestuur-lid {
    background: #fff;
    border: 1px solid var(--lijn);
    border-radius: var(--r-lg);
    padding: 1.75rem;
    box-shadow: var(--schaduw-zacht);
}

.belgeluk-faq details {
    background: #fff;
    border: 1px solid var(--lijn);
    border-radius: var(--r-md);
    padding: 1.1rem 1.35rem;
    margin-bottom: 0.75rem;
    box-shadow: var(--schaduw-zacht);
}
.belgeluk-faq summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--wp--preset--color--navy);
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}
.belgeluk-faq summary::-webkit-details-marker { display: none; }
.belgeluk-faq summary::after {
    content: '+';
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--groen-tekst);
    line-height: 1;
}
.belgeluk-faq details[open] summary::after { content: '\2013'; }
.belgeluk-faq details > p,
.belgeluk-faq details > div {
    margin-top: 0.85rem;
    color: var(--tekst-zacht);
}

.belgeluk-partner-logos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1.5rem;
    align-items: center;
}
.belgeluk-partner-logos img {
    max-width: 100%;
    height: auto;
    filter: grayscale(1);
    opacity: 0.7;
    transition: filter var(--t-fast) ease, opacity var(--t-fast) ease;
}
.belgeluk-partner-logos img:hover {
    filter: none;
    opacity: 1;
}

/* ----------------------------------------------------------
   LINK MET PIJL
   ---------------------------------------------------------- */

.belgeluk-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    font-weight: 700;
    text-decoration: none;
    color: var(--groen-tekst);
    border-bottom: 2px solid rgba(76, 122, 104, 0.35);
    padding-bottom: 2px;
    transition: color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.belgeluk-link::after {
    content: '\2192';
    transition: transform var(--t-fast) ease;
}
.belgeluk-link:hover {
    color: var(--wp--preset--color--navy);
    border-color: var(--wp--preset--color--gold);
}
.belgeluk-link:hover::after { transform: translateX(3px); }

/* ----------------------------------------------------------
   BLOKSTIJLEN
   ---------------------------------------------------------- */

.wp-block-button.is-style-ghost .wp-block-button__link {
    background: transparent;
    color: var(--wp--preset--color--navy);
    border: 2px solid var(--wp--preset--color--navy);
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover {
    background: var(--wp--preset--color--navy);
    color: #fff;
}
.belgeluk-bg-night .wp-block-button.is-style-ghost .wp-block-button__link,
.belgeluk-metrics-bg .wp-block-button.is-style-ghost .wp-block-button__link {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.55);
}
.belgeluk-bg-night .wp-block-button.is-style-ghost .wp-block-button__link:hover,
.belgeluk-metrics-bg .wp-block-button.is-style-ghost .wp-block-button__link:hover {
    background: #fff;
    color: var(--wp--preset--color--navy);
}

.wp-block-button.is-style-soft .wp-block-button__link {
    background: var(--wp--preset--color--gold);
    color: var(--wp--preset--color--navy);
}
.wp-block-button.is-style-soft .wp-block-button__link:hover {
    background: #d9a933;
    color: var(--wp--preset--color--navy);
}

.wp-block-quote.is-style-tagline {
    border: none;
    border-left: 4px solid var(--wp--preset--color--green);
    padding: 1.5rem 1.75rem;
    background: var(--wp--preset--color--blue-soft);
    border-radius: var(--r-md);
}
.wp-block-quote.is-style-tagline p {
    font-size: 1.05rem;
    font-weight: 500;
    margin: 0;
}

ul.is-style-no-bullets {
    list-style: none;
    padding-left: 0;
}
ul.is-style-no-bullets li { margin-bottom: 0.4rem; }

/* ----------------------------------------------------------
   FORMULIEREN
   ---------------------------------------------------------- */

.belgeluk-form input[type="text"],
.belgeluk-form input[type="email"],
.belgeluk-form input[type="tel"],
.belgeluk-form input[type="number"],
.belgeluk-form select,
.belgeluk-form textarea {
    width: 100%;
    padding: 0.95em 1.1em;
    border: 1px solid var(--lijn-sterk);
    border-radius: var(--r-sm);
    background: #fff;
    font-family: var(--wp--preset--font-family--sans);
    font-size: 1rem;
    color: var(--wp--preset--color--dark);
    transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.belgeluk-form input:focus,
.belgeluk-form select:focus,
.belgeluk-form textarea:focus {
    outline: none;
    border-color: var(--wp--preset--color--green);
    box-shadow: 0 0 0 3px rgba(76, 122, 104, 0.18);
}
.belgeluk-form label {
    font-weight: 700;
    font-size: 0.92rem;
    display: block;
    margin-bottom: 0.4rem;
    color: var(--wp--preset--color--navy);
}
.belgeluk-form label span[aria-hidden] {
    color: var(--wp--preset--color--gold);
    margin-left: 0.15em;
}
.belgeluk-form button[type="submit"] {
    border: none;
    cursor: pointer;
    background: var(--wp--preset--color--navy);
    color: #fff;
    border-radius: var(--r-pill);
    padding: 0.95rem 1.7rem;
    font-weight: 800;
    font-size: 1rem;
    font-family: inherit;
    transition: background var(--t-fast) ease;
}
.belgeluk-form button[type="submit"]:hover {
    background: var(--wp--preset--color--navy-deep);
}

.belgeluk-formulier-privacy {
    font-size: 0.85rem;
    color: var(--tekst-zacht);
    margin-top: 1.25rem;
}

/* Nieuwsbrief: veld en knop naast elkaar. */
.belgeluk-newsletter-form {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 480px;
    margin: 0 auto;
}
.belgeluk-newsletter-form input[type="email"] {
    flex: 1 1 240px;
    padding: 0.95em 1.1em;
    border: 1px solid var(--lijn-sterk);
    border-radius: var(--r-pill);
    background: #fff;
    font-family: inherit;
    font-size: 1rem;
}
.belgeluk-newsletter-form input[type="email"]:focus {
    outline: none;
    border-color: var(--wp--preset--color--green);
    box-shadow: 0 0 0 3px rgba(76, 122, 104, 0.18);
}
.belgeluk-newsletter-form button {
    border: none;
    cursor: pointer;
    background: var(--wp--preset--color--navy);
    color: #fff;
    border-radius: var(--r-pill);
    padding: 0.95rem 1.7rem;
    font-weight: 800;
    font-family: inherit;
    font-size: 1rem;
}
.belgeluk-newsletter-form button:hover {
    background: var(--wp--preset--color--navy-deep);
}

/* Terugkoppeling na versturen. */
.belgeluk-aanmelding-melding {
    max-width: 520px;
    margin: 0 auto 1.25rem;
    padding: 0.9rem 1.15rem;
    border-radius: var(--r-sm);
    font-size: 0.98rem;
    text-align: center;
    font-weight: 600;
}
.belgeluk-aanmelding-melding.is-ok {
    background: rgba(76, 122, 104, 0.12);
    border: 1px solid rgba(76, 122, 104, 0.45);
    color: #24503f;
}
.belgeluk-aanmelding-melding.is-fout {
    background: rgba(196, 62, 48, 0.08);
    border: 1px solid rgba(196, 62, 48, 0.35);
    color: #8c2f24;
}

/* ----------------------------------------------------------
   COOKIEBANNER
   ---------------------------------------------------------- */

.belgeluk-cookiebanner {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 9999;
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    gap: 1.25rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border: 1px solid var(--lijn);
    border-radius: var(--r-md);
    background: #fff;
    box-shadow: var(--schaduw-diep);
    font-size: 0.9rem;
    line-height: 1.5;
}
.belgeluk-cookiebanner p { margin: 0; flex: 1 1 260px; }
.belgeluk-cookiebanner-knoppen { display: flex; gap: 0.5rem; flex: 0 0 auto; }
.belgeluk-cookiebanner button {
    font: inherit;
    font-weight: 800;
    padding: 0.6rem 1.2rem;
    border-radius: var(--r-pill);
    border: 2px solid var(--wp--preset--color--navy);
    background: var(--wp--preset--color--navy);
    color: #fff;
    cursor: pointer;
}
.belgeluk-cookiebanner button.is-ghost {
    background: transparent;
    color: var(--wp--preset--color--navy);
}
@media (max-width: 480px) {
    .belgeluk-cookiebanner { flex-direction: column; align-items: stretch; }
    .belgeluk-cookiebanner-knoppen button { flex: 1; }
}

/* ----------------------------------------------------------
   SOUNDWAVE — klein gouden accent
   ---------------------------------------------------------- */

@keyframes belgeluk-wave {
    0%, 100% { transform: scaleY(0.5); }
    50% { transform: scaleY(1); }
}
.belgeluk-soundwave {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
}
.belgeluk-soundwave span {
    display: block;
    width: 4px;
    border-radius: 2px;
    background: var(--wp--preset--color--gold);
    animation: belgeluk-wave 1.6s ease-in-out infinite;
}
.belgeluk-soundwave span:nth-child(1) { height: 14px; animation-delay: 0s; }
.belgeluk-soundwave span:nth-child(2) { height: 22px; animation-delay: 0.12s; }
.belgeluk-soundwave span:nth-child(3) { height: 32px; animation-delay: 0.24s; }
.belgeluk-soundwave span:nth-child(4) { height: 22px; animation-delay: 0.36s; }
.belgeluk-soundwave span:nth-child(5) { height: 14px; animation-delay: 0.48s; }
.belgeluk-soundwave.is-compact { height: 12px; gap: 4px; }
.belgeluk-soundwave.is-compact span { width: 3px; }
.belgeluk-soundwave.is-compact span:nth-child(1) { height: 6px; }
.belgeluk-soundwave.is-compact span:nth-child(2) { height: 10px; }
.belgeluk-soundwave.is-compact span:nth-child(3) { height: 12px; }
.belgeluk-soundwave.is-compact span:nth-child(4) { height: 10px; }
.belgeluk-soundwave.is-compact span:nth-child(5) { height: 6px; }

/* ----------------------------------------------------------
   SCROLL-ANIMATIE
   ---------------------------------------------------------- */

/* Alleen verbergen als JavaScript het ook weer kan tonen. Zonder JS (of als het
   script faalt) blijft de pagina gewoon leesbaar in plaats van leeg. */
.belgeluk-js .belgeluk-fade-up {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--t-slow) ease, transform var(--t-slow) ease;
}
.belgeluk-js .belgeluk-fade-up.is-visible {
    opacity: 1;
    transform: none;
}
.belgeluk-fade-up.delay-1 { transition-delay: 90ms; }
.belgeluk-fade-up.delay-2 { transition-delay: 180ms; }
.belgeluk-fade-up.delay-3 { transition-delay: 270ms; }
.belgeluk-fade-up.delay-4 { transition-delay: 360ms; }
.belgeluk-fade-up.delay-5 { transition-delay: 450ms; }

@media (prefers-reduced-motion: reduce) {
    .belgeluk-js .belgeluk-fade-up { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------
   PAGINA-RITME
   Pagina's die met een volle-breedte sectie beginnen brengen hun
   eigen ruimte mee. Platte tekstpagina's niet: die krijgen hier
   lucht onder de sticky header.
   ---------------------------------------------------------- */

.wp-block-post-content > *:first-child:not(.alignfull) {
    margin-top: 3.5rem;
}
.wp-block-post-content > *:last-child:not(.alignfull) {
    margin-bottom: 4.5rem;
}

/* Leesbare tekstkolom op lange documenten (privacy, beleidsplan, ANBI). */
.wp-block-post-content > p,
.wp-block-post-content > ul,
.wp-block-post-content > ol {
    max-width: 68ch;
}

/* ----------------------------------------------------------
   SKIP-LINK
   ---------------------------------------------------------- */

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    padding: 0.9rem 1.4rem;
    background: var(--wp--preset--color--navy);
    color: #fff;
    font-weight: 800;
    border-radius: 0 0 var(--r-sm) 0;
    text-decoration: none;
}
.skip-link:focus {
    left: 0;
}

/* ----------------------------------------------------------
   FOOTER
   ---------------------------------------------------------- */

.belgeluk-footer {
    background: var(--wp--preset--color--navy-deep);
    color: #dce6eb;
}
.belgeluk-footer h4 {
    color: #fff;
    font-size: 0.85rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 0.9rem;
}
.belgeluk-footer a {
    color: #dce6eb;
    text-decoration: none;
}
.belgeluk-footer a:hover {
    color: var(--wp--preset--color--gold);
    text-decoration: underline;
}
.belgeluk-footer .belgeluk-brand-name { color: #fff; }
.belgeluk-footer p,
.belgeluk-footer li { color: #a8bcc9; }
.belgeluk-footer .wp-block-separator {
    border-color: rgba(255, 255, 255, 0.14);
    opacity: 1;
}

/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 900px) {
    .belgeluk-section-head {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-bottom: 36px;
    }
}

@media (max-width: 782px) {
    .belgeluk-display { font-size: clamp(2.6rem, 11vw, 3.6rem); }
    .belgeluk-display-sm,
    .belgeluk-section-title { font-size: clamp(1.85rem, 7vw, 2.5rem); }
    .belgeluk-bigquote { font-size: clamp(1.7rem, 6.5vw, 2.4rem); }
    .belgeluk-panel { padding: 26px; }
    .belgeluk-card,
    .belgeluk-pillar { padding: 24px; }
}

/* ----------------------------------------------------------
   PRINT
   ---------------------------------------------------------- */

@media print {
    body { background: #fff; color: #000; }
    .belgeluk-header,
    .wp-block-navigation,
    .belgeluk-soundwave,
    .belgeluk-cookiebanner,
    .belgeluk-orbit { display: none; }
    .belgeluk-eyebrow:not(h1):not(h2):not(h3) { display: none; }
    .belgeluk-fade-up { opacity: 1; transform: none; }
}