/* ===========================================================================
   Motorado.nl — productie-stylesheet
   Basis: design-handoff tokens.css (definitief, hi-fi) + component-spec README.
   Eén stylesheet, geen framework. Vrijwel geen JS (accordion=<details>,
   mobiel menu=checkbox-toggle). WCAG AA. Mobile-first, breakpoints 900/600px.
   =========================================================================== */

/* ---- Fonts (zelf-gehost, variable, latin+NL-diakrieten, swap) ---- */
@font-face {
  font-family:'Archivo'; font-style:normal; font-weight:500 800;
  font-display:swap; src:url(/fonts/archivo-latin.woff2) format('woff2');
}
@font-face {
  font-family:'Source Sans 3'; font-style:normal; font-weight:400 700;
  font-display:swap; src:url(/fonts/source-sans-3-latin.woff2) format('woff2');
}
@font-face {
  font-family:'Source Sans 3'; font-style:italic; font-weight:400 700;
  font-display:swap; src:url(/fonts/source-sans-3-italic-latin.woff2) format('woff2');
}

/* ---- Design tokens ---- */
:root {
  --bg:#FFFFFF; --surface:#F7F5F3; --surface-2:#EDEAE7;
  --fg:#15191C; --fg-soft:#3A434A; --muted:#5C666E; --muted-2:#8B959C;
  --border:#E3E0DD; --border-strong:#C7C3BF;
  --accent:#B7231C; --accent-strong:#8E1913; --accent-soft:#FBEDEB;
  --accent-contrast:#FFFFFF; --accent-on-dark:#E5453B;
  --success:#146B4A; --warning:#8A5A00;
  --inverse-bg:#0E1114; --inverse-bg-2:#15191C; --inverse-fg:#B9BFC4;

  --font-head:'Archivo', system-ui, -apple-system, sans-serif;
  --font-body:'Source Sans 3', system-ui, -apple-system, sans-serif;
  --fw-body:400; --fw-semi:600; --fw-bold:700; --fw-black:800;

  --fs-display:3rem; --fs-h1:2.25rem; --fs-h2:1.625rem; --fs-h3:1.25rem;
  --fs-body:1.125rem; --fs-small:0.9375rem; --fs-label:0.8125rem;
  --lh-tight:1.06; --lh-head:1.25; --lh-body:1.65;
  --ls-tight:-0.03em; --ls-head:-0.02em; --ls-label:0.1em;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px; --space-24:96px;
  --r-sm:4px; --r-md:8px; --r-lg:12px; --r-xl:20px; --r-pill:999px;
  --shadow-1:0 1px 2px rgb(21 25 28 / .06);
  --shadow-2:0 6px 20px rgb(21 25 28 / .10);
  --container:1180px; --measure:68ch; --tap-min:44px;
  --focus-ring:3px solid var(--accent);
}

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--font-body); font-size:var(--fs-body); line-height:var(--lh-body);
  text-wrap:pretty; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4 { font-family:var(--font-head); font-weight:var(--fw-black); margin:0 0 var(--space-3); }
h1 { font-size:var(--fs-h1); line-height:1.08; letter-spacing:var(--ls-tight); }
h2 { font-size:var(--fs-h2); line-height:var(--lh-head); letter-spacing:var(--ls-head); }
h3 { font-size:var(--fs-h3); font-weight:var(--fw-bold); line-height:var(--lh-head); }
p { max-width:var(--measure); }
img { max-width:100%; height:auto; display:block; }
a { color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
a:hover { color:var(--accent-strong); }
:focus-visible { outline:var(--focus-ring); outline-offset:2px; }

.container { max-width:var(--container); margin-inline:auto; padding-inline:var(--space-8); }
.section { padding-block:var(--space-16); }
.eyebrow { font-family:var(--font-head); font-weight:var(--fw-bold); font-size:var(--fs-label);
  letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--accent); }

.skip-link { position:absolute; left:-999px; top:0; background:var(--fg); color:#fff;
  padding:.5rem 1rem; z-index:100; }
