/*
Theme Name: DakdekkerVandaag.nl
Theme URI: https://www.centraaldakwerken.nl
Author: Centraal Dakwerken
Author URI: https://www.centraaldakwerken.nl
Description: Aangepast WordPress-thema voor DakdekkerVandaag.nl, een leadgeneratie- en servicewebsite voor dakproblemen (daklekkage, reparatie, inspectie, stormschade en meer), i.s.m. Centraal Dakwerken uit Haarlem.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dakdekkervandaag
*/

/* ==========================================================================
   DakdekkerVandaag.nl — designsysteem
   Kleuren, typografie en componenten. Eén bestand, gedeeld door alle pagina's.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root{
  /* Merkkleuren (masterprompt sectie 4) */
  --ink:        #20252B;   /* antraciet */
  --navy:       #102A43;   /* donkerblauw */
  --blue:       #0878D1;   /* signaalblauw */
  --orange:     #F58220;   /* veiligheidsoranje / primaire CTA */
  --orange-dark:#D96A0F;
  --bg:         #F7F8FA;   /* gebroken wit */
  --surface:    #FFFFFF;
  --text:       #30363D;   /* tekst donkergrijs */

  --text-muted: #5B6570;
  --border:     #E1E5EA;
  --border-strong: #C7CED6;

  --surface-2:  #EEF1F4;
  --navy-tint:  #EAF1F8;
  --orange-tint:#FDEEE1;
  --success:    #1F8A57;
  --success-tint:#E7F5EC;

  --focus:      #0878D1;

  --shadow-sm: 0 1px 2px rgba(16,42,67,.06), 0 1px 1px rgba(16,42,67,.04);
  --shadow-md: 0 8px 24px rgba(16,42,67,.10);
  --shadow-lg: 0 16px 40px rgba(16,42,67,.16);

  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;

  --font-head: 'Manrope', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Inter', 'Segoe UI', Arial, sans-serif;
  --font-mono: 'Roboto Mono', 'SFMono-Regular', Consolas, monospace;

  --container: 1180px;

  color-scheme: light;
}

/* Systeem-donker: alleen tonen als er geen expliciete keuze is */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --ink:        #EDF0F3;
    --navy:       #C9DAEA;
    --blue:       #5FA8E8;
    --orange:     #FF9A3D;
    --orange-dark:#F58220;
    --bg:         #14181D;
    --surface:    #1C2128;
    --text:       #E4E8EC;
    --text-muted: #A2ACB6;
    --border:     #2C333B;
    --border-strong:#3A424C;
    --surface-2:  #232A32;
    --navy-tint:  #1B2A38;
    --orange-tint:#3A2717;
    --success:    #49C285;
    --success-tint:#123324;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
    --shadow-md: 0 8px 24px rgba(0,0,0,.45);
    --shadow-lg: 0 20px 48px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --ink:        #EDF0F3;
  --navy:       #C9DAEA;
  --blue:       #5FA8E8;
  --orange:     #FF9A3D;
  --orange-dark:#F58220;
  --bg:         #14181D;
  --surface:    #1C2128;
  --text:       #E4E8EC;
  --text-muted: #A2ACB6;
  --border:     #2C333B;
  --border-strong:#3A424C;
  --surface-2:  #232A32;
  --navy-tint:  #1B2A38;
  --orange-tint:#3A2717;
  --success:    #49C285;
  --success-tint:#123324;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 8px 24px rgba(0,0,0,.45);
  --shadow-lg: 0 20px 48px rgba(0,0,0,.55);
}

/* ---------- Reset & basis ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  padding-bottom:64px; /* ruimte voor mobiele bottombar */
}
@media (min-width:860px){ body{ padding-bottom:0; } }

img{ max-width:100%; display:block; }
svg{ width:1.25em; height:1.25em; flex:none; vertical-align:-0.2em; }
a{ color:var(--blue); text-decoration:none; }
a:hover{ text-decoration:underline; }
:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; border-radius:4px; }

