/* ============================================================
   Rocking Up X-Mas — main.css
   Alle stijlen voor het custom WordPress thema
   ============================================================ */

/* DESIGN TOKENS
   Kerst-restyle (23 juli 2026, op verzoek van Hans): het kleurpalet is vervangen
   door een warmer, kerstachtig palet (Spruce/Pine/Brass/Cranberry/Eggnog/Snow).
   De variabelenamen (--groen, --goud, --rood, --crème...) zijn bewust ongewijzigd
   gelaten — die worden op tientallen plekken in de templates gebruikt, en alleen
   de waarde hier aanpassen laat de nieuwe kleuren overal automatisch doorkomen.
   De nieuwe --spruce/--pine/--brass/--cranberry/--eggnog/--snow zijn aliassen met
   de vriendelijkere naam, voor gebruik in nieuwe onderdelen (placeholders,
   postzegel-badge, decoratieve iconen). */
:root {
    --groen:        #2F3F2C;   /* Spruce */
    --groen-warm:   #5C6B3F;   /* Pine */
    --rood:         #7A1228;   /* Cranberry */
    --goud:         #C2954E;   /* Brass */
    --donker:       #242018;
    --crème:        #FAF6ED;   /* Snow */
    --crème-warm:   #E6DBC0;   /* Eggnog */
    --grijs:        #7C7562;
    --grijs-licht:  #EDE7D9;
    --wit:          #FFFFFF;

    --spruce:     var(--groen);
    --pine:       var(--groen-warm);
    --brass:      var(--goud);
    --cranberry:  var(--rood);
    --eggnog:     var(--crème-warm);
    --snow:       var(--crème);

    /* Lichter gemaakt op 18 aug 2026, op verzoek van Hans: "ik hoor steeds dat
       hij zo donker is". Gecheckt met de WCAG-contrastformule voordat ik iets
       aanpaste: alle stops hadden nog ruim (5.3–12×) meer contrast dan de
       wettelijke AA-norm (4.5) nodig heeft tegen witte tekst, dus was er
       ruimte om lichter te maken zonder leesbaarheid in te leveren. Was:
       #1D2A1B 0%, #2F3F2C 40%, #5C6B3F 70%, #2F3F2C 100%. */
    --groen-grad:   linear-gradient(135deg, #2A3B25 0%, #3D5136 40%, #63713F 70%, #3D5136 100%);
    --rood-grad:    linear-gradient(135deg, #4A0A18 0%, #7A1228 45%, #93233B 100%);
    --goud-grad:    linear-gradient(135deg, #8A6530 0%, #C2954E 50%, #D9B274 100%);

    /* Rondere, warmere vormtaal: hoeken merkbaar ronder dan de vorige, zakelijkere versie */
    --radius:       16px;
    --radius-lg:    26px;
    --schaduw:      0 2px 12px rgba(0,0,0,0.08);
    --schaduw-lg:   0 8px 32px rgba(0,0,0,0.14);

    --font-display: 'Fraunces', Georgia, serif;
    --font-body:    'Nunito', system-ui, sans-serif;
    --font-script:  'Caveat', cursive;
}

/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    color: var(--donker);
    background: var(--wit);
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font-family: var(--font-body); cursor: pointer; }

/* TOEGANKELIJKHEID */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--groen);
    color: var(--wit);
    padding: 8px 16px;
    z-index: 9999;
    font-weight: 700;
    transition: top 0.2s;
}
.skip-link:focus { top: 0; }

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

/* ============================================================
   TYPOGRAFIE
   ============================================================ */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.2;
}
h1 { font-size: clamp(28px, 5vw, 48px); }
h2 { font-size: clamp(22px, 3.5vw, 36px); }
h3 { font-size: clamp(18px, 2.5vw, 24px); }
h4 { font-size: 18px; }

/* Vrije tekst uit de editor (WordPress the_content()): alinea's, koppen en
   lijstjes die Hans of een locatiemanager zelf typt. Door de universele
   reset hierboven staat er standaard NERGENS ruimte tussen -- ook koppen
   niet, die plakten direct tegen de vorige alinea aan (gemeld door Hans,
   8 september 2026, bij een nieuwsbericht). De klasse wp-content stond al
   los in een paar templates (page.php, page-partners.php, index.php e.d.)
   maar had nog geen eigen stijl; deze regels gelden voor al die plekken in
   één keer, plus overal waar 'm is toegevoegd. */
.wp-content > * + * { margin-top: 20px; }
.wp-content h2,
.wp-content h3,
.wp-content h4 { margin-top: 44px; margin-bottom: 4px; }
.wp-content > *:first-child { margin-top: 0; }
.wp-content ul,
.wp-content ol { padding-left: 24px; }
.wp-content li + li { margin-top: 8px; }
.wp-content a { text-decoration: underline; }

.section-label {
    /* Fraunces i.p.v. Nunito op verzoek van Hans (18 aug 2026) — alleen hier:
       dit kicker-labeltje is kort en decoratief (geen lopende tekst, knop of
       formulier), dus geen leesbaarheidsrisico zoals bij body-tekst. Geeft
       net dat beetje extra sierlijkheid zonder de knoppen/nav/forms aan te
       raken. */
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--goud);
    margin-bottom: 8px;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: 50px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
    white-space: nowrap;
}
.btn:hover { opacity: 0.88; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--green   { background: var(--groen); color: var(--wit); }
.btn--gold    { background: var(--goud); color: var(--donker); }

/* Op verzoek van Hans (23 juli 2026): de daadwerkelijke "Doneer nu/voor X"-knoppen
   iets opvallender maken — extra modifier-class i.p.v. .btn--gold/.btn--green zelf
   aanpassen, want die twee worden ook voor andere acties gebruikt (bijv. "Stuur
   bericht"), en die hoeven niet extra op te vallen. Ronde 2 (zelfde dag): nog
   opvallender — dieper/rijker goud i.p.v. het gemiddelde brass, en witte tekst
   i.p.v. donkere, voor veel meer contrast. Komt na .btn--gold/.btn--green in het
   bestand, dus wint bij gelijke specificiteit zonder dat !important nodig is. */
.btn--donate {
    background: linear-gradient(135deg, #9C6B0E 0%, #E0A736 55%, #C2851A 100%);
    color: var(--wit);
    font-weight: 900;
    box-shadow: 0 6px 20px rgba(156,107,14,0.55), 0 2px 6px rgba(0,0,0,0.2);
}
.btn--donate:hover {
    box-shadow: 0 10px 30px rgba(156,107,14,0.7), 0 4px 10px rgba(0,0,0,0.25);
    transform: translateY(-2px) scale(1.03);
}
.btn--outline {
    background: transparent;
    color: var(--wit);
    border: 2px solid rgba(255,255,255,0.6);
}
/* Zelfde outline-knop, maar leesbaar op een licht/crème vlak in plaats van een
   donkere hero (29 aug 2026, Aanvrager worden paginakeuze: wit-op-wit was
   onleesbaar op section--crème). */
.btn--outline-groen {
    background: transparent;
    color: var(--groen);
    border: 2px solid var(--groen);
}
.btn--ghost {
    background: rgba(255,255,255,0.12);
    color: var(--wit);
    border: 2px solid rgba(255,255,255,0.35);
}
/* ============================================================
   NAVIGATIE
   ============================================================ */
.site-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 9999;
    /* Op verzoek van Hans (23 juli 2026): header in een van de robijnrode kleuren
       uit het palet (Cranberry-verloop), navigatie in een gedempte eggnog-tint
       i.p.v. de vorige witte balk met donkere tekst (puur wit stond te fel, en
       moest bovendien duidelijk anders zijn dan het goud van de Doneer-knop). */
    background: var(--rood-grad);
    border-bottom: 3px solid var(--goud);
    box-shadow: var(--schaduw);
}
/* Compenseer voor de WordPress-adminbalk (alleen zichtbaar voor ingelogde beheerders) */
body.admin-bar .site-header { top: 32px !important; }
@media screen and (max-width: 782px) {
    body.admin-bar .site-header { top: 46px !important; }
}

/* Op verzoek van Hans (9 sept 2026): kerst-countdown in het midden van de
   navigatiebalk, zonder de logo/links te kunnen overlappen. Daarom grid
   i.p.v. flex: .nav__brand en de hamburger/links krijgen elk hun eigen
   auto-brede kolom (net als voorheen bij flex), de countdown krijgt de
   kolom ertussen (1fr) en staat daarbinnen gecentreerd -- dus gecentreerd
   in de vrije ruimte tussen logo en menu, nooit overlappend. Als de
   countdown op smallere schermen verdwijnt (zie media query) blijft die
   middelste kolom gewoon leeg, de rest van de navigatie verschuift niet. */
.nav {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    padding: 0 32px;
    height: 70px;
    max-width: 1400px;
    margin: 0 auto;
    gap: 16px;
}

.nav__brand {
    display: flex;
    align-items: center;
    min-width: 0;
}

/* Kerst-countdown (9 sept 2026, op verzoek van Hans: "nog subtieler, in onze
   stijl, tel dagen en uren af"). Verplaatst uit een eigen balk onder de
   header naar een klein badge-je in de nav, direct naast het logo -- een
   halfdoorzichtig vlakje op de bestaande rode header i.p.v. een tweede kleur,
   met het goud uit de huisstijl voor het boompje. Alleen zichtbaar op ruime
   schermen (zie media query) zodat de rest van de navigatie nooit krap komt
   te staan. tabular-nums zodat de cijfers niet springen bij het tikken. */
.nav-kerst {
    display: flex;
    align-items: center;
    justify-self: center;
    gap: 5px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: var(--crème-warm);
    opacity: 0.85;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
    position: relative;
}
.nav-kerst span:first-child { font-size: 13px; }
@media (max-width: 1100px) {
    .nav-kerst { display: none; }
}

/* Sneeuwglinstering (10 sept 2026, op verzoek van Hans: mag iets meer
   aanwezig zijn dan het eerste voorstel). Vier gouden puntjes die om beurten
   kort oplichten in de badge, als licht dat op sneeuw valt. Positie in
   procenten zodat het blijft kloppen ook al verandert de breedte van de
   badge (dagen -> uren, minder cijfers). */
.nav-kerst__spark {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--goud);
    opacity: 0;
    pointer-events: none;
}
.nav-kerst__spark:nth-of-type(1) { top: 3px;  left: 12%; animation: nav-kerst-glinster 2.2s ease-in-out infinite; }
.nav-kerst__spark:nth-of-type(2) { top: 60%;  left: 38%; animation: nav-kerst-glinster 2.2s ease-in-out infinite 0.55s; }
.nav-kerst__spark:nth-of-type(3) { top: 8%;   left: 64%; animation: nav-kerst-glinster 2.2s ease-in-out infinite 1.1s; }
.nav-kerst__spark:nth-of-type(4) { top: 55%;  left: 88%; animation: nav-kerst-glinster 2.2s ease-in-out infinite 1.65s; }
@keyframes nav-kerst-glinster {
    0%, 100% { opacity: 0; transform: scale(0.5); }
    50%      { opacity: 1; transform: scale(1.3); }
}
@media (prefers-reduced-motion: reduce) {
    .nav-kerst__spark { animation: none; opacity: 0; }
}