.skip-link:focus { left:0; }

/* ---- Buttons (min 44px hoog) ---- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  font-family:var(--font-body); font-weight:var(--fw-bold); font-size:1rem; line-height:1;
  min-height:var(--tap-min); padding:12px 20px; border-radius:var(--r-md); border:0;
  cursor:pointer; text-decoration:none; }
.btn--primary { background:var(--accent); color:var(--accent-contrast); }
.btn--primary:hover { background:var(--accent-strong); color:#fff; }
.btn--secondary { background:var(--bg); color:var(--fg); border:1.5px solid var(--fg); padding:11px 19px; }
.btn--secondary:hover { background:var(--surface); color:var(--fg); }
.btn[disabled] { background:var(--border); color:var(--muted-2); cursor:not-allowed; }

/* ---- Topbar ---- */
.topbar { background:var(--inverse-bg-2); color:#C9CFD4; font-size:13px; }
.topbar .container { display:flex; justify-content:space-between; align-items:center;
  gap:var(--space-4); padding-block:7px; flex-wrap:wrap; }
.topbar a { color:#C9CFD4; }
.topbar a:hover { color:#fff; }

/* ---- Header / nav ---- */
.site-header { background:var(--bg); border-bottom:1px solid var(--border); }
.site-header .container { display:flex; align-items:center; gap:var(--space-6);
  padding-block:var(--space-4); }
.wordmark { font-family:var(--font-head); font-weight:var(--fw-black); font-size:38px;
  letter-spacing:-0.035em; color:var(--fg); text-decoration:none; line-height:1; }
.wordmark .dot { color:var(--accent); }
.nav { display:flex; gap:var(--space-6); margin-left:var(--space-4); flex:1; }
.nav a { font-size:16px; font-weight:var(--fw-semi); color:var(--fg-soft);
  text-decoration:none; padding-bottom:4px; }
.nav a:hover { color:var(--fg); }
.nav a[aria-current="page"] { color:var(--fg); border-bottom:3px solid var(--accent); }
.header-actions { display:flex; align-items:center; gap:var(--space-3); margin-left:auto; }
.iconbtn { width:36px; height:36px; display:grid; place-items:center; border:1px solid var(--border);
  border-radius:var(--r-md); background:var(--bg); color:var(--fg); cursor:pointer; }
.iconbtn:hover { background:var(--surface); }
.nav-toggle, .nav-burger { display:none; }

/* ---- Breadcrumb ---- */
.breadcrumb { font-size:15px; color:var(--muted); padding-block:var(--space-4); }
.breadcrumb a { color:var(--fg-soft); }
.breadcrumb span[aria-current] { color:var(--muted); }
.breadcrumb .sep { color:var(--border-strong); margin-inline:6px; }

/* ---- Badges ---- */
.badge { display:inline-block; font-family:var(--font-head); font-weight:var(--fw-bold);
  font-size:12px; letter-spacing:.08em; text-transform:uppercase; padding:6px 12px; border-radius:var(--r-pill); }
.badge--pick { background:var(--accent-soft); color:var(--accent-strong); }
.badge--price { background:var(--surface); color:var(--fg-soft); }
.badge--tested { background:var(--surface); color:var(--success); }

/* ---- Cards ---- */
.card { position:relative; background:var(--bg); border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--shadow-1); overflow:hidden;
  transition:box-shadow 120ms ease-out; }
.card:hover { box-shadow:var(--shadow-2); }
.card__media { aspect-ratio:16/9; background:var(--surface-2); display:grid; place-items:center;
  color:var(--muted-2); font-size:13px; }
.card__body { padding:var(--space-4) var(--space-4) var(--space-6); }
.card__label { font-family:var(--font-head); font-weight:var(--fw-bold); font-size:12px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--accent); }
.card__title { font-family:var(--font-head); font-weight:var(--fw-bold); font-size:20px;
  line-height:var(--lh-head); margin:6px 0 8px; }
.card__title a { color:var(--fg); text-decoration:none; }
.card__title a::after { content:""; position:absolute; inset:0; }
.card__title a:hover { color:var(--accent); }
.card__sum { font-size:15px; color:var(--muted); margin:0 0 10px; }
.card__meta { font-size:14px; color:var(--muted-2); }

/* Cluster-kaart (compacter, tekstueel) */
.cluster-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:var(--space-4); }
.cluster { display:block; background:var(--bg); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:var(--space-6); text-decoration:none; color:var(--fg);
  transition:box-shadow 120ms ease-out; }
