/* Thema HT Aannemingen – 1-op-1 nagebouwd naar de Elementor-site (kit "Ridge").
   Maten en kleuren komen uit de computed styles van www.ht-aannemingen.be.
   Lettertypes staan lokaal: geen verzoek naar Google bij het laden van de pagina. */
@font-face{font-family:'Manrope';src:url('assets/manrope-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Manrope';src:url('assets/manrope-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Manrope';src:url('assets/manrope-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Nunito Sans';src:url('assets/nunito-sans-800.woff2') format('woff2');font-weight:800;font-display:swap}
:root{
  --sp-container:1302px;
  --sp-gutter:30px;
  --sp-gap:0px;
  --sp-primary:#FFC100;
  --sp-primary-contrast:#222222;
  --ht-hover:#E4AD00;
  --sp-secondary:#222222;
  --sp-text:#555555;
  --sp-muted:#999999;
  --sp-bg:#fff;
  --sp-surface:#F9F7F5;
  --sp-line:#EDEDED;
  --ht-border:#DEDEDE;
  --sp-radius:0;
  --sp-btn-radius:0;
  --sp-shadow:0 4px 20px rgba(0,0,0,.08);
  --sp-font:Manrope,sans-serif;
  --sp-font-heading:"Nunito Sans",sans-serif;
  --ht-topbar:48px;
  --ht-header:151px;
}

html,body{overflow-x:clip}
body{font:400 16px/1.5 var(--sp-font);color:var(--sp-text)}
.sp-skip{position:absolute;left:-9999px;top:0;background:var(--sp-primary);color:var(--sp-primary-contrast);padding:12px 24px;z-index:200}
.sp-skip:focus{left:0}
a{color:var(--ht-hover)}
h1,h2,h3,h4,h5,h6{font-family:var(--sp-font-heading);font-weight:800;text-transform:capitalize;color:var(--sp-secondary)}
.sp-scheme-light h1,.sp-scheme-light h2,.sp-scheme-light h3,.sp-scheme-light h4,.sp-scheme-light h5,.sp-scheme-light h6{color:inherit}
.sp-cookies-title{text-transform:none}
h1{font-size:68px;line-height:1}
h2{font-size:50px;line-height:1.1}
h3{font-size:38px;line-height:1.2}
h4{font-size:28px;line-height:1.3}
h5{font-size:21px;line-height:1.4}
h6{font-size:16px;line-height:1.5}
@media(max-width:1024px){h1{font-size:50px;line-height:1.1}h2{font-size:38px;line-height:1.2}h3{font-size:28px;line-height:1.3}}

/* de hero-titel stond op de oude site groter dan de gewone H1 */
.sp-heading.sp-size-xl{font-size:clamp(46px,7vw,100px);line-height:1}

/* bovenschriften: in Elementor een "div"-kop, bij ons een p.sp-heading */
p.sp-heading{font-family:var(--sp-font);font-size:12px;line-height:1.5;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--sp-primary);margin:0 0 20px}

/* ---- balk bovenaan ---- */
.topbar{background:#000;height:var(--ht-topbar);display:flex;align-items:center;position:relative;z-index:60}
.topbar-inner{width:100%;padding:0 var(--sp-gutter);display:flex;align-items:center;gap:34px;font-size:13px;line-height:24px}
.topbar a{color:#fff;text-decoration:none}
.topbar a:hover{color:var(--sp-primary)}
.topbar-inner>a+a{position:relative}
.topbar-inner>a+a::before{content:"";position:absolute;left:-22px;top:50%;width:10px;height:1px;background:#fff}

/* ---- kop ---- */
.site-header{position:absolute;top:var(--ht-topbar);left:0;right:0;z-index:50;height:var(--ht-header)}
.header-inner{height:100%;padding:0 var(--sp-gutter);display:flex;align-items:center;gap:0}
.site-logo{flex:none;line-height:0}
.site-logo img{width:122px;height:auto}
.site-nav{flex:1;margin-left:30px}
.site-nav .sp-menu{gap:0}
.site-nav .sp-menu>li>a{padding:4px 20px;font-size:15px;font-weight:600;font-family:var(--sp-font);color:var(--sp-secondary);border-radius:0;text-transform:none}
.site-nav .sp-menu>li>a:hover,.site-nav .sp-menu>li.is-active>a{color:var(--ht-hover)}
.site-nav .sp-menu-sub{border-radius:0;box-shadow:0 10px 30px rgba(0,0,0,.1);padding:0;min-width:230px}
.site-nav .sp-menu-sub a{padding:10px 20px;font-size:15px;font-weight:600;color:var(--sp-secondary);border-radius:0}
.site-nav .sp-menu-sub a:hover{color:var(--ht-hover)}
.sp-btn.header-cta{flex:none;padding:12px 24px}
/* op de homepagina staat de kop over de foto: witte letters (zoals de custom CSS van de kit) */
body.is-home .site-nav .sp-menu>li>a{color:#fff}
body.is-home .site-nav .sp-menu>li>a:hover{color:var(--sp-primary)}
body.is-home .site-nav .sp-menu>li.is-active>a{color:#fff;box-shadow:inset 0 -2px 0 #fff}
body.is-home .site-nav .sp-menu-sub a{color:var(--sp-secondary)}
body.is-home .site-nav .sp-menu-sub a:hover{color:var(--ht-hover)}

/* de inhoud schuift onder de kop door; binnenpagina's krijgen een witte band */
main{position:relative}
body.is-page main{padding-top:169px;background:#fff}
/* de hero was op de oude site 800px hoog plus 64px binnenruimte */
body.is-home main>.sp-section:first-child{min-height:864px}

/* volle-breedte secties: Elementor sprong de tekstkolom in met een percentage van de kolom,
   niet met een vast aantal pixels; daarom hier percentages op de kolom-binnenruimte */
.sp-w-full .sp-colpad-l{padding:0 12%}
.sp-w-full .sp-colpad-m{padding:10% 7%}

/* ---- knoppen ---- */
.sp-btn{font-family:var(--sp-font-heading);font-size:12px;font-weight:800;line-height:18px;letter-spacing:2px;text-transform:uppercase;border:0;padding:20px 40px}
.sp-btn-primary{background:var(--sp-primary);color:var(--sp-primary-contrast)}
.sp-btn-primary:hover{background:var(--ht-hover);color:var(--sp-primary-contrast);filter:none;transform:none}
/* twee knoppen naast elkaar, zoals in de hero */
.sp-w-button{display:inline-block;vertical-align:middle}
.sp-w-button+.sp-w-button{margin-left:32px}
/* de tweede hero-knop stond op de oude site als kale witte tekst */
.sp-btn-link{padding:0;text-decoration:none;border:0}
.sp-scheme-light .sp-btn-link{color:#fff;background:none}
.sp-scheme-light .sp-btn-link:hover{color:var(--sp-primary)}

/* ---- tekst, lijsten, scheidingslijn ---- */
.sp-text ul{list-style:none;padding-left:0;margin:0}
.sp-text li{font-family:var(--sp-font-heading);font-size:16px;line-height:24px;font-weight:800;text-transform:capitalize;color:var(--sp-secondary);margin-bottom:8px}
.sp-text p{margin:0 0 24px}
.sp-text>:last-child{margin-bottom:0}
.sp-divider{border-top:2px solid var(--sp-text);margin:0 0 20px}
/* de twee dienstenlijstjes stonden naast elkaar, elk met een eigen lijn erboven */
.sp-text-cols-2{column-gap:60px}
.sp-text-cols-2 ul{break-inside:avoid;border-top:2px solid var(--sp-text);padding-top:28px}
.sp-text-cols-2 ul+ul{margin-top:0}

/* ---- formulier ---- */
.sp-field label{font-size:11px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--sp-secondary);margin-bottom:6px}
.sp-form input:not([type=checkbox]):not([type=radio]),.sp-form select,.sp-form textarea{border:2px solid var(--sp-line);border-radius:0;padding:8px 16px;font-size:15px;line-height:21px;color:#1f2124}
.sp-form textarea{min-height:104px}
.sp-form input:focus,.sp-form select:focus,.sp-form textarea:focus{outline:0;border-color:var(--sp-primary)}
.sp-form-grid{gap:12px}

/* ---- galerij (realisaties) ---- */
.sp-gallery{gap:10px}
.sp-gallery-item{border-radius:0;background:transparent}

/* ---- slider met foto's (homepage) ---- */
.sp-slider-images{--sp-slider-gap:0px}

/* ---- footer ---- */
.site-footer{background:#000;color:#fff;padding:96px 0 30px;text-align:center}
.site-footer p{margin:0 0 20px;font-size:16px;line-height:24px;color:#fff}
.site-footer a{color:var(--sp-primary);text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.footer-legal{display:flex;justify-content:center;gap:20px;font-size:13px;margin:0}

/* ---- mobiel ---- */
.menu-btn{display:none;flex-direction:column;gap:5px;background:var(--sp-primary);border:0;padding:12px;cursor:pointer;margin-left:auto}
.menu-btn span{width:22px;height:2px;background:var(--sp-primary-contrast)}
@media(max-width:1024px){
  .topbar{display:none}
  :root{--ht-topbar:0px;--ht-header:110px}
  .menu-btn{display:flex}
  .header-cta{display:none}
  .site-nav{position:fixed;top:var(--ht-header);left:0;right:0;bottom:0;background:#fff;padding:1rem var(--sp-gutter);transform:translateX(100%);visibility:hidden;transition:transform .25s,visibility .25s;z-index:99;overflow-y:auto;margin:0}
  .site-nav.is-open{transform:none;visibility:visible}
  .site-nav .sp-menu{flex-direction:column;align-items:stretch}
  .site-nav .sp-menu>li>a,body.is-home .site-nav .sp-menu>li>a{color:var(--sp-secondary);padding:12px 0}
  .site-nav .sp-menu-sub{position:static;display:flex;box-shadow:none;min-width:0;padding-left:16px}
  body.is-page main{padding-top:var(--ht-header)}
  body.is-home main>.sp-section:first-child{min-height:600px}
}
@media(max-width:768px){
  /* de oude site zette op een telefoon alles gecentreerd */
  .sp-col{text-align:center}
  .sp-w-button{display:block}
  .sp-w-button+.sp-w-button{margin-left:0;margin-top:20px}
  .sp-w-full .sp-colpad-l,.sp-w-full .sp-colpad-m{padding:48px 24px}
  .sp-text-cols-2 ul+ul{margin-top:28px}
  .site-footer{padding:60px 0 24px}
  .footer-legal{flex-direction:column;gap:6px}
}