/*
Theme Name: SV AZ
Theme URI: https://svaz.072design.site
Author: 072design
Author URI: https://072design.nl
Description: Custom block-thema voor Supportersvereniging AZ. Gebouwd op het door het bestuur goedgekeurde ontwerp van 26-07-2026. Foto-eerst, rood markeerblok als accent, geen pagebuilder.
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: svaz
Tags: full-site-editing, blog, news, one-column, block-patterns
*/

/* ==========================================================================
   1. Aliassen op de theme.json-tokens
   Korte namen zodat de opmaak hieronder leesbaar blijft.
   ========================================================================== */
:root{
  --paper:var(--wp--preset--color--paper);
  --off:var(--wp--preset--color--off);
  --ink:var(--wp--preset--color--ink);
  --slate:var(--wp--preset--color--slate);
  --line:var(--wp--preset--color--line);
  --red:var(--wp--preset--color--red);
  --red-deep:var(--wp--preset--color--red-deep);
  --red-tint:var(--wp--preset--color--red-tint);
  --h:var(--wp--preset--font-family--oswald);
  --b:var(--wp--preset--font-family--public-sans);
  --r:6px;
  --pad:clamp(18px,4vw,40px);
}

html{scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}

/* WordPress zet met `:where(.wp-site-blocks) > *` een marge van blockGap tussen
   header, main en footer. Daardoor stond er een witregel tussen de header en de
   hero. De secties regelen hun eigen ruimte, dus hier weg. Deze selector wint
   sowieso, want `:where()` telt niet mee voor de specificiteit. */
.wp-site-blocks > *{margin-block-start:0;margin-block-end:0}

/* Zelfde verhaal binnen de rasters van dit thema. Die zijn `display:grid` en de
   marge van blockGap belandt dan op de tweede kolom, die daardoor een stuk
   lager begint dan de eerste. De ruimte tussen kolommen regelt `gap` al. */
.svaz-hero-grid > *,.svaz-lidband-in > *,.svaz-hist-in > *,.svaz-two > *,
.svaz-overgrid > *,.svaz-mag > *,.svaz-newsgrid > *,.svaz-kaarten > *,
.svaz-tiles > *,.svaz-bgrid > *,.svaz-fgrid > *,.svaz-quick-grid > *,
.svaz-phead-in > *,.svaz-slotband-in > *{margin-block:0}

/* Zichtbare focus op alles wat met toetsenbord bereikbaar is (WCAG 2.1 AA) */
:focus-visible{outline:3px solid var(--red);outline-offset:2px;border-radius:4px}
.svaz-hero :focus-visible,
.svaz-phead :focus-visible,
.svaz-hist :focus-visible,
.svaz-quick :focus-visible,
.wp-block-template-part footer :focus-visible{outline-color:#fff}

/* Overslaan-naar-inhoud */
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:#fff;
  padding:12px 20px;font-family:var(--h);text-transform:uppercase;letter-spacing:.04em}
.skip-link:focus{left:0}

/* ==========================================================================
   2. Herbruikbare merkelementen
   ========================================================================== */

/* Rood markeerblok. Het enige toegestane accent op donkere ondergrond;
   nooit een lichtere rood-variant verzinnen. */