.cluster:hover { box-shadow:var(--shadow-2); color:var(--fg); }
.cluster h3 { font-size:18px; margin:0 0 6px; }
.cluster p { font-size:14px; color:var(--muted); margin:0 0 12px; }
.cluster .more { font-size:13px; font-weight:var(--fw-bold); color:var(--accent); }

/* ---- Hero ---- */
.hero .container { display:grid; grid-template-columns:1.15fr 1fr; gap:var(--space-12);
  align-items:center; padding-block:var(--space-16); }
.hero h1 { font-size:2.875rem; line-height:1.05; margin:12px 0 16px; }
.hero .lead { font-size:19px; color:var(--muted); margin:0 0 var(--space-6); }
.hero .cta-row { display:flex; gap:var(--space-3); flex-wrap:wrap; }
.hero__media { aspect-ratio:auto; height:280px; border-radius:var(--r-lg); background:var(--surface-2);
  display:grid; place-items:center; color:var(--muted-2); font-size:13px; }

/* ---- Beste keuze-blok ---- */
.pick { border:1.5px solid var(--accent); border-radius:var(--r-lg); overflow:hidden; margin-block:var(--space-6); }
.pick__bar { background:var(--accent); color:#fff; font-family:var(--font-head); font-weight:var(--fw-bold);
  font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase; padding:8px 18px; }
.pick__body { display:flex; gap:var(--space-6); padding:var(--space-6); align-items:flex-start; }
.pick__img { width:120px; height:120px; flex:none; background:var(--surface); border-radius:var(--r-md);
  display:grid; place-items:center; color:var(--muted-2); font-size:12px; }
.pick__price { font-size:15px; color:var(--muted); margin-top:8px; }

/* ---- Redactietip ---- */
.tip { background:var(--surface); border-left:3px solid var(--fg); border-radius:0 var(--r-md) var(--r-md) 0;
  padding:var(--space-4) var(--space-6); margin-block:var(--space-6); }

/* ---- Tabel ---- */
.table-wrap { overflow-x:auto; margin-block:var(--space-6); }
.table { width:100%; border-collapse:collapse; font-size:var(--fs-small); }
.table th { background:var(--surface); text-align:left; padding:12px 14px; font-family:var(--font-head);
  font-size:var(--fs-label); letter-spacing:.06em; text-transform:uppercase; border-bottom:1px solid var(--border); }
.table td { padding:13px 14px; border-bottom:1px solid var(--border); font-variant-numeric:tabular-nums; }
.table tr[data-pick] { background:var(--accent-soft); }

/* ---- FAQ-accordion (geen JS) ---- */
details.faq { border-bottom:1px solid var(--border); padding:14px 0; }
details.faq > summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between;
  gap:12px; font-family:var(--font-head); font-weight:var(--fw-bold); font-size:1.0625rem; }
details.faq > summary::-webkit-details-marker { display:none; }
details.faq > summary::after { content:'+'; color:var(--accent); font-size:1.2em; line-height:1; }
details.faq[open] > summary::after { content:'–'; }
details.faq > p { margin:10px 0 0; color:var(--fg-soft); }

/* ---- Affiliate-disclosure ---- */
.disclosure { border:1px solid var(--border); background:var(--surface); border-radius:var(--r-md);
  padding:12px 14px; font-size:0.875rem; line-height:1.55; color:var(--fg-soft); max-width:none;
  margin-block:var(--space-4); }
