/*
Theme Name: North Sea Surfing
Theme URI: https://www.northseasurfing.nl
Author: Raak Reclame
Description: Maatwerkthema voor kitesurfvereniging North Sea Surfing, 's-Gravenzande.
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: nss
*/

/* Twee kleuren, meer niet: het blauw en het oranje uit het logo.
   Elke andere tint hieronder is diezelfde kleur gemengd met wit of zwart —
   er komt nergens een derde kleurtoon bij. Achter elke waarde staat het
   contrast op wit, zodat leesbaarheid controleerbaar blijft. */
:root{
  --blue:#0066AE;        /* LOGOKLEUR — links, knoppen, headerlijn      5,98:1 */
  --blue-700:#005794;    /* 85% blauw + zwart — hover                   7,52:1 */
  --blue-800:#00477A;    /* 70% blauw + zwart — topbar, donkere kaarten 9,62:1 */
  --blue-900:#003357;    /* 50% blauw + zwart — footer, tekst op oranje 13,0:1 */
  --ink:#002E4E;         /* 45% blauw + zwart — bodytekst              14,0:1 */
  --grey:#1A75B6;        /* 90% blauw + wit  — secundaire tekst         4,93:1 */
  --line:#E0EDF5;        /* 12% blauw + wit  — lijnen en randen */
  --sand:#F2F7FB;        /*  5% blauw + wit  — sectie-achtergrond */
  --mist:#EBF3F9;        /*  8% blauw + wit  — subtiele vlakken */

  --orange:#E1984A;      /* LOGOKLEUR — knoppen, golflijnen, accent op donker */
  --orange-dark:#A97238; /* 75% oranje + zwart — accent op wit, hover   4,21:1 */
  --orange-mist:#FBF2E9; /* 12% oranje + wit — zachte oranje vlakken */

  --radius:18px;
  --shadow:0 10px 30px rgba(0,51,87,.10);
  --wrap:1180px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;color:var(--ink);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,.artz{font-family:'hwt-artz','Inter',sans-serif;font-weight:700;line-height:1.05;letter-spacing:.01em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block;height:auto}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link:focus{position:fixed;top:8px;left:8px;z-index:999;background:#fff;padding:10px 16px;border-radius:8px;width:auto;height:auto;clip:auto}

/* ===== Topbar ===== */
.topbar{background:var(--blue);color:#E8F1F8;font-size:12.5px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:2px 16px;min-height:0;padding-top:5px;padding-bottom:6px;flex-wrap:wrap}
.topbar a{color:#fff}
.topbar a:hover{text-decoration:underline}
.topbar .live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--orange);margin-right:7px;animation:pulse 2s infinite;vertical-align:middle}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@media(prefers-reduced-motion:reduce){.topbar .live-dot{animation:none}}

/* ===== Header ===== */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:3px solid var(--blue)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;height:112px}
.nav .logo img,.nav .custom-logo-link img{height:84px;width:auto;max-width:none}
.nav .custom-logo-link{display:block;flex:none;line-height:0}
.nav .logo .txt{font-family:'hwt-artz',sans-serif;font-size:26px;color:var(--blue);text-transform:uppercase;line-height:1.05}
.nav .logo .txt span{color:var(--orange)}
.menu{display:flex;gap:4px;list-style:none;font-family:'hwt-artz',sans-serif;font-size:15px;letter-spacing:.04em;text-transform:uppercase;align-items:center}
.menu a{display:block;padding:8px 13px;border-radius:6px;color:var(--blue);transition:.15s}
.menu a:hover{background:var(--sand);color:var(--blue)}
.menu .current-menu-item>a,.menu .current_page_item>a{color:var(--orange)}
.menu li{position:relative}
.menu .sub-menu{display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:8px;min-width:220px;flex-direction:column;gap:2px}
.menu li:hover>.sub-menu,.menu li:focus-within>.sub-menu{display:flex}
/* CTA hoort alleen in het uitgeklapte mobiele menu; op desktop staat de knop rechts */
.menu .menu-cta{display:none}

.btn{display:inline-block;background:var(--orange);color:#fff;font-family:'hwt-artz',sans-serif;font-weight:700;font-size:16px;letter-spacing:.05em;text-transform:uppercase;padding:13px 24px;border-radius:8px;transition:.2s;border:0;cursor:pointer;text-align:center}
.btn:hover{background:var(--orange-dark);color:#fff}
.btn.ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.7)}
.btn.ghost:hover{background:rgba(255,255,255,.12)}
.btn.blue{background:var(--blue);box-shadow:0 4px 14px rgba(0,102,174,.35)}
.btn.blue:hover{background:var(--blue-800)}

/* hamburger */
.nav-toggle{display:none;background:none;border:0;padding:10px;cursor:pointer}
.nav-toggle span{display:block;width:26px;height:3px;background:var(--blue);border-radius:2px;transition:.2s}
.nav-toggle span+span{margin-top:5px}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ===== Hero ===== */
.hero{position:relative;min-height:560px;display:flex;align-items:center;color:#fff;overflow:hidden;
  background:var(--blue)}
.hero::before{content:'';position:absolute;inset:0;background-image:var(--hero-img);background-position:center 35%;background-size:cover;opacity:.55;mix-blend-mode:luminosity}
.hero::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,51,87,.45) 0%,rgba(0,51,87,.15) 45%,rgba(0,51,87,0) 75%),
             linear-gradient(180deg,rgba(0,51,87,.15) 0%,rgba(0,51,87,0) 35%,rgba(0,51,87,.25) 100%)}
