/* Thema SB Verwarming & Sanitair – 1-op-1 overgenomen van de Elementor-site (kleuren, maten en
   typografie zijn nagemeten op www.sbbvba.be bij 1440 px). */
:root{
  --sb-groen:#88C335;        /* accent uit de Elementor-kit: knoppen, titels, voet */
  --sb-blauw:#11A1DF;        /* primair uit de kit: hover van knoppen */
  --sb-limoen:#D1DD27;       /* secundair uit de kit: links */
  --sb-grijs:#A4A5AA;        /* lopende tekst */
  --sb-balk:#EEEEEE;         /* menubalk bovenaan */
  --sp-container:1188px;     /* 1140 inhoud + 2x24 gutter */
  --sp-gutter:24px;
  --sp-gap:40px;
  --sp-primary:var(--sb-groen);
  --sp-secondary:#333333;
  --sp-text:var(--sb-grijs);
  --sp-muted:var(--sb-grijs);
  --sp-line:#e5e5e5;
  --sp-radius:0;
  --sp-btn-radius:0;
  --sp-font:-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --sp-font-heading:var(--sp-font);
}
body{font:16px/24px var(--sp-font);color:var(--sb-grijs)}
a{color:var(--sb-groen)}
img{max-width:100%;height:auto}

/* ---------- kop: grijze menubalk + witte merkbalk ---------- */
.sb-kop{background:#fff}
.sb-balk{background:var(--sb-balk)}
.sb-balk-inner{display:flex;align-items:center;min-height:44px}
.sb-nav .sp-menu{display:flex;list-style:none;margin:0;padding:0}
.sb-nav .sp-menu a{display:block;font:400 14px/19.6px Arial,sans-serif;color:var(--sb-grijs);text-decoration:none;padding:12px 20px}
.sb-nav .sp-menu a:hover,.sb-nav .sp-menu li.is-active>a{color:var(--sb-groen)}
.sb-menuknop{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:10px 0;cursor:pointer}
.sb-menuknop span{width:26px;height:3px;background:var(--sb-grijs)}
.sb-merk-inner{position:relative;display:flex;align-items:center;justify-content:center;height:135px}
.sb-logo img{display:block;width:416px;height:auto}
.sb-keurmerk{position:absolute;right:28px;top:50%;transform:translateY(-50%);width:50px;height:auto}

/* ---------- secties: maatvoering van de Elementor-site ---------- */
.sp-section>.sp-container>.sp-row{padding:20px}
.sp-w-full>.sp-container>.sp-row{padding:0}
.sp-pad-xs{padding:0;margin-bottom:45px}
.sp-pad-s,.sp-pad-m,.sp-pad-l{padding:0;margin-bottom:45px}
.sp-gap-l .sp-row{gap:40px}
.sp-valign-center .sp-row{align-items:center}

/* hero: full-width slider van 65vh (650 px bij een venster van 1000) met 90 px lucht eronder */
.sp-w-full.sp-gap-none{padding:0;margin-bottom:90px}
.sp-w-full .sp-slider{height:65vh}
.sp-slider-slides .sp-slide{height:65vh}
.sp-slide-beeld{background-size:cover;background-position:center}
.sp-slide-inhoud{width:100%;max-width:1140px;margin:0 auto;padding:0 24px}
.sp-slide-titel{max-width:540px;font:700 35px/35px var(--sp-font);color:#fff;margin:0}
.sp-slide-tekst{max-width:540px;color:#fff}
.sp-slider-pijl{background:none;border:0;color:#fff;opacity:.8}
.sp-slider-pijl:hover{opacity:1}

/* ---------- typografie in de inhoud ---------- */
main h1,main h2{font:500 29px/29px var(--sp-font-heading);color:var(--sb-groen);margin:0 0 20px}
main h3{font:500 19px/19px var(--sp-font-heading);color:var(--sb-groen);margin:0 0 15px}
main p{margin:0 0 24px}
main .sp-figure img{display:block;width:100%;height:auto}

/* knoppen: groen, hoekig, hover blauw */
.sp-btn{font:400 15px/1.2 var(--sp-font);padding:12px 24px;border-radius:0;border:0}
.sp-btn-primary,.sb-knop{background:var(--sb-groen);color:#fff}
.sp-btn-primary:hover,.sb-knop:hover{background:var(--sb-blauw);color:#fff;filter:none;transform:none}
.sb-knop{display:inline-block;font:400 15px/1.2 var(--sp-font);padding:12px 24px;text-decoration:none}

/* ---------- voet ---------- */
.sb-offerte{position:relative;margin-top:45px;background:var(--sb-groen) center/cover no-repeat;min-height:750px;display:flex;align-items:center}
.sb-offerte::before{content:'';position:absolute;inset:0;background:rgba(51,51,51,.28)}
.sb-offerte .sp-container{position:relative}
.sb-offerte-inhoud{width:50%;padding:0 20px}
.sb-offerte-inhoud h2{font:500 29px/29px var(--sp-font-heading);color:#fff;margin:0 0 20px}
.sb-offerte-inhoud p{color:#fff;margin:0 0 24px}
.sb-voet{display:flow-root}
.sb-troeven,.sb-gegevens,.sb-onderaan{background:var(--sb-groen);color:#fff}
.sb-troeven{padding:1px 0}
.sb-troeven-inner,.sb-gegevens-inner{display:grid;grid-template-columns:repeat(3,1fr);padding:0 20px}
.sb-troef{display:flex;align-items:center;gap:15px;min-height:77px;border-bottom:1px solid #fff}
.sb-troef h3{font:500 19px/19px var(--sp-font-heading);color:#fff;margin:0}
.sb-icoon{width:30px;height:30px;flex:none}
.sb-gegevens{padding:15px 0 30px;border-bottom:1px solid #fff}
.sb-gegevens p{margin:0}
.sb-gegevens a{color:var(--sb-limoen);text-decoration:none}
.sb-gegevens a:hover{text-decoration:underline}
.sb-sociaal .sb-icoon{width:30px;height:30px;color:#fff}
.sb-legal{list-style:none;margin:10px 0 0;padding:0;line-height:24px}
.sb-onderaan p{margin:0;padding:9px 0;text-align:center;color:#fff}
.sb-onderaan a{color:#fff;text-decoration:none}

/* ---------- contactformulier: zelfde maatvoering als de Elementor-versie ---------- */
.sp-form-grid{display:block}
.sp-form .sp-field{margin-bottom:10px}
.sp-form .sp-field label{display:block;margin:0;font:400 16px/22px var(--sp-font);color:var(--sb-grijs)}
.sp-form .sp-req{color:#e8453c}
.sp-form input,.sp-form select,.sp-form textarea{width:100%;box-sizing:border-box;padding:8px 16px;border:1px solid #69727D;border-radius:3px;font:400 15px/1.4 var(--sp-font);color:#333;background:#fff}
.sp-form input,.sp-form select{display:block;height:40px}
.sp-form textarea{display:block;height:117px;min-height:117px;resize:vertical}
.sp-form-actions{margin:0}
.sp-form-message:empty{display:none;margin:0}
.sp-form-actions .sp-btn{display:block;width:100%;height:40px;padding:0 24px;border-radius:0;font:400 15px/40px var(--sp-font)}

/* ---------- klein scherm ---------- */
@media(max-width:900px){
  .sb-menuknop{display:flex}
  .sb-nav{display:none;position:fixed;top:44px;left:0;right:0;bottom:0;background:#fff;padding:1rem;z-index:99;overflow:auto}
  .sb-nav.is-open{display:block}
  .sb-nav .sp-menu{flex-direction:column}
  .sb-nav .sp-menu a{padding:14px 4px;font-size:16px;border-bottom:1px solid var(--sp-line)}
  .sb-merk-inner{height:auto;padding:16px 0;justify-content:flex-start}
  .sb-logo img{width:min(280px,70vw)}
  .sb-keurmerk{right:0}
}
@media(max-width:768px){
  .sp-w-full .sp-slider,.sp-slider-slides .sp-slide{height:420px}
  .sp-slide-titel{font-size:26px;line-height:28px}
  .sp-section>.sp-container>.sp-row{padding:0}
  .sp-gap-l .sp-row,.sp-section .sp-row{column-gap:0;row-gap:40px}
  .sb-offerte{min-height:0;padding:60px 0}
  .sb-offerte-inhoud{width:100%;padding:0}
  .sb-troeven-inner,.sb-gegevens-inner{grid-template-columns:1fr;gap:16px;padding:16px 0}
  .sb-troeven{padding:8px 0}
}