/* ============================================================
   BASE.CSS — site-brede basis + gedeelde componenten ("Linnen gids")
   Verbruikt uitsluitend variabelen uit tokens.css. Bevat reset,
   element-typografie, navigatie, footer, knoppen, formulieren,
   kaarten, hero-varianten, secties. Prefix .sb- voor componenten.
   ============================================================ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*{transition:none!important;animation:none!important;}}

body{
  font-family:var(--font-body);
  font-size:var(--text-body);
  line-height:var(--leading-body);
  color:var(--color-text);
  background:var(--color-surface);
}
img{max-width:100%;display:block;}
a{color:inherit;}
:focus-visible{outline:var(--ring-focus);outline-offset:3px;border-radius:4px;}

h1,h2,h3,h4{
  font-family:var(--heading-font);
  font-weight:var(--heading-weight);
  line-height:var(--heading-leading);
  letter-spacing:var(--heading-tracking);
  color:var(--color-ink);
}
h1{font-size:var(--h1-size);}
h2{font-size:var(--h2-size);}
h3{font-size:var(--h3-size);}
h4{font-size:var(--h4-size);}

/* Type-utilities */
.sb-display1{font-family:var(--font-display);font-weight:var(--heading-weight);font-size:var(--display-1);line-height:var(--display-1-leading);letter-spacing:var(--display-1-tracking);}
.sb-display2{font-family:var(--font-display);font-weight:var(--heading-weight);font-size:var(--display-2);line-height:1.15;letter-spacing:var(--heading-tracking);}
.sb-display1 em,.sb-display2 em{font-style:italic;color:var(--color-primary);}
.sb-lead{color:var(--color-text-muted);font-size:var(--text-lg);}
.sb-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:var(--kicker-size);font-weight:var(--kicker-weight);letter-spacing:var(--kicker-tracking);text-transform:uppercase;color:var(--color-accent);}
.sb-kicker{display:block;font-size:var(--kicker-size);font-weight:var(--kicker-weight);letter-spacing:var(--kicker-tracking);text-transform:uppercase;color:var(--color-accent);margin-bottom:10px;}
.sb-link{font-weight:600;color:var(--color-primary);text-underline-offset:4px;text-decoration:none;}
.sb-link:hover{text-decoration:underline;}

.sb-skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--color-ink);color:#fff;padding:12px 20px;font-weight:600;}
.sb-skip:focus{left:16px;top:16px;}

/* Layout */
.sb-wrap{max-width:var(--container);margin:0 auto;padding:0 32px;}
.sb-narrow{max-width:var(--container-narrow);margin:0 auto;padding:0 32px;}
.sb-grid12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);}
.sb-c8{grid-column:span 8}.sb-c7{grid-column:span 7}.sb-c6{grid-column:span 6}
.sb-c5{grid-column:span 5}.sb-c4{grid-column:span 4}.sb-c3{grid-column:span 3}
@media (max-width:960px){.sb-c8,.sb-c7,.sb-c6,.sb-c5,.sb-c4{grid-column:span 12;}.sb-c3{grid-column:span 6;}}