.nav__logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}
.nav__logo img { height: 44px; width: auto; max-width: 160px; object-fit: contain; }
.site-logo-text {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 900;
    color: var(--wit);
}
.site-logo-text strong { color: var(--goud); }

.nav__links {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 0;
}
.nav__links a {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    color: var(--eggnog);
    border-radius: var(--radius);
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.nav__links a:not(.nav__social-link):hover,
.nav__links a:not(.nav__social-link)[aria-current="page"] {
    background: rgba(255,255,255,0.18);
    color: var(--goud);
}
/* De Locaties-dropdown is en blijft een los wit paneel (zie .nav__submenu
   verderop) — de links daarbinnen dus terug naar donkere tekst + de oude lichte
   hover, anders staat er straks witte/gouden tekst op een wit vlak. !important
   omdat de algemene .nav__links-regels hierboven anders qua specificiteit winnen. */
.nav__submenu li a {
    color: var(--donker) !important;
}
.nav__submenu li a:not(.nav__social-link):hover,
.nav__submenu li a:not(.nav__social-link)[aria-current="page"] {
    background: var(--grijs-licht) !important;
    color: var(--groen) !important;
}
/* De social-iconen hebben hun eigen kleur (merk-kleur) via .nav__social-link--*,
   dus deze uitsluiting hierboven is voldoende — geen extra hover-kleur nodig. */
/* Eén CTA-kleur voor 'Doneer nu' door de hele site (was hier rood, elders goud).
   Ronde 2 (23 juli 2026, zelfde dag): nog opvallender — dieper/rijker goudverloop
   i.p.v. de vlakke brass-kleur, en witte tekst i.p.v. donkere voor veel meer
   contrast. Dit is de ene Doneer-knop die altijd zichtbaar blijft (ook tijdens
   scrollen), dus die mag het meest opvallen. */
.nav__cta {
    background: linear-gradient(135deg, #9C6B0E 0%, #E0A736 55%, #C2851A 100%) !important;
    color: var(--wit) !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.35);
    border-radius: 50px !important;
    padding: 10px 20px !important;
    margin-left: 8px;
    font-weight: 900 !important;
    box-shadow: 0 4px 18px rgba(156,107,14,0.65) !important;
    animation: rux-nav-cta-pulse 2.8s ease-in-out infinite;
}
.nav__cta:hover {
    background: linear-gradient(135deg, #7E5808 0%, #C2851A 55%, #9C6B0E 100%) !important;
    transform: translateY(-1px) scale(1.04);
    animation-play-state: paused;
}
@keyframes rux-nav-cta-pulse {
    0%, 100% { box-shadow: 0 4px 18px rgba(156,107,14,0.5); }
    50%      { box-shadow: 0 4px 26px rgba(156,107,14,0.9); }
}
@media (prefers-reduced-motion: reduce) {
    .nav__cta { animation: none; }
}

/* Locaties dropdown */
.nav__dropdown { position: relative; }
.nav__caret { font-size: 11px; margin-left: 4px; }
.nav__submenu {
    list-style: none;
    position: absolute;
    top: 100%;
    left: 0;
    /* Zelfde crème-tint als "Onze locaties" i.p.v. puur wit (30 juli 2026, op
       verzoek van Hans). */
    background: var(--crème);
    border-radius: var(--radius);
    box-shadow: var(--schaduw);
    min-width: 200px;
    padding: 6px;
    margin: 4px 0 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
    z-index: 100;
}
.nav__dropdown:hover .nav__submenu,
.nav__dropdown:focus-within .nav__submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.nav__submenu li a {
    display: block;
    padding: 9px 12px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

/* Social iconen in hoofdmenu — zelfde stijl (formaat, vorm, brand-kleuren) als de footer,
   met wat extra ruimte voor de "Doneer nu"-knop erna zodat die niet wegvalt. */
/* Taal-switcher NL/EN — rond vlaggetje i.p.v. tekst (30 juli 2026, op verzoek
   van Hans: "vind ik leuker dan tekst"), zelfde ronde-iconen-stijl als de
   social-links ernaast zodat het in de rij past. */
.nav__lang-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid rgba(230,219,192,0.5);
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
    margin-right: 6px;
    transition: transform 0.15s, border-color 0.15s;
    overflow: hidden;
}
.nav__lang-switch:hover { transform: scale(1.1); border-color: var(--eggnog); }
.nav__lang-switch svg { flex-shrink: 0; width: 26px; height: 26px; }

.nav__hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    padding: 8px;
}
.nav__hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--wit);
    border-radius: 2px;
    transition: all 0.3s;
}

/* ============================================================
   SECTIES
   ============================================================ */
.section {
    padding: 64px 40px;
}
.section--crème  { background: var(--crème); }
.section--wit    { background: var(--wit); }

.section__inner {
    max-width: 1200px;
    margin: 0 auto;
}

