/* ==========================================================================
   Ontwerp: het portaal opnieuw vanuit de VNG-huisstijl (28 september 2026).

   Laadt als allerlaatste. De eerdere lagen (basis, vorm, views, lay-out)
   leverden een dashboard op: overal witte kaarten met schaduw en een grote
   ronde hoek, alles even zwaar, kleine koppen. De opdrachtgever: "nog steeds
   niet mooi, kijk er vanaf 0 naar met de stijl van VNG in je hoofd".

   De lijn van VNG, en dus van dit bestand:
   - Typografie draagt het ontwerp. Grote donkerblauwe koppen in Figtree
     ExtraBold, ruime witruimte, lopende tekst die kan ademen.
   - Cyaan is lijnelement, nooit tekst. Een korte cyaan streep boven elke
     paginakop en boven elke sectie is het terugkerende motief.
   - Inhoud staat in rijen met scheidingslijnen, niet in kaarten. Een kaart
     alleen waar iets echt een eigen vlak is: een formulier, een kadervlak.
   - Eén kadervlak per pagina als blikvanger (welkom, themakop).
   - De footer is donkerblauw, zoals op vng.nl.
   Alle kleuren komen uit de tokens in basis.css; een test bewaakt dat.
   ========================================================================= */

:root {
  --breed: 1240px;
  --sectie-ruimte: 56px;
}

body { background: var(--vlak); }
.wrap { max-width: var(--breed); padding-inline: 32px; }
@media (max-width: 700px) { .wrap { padding-inline: 20px; } }

/* ---- Kop ------------------------------------------------------------------ */
.hdr { background: var(--vlak); backdrop-filter: none; border-bottom: 1px solid var(--lijn); }
.hdr-in { height: 76px; gap: 24px; }
.brand img { height: 34px; }
.nav { gap: 2px; margin-left: 8px; align-self: stretch; }
.nav a {
  display: flex; align-items: center; position: relative;
  padding: 0 10px; border-radius: 0; background: none;
  font-size: var(--t-basis); font-weight: 700; color: var(--inkt);
}
.nav a:hover { text-decoration: none; background: var(--grond); }
.nav a.on { background: none; }
.nav a.on::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px;
  height: 4px; background: var(--vng-cyaan);
}
@media (max-width: 900px) {
  .nav { align-self: auto; }
  .nav a { padding: 14px 8px; }
  .nav a.on::after { left: 0; right: auto; top: 12px; bottom: 12px; width: 4px; height: auto; }
}

/* ---- Paginakop: kruimel, cyaan streep, grote kop, één regel lead -------- */
.crumb { padding-top: 28px; font-size: var(--t-meta); }
.pagehead,
.pagehead:not(.metfoto) {
  display: block; padding: 14px 0 0; margin: 0 0 var(--sectie-ruimte); border: 0;
}
.pagehead .ico { display: none; }
.pagehead h1 {
  font-size: var(--t-pagina); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--inkt);
}
.pagehead h1::before,
.pagehead .phtekst h1::before {
  content: ""; display: block; width: 56px; height: 4px; margin-bottom: 20px; background: var(--vng-cyaan);
}
.pagehead p, .pagehead:not(.metfoto) > p { font-size: var(--t-lead); line-height: 1.5; color: var(--inkt-zwak); max-width: 60ch; margin-top: 12px; }
@media (max-width: 700px) { .pagehead h1 { font-size: var(--t-sectie); } .pagehead p { font-size: var(--t-basis); } }

/* Met foto: tekst links op de witte grond, de foto rechts in de vorm van de
   huisstijl (één grote ronde hoek), zonder kaart eromheen. */
