/* ==========================================================================
   blog.css — blogartikel: inhoudsopgave links (sticky), tekst, call-to-action.
   Alleen geladen op losse artikelen (inc/blog.php).
   ========================================================================== */

/* Even breed als de rest van de pagina (zelfde container als hero en secties) */
.blog { display: grid; gap: 40px; }
.blog__hoofd { min-width: 0; width: 100%; }
.blog--toc { grid-template-columns: minmax(220px, 290px) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); }
.blog--toc .blog__hoofd { grid-column: 2; grid-row: 1; margin: 0; }
.blog--toc .toc { grid-column: 1; grid-row: 1; }

/* Ankers: niet onder de zwevende header verdwijnen */
.blog__tekst h2[id], .blog__tekst h3[id], #faq { scroll-margin-top: 130px; }

/* Leesbare tekst */
.blog__tekst { font-size: 1.1rem; line-height: 1.75; }
.blog__tekst h2 { margin-top: 1.9em; }
.blog__tekst > :first-child { margin-top: 0; }
.blog__tekst blockquote {
	margin: 1.6em 0; padding: 20px 24px; border-left: 4px solid var(--lime); border-radius: 0 var(--radius) var(--radius) 0;
	background: var(--soft); font-size: 1.08rem; font-weight: 600; color: var(--ink);
}
.blog__tekst blockquote p { margin: 0; }
.blog__tekst .kort { padding: 22px 26px; border-radius: var(--radius-lg); background: var(--blue-50); }
.blog__tekst .kort > :first-child { margin-top: 0; }
.blog__tekst .kort ul { margin-bottom: 0; }
.blog__tekst a { color: var(--blue-600); text-underline-offset: 3px; }
.blog__tekst table { width: 100%; border-collapse: collapse; font-size: .98rem; }
.blog__tekst th, .blog__tekst td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.blog__tekst th { background: var(--soft); font-weight: 700; }
.blog__tekst .tabel { overflow-x: auto; }

/* Inhoudsopgave */
.toc { position: sticky; top: 120px; align-self: start; max-height: calc(100vh - 140px); overflow: auto; padding: 22px 20px; border-radius: var(--radius-lg); background: var(--soft); }
.admin-bar .toc { top: 152px; }
.toc__titel { margin: 0 0 12px; font-weight: 800; font-size: 1.05rem; color: var(--ink); }
.toc__lijst { list-style: none; margin: 0; padding: 0; counter-reset: toc; display: grid; gap: 2px; }
.toc__lijst li { counter-increment: toc; }
.toc__lijst a {
	display: grid; grid-template-columns: 26px 1fr; gap: 6px; padding: 7px 8px; border-radius: 10px;
	color: var(--muted); font-size: .93rem; line-height: 1.35; text-decoration: none; transition: background-color .2s, color .2s;
}
.toc__lijst a::before { content: counter(toc, decimal-leading-zero); font-weight: 700; font-size: .8rem; color: var(--blue); padding-top: 1px; }
.toc__lijst a:hover { background: #fff; color: var(--ink); }
.toc__lijst a.is-actief { background: #fff; color: var(--ink); font-weight: 650; box-shadow: 0 6px 16px -10px rgba(var(--ink-rgb), .35); }

/* Call-to-action onder het artikel */
.blog__cta { margin-top: 48px; padding: clamp(24px, 4vw, 36px); border-radius: var(--radius-lg); background: var(--blue-600); color: #fff; } /* donkerder blauw: wit haalt contrast 4,5:1 */
.blog__cta-titel { margin: 0 0 8px; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.2; }
.blog__cta p { margin: 0 0 18px; color: #fff; }
.blog__cta .knoppen { margin: 0; }
.auteurkaart__datum { font-size: .9rem; }

/* Tablet en mobiel: één kolom, inhoudsopgave onder het artikel */
@media (max-width: 1000px) {
	.blog--toc { grid-template-columns: minmax(0, 1fr); }
	.blog--toc .blog__hoofd, .blog--toc .toc { grid-column: 1; grid-row: auto; }
	.toc { position: static; max-height: none; width: 100%; }
}