/* Thema HDCS - HD Cleaning Services. Kleuren en maten zijn overgenomen van de WordPress-site. */
:root{
  --hdcs-cyaan:#02c3d3;
  --hdcs-navy:#171d4d;
  --sp-primary:#02c3d3;
  --sp-primary-contrast:#fff;
  --sp-secondary:#171d4d;
  --sp-text:#333;
  --sp-muted:#555;
  --sp-container:1140px;
  --sp-narrow:1140px;
  --sp-gutter:15px;
  --sp-radius:0px;
  --sp-btn-radius:0px;
  --sp-font:-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --sp-font-heading:var(--sp-font);
}
body{font-size:16px;line-height:1.5;color:var(--sp-text)}
h1,h2,h3,h4,h5,h6{color:var(--hdcs-navy);font-weight:500;line-height:1.1}
h1{font-size:30px}h2{font-size:24px}h3{font-size:20px}h4{font-size:18px}
a{color:var(--hdcs-cyaan);text-decoration:none}
.sp-text a:hover{text-decoration:underline}
.sp-btn{font-size:16px;font-weight:500;padding:15px 30px;border-radius:0;line-height:1}
.sp-btn-primary{background:var(--hdcs-cyaan);border-color:var(--hdcs-cyaan);color:#fff}
.sp-btn-primary:hover{background:var(--hdcs-navy);border-color:var(--hdcs-navy);color:#fff}
.sp-btn-secondary{background:var(--hdcs-navy);border-color:var(--hdcs-navy);color:#fff}
.sp-btn-secondary:hover{background:var(--hdcs-cyaan);border-color:var(--hdcs-cyaan);color:#fff}
/* de verzendknop van het formulier is op de WordPress-site donkerblauw en over de volle breedte */
.sp-form-actions .sp-btn-primary{width:100%;background:var(--hdcs-navy);border-color:var(--hdcs-navy)}
.sp-form-actions .sp-btn-primary:hover{background:#0f1436;border-color:#0f1436}
.sp-skip{position:absolute;left:-9999px}.sp-skip:focus{left:8px;top:8px;z-index:200;background:#fff;padding:.6em 1em}

/* ---------- kop ---------- */
.kop-logo{background:#fff}
.kop-logo .sp-container{display:flex;align-items:center;justify-content:space-between;height:150px}
.kop-merk img{display:block;width:240px;height:auto}
.kop-knop{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px;cursor:pointer}
.kop-knop span{width:26px;height:3px;background:var(--hdcs-navy)}

.kop-menu{background:var(--hdcs-navy)}
.kop-menu .sp-container{min-height:56px;display:flex;align-items:center;justify-content:center}
.kop-menu .sp-menu{display:flex;flex-wrap:wrap;justify-content:center;gap:0;list-style:none;margin:0;padding:0}
.kop-menu .sp-menu a{display:block;padding:18px 20px;color:var(--hdcs-cyaan);font-size:15px;font-weight:500;
  line-height:20px;text-transform:uppercase;text-decoration:none}
.kop-menu .sp-menu a:hover,.kop-menu .sp-menu .is-active>a{color:#fff}
.kop-menu .sp-menu-sub{background:var(--hdcs-navy);min-width:220px}
.kop-menu .sp-menu-sub a{text-transform:none;padding:10px 20px}

.kop-balk{background:var(--hdcs-cyaan);color:#fff}
.kop-balk .sp-container{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:34px}
.kop-contact{display:flex;gap:24px;margin:0}
.kop-balk a{display:inline-flex;align-items:center;gap:7px;color:#fff;font-size:15px;text-decoration:none}
.kop-balk a:hover{text-decoration:underline}
.kop-balk svg{width:16px;height:16px}
.kop-top{display:flex;gap:0;list-style:none;margin:0;padding:0}
.kop-top a{padding:0 18px;font-size:14px}

/* ---------- inhoud ---------- */
main{padding-bottom:0}
/* Elementor gaf de secties zelf geen ruimte: op de binnenpagina's volgt een sectie direct op de vorige */
.is-page main > .sp-section + .sp-section{padding-top:0}
.is-home main > .sp-section:first-child{padding:0}
.is-home main > .sp-section:first-child > .sp-container{max-width:none;padding-left:0;padding-right:0}
.is-home .sp-slider-images{--sp-slider-gap:0px}
.is-home .sp-slider-images .sp-slide-figuur img{aspect-ratio:3/2}
.is-home .sp-slider-bolletjes{margin-top:18px}
/* twee knoppen onder elkaar in de builder staan op de site naast elkaar */
.sp-w-button{display:inline-block;vertical-align:top;margin-right:30px}
.sp-w-button:last-child{margin-right:0}

/* ---------- dienstenblokken onderaan ---------- */
.voet-diensten{background:#fff;padding:60px 0}
.voet-diensten .sp-container{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.dienst{display:flex;flex-direction:column}
.dienst-beeld img{display:block;width:100%;aspect-ratio:1.95;object-fit:cover}
.dienst-tekst{flex:1;display:flex;flex-direction:column;background:var(--hdcs-navy);color:#fff;padding:26px 24px 34px;text-align:center}
.dienst-tekst h2{color:var(--hdcs-cyaan);font-size:24px;margin:0 0 18px}
.dienst-tekst p{flex:1;margin:0 0 26px;font-size:16px;line-height:1.5}
.dienst-knop{align-self:center;background:var(--hdcs-cyaan);border-color:var(--hdcs-cyaan);color:#fff}
.dienst-knop:hover{background:#02aab8;border-color:#02aab8;color:#fff}

/* ---------- footer ---------- */
.voet-hoofd{background:var(--hdcs-navy);color:#fff;border-top:6px solid var(--hdcs-cyaan);padding:30px 0 60px}
.voet-merk img{display:block;width:240px;height:auto;margin-bottom:28px}
.voet-kolommen{display:grid;grid-template-columns:minmax(220px,1fr) 2fr;gap:40px}
.voet-adres{font-style:normal;line-height:1.5}
.voet-adres span{display:block}
.voet-regel{margin-top:1.5em}
.voet-hoofd a{color:var(--hdcs-cyaan);text-decoration:none}
.voet-hoofd a:hover{text-decoration:underline}
.voet-uren{border-collapse:collapse}
.voet-uren th{color:var(--hdcs-cyaan);font-weight:400;text-align:left;padding:0 40px 4px 0}
.voet-uren td{padding:0 40px 4px 0;white-space:nowrap}

.voet-troeven{background:var(--hdcs-navy);border-top:1px solid rgba(255,255,255,.25);padding:26px 0}
.voet-troeven .sp-container{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.troef{display:flex;align-items:center;gap:16px}
.troef-icoon{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--hdcs-cyaan)}
.troef-icoon svg{width:22px;height:22px;color:#fff}
.troef p{margin:0;color:var(--hdcs-cyaan);font-size:15px;line-height:1.4}

.voet-credit{background:var(--hdcs-cyaan);color:#fff;padding:9px 0;font-size:15px}
.voet-credit .sp-container{display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap}
.voet-credit a{color:#fff;text-decoration:underline}
.voet-legal{display:flex;gap:14px;margin-left:18px}

/* ---------- klanten ---------- */
.klant-detail .sp-container{display:grid;grid-template-columns:2fr 1fr;gap:60px;align-items:start}
.klant-inhoud{min-width:0}
.klant-logo{text-align:center;margin:0 0 28px}
.klant-logo img{max-width:150px;height:auto;display:inline-block}
.klant-andere h2{text-align:center;margin:0 0 24px}
.klant-andere-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px 20px}
.klant-andere-grid a{display:flex;align-items:center;justify-content:center;min-height:90px}
.klant-andere-grid img{max-width:100%;max-height:90px;width:auto;height:auto;object-fit:contain}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .kop-logo .sp-container{height:auto;padding-top:18px;padding-bottom:18px}
  .kop-merk img{width:190px}
  .kop-knop{display:flex}
  .kop-menu{display:none}
  .kop-menu.is-open{display:block}
  .kop-menu .sp-container{padding-top:8px;padding-bottom:8px}
  .kop-menu .sp-menu{flex-direction:column;align-items:stretch;width:100%}
  .kop-menu .sp-menu a{padding:12px 4px}
  .kop-balk .sp-container{flex-direction:column;align-items:flex-start;gap:4px;padding-top:8px;padding-bottom:8px}
  .kop-contact{flex-direction:column;gap:4px}
  .kop-top{flex-wrap:wrap}.kop-top a{padding:0 14px 0 0}
  .voet-diensten .sp-container,.voet-troeven .sp-container{grid-template-columns:1fr;gap:28px}
  .voet-kolommen{grid-template-columns:1fr;gap:28px}
  .klant-detail .sp-container{grid-template-columns:1fr;gap:40px}
}

/* ---------- klantenoverzicht ---------- */
.klanten-lijst{display:grid;grid-template-columns:repeat(var(--kolommen,3),1fr);gap:0 40px}
.klant-kaart{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:30px 10px 40px;border-bottom:1px solid #e3e3e3}
.klant-kaart.is-laatste-rij{border-bottom:0}
.klant-kaart-logo{display:flex;align-items:center;justify-content:center;height:90px;margin-bottom:22px}
.klant-kaart-logo img{max-width:100%;max-height:90px;width:auto;height:auto;object-fit:contain}
.klant-kaart-tekst{flex:1;margin:0 0 18px;font-size:16px;line-height:1.5}
.klant-kaart-bron{margin:0 0 26px;line-height:1.4}
.klant-kaart-naam{display:block;color:var(--hdcs-cyaan)}
.klant-kaart-functie{display:block}
.klant-kaart-knop{margin-top:auto}
@media(max-width:900px){.klanten-lijst{grid-template-columns:1fr}.klant-kaart{border-bottom:1px solid #e3e3e3}}