/* Overige blokken: capaciteitsblokken (o.a. 'Browse by section'-tegels) en auteurspagina's. Uit de inline-CSS van de oude site, 4-11-2026. */

/* ===== hb-capacity-blocks-inline-css ===== */
.hb-ins-col > .hb-cap-scale:first-child:not(#hb-specificity-boost):not(#hb-specificity-boost){margin-top:40px!important;}
.hb-cap-scale{margin-top:40px;padding:28px;background:#fff;border:1px solid var(--hb-lijn,#E6E8E6);border-radius:16px;box-shadow:0 4px 16px rgba(31,32,36,.06);box-sizing:border-box;}
/* New in v5 -- the scale card sat directly under the hero with no
   width cap of its own, so it rendered as wide as .hb-ins itself,
   slightly wider than the hero own content (acf/hb-hero caps its
   own inner content at 1080px via .hb-hero-inner). The hero is meant
   to be the widest thing on the page, so the card now matches that
   same 1080px exactly rather than exceeding it. !important + the
   specificity-boost trick because a plain max-width here has already
   lost cascade fights for other elements on this page before. */
.hb-cap-scale:not(#hb-specificity-boost):not(#hb-specificity-boost){max-width:1080px!important;margin-left:auto!important;margin-right:auto!important;}
.hb-cap-scale-labels{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--hb-grijs-licht,#6B6D6B);margin-bottom:10px;}
.hb-cap-scale-current{font-size:14px;font-weight:700;color:var(--hb-groen-donker,#2F7432);}
.hb-cap-scale-track{position:relative;height:8px;border-radius:999px;background:var(--hb-frost,#F7F8F7);border:1px solid var(--hb-lijn,#E6E8E6);}
.hb-cap-scale-fill{position:absolute;top:0;left:0;bottom:0;border-radius:999px;background:var(--hb-groen-donker,#2F7432);}
.hb-cap-scale-dot{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--hb-groen-donker,#2F7432);transform:translate(-50%,-50%);box-shadow:0 1px 4px rgba(31,32,36,.2);}
.hb-cap-scale-meta{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:14px;flex-wrap:wrap;}
.hb-cap-scale-tag{display:inline-block;padding:4px 12px;border-radius:999px;background:var(--hb-groen-tint,#EDF8ED);color:var(--hb-groen-donker,#2F7432);font-size:12px;font-weight:700;}
.hb-cap-scale-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;border-top:1px solid var(--hb-lijn,#E6E8E6);padding-top:20px;margin-top:20px;}
.hb-cap-scale-fact{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;}
.hb-cap-scale-fact-k{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--hb-grijs-licht,#6B6D6B);}
.hb-cap-scale-fact-v{font-size:15px;font-weight:700;color:var(--hb-zwart,#1F2024);}
@media (max-width:700px){
.hb-cap-scale-facts{grid-template-columns:repeat(2,1fr);}
}
/* New in v10 -- "Jump to another capacity" merged straight into the
   hb-cap-scale card (one card, not two stacked under the hero) instead
   of the short-lived standalone hb-cap-nav block/card from v9. Same
   border-top-separated treatment as hb-cap-scale-facts above it. */
.hb-cap-scale-nav{border-top:1px solid var(--hb-lijn,#E6E8E6);padding-top:20px;margin-top:20px;}
.hb-cap-scale-nav-title{margin:0 0 14px;font-size:14px;font-weight:700;color:var(--hb-groen-donker,#2F7432);text-align:center;}
.hb-cap-scale-nav-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;}
.hb-cap-scale-nav-pill{display:inline-block;padding:10px 20px;border-radius:999px;font-size:14px;font-weight:700;text-decoration:none;background:var(--hb-frost,#F7F8F7);color:var(--hb-zwart,#1F2024);transition:background .15s ease;}
.hb-cap-scale-nav-pill:not(.hb-cap-scale-nav-pill-active):hover{background:var(--hb-lijn,#E6E8E6);}
.hb-cap-scale-nav-pill-active{background:var(--hb-zwart,#1F2024);color:#fff;}
/* New in v13 -- hb/capacity-jump reuses .hb-cap-scale and
   .hb-cap-scale-nav* wholesale for free styling, but it has no facts
   row above the nav section, so the border-top separator (meant to
   divide the nav from the facts grid above it) would just float with
   nothing to separate from. Scoped override, more specific than the
   bare .hb-cap-scale-nav rule above by class count alone, no
   !important needed here. */
.hb-cap-jump .hb-cap-scale-nav{border-top:none;padding-top:0;margin-top:0;}
/* New in v14 -- on the live Battery Capacities page the pills came
   out as plain underlined links (title black instead of green, pills
   with no fill and no hover state) even though the markup uses the
   exact same .hb-cap-scale-nav* classes as the working original.
   Something on that specific page/template beats our single-class
   rules above for color/background/text-decoration without touching
   layout (padding/border-radius still rendered correctly), which
   points at a same-or-higher-specificity rule loaded after ours
   rather than a missing stylesheet. Rather than chase that rule down,
   these duplicate the nav-pill declarations with the same
   specificity-boost + !important trick already used elsewhere in
   this file (e.g. .hb-btn-row below, .hb-cap-scale-nav in the editor
   stylesheet) so hb/capacity-jump own title, pills and hover/active
   states can not lose that fight regardless of cause. hb/capacity-
   scale own nav is untouched -- these are all scoped under
   .hb-cap-jump. */
.hb-cap-jump .hb-cap-scale-nav-title:not(#hb-specificity-boost):not(#hb-specificity-boost){margin:0 0 14px!important;font-size:14px!important;font-weight:700!important;color:var(--hb-groen-donker,#2F7432)!important;text-align:center!important;}
.hb-cap-jump .hb-cap-scale-nav-pills:not(#hb-specificity-boost):not(#hb-specificity-boost){display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:10px!important;}
.hb-cap-jump .hb-cap-scale-nav-pill:not(#hb-specificity-boost):not(#hb-specificity-boost){display:inline-block!important;padding:10px 20px!important;border-radius:999px!important;font-size:14px!important;font-weight:700!important;text-decoration:none!important;background:var(--hb-frost,#F7F8F7)!important;color:var(--hb-zwart,#1F2024)!important;transition:background .15s ease!important;}
.hb-cap-jump .hb-cap-scale-nav-pill:not(.hb-cap-scale-nav-pill-active):hover:not(#hb-specificity-boost):not(#hb-specificity-boost){background:var(--hb-lijn,#E6E8E6)!important;}
.hb-cap-jump .hb-cap-scale-nav-pill-active:not(#hb-specificity-boost):not(#hb-specificity-boost){background:var(--hb-zwart,#1F2024)!important;color:#fff!important;}
.hb-btn-row{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:32px;}
.hb-btn-row .hb-btn-wrap{margin-top:0;}
.hb-summary{margin-top:40px;padding:32px;background:var(--hb-frost,#F7F8F7);border:1px solid var(--hb-lijn,#E6E8E6);border-radius:16px;}
.hb-summary-heading{margin:0 0 16px;font-size:18px;font-weight:800;color:var(--hb-zwart,#1F2024);}
.hb-summary-list{display:flex;flex-direction:column;gap:12px;}
.hb-summary-item{position:relative;padding-left:30px;font-size:15px;line-height:1.6;color:var(--hb-grijs,#454645);}
.hb-summary-item::before{content:"";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;background:var(--hb-groen,#67BF61);}
.hb-summary-item::after{content:"";position:absolute;left:6px;top:6px;width:6px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}
/* v5 tried to force-match the TOC width with a custom CSS rule on
   ".hb-toc" itself, guessing the target pixel value (first 760px,
   then 900px) -- still slightly too wide both times, because it was
   never a width-value problem to begin with. Checked how
   News/Deep Dives articles actually do this (lib.py build()):
   acf/hb-toc there is NOT a bare sibling of hero -- it sits inside
   its own "hb-ins-sec hb-ins-sec-tight" > "hb-ins-col" wrapper,
   exactly like the body text own section further down. There is
   NO custom CSS anywhere targeting hb-toc width on articles at
   all -- it simply inherits the real column width for free by being
   a genuine .hb-ins-col child, same as the body text. v6 removes this
   whole custom-width rule and instead nests the TOC the same way in
   cap5c.py -- see cap5c.py own comment at the toc wrap() call. */
.hb-ins-col > .hb-other-sizes:first-child:not(#hb-specificity-boost):not(#hb-specificity-boost){margin-top:40px!important;}
.hb-other-sizes{margin-top:40px;max-width:1080px;margin-left:auto;margin-right:auto;}
@media (max-width:700px){.hb-other-sizes{margin-top:24px;}}
.hb-other-sizes .hb-other-sizes-title{margin:0 0 20px!important;font-size:23px;font-weight:700;color:var(--hb-zwart,#1F2024);}
.hb-other-sizes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;}
.hb-other-sizes-tile{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 24px;background:#fff;border:1px solid var(--hb-lijn,#E6E8E6);border-radius:12px;text-decoration:none;color:var(--hb-zwart,#1F2024);box-shadow:0 2px 8px rgba(31,32,36,.04);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;}
.hb-other-sizes-tile:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(31,32,36,.08);border-color:var(--hb-groen,#67BF61);}
.hb-other-sizes-tile-text{display:flex;flex-direction:column;gap:4px;min-width:0;}
.hb-other-sizes-tile-label{font-weight:700;font-size:16px;}
.hb-other-sizes-desc{font-weight:500;font-size:13px;color:var(--hb-grijs-licht,#6B6D6B);}
.hb-other-sizes-arrow{color:var(--hb-groen-donker,#2F7432);font-size:18px;line-height:1;}
/* New in v5 -- hb/cta-capacity. Same full-bleed green-bar mechanism as
   acf/hb-cta (margin:calc(50% - 50vw) breaks it out to the viewport,
   then an inner box re-centers the content at 900px, same width as
   hb-cta-inner and the TOC fix above), but the tiles reuse hb/other-
   sizes own tile look with inverted (white-on-green) colors instead
   of a single button. */
.hb-cta-cap{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);background:var(--hb-groen-donker,#2F7432);padding:64px 40px;margin-top:72px;box-sizing:border-box;}
.hb-cta-cap-inner{max-width:900px;margin:0 auto;}
.hb-cta-cap-heading{margin:0 0 24px;color:#FFFFFF;font-size:23px;font-weight:800;text-align:center;}
.hb-cta-cap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;}
.hb-cta-cap-tile{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;background:#FFFFFF;border-radius:12px;text-decoration:none;color:var(--hb-groen-donker,#2F7432);font-weight:700;font-size:15px;transition:transform .15s ease,box-shadow .15s ease;}
.hb-cta-cap-tile:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.15);}
.hb-cta-cap-arrow{color:var(--hb-groen-donker,#2F7432);font-size:18px;line-height:1;}
@media (max-width:680px){.hb-cta-cap{padding:40px 20px;}}
/* v6 and v7 both guessed at .hb-ins itself (padding-bottom, then
   margin-bottom) -- neither was it; checked live on
   https://homebattery.com/test/ with devtools this time instead of
   guessing a third property. .hb-ins itself measures 0/0 on every
   margin/padding, confirmed. The real source: GeneratePress (the
   site theme) wraps all page content in "#content.site-content",
   several levels above .hb-ins (entry-content > inside-article >
   article > main#main > #primary.content-area > #content.site-
   content), and that theme wrapper carries its own fixed
   padding-bottom:40px -- confirmed by measuring the live page: the
   green CTA own bottom edge and #content own bottom edge were 40px
   apart, and the footer starts exactly where #content ends. Nothing
   to do with .hb-ins or Group-block defaults at all. Zeroed directly
   on the theme own wrapper now, still scoped to capacity pages only
   via this stylesheet has_block() gate. */
#content.site-content:not(#hb-specificity-boost):not(#hb-specificity-boost){padding-bottom:0!important;}

/*# sourceURL=hb-capacity-blocks-inline-css */

/* ===== hb-author-archive-inline-css ===== */
.hb-authorpage{overflow-x:hidden;}
.hb-authorhero{max-width:1040px;margin:48px auto 0;padding:40px;background:var(--hb-frost,#F7F8F7);border-radius:20px;display:flex;gap:28px;align-items:center;}
.hb-authorhero-avatar{width:120px;height:120px;border-radius:50%;background:var(--hb-groen,#67BF61);color:#FFFFFF;display:flex;align-items:center;justify-content:center;overflow:hidden;font-weight:700;font-size:36px;flex-shrink:0;background-repeat:no-repeat;}
.hb-authorhero-text{display:flex;flex-direction:column;gap:6px;}
.hb-authorhero-eyebrow{margin:0;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--hb-groen-donker,#2F7432);}
.hb-authorhero-name{margin:0;font-size:32px;line-height:1.2;color:var(--hb-zwart,#1F2024);}
.hb-authorhero-role{margin:10px 0 0!important;font-size:15px;font-weight:600;color:var(--hb-groen-donker,#2F7432);}
.hb-authorhero-bio{margin:10px 0 0!important;font-size:16px;line-height:1.6;color:var(--hb-grijs,#454645);max-width:640px;}
.hb-authorgrid-wrap{max-width:1040px;margin:40px auto 0;padding:0 0 32px;box-sizing:border-box;}
.hb-authorgrid-count{margin:0 0 20px;font-size:14px;font-weight:600;color:var(--hb-grijs,#454645);}
.hb-authorgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;}
.hb-authorgrid-card{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:var(--hb-wit,#FFFFFF);border:1px solid var(--hb-lijn,#E6E8E6);text-decoration:none;transition:box-shadow .15s ease,transform .15s ease;}
.hb-authorgrid-card:hover{box-shadow:0 20px 40px -24px rgba(31,32,36,.25);transform:translateY(-2px);}
.hb-authorgrid-img{aspect-ratio:16/10;overflow:hidden;}
.hb-authorgrid-img img{width:100%;height:100%;object-fit:cover;display:block;}
.hb-authorgrid-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:6px;}
.hb-authorgrid-cat{margin:0;font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--hb-groen-donker,#2F7432);}
.hb-authorgrid-title{margin:0;font-size:17px;line-height:1.4;color:var(--hb-zwart,#1F2024);}
.hb-authorgrid-date{margin:0!important;font-size:13px;color:var(--hb-grijs,#454645);}
.hb-authorgrid-empty{color:var(--hb-grijs,#454645);}
.hb-authorgrid-pagination{margin-top:32px;display:flex;flex-wrap:wrap;justify-content:center;width:100%;gap:10px;}
.hb-authorgrid-pagination .page-numbers:not(#hb-specificity-boost):not(#hb-specificity-boost){box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;text-align:center;float:none;min-width:38px;height:38px;margin:0;padding:0 12px!important;line-height:1!important;border-radius:999px;border:1px solid var(--hb-lijn,#E6E8E6);background:var(--hb-wit,#FFFFFF);color:var(--hb-zwart,#1F2024);text-decoration:none;font-size:14px;transition:background-color .15s ease,border-color .15s ease,color .15s ease;}
.hb-authorgrid-pagination .page-numbers:not(#hb-specificity-boost):not(#hb-specificity-boost):hover{border-color:var(--hb-groen,#67BF61);color:var(--hb-groen-donker,#2F7432);background:var(--hb-groen-tint,#EDF8ED);}
.hb-authorgrid-pagination .page-numbers.current:not(#hb-specificity-boost):not(#hb-specificity-boost){background:var(--hb-groen,#67BF61);border-color:var(--hb-groen,#67BF61);color:#FFFFFF;}
.hb-authorgrid-pagination .page-numbers.current:not(#hb-specificity-boost):not(#hb-specificity-boost):hover{background:var(--hb-groen,#67BF61);color:#FFFFFF;}
@media (max-width:600px){
.hb-authorhero{flex-direction:column;align-items:flex-start;padding:28px 24px;margin:24px auto 0;}
.hb-authorhero-avatar{width:88px;height:88px;font-size:28px;}
.hb-authorhero-name{font-size:26px;}
}

/*# sourceURL=hb-author-archive-inline-css */