/* HomeBattery.com design-system: lettertypes, tokens, header, footer, slotbanner.
   Overgenomen uit de WordPress-CSS (migratie/css/sitewide-hb.css), Nederlandse tokennamen zoals op de oude site.
   Alle kleuren en maten staan alleen in :root. Pagina-CSS staat in aparte bestanden (bijv. home.css). */

@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/poppins-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/fonts/poppins-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/fonts/poppins-latin-700-normal.woff2") format("woff2"); }



:root{
  --hb-zwart:#1F2024;
  --hb-grijs:#454645;
  --hb-grijs-licht:#6B6D6B;
  --hb-frost:#F7F8F7;
  --hb-wit:#FFFFFF;
  --hb-groen:#67BF61;
  --hb-groen-donker:#2F7432;
  --hb-groen-licht:#7FCC79;
  --hb-oranje:#ECAA15;
  --hb-oranje-donker:#B87F00;
  --hb-zand:#FDF4DD;
  --hb-blauw:#0170B9;
  --hb-mist:#EDF8ED;
  --hb-lijn:#E6E8E6;

  --hb-radius:16px;
  --hb-radius-sm:10px;
  --hb-radius-pill:999px;
  --hb-max:1200px;
  --hb-pad:clamp(20px,5vw,48px);
  --hb-sec-y:clamp(44px,6vw,84px);
  --hb-gap:clamp(16px,2.2vw,28px);
  --hb-flow:clamp(20px,2.6vw,32px);
  --hb-schaduw:0 2px 10px rgba(31,32,36,.06);
  --hb-schaduw-lg:0 16px 40px -20px rgba(31,32,36,.30);
  --hb-font:"Poppins",system-ui,-apple-system,sans-serif;
}


*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--hb-font); color: var(--hb-grijs); background: var(--hb-wit); line-height: 1.7; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
main { display: block; }
.hb-pagina { min-height: 60vh; }