.disclosure b { color:var(--fg); }

/* ---- Forms / lead-blok ---- */
.form { max-width:34rem; }
.form .field { margin-bottom:var(--space-4); }
.form label { display:block; font-weight:var(--fw-semi); margin-bottom:6px; }
.form input, .form textarea { width:100%; padding:12px 14px; font:inherit; color:var(--fg);
  background:var(--bg); border:1.5px solid var(--border-strong); border-radius:var(--r-md); }
.form input:focus, .form textarea:focus { outline:var(--focus-ring); outline-offset:1px; border-color:var(--accent); }
.form textarea { min-height:9rem; resize:vertical; }
.leadblock { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:var(--space-8); }
.leadblock h2 { font-size:20px; }
.leadblock .proof { font-size:13px; color:var(--muted-2); margin-top:10px; }
.hp { position:absolute; left:-9999px; top:0; height:0; overflow:hidden; }

/* ---- Hub-pagina ---- */
.hub-intro { background:var(--surface); border-bottom:1px solid var(--border); }
.hub-intro .container { padding-block:var(--space-8); }
.hub-intro h1 { font-size:2.5rem; }
.hub-intro p { font-size:19px; color:var(--muted); margin:0; }
.begin-hier { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); margin:var(--space-6) 0 var(--space-12); }

/* 2-koloms layout: content + sticky aside */
.layout { display:grid; grid-template-columns:1fr 300px; gap:var(--space-12); align-items:start; }
.aside { position:sticky; top:var(--space-6); display:grid; gap:var(--space-6); }
.aside-block { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--space-6); }
.aside-block h3 { font-size:16px; margin:0 0 10px; }
.aside-block p { font-size:14px; color:var(--muted); margin:0 0 12px; }
.aside-links { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.aside-links a { font-size:15px; font-weight:var(--fw-semi); }

/* Artikellijst (hub-spokes) */
.article-list { display:grid; gap:0; }
.article-row { display:grid; grid-template-columns:104px 1fr; gap:var(--space-4);
  padding:var(--space-6) 0; border-bottom:1px solid var(--border); position:relative; }
.article-row:first-child { padding-top:0; }
.article-row__thumb { width:104px; height:72px; background:var(--surface-2); border-radius:var(--r-md);
  display:grid; place-items:center; color:var(--muted-2); font-size:11px; text-align:center; }
.article-row h3 { font-size:18px; margin:0 0 4px; }
.article-row h3 a { color:var(--fg); text-decoration:none; }
.article-row h3 a::after { content:""; position:absolute; inset:0; }
.article-row h3 a:hover { color:var(--accent); }
.article-row p { font-size:15px; color:var(--muted); margin:0 0 6px; }
.article-row .meta { font-size:13px; color:var(--muted-2); }

/* ---- Artikel-pagina ---- */
.article-layout { display:grid; grid-template-columns:220px 1fr; gap:var(--space-12); align-items:start; }
.toc { position:sticky; top:var(--space-6); font-size:15px; }
.toc .toc-label { font-family:var(--font-head); font-weight:var(--fw-bold); font-size:var(--fs-label);
  letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.toc ul { list-style:none; margin:0 0 var(--space-8); padding:0; display:grid; gap:8px; }
.toc a { color:var(--fg-soft); text-decoration:none; border-left:2px solid var(--border); padding-left:12px; display:block; }
.toc a:hover { color:var(--accent); border-color:var(--accent); }
.author { display:flex; align-items:center; gap:10px; }
.author__avatar { width:34px; height:34px; border-radius:var(--r-pill); background:var(--surface-2); flex:none; }
.author__name { font-size:14px; font-weight:var(--fw-semi); }
.author__sub { font-size:13px; color:var(--muted-2); }
.prose { max-width:var(--measure); }
.prose h2 { margin-top:var(--space-12); scroll-margin-top:var(--space-6); }
.prose p, .prose ul { font-size:var(--fs-body); }
.article-meta { font-size:14px; color:var(--muted-2); margin:0 0 var(--space-6); }
.article-hero { height:300px; background:var(--surface-2); border-radius:var(--r-lg); display:grid;
  place-items:center; color:var(--muted-2); font-size:13px; margin-bottom:8px; }
.figcaption { font-size:14px; color:var(--muted-2); margin:0 0 var(--space-8); }

/* Gerelateerde gidsen */
.related { border-top:1px solid var(--border); margin-top:var(--space-16); padding-top:var(--space-8); }
.related h2 { font-size:var(--fs-h3); }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); margin-top:var(--space-4); }

