/* Blog: overzicht (docs/prototype/blog.html) en artikel (blog-<slug>.html).
   Geladen door pages/blog/index.html en pages/blog/detail.html (block extra_css).
   De kaart (.post-img, .post-meta, .post-title, .pill) staat in styles.css; de
   hover van het logo-beeld (.logo-art) zit in de SVG zelf (home/templatetags/blog_tags.py). */

/* ============ overzicht ============ */
/* categorie-tabs: Preline Tabs, in onze vorm */
.cat-tab{display:inline-flex;align-items:center;gap:6px;border-radius:999px;border:1px solid var(--color-rule);padding:4px 12px;font-size:13.5px;font-weight:500;color:var(--color-ink-2);background:var(--color-card);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.cat-tab:hover{border-color:var(--color-ink-3);color:var(--color-ink)}
.cat-tab.active{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-paper)}
.cat-count{font-family:var(--font-mono);font-size:11px;opacity:.6}
/* post-it als laatste kaart */
.postit-card{background:var(--color-postit);border-radius:4px;box-shadow:0 14px 28px -12px rgb(25 23 20 / .35);rotate:-1.2deg;transition:rotate .3s}
.postit-card:hover{rotate:0deg}
/* kaarten: .post-img, .post-meta, .post-title, .pill komen uit site.css */
.section-label{font-family:var(--font-serif);font-size:22px;font-weight:600;color:var(--color-ink)}
.pager .pg{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;border-radius:10px;font-size:14px;font-weight:600;color:var(--color-ink-2)}
.pager .pg:hover{background:var(--color-paper-2);color:var(--color-ink)}
.pager .pg[aria-current="page"]{background:var(--color-ink);color:var(--color-paper)}
.news-form.is-done .news-box,.news-form.is-done .news-help{display:none}
.news-form.is-done .news-done{display:block}
.news-box{display:flex;align-items:center;gap:6px;padding:5px 5px 5px 20px;border:1px solid var(--color-rule);border-radius:999px;background:#fff;transition:border-color .2s,box-shadow .2s}
.news-box:focus-within{border-color:var(--color-ink);box-shadow:0 0 0 3px rgb(25 23 20 / .08)}
.news-box:has(input:user-invalid){border-color:var(--color-accent)}
.news-box input{flex:1;min-width:0;border:0;background:transparent;font-size:16px;color:var(--color-ink);outline:none;padding:8px 0}
.news-box input::placeholder{color:var(--color-ink-3)}
.news-box .btn-primary:hover{transform:none}
.news-link{text-decoration:underline;text-decoration-color:var(--color-rule);text-underline-offset:3px}
.news-link:hover{color:var(--color-ink);text-decoration-color:var(--color-accent)}
/* paginering met links (?page=2) in plaats van knoppen */
.pager [aria-disabled="true"]{opacity:.35;pointer-events:none}
.news-form.is-error .news-box{border-color:var(--color-accent)}

/* ============ artikel ============ */
/* leesbalk: loopt mee met het artikel, niet met de hele pagina */
.read-progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:70;background:var(--color-accent);transform-origin:left;transform:scaleX(0)}
/* inhoudstafel (Preline Scrollspy zet .active op de link van de sectie in beeld) */
.toc-box{border-left:1px solid var(--color-rule);padding-left:18px}
@media (max-width:1023px){
.toc-box{border-left:0;padding:18px;border-radius:16px;background:var(--color-card);border:1px solid var(--color-rule)}
}
.toc-link{position:relative;padding:7px 0;font-size:15px;line-height:1.3;color:var(--color-ink-3);text-decoration:none;transition:color .2s}
.toc-link:hover{color:var(--color-ink)}
.toc-link.active{color:var(--color-ink);font-weight:600}
@media (min-width:1024px){
.toc-link.active::before{content:"";position:absolute;left:-20px;top:6px;bottom:6px;width:3px;border-radius:3px;background:var(--color-accent)}
}
/* lopende tekst: max 68 tekens, ruime regel */
.prose-co{font-size:19px;line-height:1.7;color:var(--color-ink)}
.prose-co section{scroll-margin-top:110px}
.prose-co section + section{margin-top:3rem}
.prose-co h3{font-size:clamp(22px,2vw,26px);margin:2rem 0 .6rem}
.prose-co h2{font-size:clamp(28px,2.6vw,36px);margin:0 0 1rem}
.prose-co p + p{margin-top:1.1em}
.prose-co a{color:var(--color-ink);text-decoration:underline;text-decoration-color:var(--color-accent);text-decoration-thickness:2px;text-underline-offset:4px}
.prose-co a.link-arrow{text-decoration-color:var(--color-rule)}
.prose-co ul{margin:1.1em 0 0;padding-left:1.2em;list-style:disc}
.prose-co li::marker{color:var(--color-accent)}
/* citaat */
.quote-block{margin:2.2rem 0;padding:6px 0 6px 26px;border-left:3px solid var(--color-accent)}
.quote-block blockquote p{font-family:var(--font-serif);font-size:clamp(24px,2.4vw,30px);line-height:1.25;font-weight:600;letter-spacing:-.01em}
.quote-block blockquote p::before{content:"“"}
.quote-block blockquote p::after{content:"”"}
.quote-block figcaption{margin-top:12px;font-size:14px;color:var(--color-ink-3)}
/* codeblok: inkt op papier, geen nep-terminal */
.code-block{margin:2rem 0;border-radius:16px;background:var(--color-ink);overflow:hidden}
.code-head{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;border-bottom:1px solid rgb(255 255 255 / .08)}
.code-copy{font-size:12px;font-weight:600;color:#CFC7B8;border:1px solid rgb(255 255 255 / .18);border-radius:999px;padding:3px 12px;cursor:pointer}
.code-copy:hover{color:#fff;border-color:#fff}
.code-block pre{margin:0;padding:18px 20px;overflow-x:auto;font-family:var(--font-mono);font-size:14px;line-height:1.7;color:#EDE6D8}
.code-block .k{color:#F2A285}
.code-block .c{color:#A9BBF0}
.code-block .s{color:#A8D5B5}
.code-block .n{color:var(--color-postit)}
/* aanvullingen voor wat het prototype niet toont: losse blokken naast
   secties, genummerde lijsten, h4, inline code en oude tekst met een h2 */
.prose-co > * + section{margin-top:3rem}
.prose-co > section + :not(section){margin-top:1.1em}
.prose-co ol{margin:1.1em 0 0;padding-left:1.4em;list-style:decimal}
.prose-co :is(ul,ol,figure,pre) + p{margin-top:1.1em}
.prose-co h2:not(:first-child){margin-top:3rem}
.prose-co h4{font-size:19px;font-weight:700;margin:1.6rem 0 .4rem}
.prose-co :not(pre) > code{font-family:var(--font-mono);font-size:.85em;padding:.1em .35em;border-radius:6px;background:var(--color-paper-2)}
.prose-co hr{margin:2.5rem 0;border:0;border-top:1px solid var(--color-rule)}
.prose-co .richtext-image,.prose-co img{max-width:100%;height:auto;border-radius:16px}
.prose-co a.btn-primary{color:var(--color-paper);text-decoration:none}