/* PAGE HERO */
.page-hero {
    color: var(--wit);
    /* Was 72px boven/onder, later 52px (verzoek Hans, 18 aug 2026). Op
       verzoek van Hans (14 sept 2026) nog compacter: sinds de titel altijd
       op 1 regel staat (zie .page-hero h1 hieronder) oogde de oude padding
       te "pompeus" voor een kortere hero-inhoud. */
    padding: 40px 28px;
    text-align: center;
}
.page-hero .section-label { color: rgba(194,149,78,0.9); margin-bottom: 10px; }
.page-hero h1 {
    margin-bottom: 16px;
    /* Sinds 14 sept 2026 (op verzoek van Hans) staat "Rocking Up X-Mas
       <locatienaam>" altijd voluit en op 1 regel, ook bij lange namen
       zoals "Dijk en Waard" — eerder stond de locatienaam via een <br> in
       de template geforceerd op een eigen regel, dat is nu verwijderd.
       Zelfde bewezen techniek als .hero__titel (homepage hero) verderop in
       dit bestand: lettergrootte schaalt mee met de schermbreedte, met
       white-space:nowrap + ellipsis als vangnet zodat de titel nooit
       alsnog afbreekt of buiten de hero uitsteekt. */
    font-size: clamp(20px, 2.6vw, 30px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.page-hero p  {
    /* Iets kleiner en breder dan voorheen zodat de ondertitel op de
       meeste schermen ook op 1 regel past (verzoek Hans, 14 sept 2026).
       Bewust geen nowrap/ellipsis: dit is een lopende zin, geen titel, dus
       op erg smalle telefoonschermen mag hij alsnog netjes afbreken in
       plaats van afgekapt te worden. */
    font-size: clamp(15px, 1.6vw, 18px);
    opacity: 0.88;
    max-width: 720px;
    margin: 0 auto;
}

/* HOMEPAGE HERO — tekst en CTA's gecentreerd in het groene blok (7 augustus
   2026, op verzoek van Hans). Eerder (30 juli 2026) bewust links uitgelijnd
   gehouden op desktop, maar Hans wil nu juist dat alles — titel, subtekst,
   knoppen en de kleine vrijwilliger/pakket-linkjes — netjes gecentreerd
   staat, ook op desktop. De linkjes blijven wel klein/subtiel, die hoeven
   niet prominenter te worden, alleen mee te centreren. */
.hero__content {
    text-align: center;
    align-items: center;
}
.hero__btns {
    justify-content: center;
}
.hero__vrijw-link {
    text-align: center;
}

/* Subtekst iets breder laten lopen dan voorheen (was 480px), zodat de
   regelbreedte in de buurt komt van de titel erboven — met een klein beetje
   inspringen aan weerszijden i.p.v. een grote, ongelijke sprong tussen titel-
   en tekstbreedte. Knoppen iets groter (17px i.p.v. 15px) — bewust via
   font-size, niet via padding, zodat de padding exact hetzelfde blijft. */
.hero__sub {
    max-width: 540px;
}
.hero__btns .btn {
    font-size: 17px;
}

/* ============================================================
   KERST-RESTYLE — DECORATIEVE ELEMENTEN
   Script-accent, foto-placeholders en de postzegel/postmark-badge.
   Foto's zijn op verzoek van Hans (23 juli 2026) overal vervangen door
   placeholders — sfeerfoto's/actiedagfoto's, niet de persoonlijke team- en
   locatiemanagerfoto's, die blijven gewoon staan.
   ============================================================ */
.script-accent {
    font-family: var(--font-script);
    font-weight: 700;
    color: var(--brass);
    display: inline-block;
    transform: rotate(-3deg);
    font-size: 1.5em;
    line-height: 1;
}

.foto-placeholder {
    background: var(--eggnog);
    border: 2px dashed rgba(0,0,0,0.18);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--grijs);
    text-align: center;
    width: 100%;
    min-height: 100%;
}
.foto-placeholder svg { width: 40px; height: 40px; opacity: 0.6; }
.foto-placeholder span {
    font-size: 13px;
    font-weight: 700;
}
/* Postzegel/postmark-badge — decoratief vintage-kerstaccent */
.postmark-stamp {
    display: inline-block;
    color: rgba(255,255,255,0.85);
    flex-shrink: 0;
}
.postmark-stamp svg { display: block; width: 100%; height: 100%; }

/* Handgetekende lijn-iconen (eigen ontwerp) naast section-labels */
.section-label--met-icoon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.kerst-icoon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--cranberry); /* op verzoek van Hans: iets meer rood terug in de decoratieve accenten */
}
.kerst-icoon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Voordelen-kaarten (page-partners.php / page-en-partners.php), 29 aug 2026:
   .kerst-icoon is standaard een inline span van 22px -- hier gecentreerd
   boven de tekst en vergroot. */
.voordeel-icoon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--crème-warm);
}
.voordeel-icoon {
    display: block;
    width: 32px;
    height: 32px;
    color: var(--rood);
}

/* ============================================================
   LOCATIE KAARTEN
   ============================================================ */
.locaties-grid {
    /* Flexbox i.p.v. grid (13 sept 2026, op verzoek van Hans): met grid bleef een
       onvolledige laatste rij (bijv. 4 kaartjes in een 5-koloms grid) links
       uitgelijnd met een leeg gat rechts. flex-wrap + justify-content: center
       centreert de laatste rij automatisch, ook als het aantal locaties later
       weer verandert, zonder handmatige nth-child regels per locatieaantal. */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 32px;
}
.locaties-grid > .locatie-card {
    flex: 0 1 calc((100% - 4 * 12px) / 5);
}

/* Homepage locaties-sectie: op mobiel alleen een knop i.p.v. de volledige grid
   (op verzoek van Hans, 23 juli 2026) — zie front-page.php. */
.locaties-preview--mobiel { display: none; }
@media (max-width: 768px) {
    .locaties-preview--desktop { display: none !important; }
    .locaties-preview--mobiel { display: block !important; }
}
/* Op verzoek van Hans (23 juli 2026): zonder schaduw/pijltje was niet duidelijk
   dat dit een klikbare knop is (zag er als een vlak label uit) — nu met
   duidelijke drop-shadow, iets meer padding en een pijltje dat opschuift bij hover. */
.btn--locaties {
    gap: 10px;
    padding: 16px 28px !important;
    box-shadow: 0 6px 18px rgba(47,63,44,0.35), 0 2px 6px rgba(0,0,0,0.15);
}
.btn--locaties__pijl { transition: transform 0.2s; }
.btn--locaties:hover .btn--locaties__pijl { transform: translateX(4px); }
.btn--locaties:hover {
    box-shadow: 0 8px 22px rgba(47,63,44,0.42), 0 3px 8px rgba(0,0,0,0.18);
}

.locatie-card {
    display: block;
    text-decoration: none;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 5/3;
    position: relative;
    box-shadow: var(--schaduw);
    transition: transform 0.25s, box-shadow 0.25s;
}
.locatie-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--schaduw-lg);
}

.locatie-card__img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}
.locatie-card__foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.25s, filter 0.25s;
}
.locatie-card:hover .locatie-card__foto { transform: scale(1.05); }
/* Warme kleurbewerking (8 sept 2026, op verzoek van Hans), alleen op de
   automatische stadsfoto's (zie rux_locatie_card() in inc/helpers.php,
   klasse --stadsfoto): die zijn origineel op heel verschillende momenten
   en met verschillende luchten geschoten (van een koele blauwe zomerdag
   tot Amersfoort's gouden avondopname), waardoor ze naast elkaar niet als
   een geheel voelden en niks van kerstsfeer hadden. Bewust NIET op een
   locatie's eigen foto (vaak een groepsfoto met gezichten): dezelfde
   gouden waas op huidskleur oogt ongezond/geel, live getest en gezien op
   de Locaties overzichtspagina. Dit filter geeft de stadsfoto alvast een
   lichte, warmere basis, de echte kleurshift komt van de gouden waas
   hierna (.locatie-card__img--stadsfoto::after). */
.locatie-card__foto--stadsfoto {
    filter: sepia(0.25) saturate(1.1) brightness(0.95) contrast(1.05);
}
/* Eerst geprobeerd met alleen het filter hierboven en een zachte gloed in
   soft-light, dat bleek bij foto's met een koele blauwe lucht (Den Haag,
   Dijk en Waard, Zwolle) veel te subtiel om echt als warm/kerstsfeer over
   te komen. mix-blend-mode: color pakt de kleur (tint) van --goud en houdt
   de eigen lichtval van de foto aan, dat geeft een veel duidelijker,
   consistent goudwarm resultaat over alle stadsfoto's heen, ook bij een
   fel blauwe lucht. Live getest en zo goedgekeurd door Hans. */
.locatie-card__img--stadsfoto::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--goud);
    mix-blend-mode: color;
    opacity: 0.5;
    pointer-events: none;
}
.locatie-card__img--placeholder {
    background: var(--eggnog);
    display: flex;
    align-items: center;
    justify-content: center;
}
.locatie-card__img--placeholder .kerst-icoon {
    width: 30%;
    height: 30%;
    max-width: 44px;
    max-height: 44px;
    color: var(--cranberry);
    opacity: 0.6;
}

.locatie-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 50%, transparent 75%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 14px;
}