h1,h2,h3,h4{
  font-family:var(--font-head);
  color:var(--ink);
  line-height:1.15;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{ font-weight:800; font-size:clamp(2rem, 1.55rem + 2vw, 3.15rem); letter-spacing:-.01em; }
h2{ font-weight:800; font-size:clamp(1.5rem, 1.3rem + 1vw, 2.15rem); letter-spacing:-.005em; }
h3{ font-weight:700; font-size:1.25rem; }
h4{ font-weight:700; font-size:1.05rem; }
p{ margin:0 0 1em; max-width:65ch; }
.lede{ font-size:1.15rem; color:var(--text-muted); max-width:52ch; }
.eyebrow{
  display:inline-flex; align-items:center; gap:.4em;
  font-family:var(--font-body); font-weight:700; font-size:.78rem;
  letter-spacing:.09em; text-transform:uppercase; color:var(--blue);
  margin:0 0 .75em;
}
.container{ max-width:var(--container); margin-inline:auto; padding-inline:20px; }
@media (min-width:640px){ .container{ padding-inline:32px; } }
section{ padding-block: 56px; }
@media (min-width:860px){ section{ padding-block: 88px; } }

.tabular{ font-variant-numeric:tabular-nums; font-family:var(--font-mono); }

/* ---------- Knoppen ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--font-body); font-weight:700; font-size:.98rem;
  padding:.85em 1.5em; border-radius:var(--radius-s);
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
  line-height:1.2;
}
.btn:hover{ text-decoration:none; }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--orange); border-color:var(--orange); color:#211205; box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--orange-dark); border-color:var(--orange-dark); box-shadow:var(--shadow-md); }
.btn-secondary{ background:var(--success); border-color:var(--success); color:#fff; }
.btn-secondary:hover{ filter:brightness(1.08); }
.btn-outline{ background:transparent; border-color:var(--border-strong); color:var(--ink); }
.btn-outline:hover{ border-color:var(--blue); color:var(--blue); background:var(--navy-tint); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:transparent; padding:.6em 1em; }
.btn-ghost:hover{ background:var(--surface-2); }
.btn-block{ width:100%; }
.btn-lg{ font-size:1.05rem; padding:1em 1.75em; }
.btn svg{ width:1.15em; height:1.15em; flex:none; }
.btn-label-short{ display:inline; }
.btn-label-full{ display:none; }
@media (min-width:1460px){ .btn-label-short{ display:none; } .btn-label-full{ display:inline; } }

/* ---------- Header ---------- */
.topbar{
  background:var(--navy); color:#fff; font-size:.82rem;
}
.topbar .container{ display:flex; align-items:center; justify-content:center; gap:.6em; padding-block:7px; flex-wrap:wrap; text-align:center; }
.topbar strong{ color:#fff; }
.topbar .dot{ opacity:.5; }

.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--surface); border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}
.site-header .container{
  display:flex; align-items:center; gap:20px; height:72px;
}
.logo{ display:flex; align-items:center; gap:.5em; font-family:var(--font-head); font-weight:800; font-size:1rem; color:var(--ink); flex:1 1 auto; min-width:0; white-space:nowrap; }
.logo:hover{ text-decoration:none; }
.logo .mark{ width:28px; height:28px; flex:none; }
.logo .brand-sub{ display:none; font-family:var(--font-body); font-weight:600; font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); }
.logo-text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; display:block; }
@media (min-width:480px){ .logo{ font-size:1.18rem; gap:.6em; } .logo .mark{ width:34px; height:34px; } }
@media (min-width:860px){ .logo .brand-sub{ display:block; } }

.main-nav{ display:none; flex:1 1 auto; min-width:0; }
.main-nav ul{ list-style:none; display:flex; gap:0; margin:0; padding:0; justify-content:center; flex-wrap:nowrap; }
.main-nav a{
  display:block; color:var(--text); font-weight:600; font-size:.82rem; white-space:nowrap;
  padding:.6em .5em; border-radius:var(--radius-s);
}
.main-nav a:hover{ background:var(--surface-2); color:var(--ink); text-decoration:none; }
@media (min-width:1300px){ .main-nav{ display:block; } }

