/* Thema Bakkerij Vaneynde – Tearoom Vanalles & Nogwat.
   Waarden komen uit de computed styles van de WordPress-site (Elementor-kit #11): Open Sans 300 voor
   de tekst, Norican voor de sierkoppen, #805719 als merkkleur en #231F20 voor de donkere blokken. */
/* Open Sans staat bij Google als variabele font (één bestand voor 300-700); Norican enkel in 400. */
@font-face{font-family:'Open Sans';src:url('assets/open-sans-var.woff2') format('woff2-variations');font-weight:300 700;font-stretch:100%;font-display:swap}
@font-face{font-family:'Norican';src:url('assets/norican-400.woff2') format('woff2');font-weight:400;font-display:swap}
:root{
  --sp-container:1180px;      /* Elementor-inhoudsbreedte 1140 + 2x20 goot */
  --sp-narrow:900px;
  --sp-gutter:20px;
  --sp-gap:20px;
  --sp-primary:#805719;
  --sp-primary-contrast:#fff;
  --sp-secondary:#231F20;
  --sp-text:#4E4E4E;
  --sp-muted:#7A7A7A;
  --sp-bg:#fff;
  --sp-surface:#f6f4f1;
  --sp-line:#e3ded6;
  --sp-radius:0;
  --sp-btn-radius:0;
  --sp-shadow:none;
  --sp-font:"Open Sans",-apple-system,"Segoe UI",sans-serif;
  --sp-font-heading:"Open Sans",-apple-system,"Segoe UI",sans-serif;
  --bve-sier:Norican,"Open Sans",cursive;   /* sierletter voor hero en kleine koppen */
  --bve-goud:#C59A59;
  --bve-grijs:#CECAC6;
}
body{font-weight:300;font-size:16px;line-height:1.5}
.sp-skip{position:absolute;left:-9999px;top:0;background:var(--sp-secondary);color:#fff;padding:12px 24px;z-index:200}
.sp-skip:focus{left:0}
.sp-heading{white-space:pre-line}   /* de import zette Elementors <br> om in een regeleinde */
p{margin:0 0 .9em}
h1,h2,h3,h4{font-weight:500;color:var(--sp-primary)}
h1{font-size:32px;line-height:1.2}
h2{font-size:32px;line-height:1}
h3{font-size:26px;line-height:1}
h4{font-size:18px;line-height:1}
a{color:var(--sp-primary)}
.sp-text a{font-weight:400}

/* knoppen: donker blok, witte tekst, geen ronding (Elementor-kit) */
.sp-btn{font-family:var(--sp-font);font-size:15px;line-height:15px;font-weight:600;padding:12px 24px;border-radius:0;border:0;border-bottom:3px solid transparent;transition:.2s}
.sp-btn,.sp-btn-primary{background:var(--sp-secondary);color:#fff}
.sp-btn:hover,.sp-btn-primary:hover{background:#fff;color:var(--sp-secondary);border-bottom-color:#fff}
.sp-btn-ghost{background:transparent;color:var(--sp-secondary);border:1px solid var(--sp-secondary)}
.sp-btn-ghost:hover{background:var(--sp-secondary);color:#fff}
.sp-scheme-light .sp-btn:hover{border-bottom-color:var(--sp-secondary)}

/* ---------- kop ---------- */
.kop{background:#fff;padding:15px}
.kop-binnen{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
.kop-logo{flex:none;line-height:0}
.kop-logo img{width:249px;height:auto;max-width:100%}
.kop-menu{flex:1 1 auto;min-width:0}
.kop-menu .sp-menu{display:flex;flex-wrap:wrap;justify-content:center;gap:0;margin:0;padding:0;list-style:none}
.kop-menu .sp-menu>li>a{display:block;padding:24px 15px;font-size:14px;font-weight:500;line-height:20px;color:var(--sp-primary);text-decoration:none;border-bottom:3px solid transparent}
.kop-menu .sp-menu>li>a:hover{color:#5f3f11}
.kop-menu .sp-menu>li.is-active>a,.kop-menu .sp-menu>li>a[aria-current=page]{border-bottom-color:var(--sp-primary)}
.kop-sociaal{display:flex;align-items:center;gap:15px;flex:none}
.kop-sociaal a{color:var(--sp-secondary);line-height:0}
.kop-sociaal .sp-icon{width:25px;height:25px}
.kop-bestel{flex:none;text-align:center;white-space:nowrap}
.kop-knop-menu{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px;cursor:pointer;margin-left:auto}
.kop-knop-menu span{width:26px;height:3px;background:var(--sp-secondary)}

/* ---------- fotobanden (hero op de homepage, titelbalk op de binnenpagina's) ----------
   Elke sectie met een achtergrondfoto krijgt in Elementor dezelfde behandeling: de eerste kop in
   de sierletter Norican, groot en wit; wat eronder staat is gewone witte tekst. */
.sp-has-bg .sp-heading{font-family:var(--bve-sier);font-size:clamp(34px,4.6vw,67px);line-height:1.1;
  font-weight:500;color:#fff;margin:0}
.sp-has-bg .sp-w-heading ~ .sp-w-heading .sp-heading{font-family:var(--sp-font);font-size:16px;
  line-height:1.5;font-weight:300;margin:.8em 0 0}
.sp-has-bg .sp-text,.sp-has-bg .sp-text p{color:#fff}
.sp-section.hero{padding:clamp(150px,27vw,400px) 0 60px;margin-bottom:60px}
.hero-knop{display:inline-block;margin:24px 5px 0}

/* Norican-koppen in de donkere blokken (troeven, nieuws) */
.sier h1,.sier h2,.sier h3,.sier h4{font-family:var(--bve-sier);font-size:26px;line-height:1.3;font-weight:500}

/* opsomming met icoontjes (troevenlijst) */
.sp-iconlist{list-style:none;margin:0;padding:0}
.sp-iconlist li{display:flex;align-items:center;gap:10px;font-size:15px;line-height:1;padding:7px 0;color:#fff}
.sp-iconlist .sp-icon{width:15px;height:15px;flex:none;color:#fff}

/* ---------- voet ---------- */
.voet-terug{background:var(--sp-primary);text-align:center}
.voet-terug a{display:inline-block;padding:12px 24px;font-size:15px;line-height:15px;font-weight:600;color:var(--bve-goud);text-decoration:none}
.voet-terug a:hover{color:#fff}
.voet-blok{background:var(--sp-secondary);padding:30px 0}
.voet-kolommen{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-gap)}
.voet-kolom h4{font-family:var(--sp-font);font-size:18px;line-height:1;font-weight:600;color:var(--sp-primary);margin:0 0 20px}
.voet-kolom p{margin:0 0 14px;font-size:14px;line-height:1.3;color:#fff}
.voet-kolom a{color:var(--sp-primary);text-decoration:none}
.voet-kolom a:hover{text-decoration:underline}
.voet-nav{list-style:none;margin:0;padding:0}
.voet-nav a{display:block;padding:7px 0;font-size:14px;line-height:20px;color:#fff}
.voet-onder{background:var(--sp-secondary);border-top:1px solid var(--sp-primary)}
.voet-onder-binnen{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:91px}
.voet-credit{margin:0;font-size:14px;line-height:14px;font-weight:500;color:var(--sp-primary)}
.voet-credit a{color:var(--sp-primary)}
.voet-sociaal{display:flex;gap:16px}
.voet-sociaal a{color:var(--sp-primary);line-height:0}
.voet-sociaal .sp-icon{width:16px;height:16px}

/* ---------- filiaalkaarten ---------- */
.filialen{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:30px}
.filiaal{background:var(--sp-secondary);color:#fff;text-align:center;display:flex;flex-direction:column}
.filiaal-beeld{margin:0;line-height:0}
.filiaal-beeld img{width:100%;height:244px;object-fit:cover;display:block}
.filiaal-binnen{padding:20px}
.filiaal h3{font-family:var(--sp-font);font-size:28px;line-height:1;font-weight:500;color:#fff;margin:0 0 20px}
.filiaal-soort{font-family:var(--bve-sier);font-size:27px;line-height:1.1;font-weight:300;color:var(--sp-primary);margin:0 0 20px}
.filiaal-soort p{margin:0}
.filiaal-icoon{width:32px;height:32px;color:#fff;margin:0 auto 20px;display:block}
.filiaal-tekst,.filiaal-tekst p{font-size:14px;line-height:1.5;color:#fff}
.filiaal-tekst{margin:0 0 20px}
.filiaal-tekst p{margin:0 0 14px}
.filiaal-tekst p:last-child{margin:0}
.filiaal-mail{font-size:14px;line-height:1.5;color:#fff;margin:0 0 20px}
.filiaal-mail a{color:#fff;text-decoration:none}
.filiaal-mail a:hover{text-decoration:underline}
/* variant "bestellen": naam + soort + witte knop naar de webshop van dat filiaal */
.filialen-bestel .filiaal{justify-content:flex-start}
.filiaal-bestel{background:#fff;color:var(--sp-secondary);text-decoration:none;padding:18px 20px;margin:0 20px 20px;
  display:flex;align-items:center;justify-content:center;gap:14px;transition:.2s}
.filiaal-bestel:hover{background:var(--bve-goud)}
.filiaal-korf{width:18px;height:18px;color:var(--sp-secondary);margin:0;flex:none}
.filiaal-bestel b{display:block;font-size:14px;font-weight:700;line-height:1.6;text-transform:uppercase;letter-spacing:.02em}

/* ---------- formulier (maten van het Gravity Form op de oude site) ---------- */
.kop-formulier .sp-heading{font-family:var(--sp-font);font-size:29px;line-height:1.3;font-weight:500}
.sp-form label{font-size:16px;line-height:1.3;font-weight:700;color:var(--sp-text)}
.sp-form input[type=text],.sp-form input[type=email],.sp-form input[type=tel],.sp-form input[type=date],
.sp-form input[type=number],.sp-form input[type=file],.sp-form select,.sp-form textarea{
  border:1px solid #666;border-radius:0;background:#fff;font-size:16px;line-height:1.5;color:#000;padding:5px 4px}
.sp-form .sp-check{font-weight:400;font-size:14px}
.sp-form .sp-req{color:#c0392b}
.sp-form .sp-btn{font-size:16px;line-height:1.5;padding:8px 16px}

/* ---------- responsive ---------- */
@media(max-width:1200px){
  .kop-menu .sp-menu>li>a{padding:18px 10px}
}
@media(max-width:1000px){
  .filialen{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .kop-binnen{flex-wrap:nowrap}
  .kop-knop-menu{display:flex}
  .kop-sociaal,.kop-bestel{display:none}
  .kop-menu{position:fixed;top:108px;left:0;right:0;bottom:0;background:#fff;padding:1rem;transform:translateX(100%);transition:.25s;z-index:99;overflow:auto;flex:none}
  .kop-menu.is-open{transform:none}
  .kop-menu .sp-menu{flex-direction:column;align-items:stretch}
  .kop-menu .sp-menu>li>a{padding:14px 4px;border-bottom:1px solid var(--sp-line)}
  .voet-kolommen{grid-template-columns:1fr}
  .voet-onder-binnen{flex-direction:column;text-align:center;padding:20px 0}
}
@media(max-width:640px){
  .filialen{grid-template-columns:1fr}
  .kop-logo img{width:190px}
  .kop-menu{top:84px}
}