.locatie-card__naam {
    font-size: 16px;
    font-weight: 800;
    color: var(--wit);
    text-shadow: 0 1px 6px rgba(0,0,0,0.8);
    margin-bottom: 4px;
}

.locatie-card__meta {
    display: flex;
    gap: 10px;
    font-size: 12px;
    color: rgba(255,255,255,0.92);
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* Het groene "naampaneel" dat hier stond (30 juli 2026) is verwijderd op
   16 augustus 2026, op verzoek van Hans: "de groene waas over de locaties"
   moest weg — de locatiefoto's zijn nu altijd zichtbaar. Zie
   rux_locatie_card() in inc/helpers.php. De bijbehorende CSS-selectors
   (.locatie-card__naampaneel) zijn hier ook weggehaald, geen dode
   selectors laten staan die bij toekomstig onderhoud kunnen verwarren. */

/* Sfeerfoto's mini-slider op de locatiepagina (single-rux_locatie.php),
   20 augustus 2026. Deze twee regels ontbraken nog (bug gevonden 31
   augustus 2026, Hans: "doen de foto's ook sliden? op test23 niet"):
   zonder flex-shrink:0 kromp de flexbox alle foto's tot ze precies in de
   900px-brede sectie pasten -- dan is er niets meer om naar te scrollen
   en blijft het automatisch-doorschuiven (zie het script onderaan de
   sfeerfoto-sectie) onzichtbaar stilstaan. Vignet-gloed hetzelfde patroon
   als .hero-slider__vignet hierboven, op verzoek van Hans (30 aug 2026:
   "net zo sliden en sfeerbelichting als op homepage"). */
.locatie-sfeer-foto {
    flex-shrink: 0;
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    scroll-snap-align: start;
}
.locatie-sfeer-foto__vignet {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 78% 78% at center, transparent 55%, #fff 100%);
}
/* Scrollbar van de strip verbergen (31 aug 2026, op verzoek van Hans: "geen
   voortgangsbalk, geen puntjes, laat hem gewoon lekker sliden") -- puur
   optisch, scrollen/slepen en het auto-scroll-script blijven gewoon werken,
   alleen de balk zelf is onzichtbaar. */
.locatie-sfeer-strip {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.locatie-sfeer-strip::-webkit-scrollbar {
    display: none;
}

/* ============================================================
   FORMULIEREN
   ============================================================ */
.form-wrap {
    background: var(--wit);
    border-radius: var(--radius-lg);
    padding: 40px;
    box-shadow: var(--schaduw-lg);
}

.form-group {
    margin-bottom: 20px;
}

.form-group > label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--donker);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--grijs-licht);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--donker);
    background: var(--wit);
    transition: border-color 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--groen);
}

/* E-mailvalidatie — sitewide rode rand bij ongeldig/incompleet e-mailadres.
   De waarschuwingstekst zelf komt uit de native browser-validatiebubbel
   (via reportValidity()), niet uit een eigen DOM-element — dat laatste
   bleek flex-rijen zoals de nieuwsbrief-rij in de war te schoppen. */
input.rux-email-invalid,
.doneer-paytium input.rux-email-invalid {
    border-color: #7A1228 !important;
}

/* Zelfde rode rand, generiek herbruikbaar voor overige veld-validatie
   (14 sept 2026, Heemskerk aanmeldformulier dummy proof maken: telefoon/
   postcode/woonplaats/straat). Zie page-heemskerk-aanmelden.php. */
input.rux-veld-invalid,
select.rux-veld-invalid,
textarea.rux-veld-invalid {
    border-color: #7A1228 !important;
}

/* Verplichte keuzevraag (radiogroep) niet beantwoord (15 sept 2026, task
   generieke verplicht-veld-feedback op verzoek van Hans, zie ook
   page-heemskerk-aanmelden.php). Zelfde rode kleur als .rux-veld-invalid,
   maar op de hele groep i.p.v. losse radio-knoppen (anders oogt het raar). */
.form-radio-group.rux-groep-invalid .form-radio-option {
    border-color: #7A1228;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-success {
    display: none;
    background: rgba(47,63,44,0.1);
    border: 2px solid var(--groen);
    border-radius: var(--radius);
    padding: 20px 24px;
    color: var(--groen);
    font-weight: 700;
    text-align: center;
    margin-top: 20px;
}

/* Radiobutton-groepen (13 sept 2026, native Heemskerk-formulier): kaart-achtige
   opties i.p.v. losse radiobuttons met tekst ernaast, past bij de rest van de
   formulierstijl. :has() wordt breed ondersteund door alle moderne browsers. */
.form-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.form-radio-group--stacked {
    flex-direction: column;
}

.form-radio-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border: 2px solid var(--grijs-licht);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    color: var(--donker);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    flex: 1 1 0;
    background: var(--wit);
}

.form-radio-option:hover {
    border-color: var(--grijs);
}

.form-radio-option:has(input:checked) {
    border-color: var(--groen);
    background: rgba(47,63,44,0.06);
    box-shadow: 0 0 0 1px var(--groen) inset;
    font-weight: 700;
}

.form-radio-option input[type="radio"] {
    width: 20px;
    height: 20px;
    accent-color: var(--groen);
    flex-shrink: 0;
    margin: 0;
}

/* Dynamische kinderenlijst (14 sept 2026, Heemskerk-formulier): 1 kind
   zichtbaar bij binnenkomst, "+ Kind toevoegen" voegt een rij toe, elke
   rij heeft een eigen verwijderknop. Rijen komen onder elkaar te staan.
   Geen wijziging nodig aan de backend/Sheet: de JS vertaalt deze rijen bij
   versturen terug naar de bestaande jongenN_naam/leeftijd en
   meisjeN_naam/leeftijd velden (zie inc/heemskerk-intake.php).
   Max 6 jongens + 6 meisjes, zelfde grens als voorheen. */
.kind-rij {
    display: grid;
    grid-template-columns: 1fr 1.4fr 0.8fr auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 16px;
}

.kind-rij .form-group {
    margin-bottom: 0;
}

.kind-verwijder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 2px solid var(--grijs-licht);
    border-radius: var(--radius);
    background: var(--wit);
    color: var(--rood);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.kind-verwijder:hover {
    border-color: var(--rood);
    background: rgba(122,18,40,0.06);
}

.btn--kind-toevoegen {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: 2px dashed var(--grijs);
    border-radius: var(--radius);
    background: transparent;
    color: var(--groen);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    margin-bottom: 24px;
}

.btn--kind-toevoegen:hover {
    border-color: var(--groen);
    background: rgba(47,63,44,0.06);
}

/* ============================================================
   VRIJWILLIGER POPUP
   ============================================================ */
.vrijw-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    /* BUGFIX (23 juli 2026): stond op 9998, lager dan de sticky .site-header
       (z-index: 9999). Daardoor schoof de header-balk over de bovenkant van
       de popup heen en verdween het sluitkruisje (top:14px binnen
       .vrijw-popup__top) erachter — onzichtbaar én onklikbaar. Nu hoger dan
       de header, zelfde niveau als de nieuwsbrief-popup die dit al goed had. */
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}
.vrijw-overlay.is-open {
    opacity: 1;
    pointer-events: all;
}

.vrijw-popup {
    background: var(--wit);
    border-radius: var(--radius-lg);
    max-width: 480px;
    width: 90%;
    /* BUGFIX (23 juli 2026): was overflow:hidden zonder max-height, waardoor
       popups met veel inhoud (vrijwilliger-locatiekeuze, algemeen-contact
       'vragen'-formulier, stop-donatie) op kleinere/kortere schermen gewoon
       afgekapt werden — je zag niet alles en kon er ook niet in scrollen.
       Nu: de popup zelf wordt nooit hoger dan het scherm, en alleen de body
       scrollt (de header met het kruisje blijft altijd zichtbaar). */
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(20px);
    transition: transform 0.3s;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.vrijw-overlay.is-open .vrijw-popup { transform: translateY(0); }

.vrijw-popup__top {
    background: var(--groen-grad);
    padding: 32px;
    color: var(--wit);
    position: relative;
    text-align: center;
    flex-shrink: 0;
}
.vrijw-popup__top h3 { font-size: 24px; margin-bottom: 8px; }
.vrijw-popup__top p  { font-size: 15px; opacity: 0.85; }

.vrijw-popup__close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: rgba(255,255,255,0.15);
    border: none;
    color: var(--wit);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vrijw-popup__body { padding: 28px; overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; }

.vrijw-locatie-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}

