/* Thema Kevin Van Roey – 1-op-1 nagebouwd naar de Elementor-site (Hello-child).
   Merkkleuren: #77581f (goudbruin) met #857962 als lichtere tint; kop en voet in die kleuren,
   inhoud op wit met een grijze zijkolom. Koppen in Sen, lopende tekst in Roboto. */

@font-face{font-family:'Sen';src:url('assets/sen-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Roboto';src:url('assets/roboto-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Roboto';src:url('assets/roboto-500.woff2') format('woff2');font-weight:500;font-display:swap}

:root{
  --sp-primary:#77581f;--sp-primary-contrast:#fff;--sp-secondary:#857962;
  --sp-text:#333;--sp-muted:#7a7a7a;--sp-surface:#f5f5f5;--sp-line:#e2e2e2;
  --sp-container:1188px;--sp-gutter:24px;--sp-gap:30px;
  --sp-font:'Roboto',Arial,sans-serif;--sp-font-heading:'Sen',Arial,sans-serif;
  --sp-radius:0px;--sp-btn-radius:3px;
  --kop-h:90px;
}

body{font-size:16px;line-height:24px}
h1,h2,h3,h4{font-family:var(--sp-font-heading);font-weight:600;color:var(--sp-secondary);line-height:1}
h1,.sp-heading[data-tag=h1]{font-size:40px}
h2{font-size:19px}h3{font-size:17px}
p{margin:0 0 14.4px}
.sp-text,.sp-text p{color:var(--sp-muted)}
a{color:var(--sp-primary)}

/* ---- kop ---- */
.kop{background:linear-gradient(var(--sp-secondary) 0%,var(--sp-primary) 100%)}
.kop-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;height:var(--kop-h)}
.kop-merk{flex:none;display:flex;flex-direction:column;justify-content:center;gap:12px;color:#fff;text-decoration:none;text-align:center}
.kop-naam{font-size:22px;line-height:22px;text-transform:uppercase}
.kop-slogan{font-size:12px;line-height:12px;text-transform:uppercase}

.kop-menu>.sp-menu{display:flex;align-items:center;gap:0}
.kop-menu>.sp-menu>li>a{padding:13px 15px;color:#fff;font-family:var(--sp-font-heading);font-size:16px;font-weight:600;line-height:20px;border-radius:0}
.kop-menu>.sp-menu>li>a:hover{opacity:.82}
.kop-menu>.sp-menu>li>a[aria-current],.kop-menu>.sp-menu>li.is-active>a{box-shadow:inset 0 -2px 0 rgba(255,255,255,.75)}
.kop-menu .sp-menu-sub{min-width:200px;background:rgba(237,237,237,.9);color:#33373d;border-radius:0;padding:0;box-shadow:0 2px 8px rgba(0,0,0,.12);z-index:60}
.kop-menu .sp-menu-sub a{padding:10px 15px;font-size:13px;font-weight:500;line-height:1.4;border-radius:0}
.kop-menu .sp-menu-sub a:hover{background:rgba(119,88,31,.1)}
.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:#fff;border-radius:2px}

/* ---- inhoud ---- */
/* De oude site laat ±30px lucht tussen de kopbalk en de eerste sectie; de import zet daar "xs". */
.sp-pad-xs{padding:30px 0}
.paginatitel{padding-top:50px}
.paginatitel h1{margin:0}
.paginatitel+.sp-section{padding-top:24px}
.sp-btn{font-family:var(--sp-font);font-size:15px;font-weight:500;line-height:15px;padding:12px 24px;border-radius:var(--sp-btn-radius)}
/* Op de oude site staat de knoptekst in dezelfde kleur als de knop zelf (onleesbaar); hier wit. */
.sp-btn-primary{background:var(--sp-primary);color:#fff;border-color:var(--sp-primary)}
.sp-figure img,.sp-gallery-item img{border-radius:0}

/* ---- voet ---- */
.voet{background:var(--sp-primary);color:#fff;padding:30px 0}
.voet-inner{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-gap);align-items:start}
.voet-logo{display:flex;justify-content:center}
.voet-logo img{width:221px;max-width:100%;height:auto}
.voet h2{color:#fff;margin:0 0 14px}
.voet-kolom p{color:#fff;margin:0 0 14.4px}
.voet-kolom p:last-child{margin-bottom:0}
.voet a{color:#fff}
.voet-legal{display:flex;flex-wrap:wrap;gap:1rem;margin-top:24px;font-size:13px;opacity:.8}
.voet-legal a{text-decoration:none}.voet-legal a:hover{text-decoration:underline}

@media(max-width:900px){
  .kop-knop{display:flex}
  .kop-inner{height:auto;padding-top:14px;padding-bottom:14px}
  .kop-menu{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--sp-primary);padding:5rem 1.5rem 2rem;transform:translateX(100%);transition:.25s;z-index:99;overflow:auto}
  .kop-menu.is-open{transform:none}
  .kop-menu>.sp-menu{flex-direction:column;align-items:stretch}
  .kop-menu .sp-menu-sub{position:static;display:flex;background:transparent;box-shadow:none;padding-left:15px}
  .kop-menu .sp-menu-sub a{color:rgba(255,255,255,.85)}
  h1,.sp-heading[data-tag=h1]{font-size:30px}
  .voet-inner{grid-template-columns:1fr;text-align:center}
}