/* blog.css - artikelen van de Obeya-blog. Laad ../assets/obeya.css EERST: tokens, lettertypen, scrollbars,
   knoppen (.ob-btn), .ob-wrap, .ob-ico en .ob-faq komen daar vandaan. Hier alleen het artikel-ontwerp.
   Thema: data-theme op <html> (zelfde sleutel cv-site-theme als de hoofdpagina), anders het systeem. */

body.bl{background:var(--bg);color:var(--text);padding-top:0}

/* ── slanke balk bovenaan ── */
.bl-bar{position:sticky;top:0;z-index:50;background:var(--nav);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.bl-bar__in{display:flex;align-items:center;gap:14px;min-height:56px;flex-wrap:wrap;padding:6px 0}
.bl-brand{display:flex;align-items:center;gap:9px;text-decoration:none;font:800 16px/1 "Inter Tight",Inter,sans-serif;color:var(--text)}
.bl-brand img{width:28px;height:28px;border-radius:8px}
.bl-brand em{font-style:normal;font-weight:600;font-size:13px;color:var(--muted);padding-left:9px;border-left:1px solid var(--line)}
.bl-back{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 4px;margin-left:auto;font:600 14px/1.2 Inter,sans-serif;color:var(--accent-text);text-decoration:none}
.bl-back:hover{text-decoration:underline}
.bl-theme{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;background:transparent;border:1px solid var(--line);color:var(--text);cursor:pointer}
.bl-theme:hover{border-color:var(--accent)}
@media(max-width:520px){.bl-brand em{display:none}.bl-back{font-size:13px}}

/* ── artikel ── */
.bl-art{width:min(760px,calc(100% - 32px));margin:0 auto;padding:28px 0 72px}
.bl-crumbs{margin:0 0 22px;font:500 13px/1.5 Inter,sans-serif;color:var(--muted)}
.bl-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.bl-crumbs li+li::before{content:"/";margin-right:8px;opacity:.5}
.bl-crumbs a{color:var(--accent-text);text-decoration:none}
.bl-crumbs a:hover{text-decoration:underline}
.bl-crumbs [aria-current]{color:var(--text)}
.bl-chip{display:inline-flex;align-items:center;gap:6px;font:600 12px/1 "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-text);background:var(--accent-soft);padding:7px 11px;border-radius:999px}
.bl-h1{font:800 clamp(32px,5.2vw,52px)/1.06 "Inter Tight",Inter,sans-serif;letter-spacing:-.03em;margin:16px 0 18px;text-wrap:balance}
.bl-meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 22px;font:500 13px/1.4 Inter,sans-serif;color:var(--muted)}
.bl-lead{font-size:clamp(18px,2.2vw,21px);line-height:1.55;color:var(--text);margin:0 0 30px;padding-left:16px;border-left:3px solid var(--accent)}
.bl-body{font-size:17px;line-height:1.75;max-width:70ch}
.bl-body p{margin:0 0 1.15em}
.bl-body h2{font:800 clamp(24px,3.2vw,32px)/1.15 "Inter Tight",Inter,sans-serif;letter-spacing:-.02em;margin:2em 0 .6em;scroll-margin-top:72px;text-wrap:balance}
.bl-body h3{font:700 20px/1.3 "Inter Tight",Inter,sans-serif;margin:1.6em 0 .5em}
.bl-body a{color:var(--accent-text);text-underline-offset:3px}
.bl-body ul,.bl-body ol{margin:0 0 1.2em;padding-left:1.3em}
.bl-body li{margin:.35em 0}
.bl-body li::marker{color:var(--accent-text)}
.bl-body strong{font-weight:650}
.bl-body blockquote{margin:1.4em 0;padding:14px 18px;border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 12px 12px 0;color:var(--text)}
.bl-body blockquote p:last-child{margin:0}
.bl-body table{width:100%;border-collapse:collapse;margin:0 0 1.4em;font-size:15px;line-height:1.5}
.bl-body th,.bl-body td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.bl-body th{font-weight:700;color:var(--text);background:var(--bg-2)}
.bl-table{overflow-x:auto;margin:0 0 1.4em}
.bl-table table{margin:0;min-width:520px}
.bl-toc{margin:0 0 2em;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--card);font-size:15px}
.bl-toc b{display:block;font:600 12px/1 "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);margin-bottom:10px}
.bl-toc ol{margin:0;padding-left:1.2em}
.bl-toc a{color:var(--text);text-decoration:none}
.bl-toc a:hover{color:var(--accent-text);text-decoration:underline}
.bl-fig{margin:1.8em 0}
.bl-fig img{width:100%;border-radius:14px;border:1px solid var(--line);box-shadow:var(--shadow);background:var(--card)}
.bl-fig figcaption{margin-top:10px;font-size:14px;line-height:1.5;color:var(--muted)}

/* ── FAQ (zelfde details-stijl als de hoofdpagina, hier los van .ob-faqwrap) ── */
.bl-faq{margin:2.6em 0 0}
.bl-faq h2{font:800 clamp(24px,3.2vw,32px)/1.15 "Inter Tight",Inter,sans-serif;letter-spacing:-.02em;margin:0 0 .5em}
.bl-faq details{border-bottom:1px solid var(--line)}
.bl-faq details:first-of-type{border-top:1px solid var(--line)}
.bl-faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;padding:14px 0;cursor:pointer;list-style:none;font:650 17px/1.35 Inter,sans-serif}
.bl-faq summary::-webkit-details-marker{display:none}
.bl-faq summary .ob-ico{color:var(--accent-text);transition:transform .25s}
.bl-faq details[open] summary .ob-ico{transform:rotate(45deg)}
.bl-faq details p{margin:0 0 18px;color:var(--muted);max-width:64ch;line-height:1.65}