.header-actions{ display:flex; align-items:center; gap:10px; margin-left:auto; flex:none; }
.call-link{
  display:none; align-items:center; justify-content:center; gap:.5em; font-weight:700; color:var(--ink);
  white-space:nowrap; width:42px; height:42px; border-radius:var(--radius-s); border:1px solid var(--border); flex:none;
}
.call-link:hover{ background:var(--navy-tint); text-decoration:none; }
.call-link svg{ width:1.2em; height:1.2em; color:var(--blue); }
.call-link-label{ display:none; }
@media (min-width:640px){ .call-link{ display:inline-flex; } }

.menu-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:var(--radius-s); border:1px solid var(--border);
  background:var(--surface); flex:none;
}
@media (min-width:1300px){ .menu-toggle{ display:none; } }

.mobile-nav{ border-top:1px solid var(--border); background:var(--surface); }
.mobile-nav[hidden]{ display:none; }
.mobile-nav ul{ list-style:none; margin:0; padding:8px 0; }
.mobile-nav a{ display:block; padding:.85em 20px; font-weight:600; color:var(--text); border-bottom:1px solid var(--border); }
.mobile-nav a:hover{ background:var(--surface-2); text-decoration:none; }

.trustbar{ background:var(--navy-tint); border-bottom:1px solid var(--border); }
.trustbar .container{
  display:flex; gap:8px 22px; flex-wrap:wrap; justify-content:center;
  padding-block:10px; font-size:.82rem; font-weight:600; color:var(--navy);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .trustbar .container{ color:var(--ink); } }
:root[data-theme="dark"] .trustbar .container{ color:var(--ink); }

/* ---------- Breadcrumb ---------- */
.breadcrumb{ font-size:.85rem; color:var(--text-muted); padding-block:18px 0; }
.breadcrumb ol{ list-style:none; display:flex; flex-wrap:wrap; gap:.4em; margin:0; padding:0; }
.breadcrumb li:not(:last-child)::after{ content:"/"; margin-left:.4em; color:var(--border-strong); }
.breadcrumb a{ color:var(--text-muted); font-weight:600; }
.breadcrumb li[aria-current] { color:var(--ink); font-weight:700; }

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(1100px 480px at 82% -10%, var(--navy-tint), transparent 60%),
    var(--bg);
  padding-block: 44px 64px;
}
@media (min-width:860px){ .hero{ padding-block: 60px 84px; } }
.hero .container{ display:grid; gap:40px; align-items:center; }
@media (min-width:960px){ .hero .container{ grid-template-columns:1.05fr .95fr; gap:48px; } }
.hero-copy p.lede{ margin-bottom:1.3em; }
.hero-badge{
  display:inline-flex; align-items:center; gap:.5em; background:var(--surface);
  border:1px solid var(--border); border-radius:999px; padding:.45em .95em;
  font-size:.82rem; font-weight:700; color:var(--navy); margin-bottom:1.1em; box-shadow:var(--shadow-sm);
}
.hero-cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:1.4em; }
.hero-tertiary{ margin-top:1em; }
.checklist{ list-style:none; margin:1.6em 0 0; padding:0; display:grid; gap:.55em; }
.checklist li{ display:flex; gap:.6em; align-items:flex-start; font-weight:600; color:var(--ink); font-size:.95rem; }
.checklist svg{ width:1.2em; height:1.2em; flex:none; color:var(--success); margin-top:.1em; }