.hero .wrap{position:relative;z-index:2;width:100%;padding-top:90px;padding-bottom:130px}
.hero h1{font-size:clamp(44px,7vw,84px);text-transform:uppercase;text-shadow:0 4px 24px rgba(0,51,87,.45)}
.hero h1 .or{color:var(--orange)}
.waves{display:block;margin:14px 0 4px}
.hero p{max-width:500px;font-size:18px;margin:14px 0 30px;color:#E8F1F8;text-shadow:0 2px 10px rgba(0,51,87,.5)}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}
.wave-divider{display:block;width:100%;height:90px;margin-top:-89px;position:relative;z-index:3}

/* page hero (binnenpagina's) */
.page-hero{background:var(--blue);color:#fff;padding:56px 0 70px;position:relative}
.page-hero h1{font-size:clamp(32px,5vw,56px);text-transform:uppercase}
.page-hero h1 .or{color:var(--orange)}
.breadcrumb{font-size:13px;color:#CFE3F2;margin-bottom:10px}
.breadcrumb a:hover{text-decoration:underline}

/* ===== Kaarten / live strip ===== */
.live{margin-top:-70px;position:relative;z-index:10}
.live-grid{display:grid;grid-template-columns:2fr 1fr;gap:22px;align-items:stretch}
.live-side{display:flex;flex-direction:column;gap:22px}
.live-side .card{flex:1}
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:26px;border:1px solid var(--line)}
.card .label{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);margin-bottom:14px}
.cam-frame{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:16/9;background:var(--blue)}
.cam-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.bigstat{font-family:'hwt-artz',sans-serif;font-weight:700;font-size:46px;color:var(--blue);line-height:1}
.bigstat small{font-size:18px;color:var(--grey);font-family:'Inter',sans-serif;font-weight:600}
.card .sub{font-size:14px;color:var(--grey);margin-top:12px;line-height:1.85}
.card .sub b{color:var(--ink)}
.card .sub a{color:var(--blue);font-weight:600;display:inline-block;margin-top:5px}
.card .sub a:hover{text-decoration:underline}
.tag-live{background:var(--mist);color:var(--blue);font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px}
.tag-live.off{background:var(--mist);color:var(--grey)}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.chip{background:var(--sand);border:1px solid var(--line);color:var(--ink);font-size:13px;font-weight:600;padding:5px 13px;border-radius:999px}
.chip.more{background:var(--blue);border-color:var(--blue);color:#fff}
.chip.more:hover{background:var(--blue-800)}
.empty-state{color:var(--grey);font-size:15px;margin:6px 0 14px}

/* ===== Secties ===== */
.section{padding:90px 0}
.section.sand{background:var(--sand)}
.sec-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:42px;flex-wrap:wrap}
h2{font-size:clamp(30px,4vw,44px);text-transform:uppercase;color:var(--blue)}
h2 .or{color:var(--orange)}
.sec-head p{color:var(--grey);max-width:440px;margin-top:6px;text-align:right}
.underline{width:64px;height:5px;border-radius:3px;background:var(--orange);margin-top:14px}

/* tools */
.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tool{background:#fff;border-radius:var(--radius);padding:34px 30px;border:1px solid var(--line);box-shadow:var(--shadow);transition:.25s;display:flex;flex-direction:column}
.tool:hover{transform:translateY(-6px)}
.tool .icon{width:58px;height:58px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:var(--blue);margin-bottom:20px}
.tool:nth-child(2) .icon{background:var(--orange)}
.prose h2 .or{color:var(--orange)}
.tool h3{font-size:23px;text-transform:uppercase;color:var(--blue);margin-bottom:10px}
.tool p{font-size:15px;color:var(--grey)}
.tool .more{display:inline-block;margin-top:auto;padding-top:18px;font-weight:700;font-size:14px;color:var(--blue)}
.tool .more::after{content:' →'}

/* agenda + clubkaart */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:start}
.event{display:flex;gap:18px;padding:20px 0;border-bottom:1px solid var(--line)}
.event .date{flex:none;width:64px;height:64px;border-radius:14px;background:var(--blue);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'hwt-artz',sans-serif}
.event .date b{font-size:24px;line-height:1}
.event .date span{font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.event h3{font-size:17px;color:var(--blue)}
.event p{font-size:14px;color:var(--grey)}
.clubcard{background:var(--blue);color:#D9E9F4;border-radius:var(--radius);padding:40px;position:relative;overflow:hidden}
.clubcard h3{color:#fff;font-size:26px;text-transform:uppercase;margin-bottom:14px}
.clubcard h3 .or{color:var(--orange)}
.clubcard ul{list-style:none;margin:18px 0 26px}
.clubcard li{padding:8px 0 8px 30px;position:relative;font-size:15px}
.clubcard li::before{content:'✓';position:absolute;left:0;color:var(--orange);font-weight:700}
.clubcard .note{font-size:13px;color:#BBD6E9;margin-top:16px}
.clubcard .kitebg{position:absolute;right:-46px;bottom:-58px;width:270px;height:auto;opacity:.13;transform:rotate(-8deg);pointer-events:none}

/* sponsors */
.spon-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.spon{background:#fff;border-radius:14px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;padding:18px;height:90px;filter:grayscale(1);opacity:.75;transition:.25s}
.spon:hover{filter:none;opacity:1;transform:translateY(-3px);box-shadow:var(--shadow)}
.spon img{max-height:52px;width:auto;object-fit:contain}

/* ===== Contentpagina ===== */
.page-body{padding:70px 0 90px}
.page-layout{display:grid;grid-template-columns:1fr 320px;gap:56px;align-items:start}
.prose{font-size:17px}
.prose h2{font-size:clamp(24px,3vw,32px);margin:38px 0 14px}
.prose h3{font-size:21px;text-transform:uppercase;color:var(--blue);margin:28px 0 10px}
.prose p{margin-bottom:18px}
.prose ul,.prose ol{margin:0 0 20px 22px}
.prose li{margin-bottom:8px}
.prose a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--orange-dark)}
.prose img{border-radius:12px;margin:22px 0}
.prose table{width:100%;border-collapse:collapse;margin:22px 0;font-size:15px}
.prose th,.prose td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.prose th{background:var(--sand);font-weight:700}
.prose blockquote{border-left:4px solid var(--orange);padding:6px 0 6px 20px;margin:22px 0;color:var(--grey)}
/* Oude content bevat iframes met vaste breedte/hoogte (560x315, 702x550).
   Op mobiel dwingen we ze naar volle breedte met een vaste verhouding,
   anders krijg je zwarte balken of horizontaal scrollen. */
.prose iframe{width:100%!important;height:auto!important;aspect-ratio:16/9;border-radius:12px;border:0;background:var(--blue-900)}
.prose table{display:block;overflow-x:auto}
.prose{overflow-wrap:break-word}
.sidebar .card+.card{margin-top:20px}
.sidebar h4{font-family:'hwt-artz',sans-serif;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin-bottom:12px}
.side-link{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:8px;background:#fff;font-weight:600;font-size:15px;margin-bottom:8px;transition:.15s;color:var(--ink)}
.side-link::after{content:'→';color:var(--orange);font-weight:700;opacity:0;transform:translateX(-5px);transition:.15s}
.side-link:hover{border-color:var(--blue);background:var(--mist);color:var(--blue)}
.side-link:hover::after{opacity:1;transform:none}

/* ===== Ranglijst ===== */
.tabel-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--line);
	/* Schaduwtruc: de radiale randen staan vast aan de wrapper, de witte dekvlakken
	   schuiven mee met de inhoud. Zo verschijnt links of rechts vanzelf een schaduw
	   zodra daar nog iets buiten beeld staat — zonder JavaScript. */
	background:
		linear-gradient(to right, #fff 32%, rgba(255,255,255,0)) left center,
		linear-gradient(to left,  #fff 32%, rgba(255,255,255,0)) right center,
		radial-gradient(farthest-side at 0 50%,   rgba(0,51,87,.16), rgba(0,51,87,0)) left center,
		radial-gradient(farthest-side at 100% 50%, rgba(0,51,87,.16), rgba(0,51,87,0)) right center;
	background-repeat:no-repeat;
	background-size:42px 100%, 42px 100%, 15px 100%, 15px 100%;
	background-attachment:local, local, scroll, scroll}
.veeg-hint{display:none}
table.ranglijst{width:100%;border-collapse:collapse;font-size:15px;min-width:460px}
table.ranglijst th{background:var(--blue);color:#fff;font-family:'hwt-artz',sans-serif;font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;text-align:left;padding:12px 14px}
table.ranglijst td{padding:11px 14px;border-top:1px solid var(--line)}
table.ranglijst tbody tr:nth-child(even){background:var(--sand)}
table.ranglijst .plaats{font-family:'hwt-artz',sans-serif;color:var(--grey);width:52px}
table.ranglijst tr.top .plaats{color:var(--orange);font-size:18px}
table.ranglijst tr.top td{font-weight:600}
.voetnoot{font-size:13px;color:var(--grey);margin-top:14px}
.jaarkiezer{display:flex;gap:6px;flex-wrap:wrap}
.jaarkiezer .jaar{font-family:'hwt-artz',sans-serif;font-size:14px;padding:7px 13px;border-radius:8px;background:var(--sand);color:var(--blue);border:1px solid var(--line)}
.jaarkiezer .jaar:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.jaarkiezer .jaar.actief{background:var(--blue);color:#fff;border-color:var(--blue)}

/* ===== Notitieblok voor nog te bouwen onderdelen ===== */
.nog-te-bouwen{border:2px dashed #CFE3F2;background:var(--sand);border-radius:var(--radius);padding:24px 26px;margin:26px 0}
.nog-te-bouwen h4{font-family:'hwt-artz',sans-serif;text-transform:uppercase;color:var(--blue);font-size:16px;letter-spacing:.06em;margin-bottom:8px}
.nog-te-bouwen p{color:var(--grey);font-size:15px;margin:0}

/* ===== Windcalculator ===== */
.windcalc{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:420px}
.windcalc label{font-size:13px;font-weight:700;color:var(--grey);text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:5px}
.windcalc input{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:8px;font-size:16px;font-family:inherit;color:var(--ink)}
.windcalc input:focus{outline:2px solid var(--blue);border-color:var(--blue)}
.windcalc .breed{grid-column:1/-1}

/* ===== Footer ===== */
.site-footer{background:var(--blue);color:#E8F1F8;padding:0;position:relative;display:flow-root}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:50px;padding-bottom:44px}
.site-footer h5{font-family:'hwt-artz',sans-serif;color:#fff;font-size:16px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px}
.site-footer a:hover{color:#fff}
.site-footer li{list-style:none;padding:5px 0;font-size:14px}
.f-bottom{border-top:1px solid rgba(255,255,255,.1);padding:22px 0;font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.socials{display:flex;gap:12px;margin-top:18px}
.socials a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;transition:.2s}
.socials a:hover{background:var(--orange)}
.f-logo{font-family:'hwt-artz',sans-serif;font-size:24px;color:#fff;text-transform:uppercase;line-height:1.1}
.f-logo .or{color:var(--orange)}

/* stage-melding */
.stagebar{background:var(--orange);color:#fff;font-size:13px;font-weight:700;text-align:center;padding:6px 12px;letter-spacing:.02em}

@media(max-width:1024px){
  .spon-grid{grid-template-columns:repeat(4,1fr)}
  .page-layout{grid-template-columns:1fr}
}
@media(max-width:900px){
  .nav{height:88px}
  .nav .logo img,.nav .custom-logo-link img{height:58px}
  .nav-toggle{display:block;order:3}
  .menu .menu-cta a{background:var(--orange);color:#fff;text-align:center}
  .live{margin-top:-40px}
  .live-grid,.tool-grid{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:40px}
  .f-grid{grid-template-columns:1fr 1fr;gap:32px}
  .section{padding:64px 0}
  .hero{min-height:460px}
  .hero .wrap{padding-top:60px;padding-bottom:90px}
}
@media(max-width:560px){
  .spon-grid{grid-template-columns:repeat(2,1fr)}
  .f-grid{grid-template-columns:1fr}
  .topbar .wrap{font-size:12px;justify-content:center;text-align:center}
  .card{padding:20px}
}

/* ===== Surfmeter: aan- en afmelden ===== */
.melding{padding:14px 18px;border-radius:10px;font-weight:600;margin-bottom:22px}
.melding.ok{background:var(--mist);color:var(--blue);border:1px solid var(--line)}
.melding.fout{background:var(--orange-mist);color:var(--orange-dark);border:1px solid #F0DCC2}
.zoek-balk{display:flex;align-items:center;gap:14px;margin-top:26px;flex-wrap:wrap}
.zoek-balk input{flex:1;min-width:220px;padding:13px 16px;border:1px solid var(--line);border-radius:10px;font-size:16px;font-family:inherit;color:var(--ink)}
.zoek-balk input:focus{outline:2px solid var(--blue);border-color:var(--blue)}
.zoek-balk .teller{font-size:14px;color:var(--grey);font-weight:600}
h2 .aantal{display:inline-block;background:var(--blue);color:#fff;font-size:20px;padding:2px 14px;border-radius:999px;vertical-align:middle;margin-left:6px}
.leden-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:12px}
.lid{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 15px}
/* display:flex zou het hidden-attribuut overschrijven; expliciet verbergen */
.lid[hidden]{display:none}
.lid.actief{border-color:var(--blue);background:linear-gradient(180deg,var(--mist),#fff);box-shadow:0 4px 14px rgba(0,102,174,.12)}
.lid .naam{font-weight:600;display:block}
.lid .sinds{font-size:13px;color:var(--grey)}
.knop{font-family:'hwt-artz',sans-serif;font-size:13px;letter-spacing:.05em;text-transform:uppercase;padding:10px 16px;border-radius:8px;border:0;cursor:pointer;transition:.15s;white-space:nowrap}
.knop.aan{background:var(--blue);color:#fff}
.knop.aan:hover{background:var(--blue-800)}
.knop.uit{background:var(--orange);color:#fff}
.knop.uit:hover{background:var(--orange-dark)}
.knop:disabled{background:var(--line);color:var(--grey);cursor:not-allowed}
.geen-resultaat{color:var(--grey);margin-top:16px}

/* ===== Windpagina ===== */
.wind-nu{display:grid;grid-template-columns:1fr 260px;gap:32px;align-items:center;background:var(--sand);border:1px solid var(--line);border-radius:var(--radius);padding:32px 34px;margin-top:8px}
.wind-cijfer{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.wind-cijfer .getal{font-family:'hwt-artz',sans-serif;font-size:84px;line-height:.9;color:var(--blue)}
.wind-cijfer .eenheid{font-size:20px;font-weight:600;color:var(--grey)}
.oordeel{font-family:'hwt-artz',sans-serif;font-size:14px;letter-spacing:.06em;text-transform:uppercase;padding:6px 14px;border-radius:8px}
.oordeel.goed{background:var(--orange);color:#fff}
.oordeel.krap,.oordeel.veel{background:var(--orange-mist);color:var(--orange-dark)}
.oordeel.weinig,.oordeel.teveel{background:var(--mist);color:var(--blue)}
.wind-details{display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:22px}
.wind-details dt{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);font-weight:700}
.wind-details dd{font-size:20px;font-weight:600;color:var(--blue)}
.windroos{margin:0}
.windroos svg{width:100%;height:auto;max-width:230px;margin:0 auto;display:block}
.windroos figcaption{text-align:center;font-size:14px;color:var(--grey);margin-top:10px}
.windroos figcaption strong{color:var(--blue);font-size:17px}

.grafiek-uitleg{color:var(--grey);font-size:14px;margin:18px 0 14px;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.vlag{display:inline-block;width:14px;height:14px;border-radius:3px;vertical-align:middle;margin-right:2px}
.vlag.goed{background:var(--orange)}
.vlag.krap{background:var(--orange);opacity:.45}
.vlag.veel{background:var(--blue-700)}
.vlag.weinig{background:var(--blue);opacity:.3}
.grafiek-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);padding:18px 10px 6px;background:#fff}
.windgrafiek{min-width:1050px;height:250px;display:block}
.windgrafiek .staaf.goed{fill:var(--orange)}
.windgrafiek .staaf.krap{fill:var(--orange);opacity:.45}
.windgrafiek .staaf.veel{fill:var(--blue-700)}
.windgrafiek .staaf.weinig{fill:var(--blue);opacity:.3}
.windgrafiek .staaf.teveel{fill:var(--blue-900)}

.sub-kop{font-family:'hwt-artz',sans-serif;text-transform:uppercase;color:var(--blue);font-size:20px;margin:30px 0 12px}
.kite-momenten{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:10px}
.kite-momenten li{background:var(--mist);border-left:4px solid var(--orange);border-radius:0 10px 10px 0;padding:12px 16px;font-size:15px}

table.kitetabel{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
table.kitetabel th{background:var(--blue);color:#fff;font-family:'hwt-artz',sans-serif;font-size:13px;letter-spacing:.05em;text-transform:uppercase;padding:11px 12px;text-align:center}
table.kitetabel tbody th{background:var(--mist);color:var(--blue);text-align:left}
table.kitetabel td{padding:10px 12px;border-top:1px solid var(--line);text-align:center}
table.kitetabel tbody tr:nth-child(even) td{background:var(--sand)}
table.kitetabel .nu{background:var(--orange-mist)!important;font-weight:700;color:var(--orange-dark)}
table.kitetabel thead .nu{background:var(--orange)!important;color:#fff}
@media(max-width:760px){
  .wind-nu{grid-template-columns:1fr;gap:20px;padding:24px}
  .wind-cijfer .getal{font-size:64px}
}

/* ===== Homepage-variant zonder heldbeeld ===== */
.status-strip{background:var(--blue);color:#fff;padding:26px 0 30px}
.status-grid{display:grid;grid-template-columns:repeat(3,auto) 1fr;gap:26px 44px;align-items:center}
.status-item{display:flex;flex-direction:column;gap:2px}
.status-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#BBD6E9;font-weight:700}
.status-groot{font-family:'hwt-artz',sans-serif;font-size:42px;line-height:1}
.status-groot small{font-size:15px;font-family:'Inter',sans-serif;font-weight:600;margin-left:5px;color:#D9E9F4}
.status-sub{font-size:14px;color:#D9E9F4}
.status-oordeel{font-family:'hwt-artz',sans-serif;font-size:22px;text-transform:uppercase;line-height:1.1}
.status-oordeel.goed{color:var(--orange)}
.status-oordeel.krap,.status-oordeel.veel{color:#F3C48A}
.status-oordeel.weinig,.status-oordeel.teveel{color:#BBD6E9}
.status-acties{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}
.live.compact{margin-top:26px}
@media(max-width:900px){
  .status-grid{grid-template-columns:1fr 1fr;gap:20px}
  .status-acties{grid-column:1/-1;justify-content:flex-start}
  .live.compact{margin-top:20px}
}
@media(max-width:560px){
  .status-grid{grid-template-columns:1fr}
  .status-groot{font-size:34px}
}


/* ===== Sponsorslider ===== */
.spon-slider{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.spon-rij{display:flex;width:max-content}
.spon-rij+.spon-rij{margin-top:14px}
.spon-rij .spon{flex:none;width:172px;height:86px;margin-right:14px}
.rij-links{animation:spon-links 55s linear infinite}
.rij-rechts{animation:spon-rechts 55s linear infinite}
.spon-rij:hover{animation-play-state:paused}
@keyframes spon-links{to{transform:translateX(-50%)}}
@keyframes spon-rechts{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){
  .spon-slider{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .rij-links,.rij-rechts{animation:none}
}

/* ===== Footer diap-logo ===== */
.f-logo-img{height:96px;width:auto}


/* ===== Mobiele laag ===== */
@media(max-width:760px){
  /* topbar: één compacte strook in plaats van twee dikke regels */
  .topbar{font-size:12px}
  .topbar .wrap{min-height:0;padding-top:6px;padding-bottom:7px;gap:2px 14px;justify-content:center;text-align:center}

  /* paginakoppen: fors minder lucht */
  .page-hero{padding:26px 0 34px}
  .page-hero .waves{margin:10px 0 0}
  .breadcrumb{margin-bottom:6px}
  .page-body{padding:36px 0 56px}
  .page-layout{gap:34px}
  .section{padding:48px 0}
  .sec-head{margin-bottom:28px}

  .wind-nu{padding:22px 20px;gap:16px}
  .windroos svg{max-width:180px}
  .grafiek-wrap{padding:12px 6px 4px}
  .card{padding:20px}
  .clubcard{padding:28px 22px}
  .f-logo-img{height:72px}
  .f-grid{padding-bottom:34px;gap:26px}
}
@media(max-width:420px){
  .wrap{padding:0 18px}
  .hero h1{font-size:37px}
  .page-hero h1{font-size:27px}
  h2{font-size:25px}
  .hero{min-height:400px}
  .hero .wrap{padding-top:44px;padding-bottom:76px}
  .cta-row .btn{flex:1 1 auto}
  .wind-cijfer .getal{font-size:56px}
  .wind-details{gap:8px 20px}
  .wind-details dd{font-size:17px}
  .status-groot{font-size:30px}
  .tool{padding:26px 22px}
}


/* ===== Intro-alinea op contentpagina's ===== */
.prose .intro{font-size:18px;color:var(--grey);max-width:640px;margin-bottom:26px}

/* ===== Fotoalbums ===== */
.album-jaar{margin-top:38px}
.album-jaartal{display:flex;align-items:center;gap:12px;color:var(--blue)}
.album-aantal{font-family:'Inter',sans-serif;font-weight:600;font-size:13px;letter-spacing:0;text-transform:none;color:var(--grey);background:var(--mist);padding:4px 12px;border-radius:999px}
.album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:12px;margin-top:16px}
.album-kaart{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;transition:.18s}
.album-kaart:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--blue)}
.album-icoon{flex:none;width:40px;height:40px;border-radius:10px;background:var(--mist);display:flex;align-items:center;justify-content:center}
.album-icoon svg{width:20px;height:20px;color:var(--blue)}
.album-titel{flex:1;font-weight:600;font-size:15px;line-height:1.35;color:var(--ink)}
.album-pijl{color:var(--orange);font-weight:700;opacity:0;transform:translateX(-4px);transition:.18s}
.album-kaart:hover .album-pijl{opacity:1;transform:none}

/* ===== Windbronnen ===== */
.bron-groep{margin-top:22px}
.bron-groep h3{font-family:'hwt-artz',sans-serif;text-transform:uppercase;color:var(--blue);font-size:17px;letter-spacing:.04em;margin-bottom:12px}
.bron-chips{display:flex;flex-wrap:wrap;gap:10px}
.bron-chip{display:inline-flex;align-items:baseline;gap:9px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 14px;transition:.15s}
.bron-naam{font-weight:600;font-size:14px;color:var(--ink)}
.bron-domein{font-size:12px;color:var(--grey)}
.bron-icoon svg{width:13px;height:13px;color:var(--blue);align-self:center}
.bron-chip:hover{border-color:var(--blue);box-shadow:var(--shadow);transform:translateY(-2px)}

/* Album- en bronkaarten zijn blokken, geen tekstlinks: geen onderstreping */
.prose a.album-kaart{text-decoration:none;color:var(--ink);font-weight:400}
.prose a.album-kaart:hover{color:var(--ink)}

/* ===== Saldo-formulier ===== */
.saldo-form{max-width:560px}
.saldo-form .veld{margin-bottom:20px}
.saldo-form label,.saldo-form .veld-label{display:block;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);margin-bottom:8px}
.saldo-form select{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font-size:16px;font-family:inherit;color:var(--ink);background:#fff}
.saldo-form select:focus{outline:2px solid var(--blue);border-color:var(--blue)}
.bedrag-kiezer{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bedrag input{position:absolute;opacity:0;pointer-events:none}
.bedrag span{display:block;text-align:center;padding:12px 8px;border:1px solid var(--line);border-radius:10px;font-family:'hwt-artz',sans-serif;font-size:17px;color:var(--blue);cursor:pointer;transition:.15s;background:#fff}
.bedrag span:hover{border-color:var(--blue)}
.bedrag input:checked+span{background:var(--blue);border-color:var(--blue);color:#fff}
.bedrag input:focus-visible+span{outline:2px solid var(--orange);outline-offset:2px}


/* ===== Mini-windroos in de windkaart ===== */
.windstat{display:flex;align-items:center;gap:14px}
.roos-mini{width:52px;height:52px;flex:none}

/* ===== Windpagina: bronnen naast omrekenen ===== */
.wind-onder{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:start}
@media(max-width:900px){.wind-onder{grid-template-columns:1fr;gap:8px}}

/* ===== CTA-blok in contentpagina's (bv. Whatsapp-groep) ===== */
.prose .cta-blok{background:var(--blue);color:#E8F1F8;border-radius:var(--radius);padding:28px 30px;margin:30px 0;position:relative;overflow:hidden}
.prose .cta-blok h3{color:#fff;margin:0 0 8px}
.prose .cta-blok p{color:#E8F1F8;margin-bottom:16px}
.prose .cta-blok .btn{text-decoration:none}
.prose .cta-blok::after{content:'';position:absolute;right:-40px;bottom:-52px;width:210px;height:180px;background:url('../../uploads/logo/kite-wit.png?v=2') no-repeat center/contain;opacity:.13;transform:rotate(-8deg);pointer-events:none}

/* ===== Lid worden-formulier ===== */
.lid-form{max-width:640px}
.lid-form .veld{margin-bottom:16px}
.lid-form .veld-rij{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lid-form label{display:block;font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--grey);margin-bottom:6px}
.lid-form input[type=text],.lid-form input[type=email],.lid-form input[type=tel],.lid-form input[type=date],.lid-form textarea{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:9px;font-size:16px;font-family:inherit;color:var(--ink);background:#fff}
.lid-form input:focus,.lid-form textarea:focus{outline:2px solid var(--blue);border-color:var(--blue)}
.lid-form .akkoord{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--grey);text-transform:none;letter-spacing:0;font-weight:400;margin:18px 0 20px;cursor:pointer}
.lid-form .akkoord input{margin-top:3px;width:17px;height:17px;accent-color:var(--blue);flex:none}
.lid-form .akkoord a{color:var(--blue);font-weight:600;text-decoration:underline}
.hp-veld{position:absolute;left:-9999px;height:0;overflow:hidden}
.lid-form select{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:9px;font-size:16px;font-family:inherit;color:var(--ink);background:#fff}
.lid-form select:focus{outline:2px solid var(--blue);border-color:var(--blue)}
.lid-form .veld small{display:block;margin-top:6px;font-size:13px;color:var(--grey);text-transform:none;letter-spacing:0;font-weight:400}
.lid-form .veld-groep{border:0;padding:0;margin:0 0 26px;min-width:0}
.lid-form .veld-groep legend{padding:0;margin-bottom:12px;font-family:var(--kop);font-size:19px;color:var(--blue);text-transform:none;letter-spacing:0}
.lid-form .naam-rij{grid-template-columns:1fr 110px 1fr}
.lid-form .adres-rij{grid-template-columns:1fr 130px}
.lid-form .veld-rij > *{min-width:0}
@media(max-width:560px){
	.lid-form .veld-rij,.lid-form .naam-rij,.lid-form .adres-rij{grid-template-columns:1fr}
}


/* m/s-subregel in de kitetabelkoppen */
table.kitetabel thead th .ms{display:block;font-family:'Inter',sans-serif;font-size:10px;font-weight:600;letter-spacing:0;text-transform:none;opacity:.75;margin-top:2px}


/* m/s-subregel onder het grote knopencijfer */
.bigstat .bigstat-ms{display:block;font-family:'Inter',sans-serif;font-size:14px;font-weight:600;color:var(--grey);letter-spacing:0;line-height:1.3;margin-top:3px}


/* Laatste sectie voor de footer: minder onderruimte (de golf overlapt al 70px) */
#main > .section:last-child{padding-bottom:78px}
#main > .page-body:last-child{padding-bottom:82px}
@media(max-width:760px){
  #main > .section:last-child{padding-bottom:74px}
  #main > .page-body:last-child{padding-bottom:76px}
}

/* ===== Bestuurskaarten ===== */
.bestuur-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:14px;margin:20px 0 8px}
.bestuur-kaart{display:flex;flex-direction:column;gap:2px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:12px;padding:16px 18px}
.bestuur-rol{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-dark)}
.bestuur-naam{font-family:'hwt-artz',sans-serif;font-size:19px;color:var(--blue);line-height:1.15;margin-bottom:6px}
.bestuur-regel{font-size:14px;color:var(--grey);text-decoration:none}
.bestuur-regel:hover{color:var(--blue);text-decoration:underline}

/* ===== Kiteregels met toelichting ===== */
.prose ul.kiteregels{list-style:none;margin-left:0}
.prose ul.kiteregels li{position:relative;padding:11px 0 11px 30px;border-bottom:1px solid var(--line);margin:0}
.prose ul.kiteregels li::before{content:'';position:absolute;left:0;top:19px;width:12px;height:3px;border-radius:2px;background:var(--orange)}
.prose ul.kiteregels .waarom{display:block;font-size:14px;color:var(--grey);margin-top:4px}

/* ===== Embeds ===== */
.embed-hoog{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--mist)}
.embed-hoog iframe{width:100%;height:760px;border:0;display:block}
.video-embed{position:relative;padding-bottom:56.25%;height:0;border-radius:var(--radius);overflow:hidden;background:var(--blue-900);margin:18px 0}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:760px){.embed-hoog iframe{height:520px}}

/* ===== Grid-items mogen krimpen =====
   Rasterkolommen krijgen standaard min-width:auto en worden dus zo breed als
   hun breedste kind (bv. een tabel met min-width). Dat duwde de hele pagina
   open op mobiel. Expliciet op 0 zetten laat de scrollcontainers hun werk doen. */
.page-layout > *,.split > *,.wind-onder > *,.live-grid > *,.live-side > *,
.tool-grid > *,.bestuur-grid > *,.leden-grid > *,.album-grid > *,.status-grid > *{min-width:0}

@media(max-width:560px){
  /* Ranglijst past zonder horizontaal schuiven als de sessiekolom wegvalt */
  table.ranglijst th:nth-child(3),table.ranglijst td:nth-child(3){display:none}
  table.ranglijst{min-width:0}
  table.ranglijst th,table.ranglijst td{padding:10px 8px}
  table.ranglijst .plaats{width:38px}
  /* Kitetabel blijft scrollen (7 kolommen); de schaduw laat zien dat er meer is
     en de hint eronder zegt het er nog een keer bij. */
  .tabel-wrap{position:relative}
  .veeg-hint{display:flex;align-items:center;gap:7px;margin-top:9px;
    font-size:13.5px;color:var(--grey)}
  .veeg-hint svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;
    stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
}

/* ===== Mobiel: bedienbaarheid met de duim =====
   Knoppen en losse links minstens ~44px hoog, zodat je ze op een telefoon
   raakt zonder te mikken. Inline tekstlinks blijven zoals ze zijn. */
@media(max-width:760px){
  .knop{min-height:44px;padding:12px 18px;font-size:14px}
  .lid{padding:12px 14px;gap:10px}
  .lid .naam{font-size:16px}
  .bron-chip{min-height:46px;padding:10px 15px}
  .bron-domein{font-size:12.5px}
  .jaarkiezer .jaar{min-height:42px;display:inline-flex;align-items:center;padding:0 15px}
  .side-link{min-height:46px}
  .chip{padding:8px 14px;font-size:14px}
  .chip.more{min-height:38px;display:inline-flex;align-items:center}
  .album-kaart{min-height:60px}
  .bestuur-rol{font-size:11.5px}
  .breadcrumb a{display:inline-block;padding:4px 0}
  .btn{padding:14px 22px}
  .menu a{padding:14px 16px}
  /* iOS zoomt in op velden onder 16px — alle zichtbare invoer op 16px houden */
  input[type=text],input[type=email],input[type=tel],input[type=date],
  input[type=number],input[type=search],select,textarea{font-size:16px}
  .bedrag span{padding:14px 8px;font-size:18px}
  .zoek-balk input{padding:14px 16px}
}


/* Legenda: vlakje en label blijven bij elkaar bij het afbreken */
.grafiek-uitleg .legenda{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.grafiek-uitleg .vlag{margin:0}
@media(max-width:760px){
  .grafiek-uitleg{gap:8px 14px;font-size:13px}
  /* schuifhint bij de brede grafiek */
  .grafiek-wrap{scroll-snap-type:x proximity}
  .grafiek-wrap::-webkit-scrollbar{height:8px}
  .grafiek-wrap::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
}


/* ================= Mobiel menu: schuifpaneel ================= */
.nav-paneel{display:contents}
.paneel-kop,.paneel-voet,.paneel-kite,.paneel-sluit{display:none}
.nav-overlay{display:none}
[hidden]{display:none!important}

@media(max-width:900px){
  .nav-cta{display:none}
  .nav-toggle{display:block;order:3;z-index:60}

  /* LET OP: alleen tonen als het hidden-attribuut weg is. Een kale
     display:block overrulet [hidden] en legt een onzichtbare klikblokkade
     over de hele site. */
  .nav-overlay:not([hidden]){display:block;position:fixed;inset:0;z-index:70;
    background:rgba(0,51,87,.55);animation:overlay-in .25s ease}
  @keyframes overlay-in{from{opacity:0}to{opacity:1}}

  .nav-paneel{display:flex;flex-direction:column;position:fixed;top:0;right:0;z-index:80;
    width:min(86vw,360px);height:100dvh;background:var(--blue);color:#fff;
    box-shadow:-18px 0 44px rgba(0,51,87,.3);overflow-y:auto;overscroll-behavior:contain;
    transform:translateX(102%);transition:transform .28s cubic-bezier(.4,0,.2,1);
    padding:0 0 24px}
  .nav-paneel.open{transform:none}
  body.menu-open{overflow:hidden}

  .paneel-kop{display:flex;align-items:center;justify-content:space-between;
    padding:22px 24px 14px;border-bottom:1px solid rgba(255,255,255,.18)}
  .paneel-titel{font-family:'hwt-artz',sans-serif;font-size:15px;letter-spacing:.14em;
    text-transform:uppercase;color:#BBD6E9}
  .paneel-sluit{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
    margin-right:-10px;border:0;background:rgba(255,255,255,.12);border-radius:10px;color:#fff;cursor:pointer;
    transition:.15s}
  .paneel-sluit:hover{background:rgba(255,255,255,.22)}
  .paneel-sluit svg{width:20px;height:20px}

  /* menu-items */
  .nav-paneel .menu{display:flex;flex-direction:column;align-items:stretch;gap:0;
    padding:8px 0 4px;position:relative;z-index:2}
  .nav-paneel .menu li{border-bottom:1px solid rgba(255,255,255,.1)}
  .nav-paneel .menu a{display:flex;align-items:center;gap:12px;padding:16px 24px;
    font-size:19px;letter-spacing:.03em;color:#fff;border-radius:0;background:none;
    transition:background .15s,padding-left .15s}
  .nav-paneel .menu a::before{content:'';width:3px;height:20px;border-radius:2px;
    background:transparent;transition:background .15s}
  .nav-paneel .menu a:hover,.nav-paneel .menu a:focus-visible{background:rgba(255,255,255,.09);padding-left:28px;color:#fff}
  .nav-paneel .menu .current-menu-item>a,.nav-paneel .menu .current_page_item>a{color:var(--orange)}
  .nav-paneel .menu .current-menu-item>a::before,.nav-paneel .menu .current_page_item>a::before{background:var(--orange)}
  .nav-paneel .menu .sub-menu{display:flex;position:static;flex-direction:column;
    background:none;border:0;box-shadow:none;padding:0 0 6px 24px;min-width:0}
  .nav-paneel .menu .sub-menu a{font-size:16px;padding:11px 24px;color:#D9E9F4}

  /* voet met live status + CTA */
  .paneel-voet{display:block;margin-top:auto;padding:20px 24px 0;position:relative;z-index:2}
  .paneel-status{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
  .ps-item{background:rgba(255,255,255,.14);border-radius:999px;padding:7px 14px;font-size:13px;color:#E8F1F8}
  .ps-item b{color:#fff}
  .paneel-voet .btn{display:block;width:100%}

  .paneel-kite{display:block;position:absolute;right:-40px;bottom:96px;width:190px;height:auto;
    opacity:.07;transform:rotate(-8deg);pointer-events:none;z-index:1}

  @media(prefers-reduced-motion:reduce){
    .nav-paneel{transition:none}
    .nav-overlay{animation:none}
  }
}

/* ------------------------------------------------------ Steun NSS ------- */
.steun-hero{background:var(--blue);color:#fff;padding:34px 0 44px;position:relative}
.steun-hero h1{font-size:clamp(34px,6vw,58px);line-height:1.04;margin:8px 0 0;text-transform:uppercase}
.steun-hero .or{color:var(--orange)}
.steun-hero .breadcrumb{color:rgba(255,255,255,.72)}
.steun-hero .breadcrumb a{color:rgba(255,255,255,.86)}
.steun-lead{max-width:640px;font-size:18px;line-height:1.65;color:rgba(255,255,255,.94);margin:18px 0 26px}
.steun-knoppen{display:flex;flex-wrap:wrap;gap:12px}
.steun-knoppen .btn{min-width:210px;text-align:center}
.steun-knoppen .btn.stil{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.55)}

.steun-cijfers{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center}
.steun-cijfers > *{min-width:0}
.cijfer b{display:block;font-family:'hwt-artz','Inter',sans-serif;font-size:clamp(38px,6vw,58px);color:var(--blue);line-height:1}
.cijfer span{display:block;margin-top:8px;font-size:14.5px;color:var(--grey);line-height:1.45}

/* Volgt de gewone paginabreedte, zodat de koppen op één lijn staan met de rest
   van de pagina. Alleen de lopende tekst wordt smaller gehouden — een regel van
   1180 pixels leest niet prettig. */
.steun-blok{max-width:var(--wrap)}
.steun-tekst{font-size:17.5px;line-height:1.72;margin:0 0 18px;max-width:68ch}
.steun-kaarten{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:26px 0 0}
.steun-kaarten > *{min-width:0}
.steun-kaart{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 22px 24px}
.steun-kaart h3{font-family:'hwt-artz','Inter',sans-serif;font-size:20px;color:var(--blue);margin:14px 0 8px}
.steun-kaart p{font-size:15.5px;line-height:1.65;margin:0;color:var(--ink)}
.steun-icoon{width:46px;height:46px;border-radius:12px;background:var(--orange-mist);
	color:var(--orange-dark);display:grid;place-items:center}
.steun-icoon svg{width:24px;height:24px}

.steun-cta{margin-top:28px;background:var(--blue);color:#fff;border-radius:16px;
	padding:26px 28px;display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.steun-cta > *{min-width:0}
.steun-cta h3{font-family:'hwt-artz','Inter',sans-serif;font-size:23px;margin:0 0 6px}
.steun-cta p{margin:0;font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.92);max-width:56ch}
.steun-cta .btn{flex:none;min-width:250px;text-align:center}

.steun-zij h4{font-family:'hwt-artz','Inter',sans-serif;font-size:19px;color:var(--blue);margin:0 0 10px}
.steun-zij p{font-size:15px;line-height:1.6;margin:0 0 12px}
.steun-tarief{font-weight:600;color:var(--blue)}

/* de knop die op meer plekken terugkomt */
.steun-strip{background:var(--orange-mist);border:1px solid #F0DFC9;border-radius:16px;
	padding:22px 24px;display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.steun-strip > *{min-width:0}
.steun-strip h3{font-family:'hwt-artz','Inter',sans-serif;font-size:22px;color:var(--orange-dark);margin:0 0 5px}
.steun-strip p{margin:0;font-size:15.5px;color:var(--orange-dark);max-width:58ch;line-height:1.6}
.steun-strip .btn{flex:none;min-width:220px;text-align:center}
.side-steun{background:var(--orange-mist);border-color:#F0DFC9}
.side-steun h4{color:var(--orange-dark)}
.side-steun p{font-size:14px;line-height:1.55;color:var(--orange-dark);margin:0 0 12px}
.side-steun .btn{display:block;text-align:center;padding:11px 14px;font-size:15px}

@media(max-width:860px){
	.steun-kaarten{grid-template-columns:1fr}
	.steun-cijfers{grid-template-columns:repeat(2,1fr);gap:24px 14px}
	.steun-cta,.steun-strip{flex-direction:column;align-items:flex-start}
	.steun-cta .btn,.steun-strip .btn{width:100%;min-width:0}
	.steun-knoppen .btn{flex:1 1 100%;min-width:0}
}

/* ------------------------------------------------ link naar het portaal --- */
.topbar .portaal-link{display:inline-flex;align-items:center;gap:5px;
	background:rgba(255,255,255,.16);padding:3px 10px;border-radius:999px;font-weight:600}
.topbar .portaal-link:hover{background:rgba(255,255,255,.28);text-decoration:none}
.topbar .portaal-link svg{flex:none}
.paneel-voet .paneel-portaal{margin-bottom:10px}
.nav-paneel .btn.stil{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.5)}
.nav-paneel .btn.stil:hover{background:rgba(255,255,255,.12)}

/* ------------------------------------------------------- ledenfoto's ----- */
/* Foto uit het ledenportaal. Laadt hij niet (geen foto, of het lid staat op
   onzichtbaar), dan haalt het onerror-attribuut de <img> weg en blijven de
   initialen eronder staan. */
.lidfoto{position:relative;display:inline-grid;place-items:center;flex:none;
	width:var(--maat);height:var(--maat);border-radius:50%;overflow:hidden;background:var(--mist)}
.lidfoto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.lidfoto-letters{font-family:'hwt-artz',sans-serif;font-size:calc(var(--maat) * .38);
	color:var(--blue);line-height:1;z-index:1}
.leden-grid .lid{align-items:center}
.leden-grid .lid .lidfoto{margin-right:11px}
.naam-met-foto{display:inline-flex;align-items:center;gap:10px;min-width:0}
.chip-foto{display:inline-flex;align-items:center;gap:8px;padding-left:5px}

/* ------------------------------------------------------------ beweging --- */
/*
   Alles in CSS, met opzet.
   Een eerdere versie verborg elementen en liet JavaScript ze weer tevoorschijn
   halen zodra ze in beeld kwamen. Dat is een slechte ruil: gaat er iets mis met
   dat script, dan blijft de halve pagina onzichtbaar. Dat gebeurde ook — in een
   testbrowser leverde IntersectionObserver geen meldingen en bleef er content
   weg. Nu geldt: zonder ondersteuning gebeurt er niets en staat alles er
   gewoon. Er valt niets te verbergen dat aan blijft hangen.
*/

/* --- 1. De kop van de pagina, meteen bij het laden --- */
@media (prefers-reduced-motion:no-preference){
	@keyframes nss-opkomen{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
	@keyframes nss-beeld-in{from{opacity:0;transform:scale(1.05)}to{opacity:1;transform:none}}

	.hero h1,.hero .waves,.hero p,.hero .cta-row,
	.page-hero h1,.page-hero .waves,
	.steun-hero h1,.steun-hero .waves,.steun-hero .steun-lead,.steun-hero .steun-knoppen{
		animation:nss-opkomen .6s cubic-bezier(.2,.7,.3,1) both}

	.hero h1              {animation-delay:.10s}
	.hero .waves          {animation-delay:.20s}
	.hero p               {animation-delay:.28s}
	.hero .cta-row        {animation-delay:.36s}
	.hero::before         {animation:nss-beeld-in 1.1s cubic-bezier(.2,.7,.3,1) both}

	.page-hero h1         {animation-delay:.08s}
	.page-hero .waves     {animation-delay:.18s}
	.steun-hero h1        {animation-delay:.08s}
	.steun-hero .waves    {animation-delay:.18s}
	.steun-hero .steun-lead    {animation-delay:.26s}
	.steun-hero .steun-knoppen {animation-delay:.34s}

	/* De live-strip schuift onder de hero vandaan */
	.live-grid > *{animation:nss-opkomen .7s cubic-bezier(.2,.7,.3,1) both;animation-delay:.42s}
	.live-grid > *:nth-child(2){animation-delay:.52s}
}

/* --- 2. Opkomen tijdens het scrollen, zonder JavaScript ---
   `animation-timeline: view()` koppelt de animatie aan de scrolpositie. Kent de
   browser het niet, dan wordt het hele blok overgeslagen en is er simpelweg geen
   animatie — de inhoud staat er hoe dan ook. */
@supports (animation-timeline: view()){
	@media (prefers-reduced-motion:no-preference){
		.tool,.clubcard,.event,.steun-kaart,.cijfer,.steun-cta,.steun-strip,
		.album-kaart,.bestuur-kaart,.bron-groep,.wind-nu,.windgrafiek,
		.section .sec-head{
			animation:nss-opkomen linear both;
			animation-timeline:view();
			animation-range:entry 2% cover 20%;
		}
	}
}

/* Kaarten reageren op aanwijzen; op een telefoon gebeurt er niets. */
@media (hover:hover) and (min-width:900px){
	.tool,.steun-kaart,.album-kaart,.bron-chip{
		transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
	.tool:hover,.steun-kaart:hover,.album-kaart:hover{
		transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,51,87,.10)}
	.bron-chip:hover{transform:translateY(-2px)}
}

/* ------------------------------------------------------------------ shorts ---
   Staand formaat (9:16), want dat is wat een short is. De kaartjes zijn
   afbeeldingen met een knop, geen ingesloten spelers — die laden pas na een klik. */
.shorts{display:grid;gap:20px;margin-top:26px;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.short{min-width:0}
.short-knop,.short-speler{display:block;width:100%;aspect-ratio:9/16;border:0;
  border-radius:var(--radius);overflow:hidden;background:var(--blue-900)}
.short-knop{position:relative;padding:0;cursor:pointer}
.short-knop img{width:100%;height:100%;object-fit:cover;display:block}
.short-play{position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(0,51,87,0) 45%,rgba(0,51,87,.55) 100%)}
.short-play svg{width:54px;height:54px;color:#fff;filter:drop-shadow(0 2px 8px rgba(0,51,87,.5));
  transition:transform .18s ease}
.short-knop:hover .short-play svg{transform:scale(1.12)}
.short-knop:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.short-tekst{padding:10px 2px 0}
.short-tekst b{display:block;font-size:14.5px;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.short-tekst small{display:block;margin-top:3px;font-size:12.5px;color:var(--grey)}
@media (max-width:520px){
  .shorts{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
  .short-play svg{width:42px;height:42px}
}

/* De verwijzing naar het kanaal in één stuk: brak hij af, dan kwam het pijltje
   alleen op de volgende regel te staan. */
.kanaal-link{white-space:nowrap;text-decoration:underline}

/* ------------------------------------------------ koppen op een telefoon ---
   Gemeten op 390x844: er ging 362px (43% van het scherm) op aan topbalk,
   navigatie en paginakop voordat er ook maar iets van de pagina zichtbaar was.
   Dat is voor een site waar mensen even snel de wind checken te veel. Hieronder
   staat elk stuk apart, zodat je later kunt zien waar de winst zat. */
@media(max-width:760px){
  /* topbalk: kleinere regelafstand, hij liep over drie regels */
  .topbar .wrap{padding-top:5px;padding-bottom:5px;line-height:1.35}

  /* De navigatiebalk heeft een vaste hoogte (88px vanaf 900px breed). Een
     kleiner logo levert dus niets op zolang die hoogte blijft staan — beide
     moeten mee. */
  .nav{height:68px}
  .nav .logo img,.nav .custom-logo-link img{height:46px}

  /* paginakop */
  .page-hero{padding:18px 0 24px}
  .page-hero .waves{margin:8px 0 0}
  .page-hero h1{font-size:clamp(24px,7vw,32px)}

  /* de wervende kop van Steun NSS */
  .steun-hero{padding:20px 0 26px}
  .steun-hero h1{font-size:clamp(28px,8vw,38px)}

  /* homepage: het beeld mag blijven, alleen minder lucht eromheen */
  .hero{min-height:430px}
  .hero .wrap{padding-top:52px;padding-bottom:78px}
}
@media(max-width:420px){
  .hero{min-height:380px}
  .hero .wrap{padding-top:40px;padding-bottom:66px}
  .page-hero h1{font-size:25px}
}

@media(max-width:760px){
  /* De inlogknop stond midden in de zin met wind en links, en belandde daardoor
     ergens aan het eind van een afgebroken regel. Op een eigen regel, gecentreerd:
     het is de enige knop in die balk en de belangrijkste. */
  .topbar .portaal-link{display:flex;width:fit-content;margin:5px auto 1px}
}