.pagehead.metfoto {
  display: grid; grid-template-columns: minmax(0, 1fr) 40%; gap: 40px; align-items: end;
  padding: 14px 0 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible;
}
.pagehead.metfoto .phtekst { display: block; padding: 0 0 8px; }
.pagehead.metfoto .phtekst .ico { display: none; }
.pagehead.metfoto .phfoto { min-height: 200px; border-radius: 0 var(--hoek-groot) 0 var(--hoek-groot); overflow: hidden; }
@media (max-width: 820px) {
  .pagehead.metfoto { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pagehead.metfoto .phfoto { order: 2; min-height: 160px; }
}

/* ---- Secties in plaats van kaarten -------------------------------------- */
/* Een blok is een sectie: cyaan streep erboven, kop, en de inhoud als rijen.
   Geen rand, geen schaduw, geen ronde hoek. */
.card.block, .railcard, .card.feed, .voorjou.card, .nb-keuze.card, .acc-bijdragen {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  border-top: 2px solid var(--vng-cyaan);
}
.card.block > .bd, .railcard > .bd, .card.feed > .bd, .voorjou.card > .bd, .nb-keuze.card > .bd { padding: 20px 0 0; }
.card.block, .railcard { margin-bottom: 44px; }
.block h3, .railcard h3, .blokkop h3 { font-size: var(--t-kaart); font-weight: 800; color: var(--inkt); margin: 0 0 8px; }
.blokkop { margin-bottom: 8px; }
.block .cap { display: none; }

/* Sectiekoppen buiten een blok (start: "Nieuw in de Risicoradar"). */
.sub-h { margin: 0 0 4px; }
.sub-h h2 { font-size: var(--t-kaart); font-weight: 800; }
.grid2 > div > .sub-h { border-top: 2px solid var(--vng-cyaan); padding-top: 20px; }
.card.feed { border-top: 0; }
.card.feed > .bd { padding: 0; }

/* Rijen: één regel titel, één regel meta, een dunne lijn ertussen. */
.feed .item, .radarrij, .toolrow, .agitem, .zk-rij, .vj-grid li, a.near, .nws, .artrow, .q {
  border-top: 0; border-bottom: 1px solid var(--lijn);
}
.feed .item.compact { padding: 16px 0; }
.feed .item.compact h3, .radarrij .t, .toolrow .nm { font-size: var(--t-lead); font-weight: 700; line-height: 1.35; }
.feed .item .deel, .radarrij .deel { opacity: .7; }
.feed .item:hover .deel, .radarrij:hover .deel { opacity: 1; }

/* ---- Start ----------------------------------------------------------------- */
.welkom { padding-top: 28px; }
.welkomkaart { min-height: 260px; }
.welkomkaart .wtekst { padding: 44px 48px; }
.welkomkaart h1 { font-size: var(--t-pagina); font-weight: 800; line-height: 1.1; }
.welkomkaart .wk-p { font-size: var(--t-lead); margin-top: 10px; }
.welkomkaart .wk-cta { margin-top: 24px; }
@media (max-width: 820px) { .welkomkaart .wtekst { padding: 28px 24px; } .welkomkaart h1 { font-size: var(--t-sectie); } }

.voorjou.card { margin: var(--sectie-ruimte) 0 0; }
.voorjou h2 { font-size: var(--t-kaart); font-weight: 800; }
.grid2 { margin-top: var(--sectie-ruimte); gap: 56px; grid-template-columns: minmax(0, 1fr) 340px; }
@media (max-width: 1100px) { .grid2 { grid-template-columns: minmax(0, 1fr); gap: 8px; } }

/* De cyclus: geen grijs vlak meer maar een sectie zoals de rest. */
.cyclus.cyclus-rail { background: none; border: 0; border-radius: 0; box-shadow: none; border-top: 2px solid var(--vng-cyaan); padding: 20px 0 0; }
.cyclus-rail .cy-nu b { font-size: var(--t-kaart); font-weight: 800; }

/* ---- Themapagina ------------------------------------------------------------- */
.themaselect { margin-bottom: 28px; }
.themabar { gap: 8px; }
.tchip, button.tchip {
  min-height: 44px; padding: 0 18px; border: 1px solid var(--lijn); border-radius: 999px;
  background: var(--vlak); box-shadow: none; font-size: var(--t-basis); font-weight: 700; color: var(--inkt);
}
.tchip:hover { background: var(--grond); border-color: var(--lijn); }
.tchip.on { background: var(--inkt); border-color: var(--inkt); color: #fff; box-shadow: none; }
.theadcard { margin-bottom: var(--sectie-ruimte); }
.theadcard .thtekst { padding: 40px 44px; }
.theadcard h2 { font-size: var(--t-pagina); font-weight: 800; line-height: 1.1; }
.tlayout { gap: 56px; grid-template-columns: minmax(0, 1fr) 340px; }
@media (max-width: 1100px) { .tlayout { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.tfilter { margin: 4px 0 8px; }

/* ---- Filters en chips overal hetzelfde ---------------------------------------- */
.fchip, button.fchip, .tf, .hulpfilter .fchip {
  min-height: 40px; padding: 0 16px; border: 1px solid var(--lijn); border-radius: 999px;
  background: var(--vlak); font-size: var(--t-meta); font-weight: 700; color: var(--inkt);
  display: inline-flex; align-items: center;
}
.fchip.on, .tf.on, .toolbar .fchip.on, .filterbar .fchip.on { background: var(--inkt); border-color: var(--inkt); color: #fff; }
.ttag { background: none; border: 0; padding: 0; font-size: var(--t-meta); font-weight: 700; color: var(--inkt); }
.xchip.soort, .keur { font-size: var(--t-label); }

/* ---- Collega's ---------------------------------------------------------------- */
.hulpmodus.tabs { margin-bottom: 24px; }
.hulpmodus.tabs .hm b { font-size: var(--t-lead); }
.profielstrip, .modusnaar { border-radius: 0; }

/* ---- Formulieren blijven een vlak ---------------------------------------------- */
.opl-form.card, .accountkaart, .agenda-form { border-radius: var(--vorm-groot); box-shadow: none; }

/* ---- Voet: donkerblauw, zoals vng.nl ------------------------------------------ */
footer { margin-top: 96px; background: var(--inkt); border-top: 0; color: #fff; }
.foot { padding-block: 40px; color: #fff; font-size: var(--t-meta); }
.foot .pf { color: #fff; font-size: var(--t-lead); }
.foot .r { color: #fff; }
.foot .pf::before { content: ""; display: block; width: 56px; height: 4px; margin-bottom: 14px; background: var(--vng-cyaan); }

/* ---- Verfijning na de eerste blik ------------------------------------------- */
/* Een cyaan lijn over de volle breedte boven elke sectie was te zwaar. Nu een
   dunne lijn in 20% donkerblauw met een korte cyaan streep erop: hetzelfde
   motief als boven de paginakop. */
.card.block, .railcard, .voorjou.card, .nb-keuze.card, .acc-bijdragen,
.grid2 > div > .sub-h, .cyclus.cyclus-rail {
  border-top: 1px solid var(--lijn);
  background-image: linear-gradient(var(--vng-cyaan), var(--vng-cyaan));
  background-repeat: no-repeat; background-size: 56px 4px; background-position: 0 0;
}
.card.block > .bd, .railcard > .bd, .voorjou.card > .bd, .nb-keuze.card > .bd { padding-top: 24px; }
.grid2 > div > .sub-h, .cyclus.cyclus-rail { padding-top: 24px; }

/* Voorbeeld is een mededeling, geen knop: kleine tekst in de metakleur. */
.xchip.soort {
  background: none; border: 0; padding: 0; margin-left: 6px;
  font-size: var(--t-label); font-weight: 700; letter-spacing: .06em; color: var(--inkt-zwak);
}
/* Het kadervlak is vlak: geen schaduw. */
.welkomkaart, .theadcard, .kadervlak { box-shadow: none; }
.tchip, button.tchip { padding: 0 13px; }
.themabar { gap: 6px; flex-wrap: wrap; }
.themabar .groeplab { margin: 0 4px 0 8px; }

/* ---- Collega's: kaarten zonder schaduw ------------------------------------------ */
.pcard { box-shadow: none; border: 1px solid var(--lijn); border-radius: var(--vorm-klein); padding: 20px; }
.pcard .nm { font-size: var(--t-lead); }
.pcard .why { border-radius: 0; background: none; border: 0; border-left: 3px solid var(--vng-cyaan); padding: 2px 0 2px 12px; }
.profielstrip { box-shadow: none; border: 0; background: var(--grond); border-radius: var(--vorm-klein); }

/* ---- Oplossingen: de lijst als sectie ------------------------------------------- */
#opl-echt > h3, details.voorbeelden > summary {
  font-size: var(--t-kaart); font-weight: 800; color: var(--inkt);
}
#opl-echt > h3 {
  margin: 8px 0 0; padding-top: 24px; border-top: 1px solid var(--lijn);
  background-image: linear-gradient(var(--vng-cyaan), var(--vng-cyaan));
  background-repeat: no-repeat; background-size: 56px 4px; background-position: 0 0;
}
#opl-echt > .card, #opl-voorbeelden .card { background: none; border: 0; border-radius: 0; box-shadow: none; }
#opl-echt > .card > .bd, #opl-voorbeelden .card > .bd { padding: 0; }
.fmt { padding: 18px 0; border-bottom: 1px solid var(--lijn); }
.fmt .nm { font-size: var(--t-lead); font-weight: 700; }
.werkbalk { margin-bottom: 32px; }

/* ---- Aanmelden: zelfde breedte als de kop erboven ------------------------------- */
.auth { max-width: var(--breed); margin: 0 auto; padding: 28px 32px 0; gap: 56px; min-height: 0; }
.auth-side { min-height: 640px; }
@media (max-width: 860px) { .auth { padding: 16px 20px 0; gap: 24px; } .auth-side { min-height: 0; } }
.nbhero { margin-top: 40px; }
@media (max-width: 820px) {
  .theadcard .thtekst { padding: 28px 24px; }
  .theadcard h2 { font-size: var(--t-sectie); }
  .themabar { flex-wrap: nowrap; overflow-x: auto; margin-inline: 0; padding-bottom: 4px; }
}

/* ---- Op schaal (5 oktober) -----------------------------------------------------
   Met honderden leden: compacte matchkaarten, een ledengids, werkbalken met
   zoeken, en lijsten die per pagina bijladen. */
.sectiekop { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 14px; }
.sectiekop h2 { margin: 0; font-size: var(--t-kaart); color: var(--inkt); }
.ruimte-3 { margin-top: 40px; }
.mgrid.compact { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.pcard.compact { padding: 16px; gap: 12px; }
.pcard.compact .a { width: 40px; height: 40px; font-size: var(--t-meta); }
.pcard.compact .nm { font-size: var(--t-basis); }
.pcard.compact .pc-tekst { min-width: 0; flex: 1; }
.pcard.compact .why { margin-top: 8px; padding: 0 0 0 10px; font-size: var(--t-meta); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard.compact .acts { margin-top: 12px; align-items: center; gap: 12px; }
#collega-meer { margin-top: 12px; }
.lg-balk { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.lg-balk input[type="search"] { flex: 1 1 280px; min-width: 0; }
.lg-balk select { flex: 0 1 220px; }
.lg-lijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); column-gap: 28px; border-top: 1px solid var(--lijn); }
.lg-rij { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--lijn); }
.lg-rij .a { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--grond); color: var(--inkt); font-weight: 700; font-size: var(--t-label); }
.lg-tekst { flex: 1; min-width: 0; }
.lg-tekst b { display: block; color: var(--inkt); }
.lg-tekst small { display: block; color: var(--inkt-zwak); font-size: var(--t-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-tekst .tags { margin-top: 4px; }
.lg-lijst > .leegblok { grid-column: 1 / -1; margin-top: 12px; }
.lg-meer { margin-top: 16px; }
@media (max-width: 600px) { .lg-lijst { grid-template-columns: minmax(0, 1fr); } .mgrid.compact { grid-template-columns: minmax(0, 1fr); } }
.vraagformulier { margin: 0 0 20px; }
.vr-totaal { margin: 0 0 6px; min-height: 1em; }
.vragenlijst { border-top: 1px solid var(--lijn); }
.q.vr-rij { align-items: flex-start; gap: 16px; }
.vr-n { flex: none; width: 76px; padding: 6px 0; border-radius: var(--hoek-klein); background: var(--inkt); color: #fff; text-align: center; line-height: 1.1; }
.vr-n b { display: block; font-size: var(--t-lead); }
.vr-n span { font-size: var(--t-label); }
.vr-n.open { background: var(--vlak); color: var(--inkt); border: 1.5px solid var(--lijn); }
.vr-rij .ttl { font-weight: 700; color: var(--inkt); }
.vr-rij:hover .ttl { text-decoration: underline; }
.opl-balk { margin-top: 16px; }
.opl-lijst { border-top: 1px solid var(--lijn); }
.opl-lijst .fmt { align-items: flex-start; }
.opl-lijst .opl-besch { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.exp { align-items: center; }
.exp-tekst { flex: 1; min-width: 0; }
.ikoonknop { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--lijn); border-radius: var(--hoek-klein); background: var(--vlak); color: var(--inkt); cursor: pointer; }
.ikoonknop:hover { background: var(--grond); }
.exp-alle { display: inline-block; margin-top: 12px; }
@media (max-width: 600px) {
  /* Op een telefoon een smalle fotoband: de inhoud begon pas onder de vouw. */
  .pagehead.metfoto .phfoto { min-height: 96px; max-height: 96px; }
  /* De drie tabbladen passen zonder iconen naast elkaar. */
  .hulpmodus.tabs { overflow: visible; gap: 0; }
  .hulpmodus.tabs .hm { padding-left: 10px; padding-right: 10px; }
  .hulpmodus.tabs .hm .hi { display: none; }
  .hulpmodus.tabs .hm b { font-size: var(--t-basis); }
  .vr-n { width: 60px; }
  .vr-n span { display: none; }
}