/* ---- Footer ---- */
.site-footer { background:var(--inverse-bg); color:var(--inverse-fg); margin-top:var(--space-24); }
.site-footer .container { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--space-8);
  padding-block:var(--space-16); }
.site-footer h4 { color:#fff; font-size:14px; letter-spacing:.06em; text-transform:uppercase;
  font-weight:var(--fw-bold); margin:0 0 var(--space-4); }
.site-footer a { color:#B9BFC4; font-size:15px; text-decoration:none; }
.site-footer a:hover { color:#fff; }
.site-footer ul { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.site-footer .brand .wordmark { color:#fff; font-size:24px; }
.site-footer .brand .dot { color:var(--accent-on-dark); }
.site-footer .brand p { font-size:14px; color:#8B949C; margin:12px 0 0; }
.footer-bottom { border-top:1px solid #23282D; }
.footer-bottom .container { display:flex; justify-content:space-between; gap:var(--space-4);
  padding-block:var(--space-4); font-size:13px; color:#8B949C; flex-wrap:wrap; }

/* ---- Responsive ---- */
@media (max-width:900px) {
  :root { --fs-display:2rem; --fs-h1:1.875rem; --fs-h2:1.4375rem; }
  .container { padding-inline:var(--space-4); }
  .section { padding-block:40px; }
  .wordmark { font-size:21px; }
  /* Mobiel menu via checkbox-toggle */
  .nav { position:fixed; inset:0 0 0 auto; width:min(82vw,320px); background:var(--bg);
    flex-direction:column; gap:0; margin:0; padding:72px var(--space-6) var(--space-6);
    box-shadow:var(--shadow-2); transform:translateX(100%); transition:transform 180ms ease-out;
    z-index:60; }
  .nav a { font-size:18px; padding:14px 0; border-bottom:1px solid var(--border); width:100%; }
  .nav a[aria-current="page"] { border-bottom:1px solid var(--border); color:var(--accent); }
  .nav-toggle:checked ~ .nav { transform:translateX(0); }
  .nav-burger { display:grid; place-items:center; width:44px; height:44px; margin-left:auto;
    border:1px solid var(--border); border-radius:var(--r-md); background:var(--bg); cursor:pointer; }
  .header-actions { margin-left:0; }
  .iconbtn { width:44px; height:44px; }
  .hero .container { grid-template-columns:1fr; gap:var(--space-6); padding-block:40px; }
  .hero__media { height:170px; order:-1; }
  .hero .btn { width:100%; }
  .cluster-grid { grid-template-columns:repeat(2,1fr); }
  .site-footer .container { grid-template-columns:1fr; gap:var(--space-6); }
  /* Hub/artikel: 1 kolom, aside eronder, TOC als <details> */
  .layout, .article-layout { grid-template-columns:1fr; gap:var(--space-8); }
  .aside, .toc { position:static; }
  .begin-hier { grid-template-columns:1fr; }
  .related-grid { grid-template-columns:1fr; }
  .article-layout .toc { order:-1; }
}
@media (max-width:600px) {
  .cluster-grid { grid-template-columns:1fr; }
  .begin-hier { grid-template-columns:1fr; }
}
html:has(.nav-toggle:checked) { overflow:hidden; }

@media (prefers-reduced-motion:reduce) { * { transition:none !important; animation:none !important; } }