/* ===========================================================================
   schaduwscout.nl — kennis/gemeenten-artikellaag (29-08-2026).
   De 4.800+ bulkpagina's droegen /gemeenten/stijl.css met een eigen, kleinere
   kop en voet (design-audit 29-08: "andere/kleinere header en footer dan de
   home"). tools/gemeenten-nastap.mjs zet ze nu in de echte site-schil
   (site-header, site-footer, site.css) en dit blad stijlt de g-*-artikelklassen
   in dezelfde warme huisstijl. Laadt ALTIJD na site.css; gebruikt de
   ms-tokens uit laag 2 van site.css.
   ========================================================================= */

:root{ --k-meet: 68ch; --k-breed: calc(var(--k-meet) + 40px) }

.g-wrap{ max-width: var(--k-breed); margin-inline: auto; padding-inline: 20px }

/* --- hero -------------------------------------------------------------- */
.g-hero{ background: var(--ms-achter); border-top: 4px solid var(--ms-merk);
  border-bottom: 1px solid var(--ms-lijn); padding: 40px 0 36px }
.g-hero h1{ font-size: clamp(1.75rem, 1.3rem + 2vw, 2.7rem); line-height: 1.08;
  max-width: 26ch; text-wrap: balance }
.g-sub{ margin-top: 14px; font-size: var(--fs-300); color: var(--ms-inkt-zacht); max-width: 60ch }
.g-kruimel{ font-size: .875rem; letter-spacing: .04em; text-transform: uppercase;
  font-weight: 600; font-family: var(--sans); color: var(--ms-inkt-zacht); margin-bottom: 16px }
.g-kruimel a{ color: var(--ms-inkt-zacht); text-decoration: none;
  border-bottom: 1px solid var(--ms-lijn-sterk) }
.g-kruimel a:hover{ color: var(--ms-inkt); border-bottom-color: var(--ms-diep) }

/* --- paginabeeld (één echt beeld per paginatype, credit in de hoek) ------ */
.k-beeld{ margin: 28px auto 0; position: relative }
.k-beeld img{ width: 100%; aspect-ratio: 21/9; object-fit: cover;
  border-radius: 14px; border: 1px solid var(--ms-lijn) }