/* ── CTA ── */
.bl-cta{margin:3em 0 0;padding:clamp(22px,4vw,34px);border-radius:20px;background:radial-gradient(70% 120% at 0 0,rgba(61,139,255,.25),transparent 70%),#050a16;color:#eaf0fa}
.bl-cta h2{font:800 clamp(24px,3.4vw,34px)/1.1 "Inter Tight",Inter,sans-serif;letter-spacing:-.025em;margin:0 0 10px}
.bl-cta p{margin:0;color:rgba(234,240,250,.82);max-width:56ch;line-height:1.6}
.bl-cta .ob-cta-row{margin-top:20px}
.bl-cta .ob-btn--ghost{color:#eaf0fa;border-color:rgba(234,240,250,.38)}

/* ── Lees ook ── */
.bl-more{margin:3em 0 0}
.bl-more h2{font:800 22px/1.2 "Inter Tight",Inter,sans-serif;margin:0 0 16px}
.bl-more__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.bl-more__card{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:16px;border:1px solid var(--line);background:var(--card);text-decoration:none;color:var(--text);transition:border-color .2s,transform .2s}
.bl-more__card:hover{border-color:var(--accent);transform:translateY(-2px)}
.bl-more__card .bl-chip{align-self:flex-start;padding:5px 9px;font-size:11px}
.bl-more__card b{font:700 16px/1.3 "Inter Tight",Inter,sans-serif}
.bl-more__card span{font-size:14px;line-height:1.5;color:var(--muted)}
.bl-more__pillar{margin-top:14px;display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:14px;border:1px dashed var(--accent);color:var(--text);text-decoration:none;font:600 15px/1.4 Inter,sans-serif}
.bl-more__pillar .ob-ico{color:var(--accent-text)}
.bl-more__pillar:hover{background:var(--accent-soft)}
@media(max-width:760px){.bl-more__grid{grid-template-columns:1fr}}

.bl-foot{border-top:1px solid var(--line);padding:22px 0;font-size:14px;color:var(--muted)}
.bl-foot__in{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:space-between}
.bl-foot a{color:var(--accent-text)}
html,body{max-width:100%;overflow-x:clip}
@media(max-width:520px){.bl-bar__in{flex-wrap:nowrap;gap:10px}.bl-brand span{display:none}.bl-back{margin-left:auto;font-size:13px;white-space:nowrap}}

/* ── taalkiezer (blog-lang.js; popup-stijl .ob-pick komt uit ../assets/obeya.css) ── */
.blog-lang{display:inline-flex;align-items:center}
.bl-langbtn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:44px;height:40px;padding:0 11px;border-radius:999px;background:transparent;
  border:1px solid var(--line);color:var(--text);cursor:pointer;font:700 13px/1 Inter,sans-serif}
.bl-langbtn:hover,.bl-langbtn[aria-expanded="true"]{border-color:var(--accent)}
.bl-langbtn:focus-visible,.bl-pick .ob-pick__opt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bl-pick .ob-pick__opt{text-decoration:none;box-sizing:border-box}
.bl-pick .ob-pick__list{max-height:min(320px,60vh)}
@media(max-width:520px){.bl-langbtn__code{display:none}.bl-langbtn{padding:0 9px;min-width:40px}}

/* Comic strip at the top of a post (add-comic-hero.js) */
.bl-comic{--cw:min(1240px,calc(100vw - 32px));width:var(--cw);margin:6px 0 40px calc(50% - var(--cw) / 2);position:relative}
.bl-comic a{display:block;padding:clamp(10px,2vw,26px);border-radius:22px;background:var(--card);border:1px solid var(--line);box-shadow:0 30px 70px -34px rgba(13,24,48,.45);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.bl-comic a:hover{transform:translateY(-3px);box-shadow:0 38px 80px -34px rgba(13,24,48,.55)}
.bl-comic img{display:block;width:100%;height:auto;aspect-ratio:1200/675;border-radius:10px}
.bl-comic a:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.bl-comic figcaption{margin-top:12px;font-size:13px;color:var(--muted);text-align:center}
@media(max-width:520px){.bl-comic{margin-bottom:28px}.bl-comic a{border-radius:16px}}
@media print{.bl-comic{display:none}}