.vrijw-locatie-btn {
    padding: 12px 14px;
    border: 2px solid var(--grijs-licht);
    border-radius: var(--radius);
    background: var(--wit);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
    color: var(--donker);
    transition: all 0.15s;
}
.vrijw-locatie-btn:hover,
.vrijw-locatie-btn.is-selected {
    border-color: var(--groen);
    background: rgba(47,63,44,0.06);
    color: var(--groen);
}

/* ============================================================
   STATS BALK
   ============================================================ */
.stats-balk {
    background: var(--goud-grad);
    padding: 16px 40px;
}
.stats-balk__inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
    color: var(--donker);
}
.stats-balk__getal {
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 900;
}
/* Labels + sublabel (7 augustus 2026, op verzoek van Hans: "cijfers zijn groot,
   maar wat ze betekenen nog erg klein/onduidelijk") — label duidelijk zichtbaarder
   (was 13px/0.75 opacity, bijna onleesbaar naast de grote cijfers) + een extra
   regel die in gewone taal zegt wat het cijfer precies voorstelt. */
.stats-balk__label { font-size: 14px; opacity: 1; font-weight: 700; margin-top: 4px; }
.stats-balk__sublabel { font-size: 12px; opacity: 0.7; font-weight: 500; margin-top: 2px; }
/* Iconen boven de cijfers: 31 aug 2026, op verzoek van Hans overgezet naar de
   standaard iconenstijl van de partnerpagina (.voordeel-icoon-wrap/.voordeel-icoon,
   zie hierboven), voor een consistente look sitebreed. De eerdere eigen
   .stats-balk__icoon opmaak (los, 36px, zonder cirkel) is hiermee vervallen. */
.stats-balk .voordeel-icoon-wrap { margin: 0 auto 10px; }

/* ============================================================
   BESTUUR
   ============================================================ */
.bestuur-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 40px;
}

.bestuur-card {
    background: var(--wit);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--schaduw);
}
.bestuur-card--vacature {
    border: 2px dashed var(--goud);
}

.bestuur-card__foto {
    /* Op verzoek van Hans (10 augustus 2026): was een vaste hoogte van 200px,
       veel korter dan de staande verhouding (3:4) waarin de bestuursfoto's
       worden aangeleverd. Daardoor moest ~47% van elke foto worden weg-
       gecrop't, en bij foto's die al vrij dicht ingezoomd zijn (weinig
       "lucht" rond het gezicht) bleef er simpelweg te weinig over om nog
       goed te positioneren — geen enkele boven/midden/onder-instelling
       kon dat compenseren. Aspect-ratio i.p.v. vaste hoogte laat het kader
       meeschalen met de kaartbreedte in dezelfde staande verhouding als de
       foto's, zodat er veel minder wordt weggesneden. */
    aspect-ratio: 3 / 4;
    background: var(--grijs-licht);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
    overflow: hidden;
}
.bestuur-card__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Op verzoek van Hans (10 augustus 2026): hoofden werden afgesneden
       omdat de crop standaard vanuit het midden ging bij rechtopstaande
       portretfoto's in dit vaste blok van 200px hoog. "center top" houdt
       het bovenste deel van de foto (waar het hoofd staat) altijd in
       beeld — werkt automatisch voor alle bestaande én nieuwe foto's. */
    object-position: center top;
}

.bestuur-card__info {
    padding: 20px;
}
.bestuur-card__info h4 { font-size: 17px; margin-bottom: 4px; }
.bestuur-card__functie {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--rood);
    margin-bottom: 8px;
}
.bestuur-card__info p { font-size: 14px; color: var(--grijs); }

/* ============================================================
   VACATURES
   ============================================================ */
.vacatures-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 36px;
}

.vacature-kaart {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--schaduw-lg);
    text-decoration: none;
    color: var(--donker);
    display: block;
    transition: transform 0.2s, box-shadow 0.2s;
}
.vacature-kaart:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.15);
}

.vacature-kaart__top {
    padding: 36px 32px;
    color: var(--wit);
    min-height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.vacature-kaart__emoji { font-size: 40px; margin-bottom: 12px; }
.vacature-kaart__top h3 { font-size: 22px; margin-bottom: 6px; }
.vacature-kaart__subtitel { opacity: 0.85; font-size: 15px; }
.vacature-kaart__tags { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.vacature-kaart__tag {
    background: rgba(255,255,255,0.2);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}
.vacature-kaart__tag--urgent { background: rgba(200,50,30,0.4); }

.vacature-kaart__body {
    padding: 24px 32px;
    background: var(--wit);
}
.vacature-kaart__body p { font-size: 14px; color: var(--grijs); margin-bottom: 16px; }
.vacature-kaart__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.vacature-kaart__footer span { font-size: 13px; color: var(--grijs); }
.vacature-kaart__meer { font-size: 14px; font-weight: 700; color: var(--groen); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
    /* Lichter gemaakt op 18 aug 2026, op verzoek van Hans — de footer was het
       donkerste vlak op de hele site (nog donkerder dan de hero's) en droeg
       het meest bij aan "de site oogt donker". Contrast tegen de 75%-witte
       tekst bleef ruim boven de AA-norm (7-9× i.p.v. de vereiste 4.5×) na het
       lichter maken. Was: #1e2a1e 0%, #242018 100%. */
    background: linear-gradient(180deg, #31432B 0%, #3A3122 100%);
    color: rgba(255,255,255,0.75);
}

.footer__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 40px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    gap: 24px;
    flex-wrap: wrap;
}

.footer__top-logo { display: flex; flex-direction: column; gap: 6px; }
/* Witte backing-box hier weg (28 juli 2026, op verzoek van Hans) — het logo dat
   hier gerenderd wordt is nu de eggnog-omgekleurde variant (zelfde als header),
   die leest prima op de donkere footer-gradient zonder witte box eronder. */
.footer__top-logo img { height: 52px; width: auto; max-width: 180px; object-fit: contain; }

/* Postzegel-stempel in de footer — decoratief kerst-accent (kerst-restyle 23 juli 2026).
   Op verzoek van Hans (23 juli 2026): was te klein en te vaag (0.5 opacity) om te
   herkennen — groter en beter zichtbaar gemaakt, zelfde aanpak als bij hero-stempel. */
.footer-stempel {
    position: absolute;
    left: 190px;
    top: -22px;
    width: 84px;
    height: 84px;
    color: rgba(255,255,255,0.8);
    transform: rotate(7deg);
    pointer-events: none;
}
@media (max-width: 900px) { .footer-stempel { display: none; } }
.footer__tagline { font-size: 13px; opacity: 0.65; }

.footer__top-btns { display: flex; gap: 12px; flex-wrap: wrap; }

.footer__mid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    padding: 40px;
    max-width: 1400px;
    margin: 0 auto;
}

.footer__col h4 {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.4);
    margin-bottom: 16px;
}

.footer__col a,
.footer__col p,
.footer__col button {
    font-size: 14px;
    color: rgba(255,255,255,0.65);
    display: block;
    margin-bottom: 7px;
    text-decoration: none;
    cursor: default;
}
.footer__col a { cursor: pointer; transition: color 0.2s; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.3); text-underline-offset: 2px; }
.footer__col a:hover { color: var(--wit); text-decoration-color: rgba(255,255,255,0.6); }
.footer__col button {
    cursor: pointer;
    transition: color 0.2s;
    background: none;
    border: none;
    padding: 0;
    width: 100%;
    text-align: left;
    text-decoration: underline;
    text-decoration-color: rgba(255,255,255,0.3);
    text-underline-offset: 2px;
    font-family: inherit;
}
.footer__col button:hover { color: var(--wit); text-decoration-color: rgba(255,255,255,0.6); }
.footer__col p { text-decoration: none; }

.footer__anbi { margin-top: 16px; }

.footer__social {
    display: flex;
    gap: 10px;
    padding: 0 40px 20px;
    justify-content: flex-end;
}
/* Zelfde stijl als de social-iconen in de header (.nav__social-link), op
   verzoek van Hans (30 juli 2026) — inclusief het gedimd-tot-hover-effect,
   zodat de iconen niet harder opvallen dan de echte footer-CTA's. */
