.blog-hero {
  background:var(--navy);
  color:#fff;
  padding:88px 0 72px;
  position:relative;
  overflow:hidden
}

.blog-hero:after {
  content:"";
  position:absolute;
  inset:0 0 0 48%;
  background:url('../images/image-001-dd995a5e.webp') center/cover no-repeat;
  opacity:.36
}

.blog-hero .shell {
  position:relative;
  z-index:2
}

.blog-hero-copy {
  max-width:760px
}

.blog-hero h1 {
  font-size:clamp(3.2rem,7vw,6.2rem);
  line-height:.94;
  margin:0 0 18px
}

.blog-hero p {
  font-size:1.12rem;
  max-width:690px;
  color:rgba(255,255,255,.86)
}

.blog-toolbar {
  display:grid;
  grid-template-columns:1fr auto;
  gap:16px;
  align-items:center;
  margin:0 0 28px
}

.blog-search {
  display:flex;
  background:#fff;
  border:1px solid var(--line);
  border-radius:999px;
  padding:5px;
  box-shadow:0 10px 30px rgba(16,39,68,.07)
}

.blog-search input {
  border:0;
  background:transparent;
  outline:0;
  min-width:0;
  width:100%;
  padding:12px 16px;
  font:inherit
}

.blog-search button {
  border:0;
  border-radius:999px;
  background:var(--navy);
  color:#fff;
  padding:12px 18px;
  font-weight:800;
  cursor:pointer
}

.blog-filter {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:0 0 28px
}

.blog-filter button {
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:9px 13px;
  font-weight:750;
  cursor:pointer
}

.blog-filter button.is-active {
  background:var(--navy);
  color:#fff;
  border-color:var(--navy)
}

.blog-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px
}

.blog-card {
  display:flex;
  flex-direction:column;
  background:#fff;
  border-radius:24px;
  overflow:hidden;
  box-shadow:var(--shadow);
  min-height:100%;
  transition:.2s
}

.blog-card:hover {
  transform:translateY(-4px)
}

.blog-card-image {
  aspect-ratio:16/9;
  background:#dfe7e3 center/cover no-repeat
}

.blog-card-body {
  padding:22px;
  display:flex;
  flex-direction:column;
  flex:1
}

.blog-card-meta {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  color:var(--muted);
  font-size:.8rem
}

.blog-card h2 {
  font-size:1.55rem;
  line-height:1.08;
  margin:10px 0 10px
}

.blog-card p {
  color:var(--muted);
  margin:0 0 18px
}

.blog-card strong {
  margin-top:auto;
  color:var(--green)
}

.blog-topics {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:15px
}

.blog-topic {
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:20px
}

.blog-topic b {
  display:block;
  color:var(--navy);
  font-size:1.12rem
}

.blog-topic span {
  color:var(--muted);
  font-size:.9rem
}

.blog-empty {
  display:none;
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  padding:30px
}

.article-page {
  padding:54px 0 80px
}

.article-shell {
  width:min(calc(100% - 40px),1080px);
  margin:auto
}

.article-head {
  max-width:900px;
  margin:0 auto 28px
}

.article-head h1 {
  font-size:clamp(2.7rem,6vw,5.25rem);
  line-height:.96;
  color:var(--navy);
  margin:10px 0 18px
}

.article-meta {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:.9rem
}

.article-hero {
  width:min(100%,1080px);
  margin:26px auto 34px;
  border-radius:30px;
  overflow:hidden;
  box-shadow:var(--shadow);
  background:#dfe7e3
}

.article-hero img {
  display:block;
  width:100%;
  height:auto;
  max-height:650px;
  object-fit:cover
}

.article-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 290px;
  gap:44px;
  align-items:stretch;
  overflow:visible
}

.article-content {
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.08rem;
  line-height:1.78;
  background:var(--paper);
  border-radius:26px;
  padding:clamp(24px,5vw,54px);
  box-shadow:0 16px 46px rgba(16,39,68,.08);
  overflow-wrap:anywhere
}

.article-content h2,.article-content h3,.article-content h4 {
  color:var(--navy);
  line-height:1.08;
  margin-top:1.75em
}

.article-content h2 {
  font-size:2rem
}

.article-content h3 {
  font-size:1.5rem
}

.article-content a {
  color:#185c5a;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px
}

.article-content img {
  display:block;
  max-width:100%;
  height:auto;
  margin:26px auto;
  border-radius:18px
}

.article-content blockquote {
  margin:28px 0;
  padding:18px 22px;
  border-left:4px solid var(--gold);
  background:#f7f1e5;
  border-radius:0 14px 14px 0
}

.article-content ul,.article-content ol {
  padding-left:1.35em
}