/* ---- Slotbanner (.hb-cta) ---- */
.hb-cta{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);background:var(--hb-groen-donker,#2F7432);padding:64px;margin-top:72px;}
.hb-cta-inner{max-width:900px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.hb-cta-text{display:flex;flex-direction:column;gap:8px;max-width:520px;}
.hb-cta-text h3:not(#hb-specificity-boost):not(#hb-specificity-boost){margin:0!important;color:#FFFFFF!important;font-size:23px!important;font-weight:800!important;}
.hb-cta-text p:not(#hb-specificity-boost):not(#hb-specificity-boost){margin:0!important;color:rgba(255,255,255,.85)!important;font-size:15px!important;line-height:1.5!important;}
.hb-cta-button:not(#hb-specificity-boost):not(#hb-specificity-boost){background:#FFFFFF!important;color:var(--hb-groen-donker,#2F7432)!important;border:none!important;border-radius:999px!important;padding:15px 28px!important;font-weight:700!important;font-size:15px!important;text-decoration:none!important;display:inline-block!important;transition:transform .15s ease,box-shadow .15s ease!important;}
.hb-cta-button:hover:not(#hb-specificity-boost):not(#hb-specificity-boost){transform:translateY(-1px)!important;box-shadow:0 6px 16px rgba(0,0,0,.15)!important;}
#content.site-content:not(#hb-specificity-boost):not(#hb-specificity-boost){padding-bottom:0!important;}

/* ---- Header ---- */
.hb-topbar,.hb-navbar{ font-family:var(--hb-font); }
.hb-topbar,.hb-topbar *,.hb-navbar,.hb-navbar *{ box-sizing:border-box; }

.hb-topbar{ background:var(--hb-zwart); color:#fff; }
.hb-topbar-wrap{
  display:flex; flex-direction:row; justify-content:center; align-items:center;
  gap:.5rem; min-height:38px; padding-block:.45rem;
  width:100%; max-width:var(--hb-max,1200px); margin-inline:auto; padding-inline:var(--hb-pad,clamp(20px,5vw,48px));
}
.hb-topbar p{ font-size:.82rem; color:#fff; text-align:center; margin:0; }
.hb-topbar a{ color:var(--hb-groen-licht,#7FCC79); }

.hb-navbar{ background:#fff; border-bottom:1px solid var(--hb-lijn,#E6E8E6); position:sticky; top:0; z-index:80; }
.hb-navbar-wrap{
  display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; gap:1.25rem;
  min-height:72px; padding-block:.5rem;
  width:100%; max-width:var(--hb-max,1200px); margin-inline:auto; padding-inline:var(--hb-pad,clamp(20px,5vw,48px));
}
.hb-navbar-wrap:has(.hb-menu-cb:checked){ flex-wrap:wrap; }

.hb-logo{ flex:0 0 auto; margin-right:auto; display:block; }
.hb-logo img{ height:38px; width:auto; display:block; }

.hb-nav{ display:flex; align-items:center; gap:1.6rem; }
.hb-nav a{
  font-size:.97rem; font-weight:500; color:var(--hb-grijs,#454645);
  text-decoration:none; padding:.35rem 0; position:relative; white-space:nowrap;
  transition:color .15s ease;
}
.hb-nav a:hover{ color:var(--hb-zwart,#1F2024); }
.hb-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-1px;
  height:2px; background:var(--hb-groen,#67BF61); transition:right .18s ease;
}
.hb-nav a:hover::after{ right:0; }

/* --- Dropdown nav items (v2) -------------------------------------- */
.hb-nav-item{ position:relative; display:flex; align-items:center; }
.hb-nav-item-dropdown{ gap:4px; }
.hb-nav-dd-cb{ position:absolute; opacity:0; pointer-events:none; width:0; height:0; }
.hb-nav-dd-toggle{ display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:4px; }
.hb-nav-caret{
  width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg); margin-top:-3px; transition:transform .15s ease;
}
.hb-nav-dropdown-menu{
  position:absolute; top:100%; left:0; width:max-content; min-width:140px; margin-top:10px;
  background:#fff; border:1px solid var(--hb-lijn,#E6E8E6); border-radius:var(--hb-radius,16px);
  box-shadow:var(--hb-schaduw-lg,0 16px 40px -20px rgba(31,32,36,.30));
  padding:10px; display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden; transform:translateY(4px);
  transition:opacity .15s ease,transform .15s ease,visibility .15s;
  z-index:90;
}
.hb-nav-dropdown-menu a{
  display:flex!important; align-items:center; justify-content:space-between; gap:12px;
  padding:.78rem .9rem!important; border-radius:var(--hb-radius-sm,10px); white-space:nowrap;
  color:var(--hb-zwart,#1F2024);
}
.hb-nav-dropdown-menu a:hover{ color:var(--hb-groen-donker,#2F7432); }
.hb-nav-dropdown-menu a::after{
  content:"\2192"; position:static; display:inline-block; height:auto; width:auto; background:none;
  color:var(--hb-groen-donker,#2F7432); font-size:.9rem; line-height:1;
  opacity:0; transform:translateX(-4px); transition:opacity .15s ease,transform .15s ease;
}
.hb-nav-dropdown-menu a:hover::after{ opacity:1; transform:translateX(0); }
.hb-nav-item-dropdown:hover .hb-nav-dropdown-menu,
.hb-nav-item-dropdown:focus-within .hb-nav-dropdown-menu{
  opacity:1; visibility:visible; transform:translateY(0);
}
/* Desktop-only: hover/focus-within rotates the caret while the panel
   is open. Scoped to desktop widths on purpose -- on mobile, tapping
   the caret <label> can leave the item :focus-within even after the
   tap that unchecks its checkbox, which fought the checkbox-driven
   rotation below and left the caret stuck pointing up after closing. */
@media(min-width:1025px){
  .hb-nav-item-dropdown:hover .hb-nav-caret,
  .hb-nav-item-dropdown:focus-within .hb-nav-caret{ transform:rotate(225deg); margin-top:3px; }
}

.hb-nav-actions{
  display:flex; align-items:center; gap:.9rem;
  flex:0 1 auto; min-width:0;
}

.hb-menu-cb{ position:absolute; opacity:0; pointer-events:none; width:0; height:0; }
.hb-burger{ display:none; }

.hb-header .wp-block-button__link{
  font-family:var(--hb-font); font-weight:600; line-height:1.2;
  border-radius:var(--hb-radius-pill,999px); border:2px solid transparent; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  white-space:nowrap;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .12s ease;
}
.hb-header .wp-block-button__link:hover{ transform:translateY(-1px); }
.hb-header .wp-block-button__link:focus-visible{ outline:3px solid var(--hb-oranje,#ECAA15); outline-offset:2px; }
.hb-head-btn-groen .wp-block-button__link{
  background:var(--hb-groen,#67BF61); color:#fff; border-color:var(--hb-groen,#67BF61);
}
.hb-head-btn-groen .wp-block-button__link:hover{
  background:var(--hb-groen-donker,#2F7432); border-color:var(--hb-groen-donker,#2F7432); color:#fff;
}
.hb-head-btn-klein .wp-block-button__link{ padding:.6rem 1.15rem; font-size:.9rem; }

@media(max-width:1024px){
  .hb-navbar-wrap{ min-height:0; padding-block:.7rem; gap:.7rem; }
  .hb-nav-actions{ gap:.6rem; }
  .hb-head-btn-klein .wp-block-button__link{ padding:.55rem .85rem; font-size:.85rem; }

  .hb-burger{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:5px; width:44px; height:44px; flex:0 0 auto; cursor:pointer;
    border:1px solid var(--hb-lijn,#E6E8E6); background:#fff; border-radius:12px;
  }
  .hb-burger::before,.hb-burger span,.hb-burger::after{
    content:""; display:block; width:20px; height:2px; background:var(--hb-zwart,#1F2024);
    transition:transform .22s ease, opacity .18s ease;
  }
  .hb-burger:hover{ border-color:var(--hb-zwart,#1F2024); }

  .hb-navbar-wrap:has(.hb-menu-cb:checked) .hb-burger{ border-color:var(--hb-zwart,#1F2024); }
  .hb-navbar-wrap:has(.hb-menu-cb:checked) .hb-burger::before{ transform:translateY(7px) rotate(45deg); }
  .hb-navbar-wrap:has(.hb-menu-cb:checked) .hb-burger span{ opacity:0; }
  .hb-navbar-wrap:has(.hb-menu-cb:checked) .hb-burger::after{ transform:translateY(-7px) rotate(-45deg); }

  .hb-nav{ display:none; }
  .hb-navbar-wrap:has(.hb-menu-cb:checked) .hb-nav{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    order:9; flex-basis:100%; width:100%;
    border-top:1px solid var(--hb-lijn,#E6E8E6); margin-top:.7rem;
  }
  .hb-navbar-wrap:has(.hb-menu-cb:checked) .hb-nav a{
    padding:.9rem .2rem; border-bottom:1px solid var(--hb-lijn,#E6E8E6);
    font-size:.95rem; white-space:normal;
  }
  .hb-navbar-wrap:has(.hb-menu-cb:checked) .hb-nav a::after{ display:none; }
  .hb-navbar-wrap:has(.hb-menu-cb:checked) .hb-nav a:last-child{ border-bottom:0; }

  /* Dropdown items in the mobile burger menu: collapsed by default,
     the caret is its own tap target (via the per-item checkbox) that
     expands just that one submenu -- not everything at once. */
  .hb-navbar-wrap:has(.hb-menu-cb:checked) .hb-nav-item-dropdown{
    display:flex; flex-wrap:wrap; align-items:center;
    border-bottom:1px solid var(--hb-lijn,#E6E8E6);
  }
  .hb-navbar-wrap:has(.hb-menu-cb:checked) .hb-nav-item-dropdown .hb-nav-dropdown-link{
    flex:1 1 auto; padding:.9rem .2rem; border-bottom:0; font-size:.95rem;
  }
  .hb-navbar-wrap:has(.hb-menu-cb:checked) .hb-nav-dd-toggle{
    flex:0 0 auto; display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; margin:.4rem 0;
  }
  .hb-navbar-wrap:has(.hb-menu-cb:checked) .hb-nav-caret{
    width:9px; height:9px; margin-top:-4px;
  }
  .hb-navbar-wrap:has(.hb-menu-cb:checked) .hb-nav-dd-cb:checked ~ .hb-nav-dd-toggle .hb-nav-caret{
    transform:rotate(225deg); margin-top:4px;
  }
  .hb-navbar-wrap:has(.hb-menu-cb:checked) .hb-nav-dropdown-menu{
    flex:0 0 100%; display:none;
    position:static; opacity:1; visibility:visible; transform:none;
    border:0; box-shadow:none; margin-top:0; padding:0; background:transparent;
  }
  .hb-navbar-wrap:has(.hb-menu-cb:checked) .hb-nav-dd-cb:checked ~ .hb-nav-dropdown-menu{
    display:flex;
  }
  .hb-navbar-wrap:has(.hb-menu-cb:checked) .hb-nav-dropdown-menu a{
    padding:.75rem .2rem .75rem 1.2rem!important; border-bottom:1px solid var(--hb-lijn,#E6E8E6);
    font-size:.9rem; color:var(--hb-grijs-licht,#6B6D6B);
  }
  .hb-navbar-wrap:has(.hb-menu-cb:checked) .hb-nav-dropdown-menu a:hover{ background:transparent; }
}

@media(max-width:480px){
  .hb-logo img{ height:26px; }
  .hb-head-btn-klein .wp-block-button__link{ padding:.5rem .65rem; font-size:.78rem; }
  .hb-nav-actions{ gap:.5rem; }
  .hb-burger{ width:38px; height:38px; }
}

@media(max-width:360px){
  .hb-head-btn-klein .wp-block-button__link{ padding:.5rem .55rem; font-size:.72rem; }
}

@supports not selector(:has(*)){
  @media(max-width:1024px){
    .hb-burger{ display:none; }
    .hb-navbar-wrap{ flex-wrap:wrap; }
    .hb-nav{
      display:flex; flex-basis:100%; width:100%; order:9; flex-wrap:wrap; gap:.6rem 1rem;
      border-top:1px solid var(--hb-lijn,#E6E8E6); padding-top:.7rem;
    }
  }
}

/* ---- Footer ---- */
.hb-footer{
  background:var(--hb-zwart,#1F2024); color:rgba(255,255,255,.68); font-family:var(--hb-font);
}
.hb-footer,.hb-footer *{ box-sizing:border-box; }
.hb-footer a{ text-decoration:none; color:inherit; transition:color .15s ease; }
.hb-footer a:hover{ color:var(--hb-groen-licht,#7FCC79); }

.hb-footer-wrap:not(#hb-specificity-boost):not(#hb-specificity-boost){
  width:100% !important; max-width:var(--hb-max,1200px) !important; margin-inline:auto !important; padding-inline:var(--hb-pad,clamp(20px,5vw,48px)) !important;
}

.hb-footer-top:not(#hb-specificity-boost):not(#hb-specificity-boost){
  display:grid !important; grid-template-columns:1.6fr 1fr 1fr 1fr !important;
  gap:clamp(24px,4vw,48px) !important;
  padding-block:clamp(40px,5vw,64px) clamp(28px,3vw,40px) !important;
}
.hb-footer-merk{ max-width:36ch; display:flex; flex-direction:column; gap:16px; }
.hb-footer-merk p{ margin:0; }
.hb-footer-merk .wp-block-buttons{ margin:0; }

.hb-footer-logo{ display:block; width:fit-content; }
.hb-footer-logo img{ height:46px; width:auto; display:block; }

.hb-footer-merk p{ font-size:.92rem; line-height:1.6; color:rgba(255,255,255,.6); }

.hb-footer-kop{
  font-size:.76rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:rgba(255,255,255,.92); margin-bottom:16px; display:block;
}
.hb-footer-links{ display:flex; flex-direction:column; gap:.7rem; font-size:.9rem; }

.hb-footer-mid:not(#hb-specificity-boost):not(#hb-specificity-boost){
  display:flex !important; flex-wrap:wrap !important; align-items:center !important; justify-content:space-between !important;
  gap:1.25rem !important; padding-block:1.6rem !important; border-top:1px solid rgba(255,255,255,.1) !important;
}
.hb-footer-adres{ display:flex; align-items:center; flex-wrap:wrap; }
.hb-footer-copyright{ font-size:.78rem; color:rgba(255,255,255,.62); }
.hb-footer-disclaimer{
  font-size:.78rem; color:rgba(255,255,255,.62);
  margin-left:.9rem; padding-left:.9rem; border-left:1px solid rgba(255,255,255,.15);
}

.hb-footer-social{ display:flex; gap:.6rem; }
.hb-soc{
  width:38px; height:38px; border:1px solid rgba(255,255,255,.18); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:background-color .15s ease,border-color .15s ease;
}
.hb-soc:hover{ background:var(--hb-groen-tint,#EDF8ED); border-color:var(--hb-groen,#67BF61); }

.hb-soc-icon{
  display:block; width:20px; height:20px; background-color:rgba(255,255,255,.7);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-position:center; mask-position:center;
  transition:background-color .15s ease;
}
.hb-soc:hover .hb-soc-icon{ background-color:var(--hb-groen-donker,#2F7432); }
.hb-soc-icon-linkedin{
  width:23px; height:23px;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctext x='12' y='12' text-anchor='middle' dominant-baseline='central' font-family='Arial,Helvetica,sans-serif' font-weight='700' font-size='18'%3Ein%3C/text%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctext x='12' y='12' text-anchor='middle' dominant-baseline='central' font-family='Arial,Helvetica,sans-serif' font-weight='700' font-size='18'%3Ein%3C/text%3E%3C/svg%3E");
}
.hb-soc-icon-youtube{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.5 6.2c-.3-1.1-1.1-1.9-2.2-2.2C19.3 3.5 12 3.5 12 3.5s-7.3 0-9.3.5c-1.1.3-1.9 1.1-2.2 2.2C0 8.2 0 12 0 12s0 3.8.5 5.8c.3 1.1 1.1 1.9 2.2 2.2 2 .5 9.3.5 9.3.5s7.3 0 9.3-.5c1.1-.3 1.9-1.1 2.2-2.2.5-2 .5-5.8.5-5.8s0-3.8-.5-5.8zM9.6 15.6V8.4l6.4 3.6-6.4 3.6z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.5 6.2c-.3-1.1-1.1-1.9-2.2-2.2C19.3 3.5 12 3.5 12 3.5s-7.3 0-9.3.5c-1.1.3-1.9 1.1-2.2 2.2C0 8.2 0 12 0 12s0 3.8.5 5.8c.3 1.1 1.1 1.9 2.2 2.2 2 .5 9.3.5 9.3.5s7.3 0 9.3-.5c1.1-.3 1.9-1.1 2.2-2.2.5-2 .5-5.8.5-5.8s0-3.8-.5-5.8zM9.6 15.6V8.4l6.4 3.6-6.4 3.6z'/%3E%3C/svg%3E");
}

.hb-footer .wp-block-button__link{
  font-family:var(--hb-font); font-weight:600; line-height:1.2;
  border-radius:var(--hb-radius-pill,999px); border:2px solid transparent; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem; white-space:nowrap;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .12s ease;
}
.hb-footer .wp-block-button__link:hover{ transform:translateY(-1px); }
.hb-footer .wp-block-button__link:focus-visible{ outline:3px solid var(--hb-oranje,#ECAA15); outline-offset:2px; }
.hb-foot-btn-groen .wp-block-button__link{
  background:var(--hb-groen,#67BF61); color:#fff; border-color:var(--hb-groen,#67BF61);
}
.hb-foot-btn-groen .wp-block-button__link:hover{
  background:var(--hb-groen-donker,#2F7432); border-color:var(--hb-groen-donker,#2F7432); color:#fff;
}
.hb-foot-btn-klein .wp-block-button__link{ padding:.65rem 1.25rem; font-size:.9rem; }

@media(max-width:1024px){
  .hb-footer-top:not(#hb-specificity-boost):not(#hb-specificity-boost){ grid-template-columns:1fr 1fr !important; }
}
@media(max-width:600px){
  .hb-footer-top:not(#hb-specificity-boost):not(#hb-specificity-boost){ grid-template-columns:1fr !important; }
  .hb-footer-mid:not(#hb-specificity-boost):not(#hb-specificity-boost){ flex-direction:column !important; align-items:flex-start !important; }
  .hb-footer-adres{ flex-direction:column; align-items:flex-start; }
  .hb-footer-disclaimer{
    margin-left:0; padding-left:0; border-left:0; margin-top:.35rem;
  }
}
@media(prefers-reduced-motion:reduce){
  .hb-footer *{ transition:none !important; }
}

/* Breathing room between the comment form and the footer on article
   pages -- GeneratePress wraps the whole discussion module (title,
   comment list, reply form) in .comments-area with no bottom spacing
   of its own, so it was butting straight into the footer. Lives here
   rather than Extra CSS or its own snippet, now that both are being
   phased out in favor of a handful of dedicated snippets.
   Desktop-only: mobile already had good spacing there on its own. */
@media(min-width:1025px){
  .comments-area{ padding-bottom:56px; }
}