.hl{background:var(--red);color:#fff;padding:2px 12px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* De achtergrond van een inline element volgt de fontmetriek van Oswald en niet
   de regelhoogte. Bij Oswald is dat vlak ongeveer 1,45em hoog, dus met een
   regelhoogte van 1,04 tot 1,25 valt het rode blok over de regel erboven. Waar
   een markering staat gaat de regelhoogte daarom omhoog. Dit wijkt af van het
   prototype, dat dezelfde overlap heeft; gemeld bij Martijn. */
.svaz-phead h1:has(.hl),
.svaz-lidband h2:has(.hl),
.svaz-hist blockquote:has(.hl),
.svaz-slotband blockquote:has(.hl),
.svaz-oproep-in h2:has(.hl){line-height:1.5}

/* Terugval voor browsers zonder :has(); dezelfde elementen, expliciet benoemd. */
.svaz-phead h1,.svaz-lidband h2,.svaz-hist blockquote,
.svaz-slotband blockquote,.svaz-oproep-in h2{line-height:1.5}

/* Merkteken: witte cirkel met de versimpelde molen uit het clublogo.
   Het enige icoon dat bij een sectiekop hoort. */
.azmark{display:inline-block;width:28px;height:28px;border-radius:50%;
  background:#fff url('assets/img/icoon-molen.png') center/auto 68% no-repeat;
  border:2px solid var(--ink);flex:0 0 auto;vertical-align:middle}
.azmark.lg{width:34px;height:34px}

.eyebrow{font-family:var(--h);text-transform:uppercase;letter-spacing:.14em;
  font-size:13px;color:var(--red);font-weight:600;
  display:inline-flex;align-items:center;gap:12px;margin-bottom:0}
.svaz-hero .eyebrow,.svaz-hist .eyebrow{color:#fff}

.crumb{font-family:var(--h);text-transform:uppercase;letter-spacing:.1em;font-size:13.5px;
  color:rgba(255,255,255,.8);font-weight:600;margin-bottom:12px;
  display:flex;align-items:center;gap:10px}
.crumb .red{color:#fff}
.crumb a{color:rgba(255,255,255,.8);text-decoration:none}
.crumb a:hover{color:#fff}

/* ==========================================================================
   3. Knoppen — varianten als blokstijlen
   ========================================================================== */
.wp-block-button__link{min-height:50px;display:inline-flex;align-items:center;
  justify-content:center;gap:9px;line-height:1.2;text-decoration:none}
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button__link.is-style-outline{background:transparent;color:var(--ink);
  border:1.5px solid var(--line)}
.wp-block-button.is-style-outline .wp-block-button__link:hover{border-color:var(--ink);
  background:transparent;color:var(--ink)}
.wp-block-button.is-style-light .wp-block-button__link{background:#fff;color:var(--ink)}
.wp-block-button.is-style-light .wp-block-button__link:hover{background:var(--off)}
.wp-block-button.is-style-dark .wp-block-button__link{background:var(--ink);color:#fff}
.wp-block-button.is-style-dark .wp-block-button__link:hover{background:#000}
.wp-block-button.is-style-onphoto .wp-block-button__link{background:rgba(255,255,255,.14);
  color:#fff;border:1.5px solid rgba(255,255,255,.55);backdrop-filter:blur(3px)}
.wp-block-button.is-style-onphoto .wp-block-button__link:hover{background:rgba(255,255,255,.24);
  border-color:#fff}
.wp-block-button.is-vol .wp-block-button__link{width:100%}

/* ==========================================================================
   4. Topbalk
   ========================================================================== */
.svaz-topbar{background:var(--red);color:#fff;font-size:14.5px}
.svaz-topbar a{color:rgba(255,255,255,.85);text-decoration:none}
.svaz-topbar a:hover{color:#fff;text-decoration:underline}
.svaz-topbar .svaz-topbar-in{display:flex;align-items:center;justify-content:space-between;
  gap:16px;min-height:42px}
.svaz-topbar .msg{font-weight:600;margin:0}
.svaz-topbar .services{display:flex;gap:22px;font-size:14px;margin:0;list-style:none}
@media(max-width:700px){
  .svaz-topbar .services{display:none}
  /* De regel breekt hier naar twee regels en vulde de balk precies, zonder
     ruimte boven of onder. Subtiele padding, verder blijft de balk zoals hij is. */
  .svaz-topbar .svaz-topbar-in{justify-content:center;text-align:center;
    padding-block:7px;min-height:0}
}

/* ==========================================================================
   5. Header — logo hangt over de onderrand
   ========================================================================== */
/* Bewust géén backdrop-filter hier. Dat maakt de header een containing block
   voor position:fixed, waardoor het mobiele overlay-menu binnen de header van
   80px hoog geklemd wordt en je alleen het eerste menu-item ziet. De header is
   met 97% dekking toch al vrijwel ondoorzichtig, dus visueel scheelt het niets. */
.svaz-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--line)}
.svaz-header .svaz-header-in{display:flex;align-items:center;justify-content:space-between;
  gap:20px;height:80px}

/* Het clublogo draagt de naam: groot, overhangend, geen tekst ernaast. */
.svaz-header .wp-block-site-logo{flex:0 0 auto}
.svaz-header .wp-block-site-logo img{width:104px;height:104px;background:#fff;
  border:1px solid var(--line);border-radius:50%;padding:8px;
  transform:translateY(26px);box-shadow:0 12px 26px -14px rgba(0,0,0,.4)}

.svaz-header .wp-block-navigation{gap:2px}
.svaz-header .wp-block-navigation .wp-block-navigation-item__content{font-family:var(--b);
  font-size:16px;font-weight:600;color:var(--ink);padding:9px 13px;border-radius:var(--r);
  text-decoration:none}
.svaz-header .wp-block-navigation .wp-block-navigation-item__content:hover{color:var(--red)}
/* Actief menu-item is rode tekst, nooit een streepje eronder. */
.svaz-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.svaz-header .wp-block-navigation .current_page_item > .wp-block-navigation-item__content,
.svaz-header .wp-block-navigation [aria-current="page"]{color:var(--red);text-decoration:none}

.svaz-header-cta{display:flex;align-items:center;gap:10px;flex:0 0 auto}

/* Tussen 981 en 1180px moeten zes menu-items, het logo van 104px en de rode
   knop samen op één regel passen. Zonder deze stap valt "Contact" op een
   tweede regel en scheurt de header open. Gevonden op 1024px. */
.svaz-header .wp-block-navigation__container{flex-wrap:nowrap}
.svaz-header .wp-block-navigation-item__content{white-space:nowrap}
@media(max-width:1180px){
  .svaz-header .svaz-header-in{gap:12px}
  .svaz-header .wp-block-navigation .wp-block-navigation-item__content{font-size:14.5px;padding:8px 9px}
  .svaz-header-cta .wp-block-button__link{padding:12px 16px;font-size:15px}
}

/* Het ontwerp klapt het menu dicht op 980px. Core doet dat standaard pas op
   600px, waardoor het volledige menu tussen 600 en 980 buiten beeld liep.
   Hier zetten we het breekpunt terug op dat van het ontwerp. */
/* De hero draagt de primaire actie. Deze knop is secundair, anders staan er
   twee gevulde rode knoppen met dezelfde tekst in één scherm. */
.svaz-header-cta .wp-block-button__link{background:transparent;color:var(--ink);
  border:1.5px solid var(--line);min-height:48px}
.svaz-header-cta .wp-block-button__link:hover{background:transparent;color:var(--ink);
  border-color:var(--ink)}

@media(max-width:980px){
  .svaz-header .wp-block-site-logo img{width:64px;height:64px;transform:translateY(10px);padding:5px}
  .svaz-header-cta .wp-block-button__link{padding:11px 16px;min-height:48px;font-size:15px}
  .svaz-header .wp-block-navigation__responsive-container:not(.is-menu-open){display:none}
  .svaz-header .wp-block-navigation__responsive-container-open:not(.always-shown){
    display:grid;place-items:center}
  /* De header verdeelt drie elementen, waardoor de menuknop midden in het
     scherm bleef hangen. Naar rechts duwen zodat hij naast "Word lid" staat. */
  .svaz-header .wp-block-navigation{margin-left:auto}
  .svaz-header .svaz-header-in{gap:10px}
}
/* Word lid blijft ook op een telefoon staan; het is de primaire actie.
   Alleen compacter, zodat logo, knop en menuknop naast elkaar passen. */
@media(max-width:560px){
  .svaz-header-cta .wp-block-button__link{padding:10px 13px;font-size:13.5px;letter-spacing:.02em;
    min-height:48px}
}
@media(max-width:360px){
  .svaz-header-cta .svaz-wordlid{display:none}
}

/* Mobiel overlay-menu.
   `body` ervoor omdat core zijn eigen padding op de menu-items zet en anders
   wint. De rijen zijn hier het tapdoel, dus royaal, met dezelfde dunne lijn en
   rode pijl als in het ontwerp. */
body .wp-block-navigation__responsive-container.is-menu-open{
  background:#fff;padding:0;align-items:flex-start}
body .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content{
  padding:0 0 32px;width:100%;align-items:stretch}
/* De ruimte boven de lijst zit hier en niet als padding op het omhulsel: core
   zet daar zijn eigen padding op en die wint. Dit houdt de lijst vrij van de
   sluitknop erboven. */
body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
  gap:0;width:100%;align-items:stretch;margin-top:42px}
body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{
  width:100%;border-bottom:1px solid var(--line)}
body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:first-child{
  border-top:1px solid var(--line)}
body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:19px var(--pad);min-height:62px;box-sizing:border-box;
  font-family:var(--b);font-weight:600;font-size:19px;color:var(--ink);
  border-radius:0;text-decoration:none}
body .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content::after{content:"\2192";color:var(--red);font-size:20px}
body .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content:hover{background:var(--off)}
body .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content{color:var(--red)}

/* "Word lid" onderaan het menu als knop. Staat alleen in het overlay, want in
   de balk zelf staat hij al. Zo eindigt het menu op de actie die telt in
   plaats van op lege ruimte. */
/* Geen eigen zijmarge: het omhulsel van core heeft die al. Zo staat de knop
   op dezelfde lijn als de menutekst en de scheidingslijnen. */
body .wp-block-navigation__responsive-container.is-menu-open .svaz-menu-cta{
  border-bottom:none;margin:26px 0 0;width:auto;align-self:stretch;flex:0 0 auto}
body .wp-block-navigation__responsive-container.is-menu-open
  .svaz-menu-cta .wp-block-navigation-item__content{
  background:var(--red);color:#fff;border-radius:var(--r);justify-content:center;
  width:100%;padding:16px 24px;min-height:52px;
  font-family:var(--h);text-transform:uppercase;letter-spacing:.04em;font-size:17px}
body .wp-block-navigation__responsive-container.is-menu-open
  .svaz-menu-cta .wp-block-navigation-item__content::after{content:none}
body .wp-block-navigation__responsive-container.is-menu-open
  .svaz-menu-cta .wp-block-navigation-item__content:hover{background:var(--red-deep);color:#fff}
/* Op desktop staat "Word lid" al als knop in de balk, dus daar hoort dit
   menu-item niet. Extra specificiteit omdat core met
   `.wp-block-navigation .wp-block-navigation-item` display:flex afdwingt. */
@media(min-width:981px){
  body .svaz-header .wp-block-navigation .svaz-menu-cta{display:none}
}

/* Zelfde vorm als de menuknop die het vervangt, zodat het als dezelfde knop
   leest. Boven de lijst, niet erdoorheen. */
.wp-block-navigation__responsive-container-close{color:var(--ink);top:20px;
  right:0;width:46px;height:46px;border:1.5px solid var(--line);
  border-radius:var(--r);display:grid;place-items:center;background:#fff}
.wp-block-navigation__responsive-container-close:hover{border-color:var(--ink)}
.wp-block-navigation__responsive-container-open{color:var(--ink)}
.wp-block-navigation__responsive-container-open{border:1.5px solid var(--line);
  border-radius:var(--r);width:46px;height:46px;display:grid;place-items:center}

/* ==========================================================================
   6. Hero — foto met inkt-overlay, agenda-kaart eroverheen
   ========================================================================== */
.svaz-hero{position:relative;color:#fff;isolation:isolate;
  background:url('assets/img/hero-tribune.jpg') center 30%/cover no-repeat}
.svaz-hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(13,14,17,.62) 0%,rgba(13,14,17,.14) 45%,rgba(13,14,17,.5) 100%),
    linear-gradient(78deg,rgba(13,14,17,.88) 0%,rgba(13,14,17,.6) 45%,rgba(13,14,17,.22) 100%)}
@media(max-width:700px){
  .svaz-hero::before{background:linear-gradient(180deg,rgba(13,14,17,.86) 0%,
    rgba(13,14,17,.74) 55%,rgba(13,14,17,.82) 100%)}
}
.svaz-hero .svaz-hero-grid{display:grid;grid-template-columns:1.5fr 1fr;
  gap:clamp(28px,5vw,72px);align-items:end;
  padding-block:clamp(64px,8vw,120px) clamp(52px,6vw,84px)}
@media(max-width:880px){
  .svaz-hero .svaz-hero-grid{grid-template-columns:1fr;align-items:start}
}
.svaz-hero h1{font-size:clamp(42px,6.2vw,78px);line-height:1.14;margin:16px 0 20px;color:#fff}
.svaz-hero h1 .hl{padding:1px 14px;display:inline-block;margin-top:4px}
.svaz-hero p:not(.eyebrow){font-size:clamp(18px,2vw,21px);color:rgba(255,255,255,.88);line-height:1.5;
  margin-bottom:28px;max-width:520px}
.svaz-hero .wp-block-buttons{gap:12px}
/* Op een telefoon allebei volledige breedte. Twee knoppen van 178 en 181px naast
   elkaar lezen als een fout; het onderscheid hoort in de kleur te zitten. */
@media(max-width:700px){
  .svaz-hero .wp-block-buttons{flex-direction:column;align-items:stretch;width:100%}
  .svaz-hero .wp-block-buttons .wp-block-button{width:100%}
  .svaz-hero .wp-block-buttons .wp-block-button__link{width:100%}
}

/* ==========================================================================
   7. Agenda-kaart (dynamisch blok svaz/agenda)
   ========================================================================== */
.svaz-agenda{background:#fff;color:var(--ink);border-radius:var(--r);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.55);overflow:hidden;position:relative;z-index:3}
.svaz-agenda .ag-h{display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--line)}
.svaz-agenda .ag-h h2{font-size:19px;display:flex;align-items:center;gap:10px;margin:0}
.svaz-agenda .ag-h a{font-family:var(--h);text-transform:uppercase;font-size:13px;
  letter-spacing:.05em;font-weight:600;color:var(--red);text-decoration:none}
.svaz-agenda .ev{display:flex;gap:14px;align-items:center;padding:13px 20px;
  border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.svaz-agenda .ev:hover{background:var(--off)}
.svaz-agenda .ev .dt{flex:0 0 52px;text-align:center;background:var(--red-tint);
  border-radius:var(--r);padding:6px 0}
.svaz-agenda .ev .dt .d{font-family:var(--h);font-size:22px;font-weight:700;
  color:var(--red-deep);line-height:1}
.svaz-agenda .ev .dt .m{font-family:var(--h);text-transform:uppercase;font-size:11px;
  color:var(--red-deep);letter-spacing:.05em}
.svaz-agenda .ev h3{font-size:17px;margin:0}
.svaz-agenda .ev p{font-size:14px;color:var(--slate);margin:0}
.svaz-agenda .ag-foot{padding:14px 20px}
.svaz-agenda .ag-leeg{padding:20px;color:var(--slate);font-size:16px}

/* ==========================================================================
   8. Snellinks-strip
   ========================================================================== */
.svaz-quick{background:var(--ink);color:#fff}
.svaz-quick .svaz-quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.svaz-quick a{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:19px 22px;border-right:1px solid #262932;font-family:var(--h);
  text-transform:uppercase;letter-spacing:.04em;font-weight:600;font-size:16px;
  transition:.12s;white-space:nowrap;color:#fff;text-decoration:none}
.svaz-quick a:last-child{border-right:none}
.svaz-quick a:hover{background:var(--red);color:#fff}
.svaz-quick a::after{content:"\2192";color:var(--red);font-size:18px;transition:.12s}
.svaz-quick a:hover::after{color:#fff}
@media(max-width:1000px){
  .svaz-quick .svaz-quick-grid{grid-template-columns:repeat(2,1fr)}
  .svaz-quick a:nth-child(2){border-right:none}
  .svaz-quick a:nth-child(1),.svaz-quick a:nth-child(2){border-bottom:1px solid #262932}
}
@media(max-width:420px){.svaz-quick a{white-space:normal;font-size:16px;padding:16px 18px}}

/* ==========================================================================
   9. Secties en sectiekoppen
   ========================================================================== */
/* Secties regelen hun eigen verticale ruimte met padding. De blockGap van
   WordPress zette daar nog een marge bovenop, wat tussen elke band een
   witregel gaf. Vandaar hier expliciet geen marge. */
.svaz-sec,
.svaz-hero,.svaz-quick,.svaz-lidband,.svaz-hist,.svaz-phead,
.svaz-slotband,.svaz-bestuur,.svaz-footer{margin-block:0}
.svaz-sec{padding-block:clamp(48px,6vw,80px)}
.svaz-sec.geen-top{padding-top:0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  margin-bottom:28px;flex-wrap:wrap}
.sec-head .l{display:flex;align-items:center;gap:14px}
.sec-head h2{font-size:clamp(26px,3.6vw,38px);margin:0}
.sec-head a{font-family:var(--h);text-transform:uppercase;font-weight:600;letter-spacing:.04em;
  color:var(--ink);font-size:15px;text-decoration:none}
.sec-head a:hover{color:var(--red)}
.sec-head a::after{content:" \2192";color:var(--red)}

/* ==========================================================================
   10. Nieuws — uitgelicht bericht + lijst (dynamisch blok svaz/nieuws)
   ========================================================================== */
.svaz-newsgrid{display:grid;grid-template-columns:1.55fr 1fr;gap:24px;align-items:stretch}
@media(max-width:880px){.svaz-newsgrid{grid-template-columns:1fr}}
.svaz-feature{position:relative;border-radius:var(--r);overflow:hidden;min-height:460px;
  display:flex;align-items:flex-end;color:#fff;text-decoration:none}
@media(max-width:880px){.svaz-feature{min-height:380px}}
.svaz-feature .fbg{position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform .35s}
.svaz-feature:hover .fbg{transform:scale(1.035)}
.svaz-feature .fshade{position:absolute;inset:0;
  background:linear-gradient(8deg,rgba(13,14,17,.86) 0%,rgba(13,14,17,.42) 46%,
    rgba(13,14,17,.05) 100%)}
.svaz-feature .fin{position:relative;z-index:2;padding:26px 28px}
.svaz-feature .cat{font-family:var(--h);text-transform:uppercase;font-size:12px;font-weight:600;
  letter-spacing:.05em;background:var(--red);color:#fff;padding:5px 10px;border-radius:4px;
  display:inline-block;margin-bottom:12px}
.svaz-feature .date{font-family:var(--h);text-transform:uppercase;letter-spacing:.06em;
  font-size:13px;color:rgba(255,255,255,.75);font-weight:500;display:block;margin-bottom:6px}
.svaz-feature h3{font-size:clamp(26px,3vw,36px);max-width:520px;margin:0;color:#fff}
.svaz-feature p{color:rgba(255,255,255,.85);font-size:16.5px;margin:8px 0 0;max-width:460px}

.svaz-newslist{display:flex;flex-direction:column;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden}
.svaz-nitem{display:flex;gap:16px;align-items:center;padding:14px 16px;
  border-bottom:1px solid var(--line);transition:.12s;flex:1;text-decoration:none;color:inherit}
.svaz-nitem:last-child{border-bottom:none}
.svaz-nitem:hover{background:var(--off)}
.svaz-nitem .th{flex:0 0 92px;aspect-ratio:4/3;border-radius:4px;overflow:hidden;background:var(--off)}
.svaz-nitem .th img{width:100%;height:100%;object-fit:cover}
.svaz-nitem .date{font-family:var(--h);text-transform:uppercase;letter-spacing:.06em;
  font-size:12.5px;color:var(--slate);font-weight:500;display:block;margin-bottom:3px}
.svaz-nitem h3{font-size:17.5px;line-height:1.15;margin:0}

/* ==========================================================================
   11. Word supporter — band met de twee passen
   ========================================================================== */
/* De gedraaide passen steken iets buiten hun kolom. Op een telefoon gaf dat
   horizontaal scrollen; hier afgesloten zodat dat nooit kan gebeuren. */
.svaz-lidband{background:var(--off);overflow:hidden}
.svaz-lidband .svaz-lidband-in{display:grid;grid-template-columns:1.25fr 1fr;
  gap:clamp(28px,5vw,72px);align-items:center;padding-block:clamp(52px,6.5vw,88px)}
@media(max-width:880px){.svaz-lidband .svaz-lidband-in{grid-template-columns:1fr}}
.svaz-lidband h2{font-size:clamp(30px,4vw,46px);margin:12px 0 16px}
/* Dit blok staat als inline-block op een eigen regel. In het prototype stond
   hier `margin-top:-4px`, waardoor het tegen de regel erboven aan kwam; nu een
   kleine positieve marge zodat er lucht tussen zit. */
.svaz-lidband h2 .hl{padding:2px 12px;white-space:nowrap;display:inline-block;margin-top:8px}
.svaz-lidband .lead{color:var(--slate);font-size:18px;max-width:520px;margin-bottom:20px}
.usps{list-style:none;margin:0 0 26px;padding:0}
.usps li{display:flex;gap:12px;align-items:baseline;font-size:17.5px;padding:7px 0;font-weight:500}
.usps li::before{content:"";flex:0 0 10px;width:10px;height:10px;background:var(--red);
  border-radius:2px;transform:translateY(-1px)}
.svaz-prijs{display:flex;align-items:baseline;gap:14px;margin-bottom:24px}
.svaz-prijs .amt{font-family:var(--h);font-weight:700;font-size:54px;line-height:1}
.svaz-prijs small{font-size:16px;color:var(--slate)}

/* Supporterspassen: met CSS getekend, geen afbeelding. */
.paswrap{position:relative;height:300px;display:flex;align-items:center;justify-content:center}
.pas{width:min(360px,86%);aspect-ratio:8/5;border-radius:14px;padding:22px 24px;display:flex;
  flex-direction:column;justify-content:space-between;
  box-shadow:0 30px 60px -26px rgba(0,0,0,.45);position:absolute}
.pas.back{background:var(--ink);color:#fff;transform:rotate(-7deg) translate(-26px,6px)}
.pas.front{background:var(--red);color:#fff;transform:rotate(4deg) translate(22px,-4px)}
.pas .top{display:flex;align-items:center;justify-content:space-between}
.pas .top .cl{font-family:var(--h);text-transform:uppercase;font-weight:600;
  letter-spacing:.1em;font-size:13px}
.pas .top img{width:44px;height:44px;background:#fff;border-radius:50%;padding:3px}
.pas .num{font-family:var(--h);font-weight:600;font-size:24px;letter-spacing:.14em}
.pas .bot{display:flex;align-items:flex-end;justify-content:space-between;font-size:12.5px}
.pas .bot .lbl{text-transform:uppercase;letter-spacing:.08em;opacity:.85;font-weight:600}
.pas .bot .seiz{font-family:var(--h);font-weight:600;font-size:15px;letter-spacing:.06em}
.pas .qr{width:44px;height:44px;background:#fff;border-radius:6px;display:grid;place-items:center}
.pas .qr i{width:30px;height:30px;border-radius:2px;
  background:conic-gradient(var(--ink) 25%,transparent 0 50%,var(--ink) 0 75%,transparent 0) 0 0/10px 10px}
/* Zodra de band stapelt staan de passen boven de tekst en onder de volgende
   sectie geklemd. Ze zijn gedraaid, dus hun zichtbare vlak steekt buiten hun
   eigen kader en dat oogt nog krapper dan het is. Vandaar extra lucht.
   De ruimte eronder zit op de band en niet als marge op de passen zelf: die
   zijn het laatste kind, en WordPress dwingt daar met
   `:where(.is-layout-flow) > :last-child` een ondermarge van 0 af. */
@media(max-width:880px){
  .paswrap{margin-top:26px}
  .svaz-lidband .svaz-lidband-in{padding-bottom:82px}
}

/* Op een smal scherm is er geen ruimte voor de volle verschuiving. Kleinere
   offsets, zodat beide passen binnen beeld blijven en het beeld klopt. */
@media(max-width:560px){
  .paswrap{height:260px}
  .pas{width:min(320px,80%)}
  .pas.back{transform:rotate(-6deg) translate(-14px,5px)}
  .pas.front{transform:rotate(3.5deg) translate(12px,-3px)}
}

/* ==========================================================================
   12. Historieband (donker)
   ========================================================================== */
.svaz-hist{background:var(--ink);color:#fff}
.svaz-hist .svaz-hist-in{display:grid;grid-template-columns:1.5fr .8fr;
  gap:clamp(28px,5vw,64px);align-items:center;padding-block:clamp(52px,6.5vw,84px)}
@media(max-width:840px){.svaz-hist .svaz-hist-in{grid-template-columns:1fr}}
.svaz-hist blockquote{font-family:var(--h);text-transform:uppercase;font-weight:600;
  font-size:clamp(24px,3.4vw,38px);line-height:1.22;margin:16px 0 20px;padding:0;border:none}
.svaz-hist blockquote .hl{padding:1px 10px}
.svaz-hist p:not(.eyebrow){color:#b9bdc6;font-size:17px;max-width:560px;margin-bottom:22px}
.svaz-crest{justify-self:center;text-align:center}
.svaz-crest img{width:clamp(150px,16vw,210px);margin:0 auto 14px;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.5))}
.svaz-crest span{font-family:var(--h);text-transform:uppercase;letter-spacing:.1em;
  font-size:13px;color:#9aa0ab;display:block}

/* ==========================================================================
   13. magAZine-blok
   ========================================================================== */
.svaz-mag{display:grid;grid-template-columns:.85fr 1.3fr;gap:clamp(26px,4vw,52px);
  align-items:center}
@media(max-width:760px){.svaz-mag{grid-template-columns:1fr}}
.svaz-mag .cover{aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;position:relative;
  box-shadow:0 24px 48px -28px rgba(0,0,0,.45);background:var(--red);color:#fff;display:flex;
  flex-direction:column;justify-content:space-between;padding:24px;transform:rotate(-2deg)}
.svaz-mag .cover .ed{font-family:var(--h);text-transform:uppercase;font-size:14px;
  letter-spacing:.08em;opacity:.9}
.svaz-mag .cover .t{font-family:var(--h);text-transform:uppercase;font-weight:700;
  font-size:clamp(44px,5vw,64px);line-height:.92}
.svaz-mag .cover .t .az{color:var(--ink)}
.svaz-mag .cover .foot{display:flex;align-items:center;justify-content:space-between;
  font-family:var(--h);text-transform:uppercase;font-size:13px;letter-spacing:.06em;opacity:.9}
.svaz-mag h2{font-size:clamp(26px,3.4vw,36px);margin:10px 0 14px}
.svaz-mag p:not(.eyebrow){color:var(--slate);font-size:17px;margin-bottom:10px;max-width:520px}

/* ==========================================================================
   14. Pagina-header met foto
   ========================================================================== */
.svaz-phead{position:relative;color:#fff;padding-block:clamp(48px,6.5vw,84px);
  overflow:hidden;isolation:isolate;
  background:url('assets/img/hero-tribune.jpg') center 65%/cover no-repeat}
.svaz-phead::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(13,14,17,.66) 0%,rgba(13,14,17,.3) 45%,rgba(13,14,17,.44) 100%),
    linear-gradient(78deg,rgba(13,14,17,.88) 0%,rgba(13,14,17,.6) 45%,rgba(13,14,17,.24) 100%)}
.svaz-phead h1{font-size:clamp(34px,5vw,56px);margin-bottom:12px;line-height:1.18;color:#fff}
.svaz-phead h1 .hl{padding:1px 12px;white-space:nowrap}
/* Een lang woord in het markeerblok, zoals "Supportersvereniging", past op een
   telefoon net niet in de kolom. Iets kleiner en het valt weer binnen beeld;
   afbreken zou het woord middenin knippen en dat leest slecht. */
@media(max-width:430px){
  .svaz-phead h1{font-size:30px}
  .svaz-phead h1 .hl{padding:1px 9px}
}
.svaz-phead p:not(.eyebrow){font-size:20px;color:rgba(255,255,255,.88);max-width:620px;line-height:1.5;margin:0}

/* Het jubileumlogo naast de donkere kop van de historiepagina */
.svaz-crest40{justify-self:center;text-align:center}
.svaz-crest40 img{width:clamp(130px,13vw,180px);height:auto;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.5))}

/* Donkere variant zonder foto (historie) */
.svaz-phead.is-donker{background:var(--ink)}
.svaz-phead.is-donker::before{display:none}
.svaz-phead.is-donker .svaz-phead-in{display:grid;grid-template-columns:1.6fr .7fr;
  gap:clamp(24px,4vw,56px);align-items:center}
@media(max-width:840px){.svaz-phead.is-donker .svaz-phead-in{grid-template-columns:1fr}}

/* ==========================================================================
   15. Ledenadministratie — tegels, contributie, formulier
   ========================================================================== */
.svaz-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.svaz-tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.svaz-tiles{grid-template-columns:1fr}}
.svaz-tile{text-align:left;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);padding:20px;transition:.15s;font-family:var(--b);display:block;
  text-decoration:none;color:inherit}
.svaz-tile:hover{border-color:var(--red);box-shadow:0 10px 26px -20px rgba(205,41,45,.6)}
.svaz-tile .ic{width:44px;height:44px;border-radius:var(--r);background:var(--red);color:#fff;
  display:grid;place-items:center;font-size:21px;margin-bottom:14px}
.svaz-tile h2,.svaz-tile h3{font-size:19px;line-height:1.04;margin:0 0 4px}
.svaz-tile p{font-size:15px;color:var(--slate);margin:0}

.svaz-two{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
@media(max-width:820px){.svaz-two{grid-template-columns:1fr}}
.svaz-panel{border:1px solid var(--line);border-radius:var(--r);padding:26px}
.svaz-panel h2{font-size:24px;margin:0 0 18px}
.price-row{display:flex;align-items:baseline;justify-content:space-between;padding:13px 0;
  border-bottom:1px solid var(--line)}
.price-row:last-of-type{border-bottom:none}
.price-row .lab{font-size:17px}
.price-row .amt{font-family:var(--h);font-size:22px;font-weight:600}
.price-row .amt small{font-size:14px;color:var(--slate);font-weight:500}
.price-note{font-size:15px;color:var(--slate);margin-top:14px}
.callout{display:flex;gap:14px;background:var(--red-tint);border-radius:var(--r);
  padding:18px 20px;margin-top:24px}
.callout .ic{flex:0 0 auto;color:var(--red);font-size:20px;line-height:1.3}
.callout h3{font-size:17px;margin:0 0 4px;text-transform:none;font-family:var(--b);font-weight:700}
.callout p{font-size:16px;color:var(--red-deep);margin:0}

/* ==========================================================================
   16. Over de SV AZ
   ========================================================================== */
.svaz-overgrid{display:grid;grid-template-columns:1.5fr .9fr;gap:clamp(28px,4.5vw,60px);
  align-items:start}
@media(max-width:840px){.svaz-overgrid{grid-template-columns:1fr}}
.svaz-prose p{margin-bottom:16px;font-size:18px}
.svaz-prose p.lead{font-size:20.5px;font-weight:500}
.svaz-kort{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  position:sticky;top:120px}
.svaz-kort .h{font-family:var(--h);text-transform:uppercase;font-weight:700;font-size:19px;
  padding:15px 20px;border-bottom:1px solid var(--line);background:var(--off);
  display:flex;align-items:center;gap:10px;margin:0}
.svaz-kort .row{display:flex;justify-content:space-between;gap:12px;padding:12px 20px;
  border-bottom:1px solid var(--line);font-size:16px}
.svaz-kort .row:last-child{border-bottom:none}
.svaz-kort .row b{font-family:var(--h);font-weight:600;font-size:17px;white-space:nowrap}

.svaz-bestuur{background:var(--off)}
.svaz-bestuur .svaz-bestuur-in{padding-block:clamp(48px,6vw,76px)}
.svaz-bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
@media(max-width:900px){.svaz-bgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.svaz-bgrid{grid-template-columns:1fr}}
.bcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 22px}
.bcard .rol{font-family:var(--h);text-transform:uppercase;letter-spacing:.08em;font-size:12.5px;
  color:var(--red);font-weight:600;margin-bottom:6px}
.bcard h3{font-size:21px;margin:0 0 4px}
.bcard a{font-size:15px;color:var(--slate);text-decoration:none;word-break:break-word}
.bcard a:hover{color:var(--red)}

/* ==========================================================================
   17. Historie — tijdlijn en slotband
   ========================================================================== */
.svaz-tl{max-width:820px;position:relative;padding-left:26px}
.svaz-tl::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;
  background:var(--line)}
.tl-item{position:relative;padding:0 0 34px 26px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:-26px;top:6px;width:16px;height:16px;
  border-radius:50%;background:#fff;border:4px solid var(--red)}
.tl-item .jaar{font-family:var(--h);font-weight:700;font-size:24px;color:var(--red);
  line-height:1;margin-bottom:8px;text-transform:uppercase}
/* De kopjes in de tijdlijn staan als h2 in de opmaak (juiste hiërarchie onder
   de h1), maar de maat is die van een h3 uit het ontwerp. */
.tl-item h2,.tl-item h3{font-size:22px;margin:0 0 8px;line-height:1.04}
.tl-item p{font-size:17px;color:var(--slate);max-width:640px;margin:0}

.svaz-slotband{background:var(--off)}
.svaz-slotband .svaz-slotband-in{padding-block:clamp(44px,5.5vw,70px);display:flex;
  align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.svaz-slotband blockquote{font-family:var(--h);text-transform:uppercase;font-weight:600;
  font-size:clamp(21px,2.6vw,30px);line-height:1.25;max-width:640px;margin:0;padding:0;border:none}
.svaz-slotband blockquote .hl{padding:1px 10px}

/* ==========================================================================
   17b. Evenementen — agenda, archief en losse pagina
   ========================================================================== */
.svaz-evlijst + .svaz-evlijst{margin-top:clamp(40px,5vw,64px)}
.svaz-evleeg{color:var(--slate);font-size:17px;border:1px dashed var(--line);
  border-radius:var(--r);padding:22px 24px}

.svaz-evkaart .evbeeld{display:block;position:relative}
.svaz-evkaart .evbeeld img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
/* Datumblokje op het beeld, dezelfde vorm als in de agendakaart op de homepage. */
.svaz-evkaart .evdatum{position:absolute;left:14px;bottom:14px;background:#fff;
  border-radius:var(--r);padding:7px 12px;text-align:center;min-width:56px;
  box-shadow:0 10px 24px -14px rgba(0,0,0,.55)}
.svaz-evkaart .evdatum .d{display:block;font-family:var(--h);font-size:22px;font-weight:700;
  color:var(--red-deep);line-height:1}
.svaz-evkaart .evdatum .m{display:block;font-family:var(--h);text-transform:uppercase;
  font-size:11px;color:var(--red-deep);letter-spacing:.05em}
.svaz-evkaart .evwaar{font-size:15px;color:var(--slate);margin:0}

/* Gegevens onder de titel van een los evenement. */
.svaz-evgegevens{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:14px;
  font-family:var(--h);text-transform:uppercase;letter-spacing:.06em;font-size:14px;
  color:rgba(255,255,255,.85);font-weight:500;align-items:center}
.svaz-evgegevens .ev-datum{color:#fff}
.svaz-evgegevens .ev-geweest{background:rgba(255,255,255,.16);border-radius:var(--r);
  padding:5px 11px;font-size:12.5px;color:#fff}

/* De oproep voor vrijwilligers, als band op het evenementenarchief. */
.svaz-vrijwilligers{background:var(--off)}
.svaz-oproep-in{padding-block:clamp(48px,6vw,76px);max-width:760px}
.svaz-oproep-in h2{font-size:clamp(26px,3.6vw,38px);margin:12px 0 16px}
.svaz-oproep-in p{margin-bottom:14px}
.svaz-leus{font-family:var(--h);text-transform:uppercase;font-weight:600;
  letter-spacing:.03em;font-size:19px;color:var(--red-deep);margin-top:20px}

/* ==========================================================================
   18. Artikelen, archief, zoeken en 404
   ========================================================================== */
.svaz-artikel{max-width:820px}
.svaz-artikel p{margin-bottom:16px}
.svaz-artikel h2{font-size:clamp(24px,3vw,30px);margin:32px 0 12px}
.svaz-artikel h3{font-size:22px;margin:26px 0 10px}
.svaz-artikel ul,.svaz-artikel ol{margin:0 0 16px 22px}
.svaz-artikel li{margin-bottom:6px}
.svaz-artikel img{border-radius:var(--r)}
.svaz-artikel blockquote{border-left:4px solid var(--red);padding-left:20px;margin:24px 0;
  font-size:19px;color:var(--slate)}
.svaz-meta{font-family:var(--h);text-transform:uppercase;letter-spacing:.06em;font-size:13px;
  color:rgba(255,255,255,.8);font-weight:500;display:flex;gap:10px;flex-wrap:wrap;
  align-items:center;margin-bottom:10px}
/* Op de fotokop staat alles in wit; geen rode links en geen streepjes eronder. */
.svaz-meta a,.svaz-phead a{color:#fff;text-decoration:none}
.svaz-meta a:hover,.svaz-phead a:hover{color:#fff;text-decoration:underline}

.svaz-kaarten{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.svaz-kaarten{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.svaz-kaarten{grid-template-columns:1fr}}
.svaz-kaart{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;
  display:flex;flex-direction:column;height:100%}
.svaz-kaart:hover{border-color:var(--red);box-shadow:0 12px 30px -24px rgba(0,0,0,.55)}
.svaz-kaart .wp-block-post-featured-image{margin:0}
.svaz-kaart .wp-block-post-featured-image img{width:100%;aspect-ratio:16/10;object-fit:cover;
  border-radius:0}
.svaz-kaart .kaart-in{padding:18px 20px 22px;display:flex;flex-direction:column;gap:6px;flex:1}
.svaz-kaart .wp-block-post-date{font-family:var(--h);text-transform:uppercase;
  letter-spacing:.06em;font-size:12.5px;color:var(--slate);font-weight:500}
.svaz-kaart .wp-block-post-title{font-size:20px;line-height:1.18;margin:0}
.svaz-kaart .wp-block-post-title a{color:var(--ink);text-decoration:none}
.svaz-kaart .wp-block-post-title a:hover{color:var(--red)}
.svaz-kaart .wp-block-post-excerpt{font-size:16px;color:var(--slate)}

/* Zoekformulier: een echt formulier, geen icoon dat naar /?s= linkt. */
.svaz-zoek .wp-block-search__input{font-family:var(--b);font-size:17px;padding:13px 15px;
  border:1.5px solid var(--line);border-radius:var(--r);background:var(--off);color:var(--ink)}
.svaz-zoek .wp-block-search__input:focus{outline:none;border-color:var(--red);background:#fff}
.svaz-zoek .wp-block-search__button{font-family:var(--h);text-transform:uppercase;
  letter-spacing:.04em;font-weight:600;background:var(--red);color:#fff;border:none;
  border-radius:var(--r);padding:13px 22px;min-height:50px;cursor:pointer}
.svaz-zoek .wp-block-search__button:hover{background:var(--red-deep)}

/* Staat altijd binnen een .svaz-sec, die de verticale ruimte al regelt. Eigen
   padding erbij gaf 96px boven én onder, en dat leest als een lege pagina. */
.svaz-leeg{max-width:640px}
.svaz-leeg h2{font-size:clamp(24px,3vw,30px);margin-bottom:12px}
.svaz-leeg p{color:var(--slate);margin-bottom:22px}

/* Gerelateerde berichten (shortcode, server-side op tag en categorie) */
.svaz-gerelateerd{border-top:1px solid var(--line);margin-top:44px;padding-top:32px}
.svaz-gerelateerd h2{font-size:24px;margin-bottom:20px;display:flex;align-items:center;gap:12px}

/* ==========================================================================
   19. Formulieren — Gravity Forms in de huisstijl

   Gravity Forms 2.5+ werkt met een eigen thema ("orbital") dat op CSS-variabelen
   draait. Die overschrijven is netter dan met eigen selectors tegen de
   specificiteit aanvechten, en het blijft werken na een update van de plugin.
   ========================================================================== */
/* body ervoor, want de stylesheet van de plugin laadt na die van het thema en
   wint anders bij gelijke specificiteit. */
body .gform-theme--framework,
body .gform_wrapper.gform-theme,
body .gform_wrapper.gform-theme--framework{
  --gf-color-primary:var(--red);
  --gf-color-primary-rgb:205,41,45;
  --gf-color-primary-contrast:#fff;
  --gf-color-primary-darker:var(--red-deep);
  --gf-color-primary-lighter:var(--red-tint);

  --gf-ctrl-bg-color:var(--off);
  --gf-ctrl-border-color:var(--line);
  --gf-ctrl-border-color-focus:var(--red);
  --gf-ctrl-color:var(--ink);
  --gf-ctrl-radius:var(--r);

  /* 17px of groter, anders zoomt Safari op de iPhone in bij het invullen.
     50px hoog haalt het tapdoel van 44px ruim. */
  --gf-ctrl-font-size:17px;
  --gf-ctrl-size-md:50px;
  --gf-ctrl-size-lg:54px;

  --gf-ctrl-label-color-primary:var(--ink);
  --gf-ctrl-label-font-size:16px;
  --gf-ctrl-label-font-weight:600;
  --gf-ctrl-desc-color:var(--slate);
  --gf-ctrl-desc-font-size:15px;

  --gf-ctrl-btn-bg-color-primary:var(--red);
  --gf-ctrl-btn-bg-color-hover-primary:var(--red-deep);
  --gf-ctrl-btn-color-primary:#fff;
  --gf-ctrl-btn-border-color-primary:var(--red);
  --gf-ctrl-btn-font-size:16px;
  --gf-ctrl-btn-size-md:50px;
  --gf-ctrl-btn-radius:var(--r);

  --gf-color-danger:var(--red-deep);
  --gf-field-gap-y:18px;
}

/* De variabelen hierboven pakken niet overal: Gravity Forms zet een deel ervan
   dieper in zijn eigen opmaak opnieuw. Voor label, invoerveld en knop dus
   expliciete regels, met exact de waarden uit het prototype. */
body .gform_wrapper .gfield_label,
body .gform_wrapper legend.gfield_label{
  font-family:var(--b);font-size:16px;font-weight:600;color:var(--ink);
  line-height:1.6;margin-bottom:6px;text-transform:none}
body .gform_wrapper .gfield_required{color:var(--red);font-weight:600}

body .gform_wrapper input[type=text],
body .gform_wrapper input[type=email],
body .gform_wrapper input[type=tel],
body .gform_wrapper input[type=number],
body .gform_wrapper input[type=date],
body .gform_wrapper textarea,
body .gform_wrapper select{
  font-family:var(--b);font-size:17px;padding:13px 15px;
  border:1.5px solid var(--line);border-radius:var(--r);
  background:var(--off);color:var(--ink);width:100%}
body .gform_wrapper input:focus,
body .gform_wrapper textarea:focus,
body .gform_wrapper select:focus{
  outline:none;border-color:var(--red);background:#fff}
body .gform_wrapper textarea{min-height:110px}
body .gform_wrapper ::placeholder{color:var(--slate);opacity:.75}

/* Keuzerondjes en aanvinkvakjes: het label is het tapdoel, niet het bolletje.
   De werkbrief vraagt minimaal 44px. */
body .gform_wrapper .gchoice{display:flex;align-items:center;gap:10px;min-height:44px}
body .gform_wrapper .gchoice label{font-size:17px;font-weight:400;margin:0;cursor:pointer;
  display:flex;align-items:center;min-height:44px}
body .gform_wrapper .gchoice input[type=radio],
body .gform_wrapper .gchoice input[type=checkbox]{width:22px;height:22px;accent-color:var(--red);
  flex:0 0 auto;margin:0}

/* De verstuurknop krijgt dezelfde behandeling als elke andere knop op de site.
   Ook hier body ervoor, anders wint de plugin. */
body .gform_wrapper .gform_footer button,
body .gform_wrapper .gform_footer input[type=submit],
body .gform_wrapper .gform_page_footer button,
body .gform_wrapper .gform_page_footer input[type=submit],
body .gform_wrapper button.gform_button,
body .gform_wrapper input.gform_button{
  /* !important omdat de knopregel van Gravity Forms vier klassen diep is en het
     dus van elke redelijke selector hier wint. Alleen op de eigenschappen die
     de plugin daadwerkelijk overschrijft. */
  font-family:var(--h) !important;
  text-transform:uppercase !important;
  font-size:16px !important;
  font-weight:600 !important;
  width:100% !important;
  letter-spacing:.04em;min-height:50px;padding:14px 24px;border-radius:var(--r)}

.gform_wrapper .gfield_label,
.gform_wrapper legend.gfield_label{font-family:var(--b)}
.gform_wrapper .gform_required_legend{display:none}
.gform_wrapper .gfield_description{font-family:var(--b)}

/* Labels binnen een paneel houden dezelfde maat als de rest van de pagina. */
.svaz-panel label{display:block;font-size:16px;font-weight:600;color:var(--ink);
  margin:0 0 6px;font-family:var(--b)}
.formtitle{font-family:var(--h);text-transform:uppercase;font-weight:600;font-size:15px;
  color:var(--slate);margin-bottom:2px}

/* Bevestiging na het versturen. */
.gform_confirmation_message{background:var(--red-tint);color:var(--red-deep);
  border-radius:var(--r);padding:18px 20px;font-size:17px}


/* --------------------------------------------------------------------------
   19b. Formulieren — afwerking (Martijn, 04-08)

   De basis hierboven klopt: tokens, maten, tapdoelen. Wat overbleef was dat de
   onderdelen die de browser zelf tekent er nog uitzien als browser-onderdelen.
   Op een pagina waar iemand lid wordt, valt dat op. Alleen uitstraling
   hieronder; aan de velden zelf is niets veranderd.
   -------------------------------------------------------------------------- */

/* De verplicht-markering stond op rood en vet, even groot als het label zelf.
   Op het aanmeldformulier staat hij negen keer, en dan leest een formulier als
   een waarschuwing. Klein en grijs: het staat er nog voor wie het zoekt, maar
   het schreeuwt niet meer. */
body .gform_wrapper .gfield_required,
body .gform_wrapper .gfield_required .gfield_required_text{
  color:var(--slate);font-weight:400;font-size:13px;letter-spacing:.01em}

/* Keuzerondjes. Stonden op accent-color, wat neerkomt op een browserrondje met
   een rood tintje: per browser net anders en niet van deze site. Hieronder een
   eigen rondje, en het label eromheen wordt een keuzevak zoals de tegels
   verderop de pagina. Zelfde veld, zelfde waarden, alleen zichtbaar als keuze. */
/* Gravity Forms zet de keuzelijst op grid, waardoor elk vak zich naar zijn
   eigen tekst voegt en de twee opties ongelijk breed worden. Lijst en item op
   block, dan vullen ze allebei de kolom en leest het als een echte keuze. */
/* Let op: het framework van Gravity Forms zet display via de eigen variabele
   --gf-local-display, dus een gewone display-regel wordt overschreven. Beide
   zetten, plus !important, want de framework-regel wint anders alsnog. Zelfde
   patroon als bij de verstuurknop hierboven. */
body .gform_wrapper .gfield_radio,
body .gform_wrapper .gfield_checkbox{--gf-local-display:block;display:block !important}
body .gform_wrapper .gchoice{
  --gf-local-display:block;display:block !important;
  gap:0;min-height:0;margin-bottom:10px}
body .gform_wrapper .gchoice:last-child{margin-bottom:0}

body .gform_wrapper .gchoice input[type=radio],
body .gform_wrapper .gchoice input[type=checkbox]{
  position:absolute;opacity:0;width:1px;height:1px}

body .gform_wrapper .gchoice label{
  position:relative;display:flex;align-items:center;gap:14px;width:100%;
  min-height:56px;margin:0;padding:12px 18px 12px 16px;
  font-size:17px;font-weight:500;line-height:1.35;color:var(--ink);
  background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r);
  cursor:pointer;transition:border-color .12s,background-color .12s}
body .gform_wrapper .gchoice label:hover{border-color:var(--slate)}

/* Het rondje zelf, links in het vak. */
body .gform_wrapper .gchoice label::before{
  content:"";flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  border:2px solid var(--line);background:var(--paper);
  transition:border-color .12s,box-shadow .12s}
body .gform_wrapper .gchoice input[type=checkbox] + label::before{border-radius:5px}

/* Aangevinkt: rand en vulling in de merkkleur. De binnenring maak ik met een
   box-shadow in plaats van een extra element, dat scheelt markup die we hier
   toch niet kunnen aanpassen. */
body .gform_wrapper .gchoice input:checked + label{
  border-color:var(--red);background:var(--red-tint)}
body .gform_wrapper .gchoice input:checked + label::before{
  border-color:var(--red);box-shadow:inset 0 0 0 4px var(--paper);
  background:var(--red)}

/* Toetsenbordfocus moet even duidelijk zijn als elders op de site: 3px rood. */
body .gform_wrapper .gchoice input:focus-visible + label{
  outline:3px solid var(--red);outline-offset:2px}

/* Geboortedatum staat als drie getalvelden. De browser zet daar pijltjes bij om
   omhoog en omlaag te tellen, wat voor een geboortejaar niets oplost en in elke
   browser anders oogt. Pijltjes eruit, en de velden krijgen de breedte die bij
   hun inhoud past in plaats van alle drie de volle kolom. */
body .gform_wrapper input[type=number]::-webkit-outer-spin-button,
body .gform_wrapper input[type=number]::-webkit-inner-spin-button{
  -webkit-appearance:none;appearance:none;display:none;margin:0}
/* appearance:textfield verbergt de pijltjes niet meer in recente Chrome,
   vandaar display:none hierboven en appearance:none hier. */
body .gform_wrapper input[type=number]{-moz-appearance:textfield;appearance:none}

/* De drie velden zitten als aparte kolommen in een grid-rij. Die rij op flex,
   zodat de kolommen naast elkaar staan met een vaste tussenruimte in plaats van
   elk een derde van de breedte te pakken. */
body .gform_wrapper .gfield--type-date .ginput_complex{
  display:flex;gap:12px;flex-wrap:wrap;align-items:center}
body .gform_wrapper .gfield--type-date .ginput_complex > div{
  width:auto;flex:0 0 auto;padding:0;margin:0}
body .gform_wrapper .ginput_container_date input[type=number]{
  width:96px;text-align:center;letter-spacing:.04em}
body .gform_wrapper .gfield_date_year input[type=number]{width:128px}
/* Op een telefoon is de kolom te smal voor 96+96+128 en valt het jaartal naar
   een tweede regel. Daar de drie velden laten meeschalen zodat de datum één
   geheel blijft. */
@media(max-width:520px){
  body .gform_wrapper .gfield--type-date .ginput_complex > div{flex:1 1 0;min-width:0}
  body .gform_wrapper .ginput_container_date input[type=number],
  body .gform_wrapper .gfield_date_year input[type=number]{width:100%}
  body .gform_wrapper .gfield_date_year{flex-grow:1.4}
}
/* Bij elk getalveld hoort een verborgen label (Dag, Maand, Jaar) voor de
   schermlezer. Dat blijft staan, maar het mag geen plek innemen tussen de
   velden; anders wordt de tussenruimte vijf gaten in plaats van twee. */
body .gform_wrapper .ginput_container_date > label{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;margin:0;padding:0;border:0}

/* Invoervelden hadden bij focus wel een rode rand maar geen ring. Dezelfde
   focusstijl als de rest van de site, zodat toetsenbordgebruik overal gelijk is. */
body .gform_wrapper input:focus-visible,
body .gform_wrapper textarea:focus-visible,
body .gform_wrapper select:focus-visible{
  outline:3px solid var(--red);outline-offset:2px}

/* Iets meer lucht tussen de velden. Bij negen velden onder elkaar leest 18px
   als een opsomming en 24px als losse vragen. */
body .gform-theme--framework,
body .gform_wrapper.gform-theme,
body .gform_wrapper.gform-theme--framework{--gf-field-gap-y:24px}

/* De knop stond strak tegen het laatste veld. */
body .gform_wrapper .gform_footer{margin-top:28px;padding-top:0}

/* ==========================================================================
   20. Footer
   ========================================================================== */
/* Alleen verticale ruimte hier. Een `padding: 52px 0 30px` zet de zijmarge op
   nul en overschrijft daarmee de globale marge van WordPress; op een telefoon
   plakt de inhoud dan tegen de schermrand. */
.svaz-footer{background:var(--ink);color:#c9ccd4;padding-block:52px 30px}
.svaz-footer a{color:#c9ccd4;text-decoration:none}
.svaz-footer a:hover{color:#fff}
.svaz-fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
@media(max-width:820px){.svaz-fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.svaz-fgrid{grid-template-columns:1fr}}
.svaz-footer .fmerk{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.svaz-footer .fmerk img{width:50px;height:50px;background:#fff;border-radius:50%;padding:4px}
.svaz-footer .fmerk .wm{font-family:var(--h);text-transform:uppercase;font-weight:700;
  font-size:22px;line-height:1.05;letter-spacing:.02em;color:#fff}
.svaz-footer .fmerk .wm small{display:block;font-size:11px;font-weight:600;letter-spacing:.14em;
  color:#9aa0ab}
.svaz-footer p{font-size:15px;line-height:1.6}
.svaz-footer h2{font-family:var(--h);text-transform:uppercase;color:#fff;font-size:15px;
  letter-spacing:.05em;margin:0 0 12px}
.svaz-footer ul{list-style:none;margin:0;padding:0}
.svaz-footer li{margin-bottom:8px;font-size:15px}
/* Op een telefoon zijn deze links het tapdoel. Inline zonder padding gaf 18px
   met dode ruimte ertussen; de stijlgids vraagt 44px. */
/* Op een telefoon zijn deze links het tapdoel, dus blok met verticale ruimte.
   Zonder scheidingslijn zweeft dat als losse tekst, daarom dezelfde dunne lijn
   als in het mobiele menu. border-box, anders telt min-height bovenop de
   padding en wordt elke rij 66px hoog. */
@media(max-width:820px){
  .svaz-footer li{margin-bottom:0}
  .svaz-footer li a{display:block;padding:11px 0;min-height:44px;box-sizing:border-box;
    border-bottom:1px solid rgba(255,255,255,.09)}
  .svaz-footer li:last-child a{border-bottom:none}
  /* De kop hoort bij zijn eigen groep, dus dichter op de lijst en meer lucht erboven. */
  .svaz-footer h2{margin-bottom:2px}
  .svaz-fgrid{gap:8px}
  .svaz-fgrid > * + *{padding-top:18px;border-top:1px solid rgba(255,255,255,.09)}
}
.svaz-fbar{border-top:1px solid #2a2c34;margin-top:34px;padding-top:18px;display:flex;
  justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:14px;color:#8b8f99}
.svaz-fbar p{margin:0;font-size:14px}

/* ==========================================================================
   21. Losse hulpklassen
   ========================================================================== */
.svaz-verborgen{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.svaz-concept{background:var(--red-tint);color:var(--red-deep);text-align:center;font-size:14px;
  font-weight:600;padding:8px 16px}