/* ---------------------------------------------------------------------------
   Wuytens Verwarming — 1-op-1 overgenomen van de Elementor-site (hello-elementor).
   Kleuren uit de Elementor-kit: rood #CA0000 (accent: h1, links, knoppen),
   donkerblauw #000070 (h2–h4), tekst #333. De oude site laadde wel Google-fonts,
   maar paste ze nergens toe: alles rendert in de systeemstack. Die nemen we over.
   --------------------------------------------------------------------------- */
:root{
  --sp-container:1140px;
  --sp-narrow:800px;
  --sp-gutter:0;
  --sp-gap:20px;
  --sp-primary:#CA0000;
  --sp-primary-contrast:#fff;
  --sp-secondary:#000070;
  --sp-text:#333;
  --sp-muted:#7A7A7A;
  --sp-line:#69727D;
  --sp-bg:#fff;
  --sp-surface:#F8F8F8;
  --sp-radius:0;
  --sp-btn-radius:3px;
  --sp-shadow:0 6px 18px rgba(0,0,0,.12);
  --sp-font:-apple-system,"system-ui","Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --sp-font-heading:var(--sp-font);
  --wu-donker:#262a2b;
  --wu-kopbalk:#F3F4F8;
  --wu-voet:#ECECEC;
  --wu-groen:#23A455;
}

body{font:400 16px/1.5 var(--sp-font);color:var(--sp-text)}
/* Koppenschaal van hello-elementor + de kleuren uit de kit. De ruimte ónder een kop
   komt van de widget-tussenruimte (20 px), niet van een eigen marge. */
h1,h2,h3,h4,h5,h6{font-family:var(--sp-font-heading);font-weight:500;margin:0;color:var(--sp-secondary)}
h1{font-size:40px;line-height:1;color:var(--sp-primary)}
h2{font-size:32px;line-height:1}
h3{font-size:28px;line-height:1.2}
h4{font-size:24px;line-height:1.2}
h5{font-size:20px;line-height:1.2}
h6{font-size:16px;line-height:1.2}
p{margin:0 0 1em}
a{color:var(--sp-primary);text-decoration:none}
a:hover{text-decoration:underline}
.sp-text ul,.sp-text ol{padding-left:40px;margin:0}
.sp-text ul{list-style:disc}