.article-aside {
  position:relative;
  top:auto;
  display:flex;
  flex-direction:column;
  gap:16px;
  align-self:stretch;
  overflow:visible
}

.article-aside-card {
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:20px
}

.article-aside-card h2,.article-aside-card h3 {
  font-family:Georgia,"Times New Roman",serif;
  color:var(--navy);
  margin:0 0 10px;
  font-size:1.35rem
}

.article-aside-card p {
  color:var(--muted);
  font-size:.92rem;
  margin:0 0 15px
}

.article-aside-card a {
  font-weight:800;
  color:var(--green)
}

.related {
  padding-top:54px
}

.related h2 {
  font-size:2.4rem;
  margin:0 0 22px
}

.related-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px
}

.related-card {
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:20px
}

.related-card small {
  color:var(--gold);
  font-weight:800
}

.related-card h3 {
  margin:8px 0;
  font-size:1.2rem
}

.related-card p {
  color:var(--muted);
  font-size:.9rem
}

.editorial-note {
  margin-top:18px;
  padding:15px 18px;
  border-radius:16px;
  background:#f5efe2;
  color:var(--muted);
  font-size:.88rem
}

@media(max-width:950px) {
  .blog-grid {
    grid-template-columns:repeat(2,1fr)
  }

  .blog-topics {
    grid-template-columns:repeat(2,1fr)
  }

  .article-layout {
    grid-template-columns:1fr;
    align-items:start
  }

  .article-aside {
    position:static;
    display:flex;
    flex-direction:column;
    align-self:auto
  }

}

@media(max-width:650px) {
  .blog-hero {
    padding:62px 0 52px
  }

  .blog-hero:after {
    inset:40% 0 0 0
  }

  .blog-toolbar {
    grid-template-columns:1fr
  }

  .blog-grid,.blog-topics,.related-grid {
    grid-template-columns:1fr
  }

  .article-shell {
    width:min(calc(100% - 24px),1080px)
  }

  .article-page {
    padding-top:34px
  }

  .article-head h1 {
    font-size:2.75rem
  }

  .article-content {
    font-size:1rem;
    padding:24px
  }

  .article-aside {
    display:flex;
    flex-direction:column
  }

}

/* =========================================================
   BLOGARTIKEL – LEESGEDRAG V39
   - siteheader scrollt normaal weg
   - alleen de inhoudsopgave-links rechts blijven op desktop staan
   - op mobiel niets sticky
   ========================================================= */
/* blog.css wordt uitsluitend op blogpagina's geladen.
   :has is de directe CSS-regel; .blog-article wordt door main.js
   toegevoegd als fallback/expliciete artikelstatus. */
body:has(.article-page) header, body.blog-article header {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: auto !important;
  transform: none !important;
  backdrop-filter: none !important;
}

/* Ankerdoelen hoeven geen ruimte voor een vaste header te reserveren. */
.article-content h2[id], .article-content h3[id], .article-content h4[id] {
  scroll-margin-top: 24px;
}

/* De complete rechterkolom is NIET sticky. */
.article-layout, .article-aside {
  overflow: visible !important;
}

.article-toc-intro {
  position: static !important;
}

/* Alleen de linklijst blijft staan. */
.article-toc-links {
  position: sticky !important;
  top: 20px !important;
  z-index: 20;
  display: grid !important;
  gap: 4px !important;
  padding: 12px;
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 16px 42px rgba(16,39,68,.08);
  font-weight: 400 !important;
}

.article-toc-links a {
  display: block;
  padding: 10px 11px 10px 14px;
  border-left: 3px solid transparent;
  border-radius: 10px;
  color: var(--muted) !important;
  text-decoration: none !important;
  font-size: .91rem;
  line-height: 1.35;
  font-weight: 750 !important;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.article-toc-links a:hover {
  background: #f5f1e8;
  color: var(--green) !important;
  transform: translateX(2px);
}

.article-toc-links a.is-active {
  background: #eef5f2;
  border-left-color: var(--green);
  color: var(--green) !important;
}

.article-content h2[id].toc-target-active, .article-content h3[id].toc-target-active {
  position: relative;
}

.article-content h2[id].toc-target-active::before, .article-content h3[id].toc-target-active::before {
  content: "";
  position: absolute;
  left: -18px;
  top: .18em;
  bottom: .18em;
  width: 4px;
  border-radius: 99px;
  background: var(--gold);
}

@media(max-width:950px) {
  .article-toc-links {
    position: static !important;
    top: auto !important;
    z-index: auto;
  }

}

/* Bronopmaak inhoudsopgave: geen inline CSS in artikel-HTML. */
.article-aside nav[aria-label="Inhoudsopgave"] {
  display: grid;
  gap: 9px;
  font-weight: 700;
}