/* Jong NWBA — pagina-specifieke stijlen (uit hi-fi ontwerp) */

.hero { background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.hero .wrap { position: relative; z-index: 2; padding: clamp(56px,8vw,110px) 0 clamp(90px,11vw,150px); }
.hero.short .wrap { padding: clamp(40px,6vw,70px) 0; }
.hl { color: var(--orange); position: relative; white-space: nowrap; }
.hl-lime { background: linear-gradient(transparent 62%, var(--lime) 62%); padding: 0 .05em; }

.floatcard {
  position: absolute; right: 0; bottom: -54px; z-index: 4; width: min(330px, 80vw);
  background: var(--paper-2); color: var(--ink); border: 2px solid var(--ink);
  border-radius: var(--r-lg); padding: 18px; box-shadow: var(--pop-lg); transform: rotate(-2deg);
}
@media (max-width:860px){ .floatcard{ position:static; transform:none; margin-top:26px; bottom:auto; width:100%; } }

.dbadge { display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  width:62px; height:62px; border-radius:14px; background:var(--orange); color:#fff; border:2px solid var(--ink); flex:none; }
.dbadge .d { font-family:var(--display); font-weight:800; font-size:1.5rem; line-height:1; }
.dbadge .m { font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; }
.dbadge.cobalt{ background:var(--cobalt);} .dbadge.lime{ background:var(--lime); color:var(--ink);}

.ev-grid{ grid-template-columns:repeat(3,1fr);} @media(max-width:860px){.ev-grid{grid-template-columns:1fr;}}
.mem-grid{ grid-template-columns:repeat(3,1fr);} @media(max-width:760px){.mem-grid{grid-template-columns:1fr 1fr;}}

.filter-pill{ cursor:pointer; }
.filter-pill.on{ background:var(--ink); color:#fff; border-color:var(--ink); }

.switch2{ width:48px;height:27px;border-radius:999px;border:2px solid var(--ink);background:#fff;position:relative;cursor:pointer;flex:none;display:inline-block;}
.switch2::after{content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:var(--ink);transition:.15s;}
.switch2.on{background:var(--orange);} .switch2.on::after{left:23px;background:#fff;}
.switch2 input{ position:absolute; opacity:0; }

.orglogos{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.orglogo{ height:42px; min-width:96px; padding:0 14px; border-radius:12px; border:2px solid var(--ink); background:#fff;
  display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:.85rem; cursor:pointer; transition:.15s; text-transform:uppercase; }
.orglogo:hover{ background:var(--lime); transform:translateY(-2px); }

.social-ic{ width:38px;height:38px;border-radius:10px;border:2px solid var(--ink);display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:.78rem;background:#fff;cursor:pointer;transition:.15s;}
.social-ic:hover{ background:var(--orange); color:#fff; }

.biglink{ font-family:var(--display); font-weight:700; color:var(--cobalt); cursor:pointer; border-bottom:3px solid var(--lime); }
.biglink:hover{ color:var(--orange); }

.step{ width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:800;flex:none;}

/* nav: actieve link + mobiele menuknop */
.nav .links a.navlink.active { background: var(--orange); color: #fff; }
.navtoggle{ display:none; margin-left:auto; background:transparent; border:2px solid var(--ink); border-radius:12px;
  font-size:1.1rem; padding:.3em .6em; cursor:pointer; }
@media (max-width:860px){
  .nav .links{ position:absolute; top:100%; left:0; right:0; flex-direction:column; background:var(--paper);
    border-bottom:2px solid var(--ink); padding:14px 6vw; display:none; }
  .nav .links.open{ display:flex; }
  .nav .links a.navlink, .nav .links .btn{ width:100%; }
  .navtoggle{ display:inline-block; }
}

/* flash */
.flash-wrap{ position:sticky; top:64px; z-index:90; }
.flash{ border:2px solid var(--ink); border-radius:var(--r); padding:12px 16px; margin:12px auto; box-shadow:var(--pop);
  font-family:var(--display); font-weight:600; font-size:.95rem; background:#fff; }
.flash.success{ background: color-mix(in srgb, var(--lime) 35%, #fff); }
.flash.error{ background: color-mix(in srgb, var(--orange) 16%, #fff); border-color:var(--orange-700); color:var(--orange-700); }

.alert{ border:2px solid var(--orange-700); background: color-mix(in srgb, var(--orange) 12%, #fff);
  color:var(--orange-700); border-radius:var(--r); padding:12px 16px; font-weight:600; margin-bottom:16px; }

.capbar{ height:12px;border-radius:999px;background:var(--line);border:2px solid var(--ink);overflow:hidden; }
.capbar > i{ display:block;height:100%;background:var(--orange); }

a.navlink, .nav .links a { cursor:pointer; }
.checkline{ display:flex; align-items:center; gap:10px; cursor:pointer; }

/* ---------- responsive: vaste meerkoloms-grids laten inklappen ---------- */
/* Veel secties zetten grid-template-columns inline; deze regels overrulen dat
   op kleinere schermen zodat de hele publieke site netjes meeschaalt. */
@media (max-width: 900px) {
  main [style*="repeat(4"],
  main [style*="repeat(3"] { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 620px) {
  main [style*="repeat("],
  main [style*="fr 1fr"],
  main [style*="fr 1.1fr"],
  main [style*="fr 1.6fr"] { grid-template-columns: 1fr !important; }
  /* sticky zijbalken niet vastpinnen op mobiel */
  main aside[style*="sticky"] { position: static !important; }
  .display { font-size: clamp(2.4rem, 11vw, 3.4rem); }
}