/* Thema Schoentjes Drankenservice — 1-op-1 naar de Elementor-site (hello-theme-child-master).
   Maten en kleuren zijn nagemeten op www.schoentjes.be bij 1440 px. */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;600&family=Roboto+Slab:wght@400;600;700&display=swap');

:root{
  --sp-container:1140px;
  --sp-narrow:850px;   /* geeft 830 px tekst, zoals het gecentreerde blok op de oude site */
  --sp-gutter:10px;
  --sp-primary:#db0b11;
  --sp-primary-contrast:#fff;
  --sp-secondary:#54595f;
  --sp-text:#000;
  --sp-muted:#7a7a7a;
  --sp-line:#e5e7eb;
  --sp-radius:0;
  --sp-btn-radius:0;
  --sp-font:'Roboto Slab',serif;
  --sp-font-heading:'Roboto Condensed',sans-serif;
  --sp-kop-hoogte:145px;
}
body{font:400 15px/1.5 var(--sp-font);color:var(--sp-text)}
h1,h2{font-family:var(--sp-font-heading);font-weight:600;font-size:40px;line-height:1;letter-spacing:2.5px;text-transform:uppercase;color:inherit;margin:0 0 .5em}
h3{font-family:var(--sp-font);font-weight:700;font-size:1.75rem;line-height:1.3;margin:0 0 .5em}
/* de kleine rode bovenkop boven bijna elke titel */
h4{font-family:var(--sp-font);font-weight:400;font-size:18px;line-height:1;color:var(--sp-primary);text-transform:none;letter-spacing:normal;margin:0 0 5px}
a{color:var(--sp-primary)}
main a:not(.sp-btn){text-decoration:none}main a:not(.sp-btn):hover{text-decoration:underline}
.sp-pad-m{padding:60px 0}.sp-padb-m{padding-bottom:60px}

/* knoppen: transparant met rode rand, vullen rood bij hover */
.sp-btn{font-family:var(--sp-font-heading);font-weight:400;font-size:15px;line-height:15px;letter-spacing:1.9px;text-transform:uppercase;padding:12px 24px;border-width:1px;border-style:solid;border-radius:0}
.sp-btn,.sp-btn-primary,.sp-btn-secondary,.sp-btn-ghost,.sp-btn-outline{background:transparent;color:var(--sp-primary);border-color:var(--sp-primary)}
.sp-btn:hover,.sp-btn-primary:hover,.sp-btn-secondary:hover,.sp-btn-ghost:hover,.sp-btn-outline:hover{background:var(--sp-primary);color:#fff;filter:none;transform:none}
.sp-scheme-light .sp-btn{color:var(--sp-primary);border-color:var(--sp-primary)}

/* ---------- kop ---------- */
.site-header{background:#fff;position:relative;z-index:100;overflow-x:clip}
.header-inner{display:flex;align-items:flex-start;min-height:var(--sp-kop-hoogte)}
.site-logo{flex:0 0 33.333%;padding:10px;line-height:0}
.site-logo img{width:363px;max-width:100%;height:auto}
.site-nav{flex:0 0 33.333%;min-width:0;padding:27px 0 0 10px}
.site-nav .sp-menu{display:flex;flex-wrap:wrap;width:744px;max-width:none;list-style:none;margin:0;padding:0;gap:0}
.site-nav .sp-menu>li>a{display:block;font-family:var(--sp-font-heading);font-weight:400;font-size:15px;line-height:20px;text-transform:uppercase;color:var(--sp-primary);text-decoration:none;padding:13px 20px}
.site-nav .sp-menu>li.is-active>a{box-shadow:inset 0 -3px 0 var(--sp-primary)}
.header-cta{flex:0 0 33.333%;display:flex;justify-content:flex-end;padding:39px 15px 0 0}
.header-cta .sp-btn{text-align:center}
.menu-btn{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px;cursor:pointer;margin:18px 10px 0 auto}
.menu-btn span{width:26px;height:3px;background:var(--sp-primary);border-radius:2px}

/* ---------- titelbalk binnenpagina's ---------- */
.page-hero{height:221px;display:flex;align-items:center;background:var(--sp-secondary) center/cover no-repeat}
.page-hero h1{margin:0;color:#fff}

/* ---------- voet ---------- */
.site-footer{background:#fff}
.voet-contact{background:var(--sp-secondary);color:#fff;padding:60px 0}
.voet-contact-inner{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-gap)}
.voet-contact h2{color:#fff;margin:0}
.voet-contact h4{color:var(--sp-primary);margin:0 0 .25em}
.voet-formulier .sp-form>.sp-form-grid>.sp-field>label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.voet-formulier .sp-form input,.voet-formulier .sp-form textarea{background:#fff;border:1px solid #fff;border-radius:0;padding:8px 16px;font:400 15px/1.5 var(--sp-font);color:#000}
.voet-formulier .sp-form textarea{min-height:110px}
.voet-formulier .sp-form-grid{grid-template-columns:1fr;gap:14px}
.voet-formulier .sp-field-half{grid-column:span 1}
.voet-formulier .sp-btn{width:100%;background:transparent;color:var(--sp-primary);border-color:var(--sp-primary);padding:12px 24px}
.voet-formulier .sp-btn:hover{background:var(--sp-primary);color:#fff}
.voet-formulier .sp-form-privacy,.voet-formulier .sp-form-privacy a{color:#fff;font-size:13px}
.voet-onder{background:#fff;padding:30px 0;text-align:center}
.voet-onder .voet-credit p{margin:0}
.voet-legal{margin:0;font-size:15px}
.voet-legal a{color:var(--sp-primary);text-decoration:none;margin:0 .35em}

/* ---------- hero-slider op de homepagina ---------- */
.is-home .sp-slider-slides .sp-slide{height:64vh}
.is-home .sp-slider-slides .sp-slide-inhoud{max-width:27%;margin:0 auto 0 10%;padding:24px 0}
.is-home .sp-slide-titel{font-size:57px;line-height:1;letter-spacing:3.6px;color:#fff;margin:0 0 .5em}
.is-home .sp-slide-tekst{font-size:25.5px;line-height:1.4;color:#fff;margin:0}

@media(max-width:1200px){
  .site-nav .sp-menu{width:auto}
}
@media(max-width:900px){
  .header-inner{flex-wrap:wrap;align-items:center;min-height:0;padding:10px 0}
  .site-logo{flex:1 1 auto;padding:0 10px}
  .site-logo img{width:240px}
  .menu-btn{display:flex;margin:0 10px 0 0;order:3}
  .header-cta{flex:1 1 100%;justify-content:center;padding:10px 0 0;order:4}
  .site-nav{flex:1 1 100%;order:5;position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;padding:5rem 1rem;transform:translateX(100%);transition:.25s;z-index:99;overflow:auto}
  .site-nav.is-open{transform:none}
  .site-nav .sp-menu{flex-direction:column;align-items:stretch;width:auto}
  .page-hero{height:150px}
  h1,h2{font-size:28px;letter-spacing:1.5px}
  .voet-contact-inner{grid-template-columns:1fr}
  .is-home .sp-slider-slides .sp-slide-inhoud{max-width:100%;margin:0;padding:24px 1.5rem}
  .is-home .sp-slide-titel{font-size:20px;letter-spacing:2px}
  .is-home .sp-slide-tekst{font-size:15px}
}