/* Thema VGT Technics – 1-op-1 nagebouwd naar de Elementor-site (Hello-child, headers #72/#90, footer #95).
   Maten en kleuren komen uit de computed styles van www.vgttechnics.be op 1440 px. */

@font-face{font-family:'Lato';src:url('assets/lato-300.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Lato';src:url('assets/lato-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Lato';src:url('assets/lato-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Francois One';src:url('assets/francois-one-400.woff2') format('woff2');font-weight:400;font-display:swap}

:root{
  --sp-primary:#83CD49;--sp-primary-contrast:#fff;--sp-secondary:#3C3C3C;
  --sp-text:#333;--sp-muted:#7A7A7A;--sp-line:#e0e0e0;--sp-surface:#f7f7f7;
  --sp-container:1188px;--sp-gutter:24px;
  --sp-font:'Lato',sans-serif;--sp-font-heading:'Francois One',sans-serif;
  --sp-radius:0px;--sp-btn-radius:3px;
  --vgt-grijs:#BFBFBF;
}
body{font-weight:300;font-size:16px;line-height:24px}
/* Francois One bestaat enkel in 400; de oude site vroeg 700 en liet de browser vet maken – dat doen we hier ook */
h1,h2{font-weight:700}
h3,h4{font-weight:500}
h1{font-family:var(--sp-font-heading);font-size:40px;line-height:1;color:var(--sp-text)}
.sp-skip{position:absolute;left:-9999px;top:0;background:var(--sp-primary);color:#fff;padding:10px 16px;z-index:200}
.sp-skip:focus{left:0}
h3{font-family:var(--sp-font);font-weight:500;font-size:20px;line-height:1.2}
h4{font-family:var(--sp-font);font-weight:500;font-size:17px}
a{color:var(--sp-primary);text-decoration:none}
a:hover{text-decoration:underline}

/* koppen binnen de inhoud: groen, gecentreerd, met streepje eronder (zoals de Elementor-kit) */
.sp-w-text h2,.sp-w-heading h2{font-family:var(--sp-font-heading);font-size:32px;line-height:1;color:var(--sp-primary);text-align:center;margin:2.2rem 0 0}
.sp-w-text h2::after,.sp-w-heading h2::after{content:'';display:block;width:78px;height:4px;background:var(--sp-primary);margin:1.4rem auto 1.6rem}
.sp-w-text h3{margin-top:1.6rem}

/* ---- topbalk ---- */
.topbar{background:var(--sp-secondary);display:flex;justify-content:flex-end;padding-right:max(var(--sp-gutter),calc(50% - 570px))}
.topbar-inner{display:flex;align-items:center;gap:2.5rem;background:var(--sp-primary);padding:0 1.6rem;min-height:44px}
.topbar-item{display:inline-flex;align-items:center;gap:.6rem;color:#fff;font-size:16px;font-weight:300;text-decoration:none}
.topbar-item:hover{text-decoration:underline}
.topbar-item svg{width:15px;height:15px;flex:none}

/* ---- kop van de site ---- */
.site-header{background:#fff}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:108px;gap:2rem}
.site-logo{flex:none;display:flex;align-items:center}
.site-logo img{height:72px;width:auto}
.site-nav .sp-menu{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0}
.site-nav .sp-menu a{display:block;padding:15px;color:var(--sp-primary);font-size:16px;font-weight:700;text-decoration:none;white-space:nowrap}
.site-nav .sp-menu a:hover,.site-nav .sp-menu .is-actief>a,.site-nav .sp-menu .is-current>a{color:var(--sp-secondary)}
.menu-btn{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px;cursor:pointer}
.menu-btn span{width:26px;height:3px;background:var(--sp-primary);border-radius:2px}

/* ---- paginakop ---- */
.page-hero{background:var(--sp-secondary);padding:3.3rem 0}
.page-hero h1{margin:0;color:#fff;font-size:34px;line-height:1.1;border-left:5px solid var(--sp-primary);padding-left:1.4rem}

/* ---- knoppen ---- */
.sp-btn{font-family:var(--sp-font);font-weight:300;font-size:15px;line-height:1;padding:12px 24px;border-radius:var(--sp-btn-radius);border-width:2px}
.sp-btn-primary{background:var(--sp-primary);border-color:var(--sp-primary);color:#fff}
.sp-btn-primary:hover{filter:brightness(1.06);transform:none}
.knop-omlijnd{display:inline-block;padding:12px 24px;border:2px solid #fff;border-radius:var(--sp-btn-radius);color:#fff;font-size:15px;font-weight:300;line-height:1;text-decoration:none;transition:.15s}
.knop-omlijnd:hover{background:#fff;color:var(--sp-text);text-decoration:none}

/* ---- hero-slider (front_page-sjabloon #72) ---- */
.sp-slider-slides .sp-slide{height:400px}
.sp-slide-titel{font-family:var(--sp-font);font-weight:700;font-size:35px;line-height:1;color:#fff;margin:0 0 .6rem}
.sp-slide-tekst{font-family:var(--sp-font);font-weight:300;font-size:17px;line-height:1.5;color:#fff;margin:0 0 1.4rem;max-width:44rem}
.sp-slider-slides .sp-slide-inhoud .sp-btn{background:transparent;border-color:#fff;color:#fff}
.sp-slider-slides .sp-slide-inhoud .sp-btn:hover{background:#fff;color:var(--sp-text)}
/* pijlen en bolletjes lagen op de oude site ín het beeld, zonder knopvorm */
.sp-slider-slides .sp-slider-pijl{background:none;box-shadow:none;color:#fff;width:34px;height:34px}
.sp-slider-slides .sp-slider-pijl:hover{background:none;opacity:.7}
.sp-slider-slides .sp-slider-pijl svg{width:26px;height:26px}
.sp-slider-slides .sp-slider-vorige{left:8px}
.sp-slider-slides .sp-slider-volgende{right:8px}
.sp-slider-slides .sp-slider-bolletjes{position:absolute;left:0;right:0;bottom:14px;margin:0;z-index:2}
.sp-slider-slides .sp-slider-bolletjes button{background:rgba(255,255,255,.55)}
.sp-slider-slides .sp-slider-bolletjes button[aria-selected=true]{background:#fff}

/* ---- oproepblok + offerteblok (footer-sjabloon #95) ---- */
.oproep{background:var(--sp-secondary) center/cover no-repeat;padding:80px 0 150px;text-align:center;position:relative}
.oproep::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.67)}
.oproep h2{position:relative;font-family:var(--sp-font-heading);font-size:32px;line-height:1;color:#fff;margin:0}
.oproep p{position:relative;color:#fff;font-weight:300;margin:0 0 1.8rem}
.oproep .knop-omlijnd{position:relative}
.streep{display:block;width:78px;height:4px;background:var(--sp-primary);margin:1.4rem auto 1.6rem;position:relative}

.offerte{background:var(--sp-grijs,var(--vgt-grijs))}
.offerte-inner{display:grid;grid-template-columns:1fr 1fr;margin-top:-150px}
.offerte-beeld{background:var(--sp-secondary) center/cover no-repeat;min-height:480px}
.offerte-kaart{background:#fff;padding:3rem 3.2rem}
.offerte-kaart h2{font-family:var(--sp-font-heading);font-size:32px;line-height:1;color:var(--sp-primary);text-align:center;margin:0}
.offerte-lead{font-size:17px;font-weight:300;margin:0 0 1.2rem}
.offerte .sp-form input:not([type=checkbox]),.offerte .sp-form textarea{border:1px solid #69727D;border-radius:3px;padding:8px 16px;font-size:15px}
.offerte .sp-form textarea{min-height:120px}
.offerte .sp-field label{font-weight:300;font-size:15px;margin-bottom:.35rem}
.offerte .sp-form-grid{grid-template-columns:1fr;gap:.7rem}
.offerte .sp-field-half{grid-column:span 1}
.offerte .sp-btn{width:100%;font-size:16px;font-weight:400;padding:14px 16px}

/* ---- voet ---- */
.site-footer{background:var(--sp-secondary);color:#fff;padding:50px 0;text-align:center}
.site-footer a{color:var(--sp-primary)}
.footer-credit{margin:0;font-size:16px;font-weight:300}
.footer-legal{margin:.6rem 0 0;font-size:14px;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.footer-legal a{color:#cfcfcf}
.footer-legal a:hover{color:var(--sp-primary)}

/* ---- galerijen: rijen die van links naar rechts lezen, zoals op de oude site ---- */
.sp-gallery{align-items:start}

/* dienstenkaarten op de homepagina: Elementor sneed die beelden op 265×159, dus alle vier even hoog */
.sp-col-3 .sp-w-image img{width:100%;aspect-ratio:5/3;object-fit:cover}

/* ---- responsief ---- */
@media(max-width:1024px){
  .offerte-beeld{min-height:340px}
  .offerte-kaart{padding:2.2rem}
}
@media(max-width:900px){
  .menu-btn{display:flex}
  .header-inner{height:84px}
  .site-logo img{height:56px}
  .site-nav{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;padding:5rem 1.5rem 2rem;transform:translateX(100%);transition:.25s;z-index:99;overflow-y:auto}
  .site-nav.is-open{transform:none}
  .site-nav .sp-menu{flex-direction:column;align-items:stretch}
  .site-nav .sp-menu a{padding:14px 4px;border-bottom:1px solid var(--sp-line)}
  .offerte-inner{grid-template-columns:1fr;margin-top:-110px}
  .offerte-beeld{min-height:260px}
}
@media(max-width:768px){
  .topbar{justify-content:stretch;padding-right:0}
  .topbar-inner{width:100%;justify-content:center;gap:1.2rem;padding:.5rem 1rem;flex-wrap:wrap}
  .topbar-item{font-size:14px}
  h1{font-size:30px}
  .page-hero{padding:2.2rem 0}
  .page-hero h1{font-size:26px;padding-left:1rem}
  .oproep{padding:56px 0 130px}
  .oproep h2,.offerte-kaart h2,.sp-w-text h2,.sp-w-heading h2{font-size:26px}
  .sp-slide-titel{font-size:27px}
  .sp-slide-tekst{font-size:16px}
  .offerte-kaart{padding:1.8rem 1.4rem}
}

/* de intro-titel op de homepagina had in Elementor een groene balk links */
.is-home .sp-w-heading h1{border-left:5px solid var(--sp-primary);padding-left:1.4rem;margin-top:0}
/* de kaarten sluiten aan op de kop erboven; enkel onderaan ruimte, zoals in de Elementor-band */
.diensten-kaarten{padding-bottom:4rem}

/* de contactgegevens waren op de oude site een icoonlijst; de importer maakt er een gewone lijst van,
   dus we halen er minstens de opsommingstekens af zodat het blok er hetzelfde uitziet */
.page-contact .sp-w-text ul{list-style:none;margin:0;padding:0}
.page-contact .sp-w-text li{margin:0 0 .35rem}