.footer__social-link {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--grijs-licht);
    opacity: 0.55;
    transition: opacity 0.2s;
}
.footer__social-link:hover,
.footer__social-link:focus-visible {
    opacity: 1;
}
.footer__social-link svg { width: 18px; height: 18px; }
/* Wit vlak, logo in eigen merkkleur. */
.footer__social-link--linkedin  { color: #0A66C2; }
.footer__social-link--instagram { color: #E4405F; }
.footer__social-link--facebook  { color: #1877F2; }

.footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 40px;
    border-top: 1px solid rgba(255,255,255,0.08);
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    flex-wrap: wrap;
    gap: 8px;
}
.footer__bottom a { color: rgba(255,255,255,0.4); text-decoration: none; }
.footer__bottom a:hover { color: var(--wit); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .locaties-grid       { grid-template-columns: repeat(4, 1fr); }
    .locaties-grid > .locatie-card { flex-basis: calc((100% - 3 * 12px) / 4); }
    .bestuur-grid        { grid-template-columns: repeat(2, 1fr); }
    .nav__links a        { padding: 8px 10px; font-size: 13px; }
}

@media (max-width: 768px) {
    .nav__hamburger { display: flex; }
    .nav__links {
        display: none;
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        background: var(--wit);
        flex-direction: column;
        padding: 12px 0;
        border-bottom: 3px solid var(--groen-warm);
        box-shadow: var(--schaduw);
        z-index: 99;
        max-height: calc(100vh - 70px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .nav__links.is-open { display: flex; }
    .nav__links li { width: 100%; }
    /* Uitgeklapt mobiel menu is en blijft een wit paneel — links hier dus terug naar
       donkere tekst, ook al is de hoofdnav zelf nu rood/wit (zelfde reden als bij de
       Locaties-dropdown hierboven). */
    .nav__links a:not(.nav__social-link) { padding: 12px 24px; border-radius: 0; color: var(--donker); }
    .nav__links a:not(.nav__social-link):hover,
    .nav__links a:not(.nav__social-link)[aria-current="page"] {
        background: var(--grijs-licht);
        color: var(--groen);
    }
    .nav { position: relative; }

    .section { padding: 40px 20px; }
    .page-hero { padding: 48px 20px; }

    .locaties-grid         { grid-template-columns: repeat(2, 1fr); }
         .locaties-grid > .locatie-card { flex-basis: calc((100% - 1 * 12px) / 2); }
    .kerstpakket-grid      { grid-template-columns: 1fr 1fr !important; }
    .stats-balk__inner     { grid-template-columns: 1fr 1fr; }
    .bestuur-grid          { grid-template-columns: 1fr 1fr; }
    .vacatures-grid        { grid-template-columns: 1fr; }
    .form-row              { grid-template-columns: 1fr; }
    .footer__mid           { grid-template-columns: 1fr 1fr; padding: 28px 20px; gap: 24px; }
    .footer__top           { flex-direction: column; padding: 24px 20px; }
    .footer__top-btns      { flex-direction: column; width: 100%; }
    .footer__bottom        { flex-direction: column; gap: 6px; padding: 16px 20px; }
    .footer__social        { padding: 0 20px 16px; justify-content: flex-start; }
    .vrijw-locatie-grid    { grid-template-columns: 1fr 1fr; }

    /* Locaties-dropdown op mobiel: standaard ingeklapt, uitklappen via tik op het pijltje */
    .nav__submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: var(--grijs-licht);
        margin: 0;
        min-width: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.25s ease;
    }
    .nav__dropdown--open .nav__submenu { max-height: 600px; }
    .nav__submenu li a { padding: 10px 24px 10px 40px; font-weight: 700; }
    .nav__caret { cursor: pointer; padding: 6px 10px; margin: -6px -10px -6px 4px; display: inline-block; transition: transform 0.25s ease; }
    .nav__dropdown--open .nav__caret { transform: rotate(180deg); }

}

@media (max-width: 480px) {
    .locaties-grid     { grid-template-columns: 1fr 1fr; }
    .locaties-grid > .locatie-card { flex-basis: calc((100% - 1 * 12px) / 2); }
    .bestuur-grid      { grid-template-columns: 1fr; }
    .actiebalk__inner  { grid-template-columns: 1fr; }
    .stats-balk__inner { grid-template-columns: 1fr 1fr; }
    .footer__mid       { grid-template-columns: 1fr; }
}

/* "Andere manieren om te helpen" — duidelijk klikbaar maken */
.doneren-helpknop {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #2F3F2C;
    background: #EFF6EE;
    border: none;
    border-radius: 14px;
    padding: 12px 14px;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    font-family: inherit;
    transition: background 0.15s;
}
.doneren-helpknop:hover { background: #E0EEDF; }


/* ============================================================
   MOBILE FIRST — complete responsive CSS
   ============================================================ */

/* Basis — voorkom horizontaal scrollen zonder sticky te breken */
html { overflow-x: clip; }
body { max-width: 100%; }
*, *::before, *::after { box-sizing: border-box; }
img, video, iframe, embed { max-width: 100%; height: auto; display: block; }

/* Sticky header fix voor iOS Safari */
.site-header {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
}
.scroll-progress {
    position: absolute;
    bottom: -3px;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--groen), var(--goud));
    transition: width 0.1s linear;
    z-index: 10000;
}

/* ============================================================
   TABLET — max 1024px
   ============================================================ */
@media (max-width: 1024px) {
    .locaties-grid       { grid-template-columns: repeat(4, 1fr); }
    .locaties-grid > .locatie-card { flex-basis: calc((100% - 3 * 12px) / 4); }
    .bestuur-grid        { grid-template-columns: repeat(2, 1fr); }
    .nav__links a        { padding: 8px 10px; font-size: 13px; }
    .footer__mid         { grid-template-columns: 1fr 1fr; }
}

/* BUGFIX (23 juli 2026, op verzoek van Hans): de 1300px-hamburgerdrempel hierboven is
   verwijderd. Die was destijds nodig omdat de oude, zwaardere nav (met een dubbele
   "Doneer nu"-tekstlink + "Pakket aanvragen" erbij) niet meer paste op laptopschermen
   tussen ~770–1300px. Sinds de CTA-consolidatie (dezelfde dag) zijn die extra links uit
   de nav gehaald, dus de nav is nu weer smal genoeg om op laptopbreedtes gewoon volledig
   te tonen. De hamburger blijft vanzelfsprekend wél actief voor echt mobiel via de
   @media (max-width: 768px)-regel verderop. */

/* ============================================================
   MOBIEL — max 768px
   ============================================================ */
/* "Over deze locatie" op de locatiepagina: foto float-rechts, tekst loopt
   eromheen en vult door onder de foto bij meer tekst (verzoek Hans, 17 aug
   2026 — was een 2-koloms grid dat statisch oogde bij korte teksten). */
.locatie-over {
    margin-top: 20px;
    overflow: hidden; /* bevat de float, zodat volgende secties niet omhoog schuiven */
}
.locatie-over__foto {
    float: right;
    width: 42%;
    margin: 4px 0 24px 32px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4/3;
}
.locatie-over__tekst {
    color: var(--grijs);
    line-height: 1.8;
}
.locatie-over__cta {
    clear: both; /* altijd een schone regel onder tekst én foto, nooit ertussenin geklemd */
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 20px;
}

@media (max-width: 768px) {

    /* NAV — hamburger menu */
    .nav { padding: 0 16px; height: 60px; position: relative; }
    .nav__logo img { height: 36px; }
    .nav__hamburger { display: flex !important; }
    .nav__links {
        display: none;
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        background: var(--wit);
        flex-direction: column;
        padding: 8px 0;
        z-index: 9998;
        box-shadow: 0 8px 20px rgba(0,0,0,0.15);
        border-bottom: 3px solid var(--groen);
        max-height: calc(100vh - 60px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .nav__links.is-open { display: flex !important; }

    /* "Over deze locatie" — op mobiel geen float, gewoon foto boven de tekst */
    .locatie-over__foto { float: none; width: 100%; margin: 0 0 20px; }
    .nav__links li { width: 100%; }
    .nav__links a:not(.nav__social-link) { padding: 13px 20px; border-radius: 0; font-size: 15px; border-bottom: 1px solid rgba(0,0,0,0.06); display: block; }
    .nav__links a:not(.nav__social-link):last-child { border-bottom: none; }
    /* SECTIONS */
    .section { padding: 32px 16px; }
    .section__inner { padding: 0; }
    .page-hero { padding: 32px 16px; }
    .page-hero h1 { font-size: clamp(16px, 5vw, 26px); }
    .page-hero p { font-size: 15px; }

    /* HERO HOMEPAGE — op verzoek van Hans (23 juli 2026) ook op mobiel iets
       compacter, en de titel geforceerd op 1 regel (i.p.v. de eerdere 2 regels).
       Het lettertype schaalt mee met de schermbreedte (6.2vw) zodat de tekst altijd
       past — met white-space:nowrap + ellipsis als vangnet mocht iemand later via
       Instellingen een (veel) langere titel invullen.

       Update (18 aug 2026, op verzoek van Hans: "waarom doen we de foto's niet
       op de mobiele site?"): de foto/slider stond hier sindsdien met
       display:none uit — bedoeld om de hero compact te houden, niet omdat het
       technisch niet kon. Nu weer aangezet met een vaste hoogte (i.p.v. de
       hoogte die de foto op desktop via de 2-koloms-grid krijgt), zodat 'ie
       niet de hele pagina in beslag neemt op een telefoon. Staat onder de
       tekst (zelfde DOM-volgorde: boodschap eerst, foto als bekrachtiging
       erna). */
    .hero { grid-template-columns: 1fr !important; min-height: auto !important; }
    .hero__img { display: block !important; height: 220px !important; }
    .hero__content { padding: 28px 16px !important; gap: 12px !important; }
    .hero__titel {
        font-size: clamp(15px, calc(6.2vw - 2px), 32px) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .hero__sub { font-size: 15px !important; }
    .hero__btns { flex-direction: column !important; gap: 10px !important; }
    .hero__btns .btn { width: 100% !important; justify-content: center !important; padding: 14px 20px !important; font-size: 15px !important; }
    .hero__vrijw-link { text-align: center !important; }

    /* STATS */
    .stats-balk { padding: 24px 16px !important; }
    .stats-balk__inner { grid-template-columns: 1fr 1fr !important; gap: 16px !important; max-width: 100% !important; }
    .stats-balk__getal { font-size: 32px !important; }
    .stats-balk__label { font-size: 13px !important; }
    .stats-balk__sublabel { font-size: 11px !important; }

    /* LOCATIES GRID */
    .locaties-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
    .locaties-grid > .locatie-card { flex-basis: calc((100% - 1 * 8px) / 2) !important; }
    .locatie-card__naam { font-size: 13px !important; }
    .locatie-card__meta { font-size: 11px !important; gap: 6px !important; }

    /* CTA BANNER */
    .cta-banner { padding: 40px 16px !important; }
    .cta-banner__inner { flex-direction: column !important; text-align: center !important; gap: 20px !important; }
    .cta-banner__inner .btn { width: 100% !important; justify-content: center !important; }

    /* BESTUUR */
    .bestuur-grid { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
    /* Vaste hoogte hier verwijderd (10 augustus 2026) — zelfde reden als
       hierboven bij .bestuur-card__foto: de aspect-ratio: 3/4 schaalt vanzelf
       mee met de (op mobiel smallere) kaartbreedte, geen aparte mobiele
       hoogte-override meer nodig. */

    /* VACATURES */
    .vacatures-grid { grid-template-columns: 1fr !important; }

    /* FORMULIEREN */
    .form-row { grid-template-columns: 1fr !important; gap: 0 !important; }
    .form-wrap { padding: 24px 16px !important; }
    .form-radio-group { flex-direction: column !important; }

    /* VRIJWILLIGER POPUP */
    .vrijw-overlay { align-items: flex-end !important; }
    /* BUGFIX (23 juli 2026): max-height ook hier, anders duwt een lange
       locatielijst of formulier het kruisje/de titel boven het scherm uit
       op mobiel. 85vh ipv 90vh zodat het duidelijk een sheet blijft. */
    .vrijw-popup { width: 100% !important; max-width: 100% !important; max-height: 85vh !important; border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important; }
    .vrijw-locatie-grid { grid-template-columns: 1fr 1fr !important; }
    .vrijw-popup__top { padding: 24px 16px !important; }
    .vrijw-popup__body { padding: 20px 16px !important; }

    /* NIEUWSBRIEFBALK — voorkom horizontaal overlopen */
    .nieuwsbrief-balk { padding: 28px 16px !important; }
    .nieuwsbrief-emailrij { flex-wrap: wrap !important; }
    .nieuwsbrief-emailrij .nieuwsbrief-input { flex-basis: 100% !important; }
    .nieuwsbrief-emailrij button { flex: 1 !important; }

    /* DONEREN — "andere manieren om te helpen" knoppen */
    .doneren-helpknop { padding: 10px 12px !important; }

    /* NIEUWSBRIEF-POPUP — op mobiel een niet-blokkerend bannertje bovenin
       i.p.v. een volledig scherm vullende modal, zodat je door kan blijven lezen */
    #nieuwsbrief-popup {
        align-items: flex-start !important;
        background: transparent !important;
        padding: 8px !important;
        z-index: 10000 !important;
    }
    /* Compenseer voor de WP-adminbalk op mobiel, anders zit het kruisje van de
       popup verstopt achter de balk als je ingelogd bent */
    body.admin-bar #nieuwsbrief-popup { padding-top: 54px !important; }
    #nieuwsbrief-popup.is-open { pointer-events: none !important; }
    #nieuwsbrief-popup form#nieuwsbrief-popup-form > div:first-child { display: none !important; }
    #nieuwsbrief-popup .vrijw-popup__top p { display: none !important; }
    /* BUGFIX: dit moet gescoped zijn op .is-open — anders blijft de onzichtbare
       (opacity:0) popup-kaart altijd klikbaar liggen bovenop de hero, en vangt
       hij taps weg van bijv. de "Doneer nu"-knop, ook als de popup dicht is. */
    #nieuwsbrief-popup.is-open .vrijw-popup {
        pointer-events: auto;
        width: 100% !important;
        max-width: 100% !important;
        box-shadow: 0 8px 24px rgba(0,0,0,0.25) !important;
    }
    #nieuwsbrief-popup:not(.is-open) .vrijw-popup {
        pointer-events: none;
        width: 100% !important;
        max-width: 100% !important;
    }
    #nieuwsbrief-popup .vrijw-popup__top { padding: 16px 20px !important; }
    #nieuwsbrief-popup .nieuwsbrief-popup-emoji { display: none !important; }
    #nieuwsbrief-popup .vrijw-popup__top h3 { font-size: 17px !important; margin-bottom: 2px !important; }
    #nieuwsbrief-popup .vrijw-popup__top p { font-size: 13px !important; }
    #nieuwsbrief-popup .vrijw-popup__body { padding: 16px 20px !important; }

    /* FOOTER */
    .footer__top { flex-direction: column !important; padding: 24px 16px !important; gap: 16px !important; }
    .footer__top-btns { display: none !important; }
    .footer__mid { grid-template-columns: 1fr 1fr !important; padding: 24px 16px !important; gap: 20px !important; }
    .footer__bottom { flex-direction: column !important; text-align: center !important; padding: 16px !important; gap: 6px !important; }
    .footer__social { padding: 0 16px 16px !important; justify-content: center !important; }

    /* GRIDS IN PAGINA'S */
    .partners-grid { grid-template-columns: 1fr !important; gap: 24px !important; }

    /* TOUCH TARGETS */
    .btn, .freq-btn, .faq-vraag,
    .vrijw-locatie-btn { min-height: 44px; }
}

/* ============================================================
   KLEIN MOBIEL — max 480px
   ============================================================ */
@media (max-width: 480px) {

    /* NAV */
    .nav { padding: 0 12px; height: 56px; }
    .nav__links { top: 56px; }
    .nav__logo img { height: 32px; }

    /* SECTIES */
    .section { padding: 28px 14px; }
    .page-hero { padding: 26px 14px; }
    .page-hero h1 { font-size: clamp(14px, 6.5vw, 22px); }

    /* LOCATIES — 1 kolom */
    .locaties-grid { grid-template-columns: 1fr !important; }
    .locaties-grid > .locatie-card { flex-basis: 100% !important; }
    .locatie-card { aspect-ratio: 16/6 !important; }

    /* STATS — 2 kolommen */
    .stats-balk__inner { grid-template-columns: 1fr 1fr !important; }

    /* BESTUUR — 1 kolom */
    .bestuur-grid { grid-template-columns: 1fr !important; }

    /* FOOTER — 1 kolom */
    .footer__mid { grid-template-columns: 1fr !important; }

    /* DONEER PAGINA */
    .freq-btn { padding: 10px 20px !important; font-size: 14px !important; }
    .kerstpakket-grid { grid-template-columns: 1fr !important; }
    .doneer-hulp-grid { grid-template-columns: 1fr !important; }

    /* TITELS */
    h1 { font-size: clamp(22px, 6vw, 32px); }
    h2 { font-size: clamp(18px, 5vw, 26px); }
}

/* HOE HET WERKT — wave layout */
.hoe-wave-wrap { position: relative; padding: 0 20px; }
.hoe-wave-svg {
    position: absolute;
    top: 55px; left: 0; right: 0;
    width: 100%; height: 140px;
    pointer-events: none;
    z-index: 0;
}
.hoe-wave-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0;
    position: relative;
    z-index: 1;
}
.hoe-wave-stap { padding: 0 16px; }
.hoe-wave-stap--laag { padding-top: 100px; }
.hoe-nr {
    width: 40px; height: 40px;
    background: var(--rood);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    /* Op verzoek van Hans (23 juli 2026): de 2x2-grid liet de volgorde 1→2→3→4 niet
       goed zien op mobiel (geen zichtbare 'flow' zoals op desktop). Nu 1 kolom met
       een verbindingspijltje tussen de stappen, zodat de flow ook op mobiel klopt. */
    .hoe-wave-svg { display: none !important; }
    .hoe-wave-wrap { padding: 0 !important; }
    .hoe-wave-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
    .hoe-wave-stap--laag { padding-top: 0 !important; }
    .hoe-wave-stap {
        padding: 16px !important;
        background: var(--crème);
        border-radius: 16px;
        position: relative;
        margin-bottom: 32px;
    }
    .hoe-wave-stap:last-child { margin-bottom: 0; }
    .hoe-wave-stap:not(:last-child)::after {
        content: "↓";
        position: absolute;
        left: 50%;
        bottom: -28px;
        transform: translateX(-50%);
        font-size: 22px;
        font-weight: 900;
        color: var(--rood);
        line-height: 1;
    }
    .hoe-wave-stap > div:first-child { margin-bottom: 4px !important; font-size: 24px !important; }
    .hoe-wave-stap p { font-size: 14px !important; padding-top: 4px !important; }
    .hoe-nr { width: 32px !important; height: 32px !important; font-size: 16px !important; flex-shrink: 0; }
}

/* PARTNERS LOGO GRID */
.partners-logo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.partner-logo-item {
    background: var(--wit);
    border-radius: var(--radius);
    /* Op verzoek van Hans (23 juli 2026): blokken zijn groot genoeg, maar de
       logo's zelf oogden klein — padding verlaagd en max-height van het logo
       fors verhoogd zodat het logo het blok vult i.p.v. er verdwaald in te
       staan. min-height blijft ongewijzigd (blokgrootte zelf hoeft niet
       groter). */
    /* Update (9 sept 2026, op verzoek van Hans): logo's op de locatiepagina's
       oogden kleiner dan dezelfde logo's op de partnerpagina — max-height
       van het logo en de min-height van het blok gelijkgetrokken met
       .landelijke-partner-item hieronder (108px logo i.p.v. 86px), zodat
       een partnerlogo overal even groot oogt. */
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 132px;
    box-shadow: var(--schaduw);
    text-decoration: none;
    color: var(--donker);
    border: 2px solid transparent;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    cursor: pointer;
}
a.partner-logo-item:hover {
    border-color: var(--groen);
    box-shadow: 0 8px 24px rgba(47,63,44,0.15);
    transform: translateY(-2px);
}
.partner-logo-item img {
    max-height: 108px;
    max-width: 100%;
    object-fit: contain;
    display: block;
}
.partner-logo-item span {
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    color: var(--donker);
}
@media (max-width: 768px) {
    .partners-logo-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
}
@media (max-width: 480px) {
    .partners-logo-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Landelijke partners (algemene Partners-pagina) — groter logo, omschrijving eronder.
   Update (7 augustus 2026, "het is nu een beetje suf"): van een 4-koloms grid naar
   flex-wrap + center, zodat het met maar 1-2 partners niet oogt als een half-leeg
   raster met 3 lege vakken — de tegels krijgen nu een vaste breedte en centreren
   zichzelf, ongeacht hoeveel er zijn. */
.landelijke-partners-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-bottom: 24px;
}
.landelijke-partner-item {
    background: var(--wit);
    border-radius: var(--radius);
    /* Op verzoek van Hans (23 juli 2026): logo groter/blokvullend, zie ook
       .partner-logo-item hierboven — zelfde reden, padding iets verlaagd. */
    padding: 10px;
    width: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /* Update (9 sept 2026, op verzoek van Hans: "teksten altijd onderaan en
       in rechte lijn"): vaste hoogte i.p.v. min-height, zodat de omschrijving
       bij elke tegel op dezelfde y-positie staat, ongeacht logoformaat. */
    height: 170px;
    box-shadow: var(--schaduw);
    text-decoration: none;
    color: var(--donker);
    border: 2px solid transparent;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    cursor: pointer;
    font-family: inherit;
}
a.landelijke-partner-item:hover {
    border-color: var(--groen);
    box-shadow: 0 8px 24px rgba(47,63,44,0.15);
    transform: translateY(-2px);
}
.landelijke-partner-item--ghost {
    background: transparent;
    border: 2px dashed var(--grijs-licht,#ddd);
    box-shadow: none;
}
.landelijke-partner-item--ghost:hover {
    border-color: var(--groen);
    background: var(--wit);
    transform: translateY(-2px);
}
.landelijke-partner-item--ghost .partner-naam-fallback { color: var(--groen); }
.landelijke-partner-item img {
    max-height: 108px;
    max-width: 98%;
    width: auto;
    object-fit: contain;
    display: block;
    margin-bottom: 8px;
}
.landelijke-partner-item .partner-logo-wrap {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 0;
}
.landelijke-partner-item .partner-naam-fallback {
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    color: var(--donker);
    margin-bottom: 4px;
}
.landelijke-partner-item .partner-omschrijving {
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    color: var(--grijs);
    line-height: 1.3;
}
@media (max-width: 768px) {
    .landelijke-partners-grid { gap: 12px !important; }
    .landelijke-partner-item { width: calc(50% - 6px) !important; }
}
@media (max-width: 480px) {
    .landelijke-partner-item { width: 100% !important; }
}

/* Uitgelichte social posts op de partnerpagina (23 juli 2026) — zie
   rux_render_social_post() in inc/helpers.php. */
.social-post-embed { width: 100%; display: flex; justify-content: center; }
.social-post-embed iframe { max-width: 100%; border-radius: var(--radius); }
.social-post-embed blockquote.instagram-media { margin: 0 auto !important; }
.social-post-label {
    font-size: 13px;
    color: var(--grijs);
    text-align: center;
    margin-top: 12px;
}
.social-post-fallback {
    display: block;
    text-align: center;
    padding: 40px 20px;
    font-weight: 700;
    color: var(--groen);
    text-decoration: none;
}
/* Eigen compacte kaart met handmatig geüploade afbeelding (30 juli 2026, op
   verzoek van Hans) — i.p.v. het officiële embed-widget dat vooral naam/
   profielfoto/merk-chrome toont: hier staat de post-foto groot, met alleen
   het kleine platform-logo eronder. .social-post-card doet al de padding/
   achtergrond/schaduw; deze regels maken die padding weer 0 zodat de foto
   randloos vult. */
.social-post-custom {
    display: block;
    width: 100%;
    text-decoration: none;
    color: inherit;
}
.social-post-custom__img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.social-post-custom__voet {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
}
.social-post-custom__logo {
    flex-shrink: 0;
    display: flex;
}
.social-post-custom__tekst {
    font-size: 14px;
    font-weight: 600;
    color: var(--donker);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Nieuwsbrief-balk (donkere achtergrond) — placeholders anders onleesbaar */
.nieuwsbrief-input::placeholder {
    color: rgba(255,255,255,0.75);
    opacity: 1;
}
.nieuwsbrief-input:-ms-input-placeholder {
    color: rgba(255,255,255,0.75);
}

/* ============================================================
   INLINE 2/3-KOLOMS GRIDS IN PAGINATEMPLATES — STAPELEN OP MOBIEL
   Deze grids staan als inline style="" in de PHP-templates
   (over-ons, contact, partners, doneren, aanmelden, vacature,
   locatiepagina's) en hadden geen mobiele fallback: op smalle
   schermen bleven ze naast elkaar staan i.p.v. onder elkaar,
   waardoor tekst en foto's te smal en opgepropt werden.
   ============================================================ */
@media (max-width: 768px) {
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns:repeat(3,1fr)"],
    [style*="grid-template-columns:auto 1fr"] {
        grid-template-columns: 1fr !important;
    }
}