.sp-btn{font-weight:400;font-size:15px;line-height:1;padding:12px 24px;border-width:0;border-radius:var(--sp-btn-radius)}
.sp-btn-primary{background:var(--sp-primary);color:#fff}
.sp-btn-primary:hover{background:#a80000;text-decoration:none;transform:none;filter:none}
/* In het rode contactblok draait de knop om: wit vlak, rode tekst. */
.sp-scheme-light .sp-btn-primary{background:#fff;color:var(--sp-primary)}
.sp-scheme-light .sp-btn-primary:hover{background:#f2f2f2}
.sp-scheme-light h1,.sp-scheme-light h2,.sp-scheme-light h3{color:#fff}

/* Sectieruimte: de oude pagina's zetten hun ruimte met spacer-widgets, de secties zelf
   hebben geen padding. Alleen de schaal blijft beschikbaar voor wat later bijkomt. */
.sp-pad-xs{padding:20px 0}.sp-pad-s{padding:30px 0}.sp-pad-m{padding:50px 0}
.sp-pad-l{padding:70px 0}.sp-pad-xl{padding:100px 0}
@media(max-width:768px){.sp-pad-l{padding:50px 0}.sp-pad-xl{padding:60px 0}}
@media(max-width:1180px){.sp-container{padding:0 20px}}

.sp-iconlist .sp-icon{color:var(--sp-primary);margin-top:.25em}
/* Icoonblok zoals Elementor het toont: een kaal grijs icoon van 50 px, alles gecentreerd. */
.sp-iconstyle-square,.sp-iconstyle-circle{width:auto;height:auto;background:none;border-radius:0}
.sp-iconbox-icon{color:#69727D}
.sp-iconbox-icon .sp-icon,.sp-iconbox-icon svg{width:50px;height:50px}
.sp-iconbox{gap:0}
.sp-iconbox-title{font-size:28px;line-height:1.2;margin:8px 0 16px}
.sp-iconbox-text{font-size:16px;line-height:24px}
.sp-gallery-item{background:transparent}
/* Elementor liet 10 px tussen de foto's van de realisatiegalerij. */
.sp-gallery.sp-masonry{column-gap:10px}
.sp-masonry .sp-gallery-item{margin-bottom:10px}

/* ------------------------------ balk bovenaan ------------------------------ */
.wu-top{background:var(--wu-donker);color:#fff}
.wu-top-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:45px}
.wu-top-gegevens{display:flex;flex-wrap:wrap;align-items:center;gap:4px 24px;list-style:none;margin:0;padding:0;max-width:520px}
.wu-top-gegevens li{display:flex;align-items:center;gap:8px;font-size:12px;line-height:18px}
.wu-top-gegevens a{color:#fff}
.wu-top-gegevens svg{width:14px;height:14px;flex:none;color:var(--sp-primary)}
.wu-top-sociaal{display:flex;align-items:center;gap:0}
.wu-top-sociaal a{display:flex;align-items:center;justify-content:center;width:45px;height:45px;color:#fff}
.wu-top-sociaal a:hover{color:var(--sp-primary)}
.wu-top-sociaal svg{width:16px;height:16px}

/* ------------------------------ kop ------------------------------ */
.wu-kop{background:var(--wu-kopbalk);position:relative;z-index:30}
.wu-kop-inner{display:flex;align-items:center;gap:24px;min-height:140px}
.wu-logo{flex:none;display:block}
.wu-logo img{display:block;width:290px;height:auto}
.wu-nav{margin-left:auto}
.wu-nav .sp-menu{display:flex;align-items:stretch;gap:0;list-style:none;margin:0;padding:0}
.wu-nav .sp-menu>li>a{display:block;padding:60px 20px;font:500 15px/20px var(--sp-font);color:var(--wu-donker);border-radius:0;white-space:nowrap}
.wu-nav .sp-menu>li>a:hover{color:var(--sp-primary);text-decoration:none}
/* het rode streepje onder de actieve pagina (in Elementor de "underline"-pointer) */
.wu-nav .sp-menu>li.is-active>a{position:relative}
.wu-nav .sp-menu>li.is-active>a::after{content:'';position:absolute;left:20px;right:20px;bottom:4px;height:3px;background:var(--sp-primary)}
.wu-nav .sp-menu li.has-children>a::after{content:'';display:inline-block;margin-left:8px;border:4px solid transparent;border-top-color:currentColor;transform:translateY(2px)}
.wu-nav .sp-menu>li.is-active.has-children>a::after{border:4px solid transparent;border-top-color:currentColor;position:static;background:none;height:auto}
.wu-nav .sp-menu-sub{position:absolute;top:100%;left:0;min-width:230px;background:#fff;box-shadow:var(--sp-shadow);list-style:none;margin:0;padding:0;display:none;z-index:40;border-radius:0}
.wu-nav .sp-menu li:hover>.sp-menu-sub,.wu-nav .sp-menu li:focus-within>.sp-menu-sub{display:block}
.wu-nav .sp-menu-sub a{display:block;padding:13px 20px;font:400 13px/1.3 var(--sp-font);color:var(--sp-primary);white-space:nowrap}
.wu-nav .sp-menu-sub a:hover{background:#f6f6f6;text-decoration:none}
/* derde niveau (Technieken › Verwarming › Gasinstallatie) klapt naar rechts uit */
.wu-nav .sp-menu-sub .sp-menu-sub{top:0;left:100%}
.wu-nav .sp-menu-sub li.has-children>a::after{border:4px solid transparent;border-left-color:currentColor;float:right;transform:none;margin-top:2px}
.wu-knop{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer}
.wu-knop span{display:block;width:26px;height:2px;background:var(--wu-donker);margin:5px 0}

@media(max-width:1100px){
  .wu-kop-inner{min-height:0;padding:16px 0}
  .wu-logo img{width:220px}
  .wu-knop{display:block}
  .wu-nav{position:absolute;top:100%;left:0;right:0;background:#fff;box-shadow:var(--sp-shadow);display:none;margin:0}
  .wu-nav.is-open{display:block}
  .wu-nav .sp-menu{display:block}
  .wu-nav .sp-menu>li>a{padding:12px 20px;border-bottom:1px solid #e5e5e5}
  .wu-nav .sp-menu>li.is-active>a::after{display:none}
  .wu-nav .sp-menu-sub,.wu-nav .sp-menu-sub .sp-menu-sub{position:static;display:block;box-shadow:none;min-width:0}
  .wu-nav .sp-menu-sub a{padding-left:38px;font-size:14px}
  .wu-nav .sp-menu-sub .sp-menu-sub a{padding-left:56px}
  .wu-nav .sp-menu li.has-children>a::after{display:none}
}
@media(max-width:600px){.wu-top-inner{flex-direction:column;align-items:flex-start;padding:8px 0}.wu-top-sociaal{align-self:flex-end;margin-top:-38px}}

/* ------------------------------ voetblok ------------------------------ */
.wu-voetruimte{height:70px}
.wu-voet{background:var(--wu-voet);padding:50px 0 0}
.wu-voet-rij{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:start}
.wu-voet-rij>:first-child{padding-right:20px}
.wu-voet h2{margin:0 0 20px}
.wu-troeven{list-style:none;margin:0;padding:0}
.wu-troeven li{display:flex;align-items:flex-start;gap:5px;font-size:16px;line-height:24px;color:var(--sp-text);padding:6.5px 0}
.wu-troeven svg{width:17px;height:14px;flex:none;color:var(--wu-groen);margin-top:5px}
.wu-voet .wu-slot{font-size:32px;line-height:32px;font-weight:100;color:#6E6E6E;margin:76px 0 0}
.wu-voet-kaart{background:#fff;padding:40px}
.wu-voet-kaart h2{margin:0 0 20px}
.wu-onder{background:rgba(0,0,0,.8);color:rgba(255,255,255,.37)}
.wu-onder-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;min-height:50px;font-size:14px;font-weight:300}
.wu-onder a{color:rgba(255,255,255,.37);margin-left:16px}
.wu-onder a:hover{color:#fff}
@media(max-width:900px){.wu-voet-rij{grid-template-columns:1fr}.wu-voet .wu-slot{font-size:26px;line-height:30px;margin-top:40px}.wu-voet-kaart{padding:24px}}

/* ------------------------------ formulieren ------------------------------ */
.sp-form .sp-field{margin-bottom:0}
.sp-form label{display:block;font:400 16px/16px var(--sp-font);color:var(--sp-text);padding:0 0 16px;margin:0}
.sp-form .sp-req{color:var(--sp-primary)}
.sp-form input:not([type=checkbox]),.sp-form select,.sp-form textarea{
  width:100%;background:#fff;border:1px solid var(--sp-line);border-radius:3px;
  font:400 15px/21px var(--sp-font);color:#1f2124;padding:8px 16px;min-height:40px}
.sp-form textarea{height:96px;min-height:96px;padding-top:9px}
.sp-form .sp-form-actions{margin-top:0}
.sp-form .sp-btn{width:100%;height:40px;padding:0 24px}
/* het rode contactblok op /contact: witte labels, witte knop met rode tekst */
.sp-scheme-light .sp-form label{color:#fff}
.sp-scheme-light .sp-form .sp-req{color:#fff}
.sp-scheme-light .sp-form input:not([type=checkbox]),
.sp-scheme-light .sp-form select,
.sp-scheme-light .sp-form textarea{border-color:#fff}
.sp-scheme-light .sp-form .sp-check{color:#fff}