/* Navigatie */
.sb-topbar{background:var(--color-surface);border-bottom:1px solid var(--color-line);position:sticky;top:0;z-index:100;}
.sb-nav{display:flex;align-items:center;justify-content:space-between;height:76px;gap:24px;}
.sb-logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--font-display);font-size:1.45rem;font-weight:600;letter-spacing:-0.02em;color:var(--color-ink);}
.sb-logo svg{color:var(--color-primary);flex:0 0 auto;}
.sb-logo .dot{color:var(--color-accent);}
.sb-nav-links{display:flex;align-items:center;gap:6px;list-style:none;}
.sb-nav-links a{display:inline-block;padding:12px 14px;text-decoration:none;font-size:0.95rem;font-weight:500;color:var(--color-text-muted);border-radius:var(--radius-sm);}
.sb-nav-links a:hover{color:var(--color-ink);background:var(--color-surface-deep);}
.sb-nav-links a.sb-nav-cta{border:1.5px solid var(--color-ink);color:var(--color-ink);font-weight:600;border-radius:var(--radius-pill);padding:11px 20px;margin-left:8px;}
.sb-nav-links a.sb-nav-cta:hover{background:var(--color-ink);color:var(--color-surface);}
.sb-nav-toggle{display:none;background:none;border:1.5px solid var(--color-line);border-radius:var(--radius-sm);width:52px;height:48px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;}
.sb-nav-toggle span{width:22px;height:2px;background:var(--color-ink);display:block;}
@media (max-width:960px){
  .sb-nav-toggle{display:flex;}
  .sb-nav-links{display:none;position:absolute;top:76px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--color-surface);border-bottom:1px solid var(--color-line);padding:8px 16px 16px;z-index:120;}
  .sb-nav-links.open{display:flex;animation:sb-menu-in .24s ease both;transform-origin:top;}
  .sb-nav-links a{padding:16px 12px;font-size:1.05rem;}
  .sb-nav-links a.sb-nav-cta{margin:10px 0 0;text-align:center;}
}
/* Subtiele uitklap-animatie mobiel menu */
@keyframes sb-menu-in{
  from{opacity:0;transform:translateY(-8px);}
  to{opacity:1;transform:translateY(0);}
}
@media (prefers-reduced-motion: reduce){
  .sb-nav-links.open{animation:none;}
}

/* Breadcrumb */
.sb-breadcrumb{font-size:0.84rem;color:var(--color-text-muted);display:flex;flex-wrap:wrap;gap:7px;align-items:center;}
.sb-breadcrumb a{color:var(--color-text-muted);text-decoration:none;}
.sb-breadcrumb a:hover{color:var(--color-ink);text-decoration:underline;text-underline-offset:3px;}
.sb-breadcrumb .sep{color:var(--color-accent);}

/* Knoppen */
.sb-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;cursor:pointer;font-family:inherit;font-weight:700;font-size:1.05rem;border-radius:var(--radius);padding:16px 28px;border:2px solid transparent;}
.sb-btn-primary{background:var(--color-primary);color:#fff;border-color:var(--color-primary);}
.sb-btn-primary:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover);}
.sb-btn-primary:active{transform:translateY(1px);}
.sb-btn-ghost{border-color:var(--color-ink);color:var(--color-ink);background:transparent;}
.sb-btn-ghost:hover{background:var(--color-ink);color:var(--color-surface);}
.sb-btn-ghost:active{transform:translateY(1px);}
.sb-btn-gold{background:var(--color-accent);color:#241c08;border-color:var(--color-accent);}
.sb-btn-gold:hover{background:#9c7a32;border-color:#9c7a32;}
.sb-btn-block{width:100%;}

/* Pills / chips / badges */
.sb-pill{display:inline-flex;align-items:center;gap:7px;font-size:0.85rem;font-weight:600;padding:5px 12px;border-radius:var(--radius-pill);border:1px solid var(--color-line);background:var(--color-surface-card);}
.sb-pill-open{color:var(--color-primary);border-color:#bcd3c4;background:#eef5f0;}
.sb-pill-open::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--color-primary);}
.sb-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid var(--color-line);border-radius:var(--radius-pill);background:#fff;text-decoration:none;font-size:0.95rem;font-weight:500;color:var(--color-ink);}
.sb-chip:hover{border-color:var(--color-ink);}
.sb-badge{display:inline-flex;align-items:center;gap:8px;background:var(--color-surface-deep);border:1px solid var(--color-line);border-radius:var(--radius-pill);padding:8px 15px;font-size:0.85rem;font-weight:600;color:var(--color-ink);}
.sb-badge svg{color:var(--color-primary);}

/* Kaarten / panelen */
.sb-card{background:var(--color-surface-card);border:1px solid var(--color-line);border-radius:var(--radius);}
.sb-panel{background:var(--color-surface-card);border:1px solid var(--color-line);border-radius:12px;padding:28px 30px;}
.sb-info-label{font-size:0.78rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--color-accent);margin-bottom:14px;}