.hero-art{ position:relative; }
.roofline-card{
  background:var(--ink); border-radius:var(--radius-l); padding:26px;
  box-shadow:var(--shadow-lg); color:#fff; position:relative; overflow:hidden;
}
.roofline-card .roof-svg{ width:100%; height:auto; display:block; }
.roofline-card .caption{ margin-top:14px; font-size:.85rem; color:#C7D0DA; }
.roofline-card .caption strong{ color:#fff; }

/* Roofline scheiding tussen secties */
.roof-divider{ display:block; width:100%; height:34px; margin-top:-1px; }
.roof-divider path{ fill:var(--bg); }
.section-alt .roof-divider path{ fill:var(--surface); }

/* ---------- Probleemcards ---------- */
.problem-grid{ display:grid; gap:18px; grid-template-columns:1fr; }
@media (min-width:640px){ .problem-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:980px){ .problem-grid{ grid-template-columns:repeat(3,1fr); } }
.problem-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m);
  padding:26px; display:flex; flex-direction:column; gap:12px; box-shadow:var(--shadow-sm);
  transition:box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.problem-card:hover{ box-shadow:var(--shadow-md); border-color:var(--border-strong); transform:translateY(-2px); }
.icon{
  width:52px; height:52px; border-radius:var(--radius-s); background:var(--orange-tint);
  display:flex; align-items:center; justify-content:center; color:var(--orange-dark); flex:none;
}
.icon svg{ width:28px; height:28px; flex:none; }
.problem-card h3{ margin-bottom:.15em; }
.problem-card p{ color:var(--text-muted); font-size:.95rem; margin-bottom:.2em; }
.card-link{ margin-top:auto; font-weight:700; display:inline-flex; align-items:center; gap:.35em; }
.card-link svg{ width:1.1em; height:1.1em; transition:transform .15s ease; }
.problem-card:hover .card-link svg{ transform:translateX(3px); }

/* ---------- Sectie varianten ---------- */
.section-alt{ background:var(--surface); }
.section-dark{ background:var(--ink); color:#EDF0F3; }
.section-dark h2, .section-dark h3{ color:#fff; }
.section-dark p{ color:#C7D0DA; }
.section-dark .eyebrow{ color:#8FC4F2; }

.section-head{ max-width:56ch; margin-bottom:36px; }
.section-head.center{ margin-inline:auto; text-align:center; }

/* ---------- Spoedsectie ---------- */
.urgent{
  background:linear-gradient(135deg, var(--navy) 0%, #0B2036 100%);
  color:#fff; border-radius:var(--radius-l); padding:40px 28px; position:relative; overflow:hidden;
}
@media (min-width:860px){ .urgent{ padding:52px 60px; } }
.urgent::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(420px 220px at 90% 10%, rgba(245,130,32,.22), transparent 70%);
}
.urgent-inner{ position:relative; display:grid; gap:26px; }
@media (min-width:900px){ .urgent-inner{ grid-template-columns:1.2fr .8fr; align-items:center; } }
.urgent h2{ color:#fff; }
.urgent p{ color:#D6DEE7; }
.urgent .btn-row{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---------- Formulier (foto-check) ---------- */
.form-panel{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-l);
  padding:26px; box-shadow:var(--shadow-md);
}
@media (min-width:860px){ .form-panel{ padding:36px; } }
.form-grid{ display:grid; gap:16px; }
@media (min-width:640px){ .form-grid.two{ grid-template-columns:1fr 1fr; } }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-weight:700; font-size:.88rem; color:var(--ink); }
.field .hint{ font-weight:500; font-size:.78rem; color:var(--text-muted); }
.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field select,
.field textarea{
  font:inherit; padding:.8em .9em; border-radius:var(--radius-s);
  border:1.5px solid var(--border-strong); background:var(--bg); color:var(--text);
  width:100%;
}
.field textarea{ resize:vertical; min-height:96px; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--blue); background:var(--surface); }
.field-row-choice{ display:flex; flex-wrap:wrap; gap:8px; }
.chip-choice{ position:relative; }
.chip-choice input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.chip-choice span{
  display:inline-flex; align-items:center; padding:.55em 1em; border-radius:999px;
  border:1.5px solid var(--border-strong); font-weight:600; font-size:.86rem; color:var(--text);
  transition:border-color .12s ease, background .12s ease, color .12s ease;
}
.chip-choice input:checked + span{ border-color:var(--blue); background:var(--navy-tint); color:var(--navy); }
.chip-choice input:focus-visible + span{ outline:3px solid var(--focus); outline-offset:2px; }
.file-drop{
  border:2px dashed var(--border-strong); border-radius:var(--radius-m); padding:22px;
  text-align:center; color:var(--text-muted); font-size:.9rem; background:var(--bg);
}
.file-drop strong{ color:var(--ink); }
.form-foot{ display:flex; flex-direction:column; gap:10px; margin-top:6px; }
.privacy-note{ font-size:.78rem; color:var(--text-muted); margin:0; }
.form-status{ font-size:.88rem; font-weight:600; padding:.7em 1em; border-radius:var(--radius-s); display:none; }
.form-status.ok{ display:block; background:var(--success-tint); color:var(--success); }

/* ---------- Trust / samenwerking ---------- */
.trust-banner{
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-l);
  padding:32px; display:grid; gap:26px; align-items:center;
}
@media (min-width:860px){ .trust-banner{ grid-template-columns:auto 1fr auto; padding:40px; } }
.trust-logos{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.trust-logos .x{ color:var(--text-muted); font-weight:700; }
.badge-partner{
  display:inline-flex; align-items:center; gap:.5em; font-family:var(--font-head); font-weight:800;
  color:var(--ink); font-size:1.05rem; border:1.5px solid var(--border-strong); border-radius:var(--radius-s);
  padding:.5em .9em; background:var(--surface);
}

/* ---------- Placeholder-blokken (echte content later) ---------- */
.proof-placeholder{
  border:1.5px dashed var(--border-strong); border-radius:var(--radius-m); background:var(--surface-2);
  padding:16px; text-align:center; font-size:.82rem; font-weight:700; color:var(--text-muted);
  letter-spacing:.02em;
}

/* ---------- Lijsten met vinkjes / bullets (contentpagina's) ---------- */
.check-list, .plain-list{ list-style:none; margin:0 0 1.4em; padding:0; display:grid; gap:.6em; }
.check-list li{ display:flex; gap:.7em; align-items:flex-start; }
.check-list svg{ width:1.25em; height:1.25em; flex:none; margin-top:.15em; color:var(--success); }
.plain-list li{ position:relative; padding-left:1.3em; }
.plain-list li::before{ content:""; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:50%; background:var(--blue); }
.risk-list li svg, .risk-list svg{ color:var(--orange-dark); }

/* ---------- Werkwijze (stappen) ---------- */
.steps{ list-style:none; margin:0; padding:0; display:grid; gap:18px; counter-reset:step; }
@media (min-width:760px){ .steps{ grid-template-columns:repeat(4,1fr); } }
.steps li{
  counter-increment:step; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-m); padding:20px; position:relative;
}
.steps li::before{
  content:counter(step); font-family:var(--font-mono); font-weight:500; font-size:.85rem;
  display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
  border-radius:50%; background:var(--navy); color:#fff; margin-bottom:.7em;
}
.steps h4{ margin-bottom:.3em; }
.steps p{ font-size:.9rem; color:var(--text-muted); margin:0; }

/* ---------- Kostenindicatie ---------- */
.cost-panel{
  background:var(--navy); color:#fff; border-radius:var(--radius-l); padding:28px; display:grid; gap:20px;
}
@media (min-width:760px){ .cost-panel{ grid-template-columns:1fr 1fr; padding:36px; } }
.cost-panel h3{ color:#fff; }
.cost-range{ font-family:var(--font-mono); font-size:2rem; font-weight:500; color:#FFD8AE; }
.cost-range span{ font-size:1rem; color:#C7D0DA; font-family:var(--font-body); font-weight:600; }
.cost-factors{ list-style:none; margin:0; padding:0; display:grid; gap:.5em; font-size:.9rem; color:#D6DEE7; }
.cost-factors li{ display:flex; gap:.6em; }
.cost-factors li::before{ content:"→"; color:var(--orange); font-weight:700; }
.cost-disclaimer{ font-size:.78rem; color:#AEB9C4; margin-top:8px; }

/* ---------- FAQ accordion ---------- */
.faq{ display:grid; gap:10px; }
.faq-item{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m); overflow:hidden; }
.faq-item summary{
  list-style:none; cursor:pointer; padding:18px 20px; display:flex; align-items:center;
  justify-content:space-between; gap:16px; font-weight:700; color:var(--ink);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .chev{ width:1.3em; height:1.3em; flex:none; color:var(--blue); transition:transform .15s ease; }
.faq-item[open] summary .chev{ transform:rotate(180deg); }
.faq-item .faq-a{ padding:0 20px 18px; color:var(--text-muted); }

/* ---------- Interne links / gerelateerd ---------- */
.related-grid{ display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:640px){ .related-grid{ grid-template-columns:repeat(3,1fr); } }
.related-card{
  display:block; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m);
  padding:18px; font-weight:700; color:var(--ink);
}
.related-card:hover{ border-color:var(--blue); background:var(--navy-tint); text-decoration:none; }
.related-card span{ display:block; font-weight:500; font-size:.85rem; color:var(--text-muted); margin-top:.3em; }

/* ---------- CTA-band ---------- */
.cta-band{
  background:var(--orange); border-radius:var(--radius-l); padding:34px 28px; color:#241304;
  display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between;
}
.cta-band h2{ color:#241304; margin-bottom:.2em; }
.cta-band p{ margin:0; color:#3B220A; }
.cta-band .btn-outline{ background:#241304; border-color:#241304; color:#fff; }
.cta-band .btn-outline:hover{ background:#3B220A; border-color:#3B220A; color:#fff; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:#C7D0DA; }
.footer-top{ padding-block:52px 32px; display:grid; gap:32px; grid-template-columns:1fr; }
@media (min-width:720px){ .footer-top{ grid-template-columns:1.3fr 1fr 1fr; } }
@media (min-width:1020px){ .footer-top{ grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; } }
.footer-brand .logo{ color:#fff; }
.footer-brand p{ color:#9AA7B3; font-size:.9rem; margin-top:12px; }
.footer-col h4{ color:#fff; font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:1em; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6em; }
.footer-col a{ color:#C7D0DA; font-size:.92rem; }
.footer-col a:hover{ color:#fff; }
.footer-partner{
  border-top:1px solid #333B45; padding-block:20px; text-align:center; font-size:.88rem; color:#AEB9C4;
}
.footer-bottom{ border-top:1px solid #333B45; padding-block:18px; }
.footer-bottom .container{ display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:space-between; align-items:center; font-size:.8rem; color:#8B97A3; }
.footer-legal{ list-style:none; display:flex; flex-wrap:wrap; gap:14px; margin:0; padding:0; }
.footer-legal a{ color:#8B97A3; }
.footer-legal a:hover{ color:#fff; }

/* ---------- Mobiele bottombar ---------- */
.bottombar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:grid; grid-template-columns:1fr 1fr 1.3fr; background:var(--surface);
  border-top:1px solid var(--border); box-shadow:0 -6px 18px rgba(16,42,67,.10);
}
@media (min-width:860px){ .bottombar{ display:none; } }
.bottombar a{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  padding:9px 4px; font-size:.72rem; font-weight:700; color:var(--ink);
}
.bottombar a:hover{ text-decoration:none; }
.bottombar svg{ width:1.35em; height:1.35em; }
.bottombar .bb-whatsapp{ color:var(--success); }
.bottombar .bb-request{ background:var(--orange); color:#241304; }

/* ---------- WhatsApp float (desktop) ---------- */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:55;
  width:58px; height:58px; border-radius:50%; background:var(--success); color:#fff;
  display:none; align-items:center; justify-content:center; box-shadow:var(--shadow-lg);
}
.wa-float svg{ width:28px; height:28px; }
@media (min-width:860px){ .wa-float{ display:flex; } }

/* ---------- Documentatiepagina (intern) ---------- */
.doc-table{ width:100%; border-collapse:collapse; font-size:.88rem; }
.doc-table caption{ text-align:left; font-weight:700; color:var(--ink); margin-bottom:.6em; }
.doc-table th, .doc-table td{ border:1px solid var(--border); padding:.6em .7em; text-align:left; vertical-align:top; }
.doc-table th{ background:var(--surface-2); font-family:var(--font-head); }
.doc-table tr:nth-child(even) td{ background:var(--surface); }
.doc-wrap{ overflow-x:auto; border-radius:var(--radius-m); margin-bottom:1.6em; }
.swatch-row{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:1.6em; }
.swatch{ width:150px; }
.swatch .chip{ height:64px; border-radius:var(--radius-s); border:1px solid var(--border); margin-bottom:6px; }
.swatch code{ font-family:var(--font-mono); font-size:.78rem; }
.toc-box{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m); padding:18px 22px; }
.toc-box ul{ margin:0; padding-left:1.1em; }
.doc-nav-badge{ display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; background:var(--orange-tint); color:var(--orange-dark); border-radius:999px; padding:.3em .8em; margin-bottom:1em; }