.k-beeld figcaption{ position: absolute; right: 10px; bottom: 10px;
  font-size: .875rem; line-height: 1; padding: 6px 10px; border-radius: 999px;
  background: rgba(20,23,28,.72); color: #fff }

/* --- artikel ------------------------------------------------------------ */
.g-artikel{ padding: 36px 20px 64px }
.g-artikel > h2:first-child, .g-artikel > link:first-child + h2{
  margin-top: 0; padding-top: 0; border-top: 0 }
.g-artikel > p{ margin-bottom: 20px }
.g-artikel a{ color: var(--ms-diep); text-decoration: none;
  border-bottom: 2px solid var(--ms-rand) }
.g-artikel a:hover{ border-bottom-color: var(--ms-diep); background: var(--ms-tint) }
.g-artikel h2{ font-size: clamp(1.3rem, 1.1rem + .8vw, 1.65rem); line-height: 1.2;
  margin: 46px 0 14px; padding-top: 20px; border-top: 1px solid var(--ms-lijn) }
.g-artikel h2 a{ border: 0; color: var(--ms-inkt) }
.g-artikel h2 a:hover{ color: var(--ms-diep); background: none }
.g-artikel h3{ font-size: 1.15rem; margin: 30px 0 10px }
.g-artikel ul, .g-artikel ol{ margin: 0 0 20px 22px; padding: 0 }
.g-artikel li{ margin-bottom: 8px }
.g-artikel table{ width: 100%; border-collapse: collapse; margin: 26px 0; font-size: .96rem }
.g-artikel th, .g-artikel td{ text-align: left; padding: 11px 13px;
  border-bottom: 1px solid var(--ms-lijn) }
.g-artikel thead th{ background: var(--ms-achter); font-weight: 700;
  border-bottom: 2px solid var(--ms-lijn-sterk) }
.g-artikel blockquote{ margin: 26px 0; padding: 4px 0 4px 20px;
  border-left: 4px solid var(--ms-merk); color: var(--ms-inkt-zacht) }

/* --- kernpunten --------------------------------------------------------- */
.g-punten{ background: var(--ms-achter); border: 1px solid var(--ms-lijn);
  border-left: 5px solid var(--ms-merk); border-radius: 14px;
  padding: 22px 24px; margin: 34px 0 }
.g-punten h2{ margin: 0 0 12px; padding: 0; border: 0; font-size: 1.2rem }
.g-punten ul{ margin: 0 0 0 20px }
ul.g-punten{ margin: 34px 0; padding: 22px 24px 22px 42px; list-style: disc }
.g-punten li{ margin-bottom: 8px }
.g-punten li:last-child{ margin-bottom: 0 }
.g-punten p:last-child, .g-punten ul:last-child{ margin-bottom: 0 }

/* --- FAQ-accordeon in het artikel --------------------------------------- */
.g-artikel details{ border-bottom: 1px solid var(--ms-lijn); padding: 0 }
.g-artikel details:first-of-type{ border-top: 1px solid var(--ms-lijn) }
.g-artikel summary{ cursor: pointer; list-style: none; font-weight: 600;
  font-family: var(--sans); font-size: 1.02rem; padding: 16px 44px 16px 0;
  min-height: 48px; position: relative }
.g-artikel summary::-webkit-details-marker{ display: none }
.g-artikel summary::after{ content: ""; position: absolute; right: 10px; top: 24px;
  width: 9px; height: 9px; border-right: 2px solid var(--ms-diep);
  border-bottom: 2px solid var(--ms-diep); transform: rotate(45deg);
  transition: transform .15s ease }
.g-artikel details[open] summary::after{ transform: rotate(-135deg); top: 28px }
.g-artikel details p{ padding: 0 0 16px; color: var(--ms-inkt-zacht); max-width: 62ch }

/* --- oproep tot actie ---------------------------------------------------- */
.g-cta{ background: var(--ms-inkt); color: #fff; border-top: 5px solid var(--ms-merk);
  border-radius: 14px; padding: 32px 30px 36px; margin: 44px 0 }
.g-cta h2{ margin: 0 0 10px; padding: 0; border: 0; color: #fff;
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem) }
.g-cta p{ color: #d7dbdf; max-width: 54ch; margin: 0 }
.g-knop{ display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 12px 20px; background: var(--ms-diep);
  color: #fff !important; text-decoration: none; font-weight: 700;
  font-family: var(--sans); font-size: .95rem;
  border: 1px solid var(--ms-diep); border-radius: 10px }
.g-knop:hover{ background: var(--ms-inkt); border-color: var(--ms-inkt) }
.g-knop.groot{ min-height: 54px; padding: 15px 26px; font-size: 1.02rem; margin-top: 18px }
/* witte knop op het donkere cta-vlak: merkgroen haalt daar geen 4,5:1 */
.g-cta .g-knop{ background: #fff; border-color: #fff; color: var(--ms-inkt) !important }
.g-cta .g-knop:hover{ background: var(--ms-tint); border-color: var(--ms-tint) }

/* --- verder lezen / bron ------------------------------------------------- */
.g-buren, .g-bron{ font-size: .95rem; color: var(--ms-inkt-zacht);
  background: var(--ms-achter); border: 1px solid var(--ms-lijn);
  border-radius: 14px; padding: 18px 20px; margin: 26px 0 }
.g-buren a{ color: var(--ms-inkt); border-bottom: 1px solid var(--ms-lijn-sterk);
  text-decoration: none }
.g-buren a:hover{ border-bottom-color: var(--ms-diep); color: var(--ms-diep) }
.g-bron{ background: none; border: 0; border-top: 1px solid var(--ms-lijn);
  border-radius: 0; padding: 16px 0 0; font-size: .9rem }

/* --- linkstaarten: gesloten accordeons (audit 29-08) ---------------------
   De drie lijsten "Alle rubrieken / Meer uit de kennisbank / In jouw gemeente"
   staan onverkort in de HTML (crawlbaar), maar dichtgeklapt — óók op desktop. */
.g-verder{ background: var(--ms-achter); border: 1px solid var(--ms-lijn);
  border-radius: 14px; padding: 6px 22px; margin: 34px 0 8px }
.g-verder details{ border-bottom: 1px solid var(--ms-lijn) }
.g-verder details:last-child{ border-bottom: 0 }
.g-verder summary{ cursor: pointer; list-style: none; font-weight: 600;
  font-family: var(--sans); font-size: 1rem; color: var(--ms-inkt);
  padding: 14px 40px 14px 0; min-height: 44px; position: relative }
.g-verder summary::-webkit-details-marker{ display: none }
.g-verder summary::after{ content: ""; position: absolute; right: 8px; top: 21px;
  width: 9px; height: 9px; border-right: 2px solid var(--ms-diep);
  border-bottom: 2px solid var(--ms-diep); transform: rotate(45deg);
  transition: transform .15s ease }
.g-verder details[open] summary::after{ transform: rotate(-135deg); top: 25px }
.g-verder ul{ list-style: none; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 4px 20px; margin: 0; padding: 0 0 16px }
.g-verder li{ margin: 0 }
.g-verder a{ color: var(--ms-diep); text-decoration: none; font-size: .92rem;
  line-height: 1.55; border: 0 }
.g-verder a:hover{ text-decoration: underline; background: none }

/* --- linkwolken op indexpagina's ----------------------------------------- */
.g-gemeenten{ font-size: 0; line-height: 0; margin: 0 0 8px; display: flex;
  flex-wrap: wrap; gap: 8px }
.g-gemeenten a{ font-size: 15px; line-height: 1.35; display: inline-flex;
  align-items: center; min-height: 40px; padding: 8px 14px;
  border: 1px solid var(--ms-lijn); border-radius: 999px;
  background: var(--ms-papier); color: var(--ms-inkt); text-decoration: none;
  font-weight: 600 }
.g-gemeenten a:hover{ border-color: var(--ms-diep); background: var(--ms-tint);
  color: var(--ms-diep) }
.g-letter{ font-size: 1.05rem; font-weight: 700; color: var(--ms-inkt);
  display: block; margin: 26px 0 10px; padding-bottom: 6px;
  border-bottom: 2px solid var(--ms-merk) }

/* --- klein scherm --------------------------------------------------------
   Nooit flex-basis in een kolomrichting; alleen verbergen en verkleinen. */
@media (max-width: 640px){
  .g-hero{ padding: 26px 0 24px }
  .g-artikel{ padding: 28px 20px 48px }
  .g-artikel h2{ margin-top: 36px }
  .k-beeld{ margin-top: 20px }
  .k-beeld img{ aspect-ratio: 16/9 }
  .g-cta{ padding: 26px 20px; margin: 34px 0 }
  .g-punten{ padding: 20px 18px }
  ul.g-punten{ padding: 20px 18px 20px 38px }
  .g-verder{ padding: 2px 18px }
}