/* Prose (lopende tekst) */
.sb-prose{font-size:var(--text-reading);line-height:var(--leading-reading);}
.sb-prose p{margin-bottom:20px;color:#33402f;padding-bottom: 10px;}
.sb-prose h2{font-size:1.8rem;margin: 0px 0 14px;scroll-margin-top:96px;}
.sb-prose h3{font-size:1.28rem;margin:26px 0 10px;}

/* Formulieren */
.sb-field{margin-bottom:18px;}
.sb-field>label{display:block;font-weight:600;font-size:1rem;margin-bottom:8px;}
.sb-req{color:var(--color-danger);}
.sb-field input[type=text],.sb-field input[type=email],.sb-field input[type=tel],
.sb-field input[type=url],.sb-field input[type=number],.sb-field select,.sb-field textarea{
  width:100%;font:inherit;font-size:1.02rem;color:var(--color-ink);background:#fff;
  border:1.5px solid var(--color-line);border-radius:9px;padding:14px 16px;
}
.sb-field textarea{min-height:140px;resize:vertical;}
.sb-field input:focus,.sb-field select:focus,.sb-field textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(47,93,70,.12);}
.sb-field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media (max-width:560px){.sb-field-row{grid-template-columns:1fr;}}
.sb-help{font-size:0.88rem;color:var(--color-text-muted);margin-top:6px;}

