/* ============================================================
   Gedeeld stylesheet voor de kennisbank- en informatiepagina's
   van Eerlijk over Thuisbatterijen. Zelfde kleursysteem en
   typografie als index.html en calculator.html.
   ============================================================ */

:root {
  --ink:#10241f; --soft:#4a5f59; --paper:#fbfaf7; --surface:#ffffff;
  --sand:#f4efe5; --grey:#d6d2c7; --line:#e2e0da;
  --accent:#1d6b4f; --accent-dark:#174f3c; --accent-soft:#e6f0ea;
  --warn:#a8601a; --warn-soft:#fbeee0; --sun:#e6b84f; --sun-soft:#fff4d6;
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
* { box-sizing:border-box; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a { color:var(--accent-dark); }
a:hover { color:var(--accent); }
::selection { background:var(--accent-soft); }

/* ----- Header (identiek aan homepage) ----- */
.site-header { border-bottom:1px solid var(--line); background:var(--sand); position:sticky; top:0; z-index:20; }
.site-header .inner { max-width:1080px; margin:0 auto; padding:16px 24px; display:flex; align-items:center; gap:20px; }
.site-header nav { margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.nav-link { text-decoration:none; font-size:14px; font-weight:500; color:var(--soft); padding:8px 10px; border-radius:8px; }
.nav-link:hover { color:var(--accent-dark); background:var(--paper); }
.nav-link.active { color:var(--accent-dark); font-weight:600; }
.nav-cta { font-size:14px; font-weight:600; color:var(--surface); background:var(--accent); padding:9px 16px; border-radius:10px; text-decoration:none; }
.nav-cta:hover { color:var(--surface); background:var(--accent-dark); }

/* ----- Breadcrumb ----- */
.breadcrumb { max-width:820px; margin:0 auto; padding:20px 24px 0; font-size:13px; color:var(--soft); }
.breadcrumb a { color:var(--soft); text-decoration:none; }
.breadcrumb a:hover { color:var(--accent-dark); text-decoration:underline; }
.breadcrumb .sep { margin:0 6px; color:var(--grey); }

/* ----- Paginakop ----- */
.page-head { max-width:820px; margin:0 auto; padding:36px 24px 40px; }
.page-head .kicker { font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--soft); margin:0 0 12px; }
.page-head h1 { font-size:44px; line-height:1.1; letter-spacing:-0.025em; margin:0 0 18px; color:var(--ink); text-wrap:balance; }
.page-head .intro { font-size:19px; line-height:1.6; color:var(--soft); margin:0; }

/* ----- Secties ----- */
.page-section { max-width:820px; margin:0 auto; padding:36px 24px; border-top:1px solid var(--line); }
.page-section.no-line { border-top:0; }
.page-section h2 { font-size:26px; letter-spacing:-0.015em; margin:0 0 8px; color:var(--ink); }
.page-section .sub { font-size:17px; color:var(--soft); margin:0 0 24px; max-width:60ch; }

/* ----- Kaarten ----- */
.card-grid { display:grid; gap:12px; }
.card-grid.two { grid-template-columns:1fr 1fr; }
.info-card { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:20px 22px; }
.info-card h3 { font-size:17px; margin:0 0 4px; color:var(--ink); }
.info-card p { font-size:15px; color:var(--soft); margin:0; line-height:1.55; }
.info-card .kicker { font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--soft); margin:0 0 6px; }
.info-card .kicker + p { color:var(--ink); }

/* ----- Clusterkaarten op de kennisbankpagina ----- */
.cluster-card { display:block; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:24px; text-decoration:none; transition:border-color .15s ease; }
.cluster-card:hover { border-color:var(--accent); }
.cluster-card h3 { font-size:19px; margin:0 0 6px; color:var(--accent-dark); }
.cluster-card p { font-size:15px; color:var(--soft); margin:0 0 10px; line-height:1.55; }
.cluster-card .topics { font-size:13px; color:var(--soft); margin:0; }

/* ----- Artikellijsten ----- */
.artikel-lijst { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.artikel-lijst li { background:var(--surface); border:1px solid var(--line); border-radius:14px; }
.artikel-lijst a { display:block; padding:16px 20px; text-decoration:none; }
.artikel-lijst a:hover h3 { color:var(--accent); }
.artikel-lijst h3 { font-size:16px; margin:0 0 2px; color:var(--accent-dark); }
.artikel-lijst p { font-size:14px; color:var(--soft); margin:0; }
.artikel-lijst .binnenkort { display:block; padding:16px 20px; }
.artikel-lijst .binnenkort h3 { color:var(--soft); }
.badge-binnenkort { display:inline-block; font-size:11px; font-weight:600; letter-spacing:0.04em; color:var(--soft); background:var(--sand); border:1px solid var(--line); border-radius:999px; padding:2px 10px; margin-left:8px; vertical-align:middle; }

/* ----- Waarschuwingsblok (zelfde stijl als 'Wat onzeker is') ----- */
.warn-block { background:var(--warn-soft); border:1px solid #f0d9bd; border-radius:18px; padding:24px; }
.warn-block h2, .warn-block h3 { color:var(--warn); margin:0 0 10px; }
.warn-block ul { margin:0; padding-left:20px; }
.warn-block li { font-size:15px; color:var(--ink); line-height:1.55; margin-bottom:8px; }
.warn-block li:last-child { margin-bottom:0; }

/* ----- Bronnen-/datumblok ----- */
.meta-block { font-size:13px; color:var(--soft); border-top:1px solid var(--line); margin-top:8px; padding-top:16px; }
.meta-block p { margin:0 0 4px; }

/* ----- CTA-blok naar de rekentool ----- */
.cta-block { max-width:1080px; margin:0 auto; padding:24px 24px 80px; }
.cta-block .inner { background:var(--accent-dark); border-radius:22px; padding:44px; text-align:center; }
.cta-block h2 { font-size:28px; letter-spacing:-0.02em; margin:0 0 12px; color:var(--paper); text-wrap:balance; }
.cta-block p { font-size:17px; color:#cfe0d7; margin:0 0 24px; }
.cta-block a { display:inline-flex; align-items:center; gap:10px; font-size:16px; font-weight:600; color:var(--accent-dark); background:var(--paper); padding:15px 28px; border-radius:12px; text-decoration:none; }

/* ----- Footer (identiek aan homepage) ----- */
.site-footer { border-top:1px solid var(--line); background:var(--sand); }
.site-footer .inner { max-width:1080px; margin:0 auto; padding:40px 24px; display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:32px; align-items:start; }
.site-footer .missie { font-size:14px; color:var(--soft); max-width:52ch; margin:0; line-height:1.6; }
.site-footer .footer-email { font-size:14px; margin:10px 0 0; }
.site-footer .footer-email a { color:var(--soft); }
.site-footer .footer-email a:hover { color:var(--accent-dark); }
.site-footer nav { display:flex; flex-direction:column; gap:10px; justify-self:end; }
.site-footer nav a { font-size:14px; color:var(--soft); }
.site-footer nav a.primary { color:var(--accent-dark); font-weight:500; }
.site-footer .bottom { border-top:1px solid var(--line); }
.site-footer .bottom p { max-width:1080px; margin:0 auto; padding:16px 24px; font-size:13px; color:var(--soft); }
.cookie-wijzig-footer { font:inherit; font-size:14px; color:var(--soft); background:none; border:0; padding:0; text-align:inherit; cursor:pointer; }
.cookie-wijzig-footer:hover { color:var(--accent-dark); }

/* ----- Cookiebanner (identiek aan homepage) ----- */
#cookieBanner { position:fixed; left:16px; right:16px; bottom:16px; z-index:50; max-width:480px; margin:0 auto; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:18px 20px; box-shadow:0 8px 28px rgba(16,36,31,0.12); }
#cookieBanner p { margin:0 0 12px; font-size:14px; line-height:1.5; color:var(--ink); }
#cookieBanner .cookie-knoppen { display:flex; flex-wrap:wrap; gap:10px; }
#cookieBanner button { font:inherit; font-size:14px; font-weight:600; cursor:pointer; border-radius:10px; padding:9px 16px; border:1px solid var(--line); }
#cookieAkkoord { background:var(--accent); color:var(--surface); border-color:var(--accent); }
#cookieWeiger { background:var(--surface); color:var(--ink); }
#cookieBanner .cookie-wijzig-link { display:inline-block; margin-top:10px; font-size:12px; color:var(--soft); text-decoration:underline; cursor:pointer; background:none; border:0; padding:0; font-family:inherit; }

/* ----- Artikelen (kennisbank-content) ----- */
.direct-answer { max-width:820px; margin:0 auto; padding:0 24px 8px; }
.direct-answer p { background:var(--accent-soft); border-radius:16px; padding:22px 24px; font-size:17px; line-height:1.6; color:var(--ink); margin:0; }
.toc { max-width:820px; margin:0 auto; padding:8px 24px 0; }
.toc-box { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:20px 24px; }
.toc-box p.kicker { font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--soft); margin:0 0 10px; }
.toc-box ol { margin:0; padding-left:20px; }
.toc-box li { font-size:15px; margin-bottom:6px; }
.toc-box li:last-child { margin-bottom:0; }
.toc-box a { text-decoration:none; }
.toc-box a:hover { text-decoration:underline; }
.article-body { max-width:820px; margin:0 auto; padding:0 24px; }
.article-body h2 { font-size:24px; letter-spacing:-0.015em; margin:40px 0 12px; color:var(--ink); scroll-margin-top:90px; }
.article-body h2:first-child { margin-top:0; }
.article-body h3 { font-size:17px; margin:22px 0 6px; color:var(--ink); }
.article-body p { font-size:16px; line-height:1.65; color:var(--ink); margin:0 0 16px; }
.article-body p.sub { color:var(--soft); }
.article-body ul, .article-body ol { margin:0 0 16px; padding-left:22px; }
.article-body li { font-size:16px; line-height:1.6; color:var(--ink); margin-bottom:6px; }
.article-body table { width:100%; border-collapse:collapse; margin:0 0 24px; font-size:14px; }
.article-body caption { text-align:left; font-size:13px; color:var(--soft); margin-bottom:8px; caption-side:top; }
.article-body th, .article-body td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
.article-body th { font-size:12px; font-weight:600; letter-spacing:0.03em; text-transform:uppercase; color:var(--soft); background:var(--sand); }
.article-body td { color:var(--ink); }
.article-body table + p.table-note { font-size:13px; color:var(--soft); margin-top:-12px; }
.faq-item { margin-bottom:20px; }
.faq-item:last-child { margin-bottom:0; }
.faq-item h3 { font-size:16px; margin:0 0 4px; color:var(--ink); }
.faq-item p { font-size:15px; color:var(--soft); margin:0; }
.affiliate-note { max-width:820px; margin:0 auto; padding:20px 24px 0; font-size:13px; color:var(--soft); }

/* ----- Over ons: fotoblok ----- */
.about-intro { display:flex; gap:28px; align-items:flex-start; max-width:820px; margin:0 auto; padding:0 24px 8px; }
.about-intro img { width:132px; height:132px; border-radius:20px; object-fit:cover; flex-shrink:0; border:1px solid var(--line); background:var(--sand); }
.about-intro .about-caption { font-size:13px; color:var(--soft); margin:8px 0 0; text-align:center; max-width:132px; }
.about-intro .about-tekst p { font-size:17px; line-height:1.6; color:var(--ink); margin:0 0 14px; }
.about-intro .about-tekst p:last-child { margin-bottom:0; }
@media (max-width:560px) {
  .about-intro { flex-direction:column; align-items:center; text-align:center; }
}

/* ----- Responsief ----- */
@media (max-width:900px) {
  .card-grid.two { grid-template-columns:1fr; }
  .site-footer .inner { grid-template-columns:1fr; }
  .site-footer nav { justify-self:start; }
}
@media (max-width:560px) {
  .page-head h1 { font-size:32px; }
  #cookieBanner { left:12px; right:12px; bottom:12px; }
}