.sb-toggle{display:inline-flex;flex-wrap:wrap;border:1.5px solid var(--color-line);border-radius:var(--radius-pill);padding:4px;background:var(--color-surface);gap:2px;}
.sb-toggle input{position:absolute;opacity:0;pointer-events:none;}
.sb-toggle label{cursor:pointer;padding:9px 20px;border-radius:var(--radius-pill);font-weight:600;font-size:0.95rem;color:var(--color-text-muted);}
.sb-toggle input:checked + label{background:var(--color-primary);color:#fff;}
.sb-toggle input:focus-visible + label{outline:var(--ring-focus);outline-offset:2px;}

.sb-checks{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media (max-width:560px){.sb-checks{grid-template-columns:1fr;}}
.sb-check{display:flex;align-items:center;gap:12px;border:1.5px solid var(--color-line);border-radius:var(--radius);padding:13px 16px;background:#fff;cursor:pointer;font-weight:500;}
.sb-check:hover{border-color:var(--color-text-muted);}
.sb-check input{width:20px;height:20px;accent-color:var(--color-primary);flex:0 0 auto;}
.sb-check:has(input:checked){border-color:var(--color-primary);background:#eef5f0;}

/* Stepper */
.sb-steps{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin-bottom:8px;}
.sb-step{display:flex;align-items:center;gap:10px;color:var(--color-text-muted);font-size:0.92rem;font-weight:600;}
.sb-step .num{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--color-line);display:grid;place-items:center;font-size:0.9rem;background:var(--color-surface-card);}
.sb-step.active{color:var(--color-ink);}
.sb-step.active .num{background:var(--color-primary);border-color:var(--color-primary);color:#fff;}
.sb-step.done .num{background:var(--color-accent-soft);border-color:var(--color-accent);color:#5a4715;}
.sb-step .sep{width:26px;height:1.5px;background:var(--color-line);}
@media (max-width:620px){.sb-step .label{display:none;}}

/* Hero — gecentreerd */
.sb-hero{padding:70px 0 60px;border-bottom:1px solid var(--color-line);position:relative;overflow:hidden;}
.sb-hero-inner{position:relative;z-index:1;text-align:center;max-width:820px;margin:0 auto;}
.sb-hero h1{font-size:var(--display-1);line-height:var(--display-1-leading);letter-spacing:var(--display-1-tracking);margin:18px 0 14px;}
.sb-hero h1 em{font-style:italic;color:var(--color-primary);}
.sb-hero-sub{color:var(--color-text-muted);font-size:1.14rem;max-width:600px;margin:0 auto;}

/* Hero — donker */
.sb-hero-dark{background:var(--color-ink);color:#fff;border-bottom:none;}
.sb-hero-dark::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;background:radial-gradient(560px 280px at 80% 0%,rgba(176,141,63,.18),transparent 70%),radial-gradient(480px 260px at 10% 100%,rgba(47,93,70,.4),transparent 70%);}
.sb-hero-dark h1{color:#fff;}
.sb-hero-dark .sb-eyebrow,.sb-hero-dark .sb-kicker{color:var(--color-accent-soft);}
.sb-hero-dark h1 em{color:#cbe0d2;}
.sb-hero-dark .sb-hero-sub{color:#cdd7cd;}

/* Hero — full-bleed beeld */
.sb-hero-bleed{position:relative;min-height:440px;display:flex;align-items:flex-end;overflow:hidden;}
.sb-hero-bleed img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.sb-hero-bleed .shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(20,28,23,.92) 0%,rgba(20,28,23,.55) 40%,rgba(20,28,23,.2) 100%);}
.sb-hero-bleed .sb-hero-inner2{position:relative;z-index:2;color:#fff;padding:48px 0 40px;width:100%;}
.sb-hero-bleed h1{color:#fff;font-size:var(--display-1);line-height:var(--display-1-leading);letter-spacing:var(--display-1-tracking);margin:12px 0 14px;}
.sb-hero-bleed .sb-eyebrow{color:var(--color-accent-soft);}

/* Trust-rij */
.sb-trust{margin-top:30px;display:flex;justify-content:center;flex-wrap:wrap;gap:14px 36px;font-size:0.98rem;color:var(--color-text-muted);list-style:none;}
.sb-trust li{display:flex;align-items:center;gap:9px;}
.sb-trust svg{color:var(--color-primary);flex:0 0 auto;}

/* Secties */
.sb-section{padding:var(--space-section) 0;}
.sb-section--alt{background:var(--color-surface-deep);border-top:1px solid var(--color-line);border-bottom:1px solid var(--color-line);}
.sb-sec-head{margin-bottom:34px;}

/* Slotband */
.sb-slot{text-align:center;padding:70px 0;border-top:1px solid var(--color-line);}
.sb-slot h2{font-size:var(--display-2);letter-spacing:var(--heading-tracking);margin-bottom:14px;}
.sb-slot p{color:var(--color-text-muted);max-width:560px;margin:0 auto 28px;}
.sb-slot-acties{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}

/* Footer */
.sb-footer{background:var(--color-ink);color:var(--color-on-dark);padding:56px 0 40px;}
.sb-foot-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);}
.sb-foot-merk{grid-column:span 5;}
.sb-foot-merk .sb-logo{color:#fff;margin-bottom:14px;}
.sb-foot-merk .sb-logo svg,
.sb-foot-merk .sb-logo .dot{color:#fff;}
.sb-foot-merk p{font-size:0.95rem;max-width:38ch;}
.sb-foot-col{grid-column:span 3;}
.sb-foot-col h2{font-size:0.82rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--color-on-dark-soft);margin-bottom:14px;font-family:var(--font-body);font-weight:700;}
.sb-foot-col ul{list-style:none;display:flex;flex-direction:column;gap:10px;}
.sb-foot-col a{text-decoration:none;font-size:0.98rem;}
.sb-foot-col a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px;}
.sb-foot-onder{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);font-size:0.85rem;color:var(--color-on-dark-soft);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}
.sb-foot-onder a{color:inherit;}
@media (max-width:960px){.sb-foot-merk,.sb-foot-col{grid-column:span 12;}}

.sb-disclaimer{font-size:0.86rem;color:var(--color-text-muted);background:var(--color-surface-deep);border:1px solid var(--color-line);border-radius:var(--radius);padding:18px 22px;}

/* ============================================================
   PRODUCTIE-EXTENSIES op de sandbox-basis
   ============================================================ */

/* Footer met 5 kolommen (merk + 4 navigatiekolommen) */
.sb-foot-grid .sb-foot-merk { grid-column: span 4; }
.sb-foot-grid .sb-foot-col { grid-column: span 2; }
@media (max-width: 960px) {
  .sb-foot-grid .sb-foot-merk { grid-column: span 12; }
  .sb-foot-grid .sb-foot-col { grid-column: span 6; }
}
@media (max-width: 560px) {
  .sb-foot-grid .sb-foot-col { grid-column: span 12; }
}

/* Artikelen-dropdown in de topbar (oude functie, nieuwe stijl) */
.sb-nav-drop { position: relative; }
.sb-nav-drop > a { display: inline-flex; align-items: center; gap: 6px; }
.sb-nav-dropmenu {
  position: absolute; top: 100%; left: 0; z-index: 140;
  min-width: 320px; padding: 8px; margin-top: 4px; list-style: none;
  background: var(--color-surface-card); border: 1px solid var(--color-line);
  border-radius: var(--radius); box-shadow: var(--shadow-float);
  display: none;
}
.sb-nav-dropmenu a { display: block; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 0.92rem; }
.sb-nav-dropmenu .sb-nav-dropall a { font-weight: 600; color: var(--color-primary); }
/* Desktop: submenu opent op hover/focus */
@media (min-width: 961px) {
  .sb-nav-drop:hover .sb-nav-dropmenu,
  .sb-nav-drop:focus-within .sb-nav-dropmenu { display: block; }
}
/* Mobiel: submenu standaard ingeklapt, opent via tik op "Artikelen" (.open) */
@media (max-width: 960px) {
  .sb-nav-dropmenu { position: static; display: none; border: none; box-shadow: none; background: transparent; padding: 0 0 0 16px; margin: 0; min-width: 0; }
  .sb-nav-drop.open .sb-nav-dropmenu { display: block; }
  .sb-nav-drop > a svg { transition: transform .2s ease; }
  .sb-nav-drop.open > a svg { transform: rotate(180deg); }
}

/* FAQ-accordion in linnen-stijl (stad/provincie/kosten) */
.faq-list { display: flex; flex-direction: column; gap: 10px; margin: 32px 0; }
.faq-item { background: var(--color-surface-card); border: 1px solid var(--color-line); border-radius: var(--radius); overflow: hidden; }
.faq-question {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font: inherit; font-weight: 600; font-size: 1.02rem; color: var(--color-ink); text-align: left;
  background: none; border: none; cursor: pointer; padding: 16px 20px;
}
.faq-question:hover { color: var(--color-primary); }
.faq-icon { font-style: normal; color: var(--color-accent); font-size: 1.2rem; flex: 0 0 auto; }
.faq-answer { display: none; padding: 0 20px 18px; color: var(--color-text-muted); font-size: 0.98rem; line-height: 1.7; }
.faq-answer p { margin-bottom: 12px; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-item.open .faq-answer, .faq-question[aria-expanded="true"] + .faq-answer { display: block; }

/* Auteursbox in linnen-stijl */
.author-box {
  display: flex; gap: 18px; align-items: flex-start;
  background: var(--color-surface-deep); border: 1px solid var(--color-line);
  border-radius: var(--radius); padding: 22px 24px; margin: 40px 0 0;
}
.author-box img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.author-box .author-box__label { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 4px; }
.author-box .author-box__name { font-weight: 700; font-size: 1.02rem; margin-bottom: 4px; }
.author-box p { font-size: 0.92rem; color: var(--color-text-muted); line-height: 1.6; margin: 0; }
/* Paginering in linnen-stijl (gedeeld met provincie/cat-loc) */
.pagination { display: flex; justify-content: center; gap: 8px; margin: 36px 0 0; flex-wrap: wrap; }
.pagination a, .pagination span[aria-current] {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 12px;
  border: 1px solid var(--color-line); border-radius: var(--radius);
  background: var(--color-surface-card); color: var(--color-ink);
  text-decoration: none; font-weight: 600; font-size: 0.95rem;
}
.pagination a:hover { border-color: var(--color-ink); }
.pagination span[aria-current] { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.pagination-dots { display: flex; align-items: center; padding: 0 4px; color: var(--color-text-muted); }