body { margin: 0; font-family: var(--w-font, sans-serif); background: var(--w-bg, #fff); color: var(--w-text, #1e293b); display: flex; flex-direction: column; min-height: 100vh; }
.ws-noscript-msg { padding: 2rem; }
.ws-pd-img-zoom { cursor: zoom-in; }
.site-main { flex-grow: 1; }

/* -- Header -- */
.site-header { border-bottom: 1px solid var(--w-border, #e2e8f0); background: var(--w-header-bg, #fff); }
.site-header-inner { max-width: 1100px; margin: 0 auto; padding: 16px 20px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.site-brand { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; font-weight: 700; text-decoration: none; color: var(--w-header-text, var(--w-text, #1e293b)); }
.site-logo { height: 40px; width: auto; object-fit: contain; }

/* -- Navigation with dropdowns -- */
.site-nav { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.site-nav > a,
.site-nav > .nav-item > a {
  text-decoration: none; padding: 6px 10px; border-radius: 6px;
  color: var(--w-secondary, var(--w-muted, #64748b));
  transition: background .15s, color .15s;
}
.site-nav > a:hover, .site-nav > a.active,
.site-nav > .nav-item > a:hover, .site-nav > .nav-item > a.active {
  color: var(--w-nav-hover, var(--w-text, #1e293b));
  background: rgba(0,0,0,.04);
}
.nav-item { position: relative; }
.nav-item > a { display: flex; align-items: center; gap: 4px; }
.nav-item > a .nav-caret { font-size: 0.65em; opacity: .5; }
.nav-dropdown {
  display: none; position: absolute; top: 100%; left: 0; z-index: 100;
  min-width: 200px; padding: 6px 0; margin-top: 4px;
  background: var(--w-header-bg, #fff); border: 1px solid var(--w-border, #e2e8f0);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.1);
}
.nav-item:hover > .nav-dropdown,
.nav-item:focus-within > .nav-dropdown { display: block; }
.nav-dropdown a {
  display: block; padding: 7px 14px; text-decoration: none; font-size: 0.95rem;
  color: var(--w-text, #1e293b);
}
.nav-dropdown a:hover, .nav-dropdown a.active {
  background: rgba(0,0,0,.04);
  color: var(--w-nav-hover, var(--w-primary, #2563eb));
}
.nav-dropdown a.sub-depth-1 { padding-left: 28px; font-size: 0.92rem; }
.nav-dropdown a.sub-depth-2 { padding-left: 40px; font-size: 0.9rem; }
.nav-dropdown a.sub-depth-3,
.nav-dropdown a.sub-depth-4,
.nav-dropdown a.sub-depth-5 { padding-left: 52px; font-size: 0.88rem; }

/* -- Mobile hamburger -- */
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; color: var(--w-header-text, var(--w-text, #1e293b)); margin-left: auto; }
.nav-toggle svg { width: 28px; height: 28px; }
@media (max-width: 768px) {
  .nav-toggle { display: block; }
  .site-nav { display: none; flex-direction: column; width: 100%; gap: 0; }
  .site-nav.open { display: flex; }
  .site-nav > a, .site-nav > .nav-item > a { padding: 10px 0; }
  .nav-dropdown { position: static; box-shadow: none; border: none; padding: 0 0 0 16px; margin: 0; }
  .nav-item:hover > .nav-dropdown,
  .nav-item:focus-within > .nav-dropdown { display: block; }
}

/* -- Main -- */
.site-main { max-width: 1100px; margin: 0 auto; padding: 32px 20px; }

/* -- Footer -- */
.site-footer { border-top: 1px solid var(--w-border, #e2e8f0); text-align: center; padding: 24px 20px; color: var(--w-footer-text, var(--w-muted, #64748b)); font-size: 0.9rem; background: var(--w-footer-bg, transparent); }
.footer-nav { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; }
.footer-nav a { color: var(--w-footer-text, var(--w-muted, #64748b)); text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; color: var(--w-text, #1e293b); }

/* -- Content elements -- */
.breadcrumb { display: flex; gap: 8px; font-size: 0.9rem; color: var(--w-muted, #64748b); margin-bottom: 16px; flex-wrap: wrap; }
.breadcrumb a { color: var(--w-muted, #64748b); text-decoration: none; }
.breadcrumb a:hover { color: var(--w-text, #1e293b); }
.flash-wrap { margin-bottom: 16px; }
.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 8px; border: 1px solid var(--w-border, #e2e8f0); }
.flash.success { background: rgba(52,199,89,.1); border-color: rgba(52,199,89,.3); }
.flash.error { background: rgba(255,77,79,.08); border-color: rgba(255,77,79,.3); color: #dc2626; }

/* -- Child pages -- */
.child-list { list-style: none; padding: 0; }
.child-list li { margin-bottom: 8px; }
.child-list a { text-decoration: none; color: var(--w-text, #1e293b); }
.child-list a:hover { text-decoration: underline; }
.child-list .sub-children { list-style: none; padding-left: 20px; margin-top: 6px; }

.meta { font-size: 0.9rem; color: var(--w-muted, #64748b); margin-bottom: 16px; }
.tag { display: inline-block; background: var(--w-surface, #f8fafc); border: 1px solid var(--w-border, #e2e8f0); border-radius: 999px; padding: 2px 10px; font-size: 0.85rem; margin-right: 4px; }

/* -- Table of Contents -- */
.toc{background:rgba(128,128,128,.06);border:1px solid rgba(128,128,128,.12);border-radius:8px;padding:1.2rem 1.5rem;margin:1.5rem 0}
.toc h2{font-size:1rem;margin:0 0 .75rem}
.toc ol{margin:0;padding-left:1.2rem}
.toc li{margin:.3rem 0;font-size:.9rem}
.toc .toc-3{padding-left:1rem;font-size:.85rem}
.toc a{text-decoration:none;color:inherit;opacity:.8}
.toc a:hover{opacity:1;text-decoration:underline}

/* -- Page hero image -- */
.page-hero-img { width: 100%; max-height: 400px; object-fit: cover; border-radius: 8px; margin-bottom: 24px; }

/* -- Image CLS prevention -- */
img { max-width: 100%; height: auto; }
.gh-card-image, .card-thumb, .post-thumb { aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.gh-article-image { aspect-ratio: 2/1; object-fit: cover; width: 100%; }

/* -- Contact form -- */
.error { color: #dc2626; margin-top: 6px; }
.cooldown { color: var(--w-muted, #64748b); margin: 8px 0 0; }
form label { display: block; margin-top: 12px; font-weight: 600; }
form input, form textarea { width: 100%; max-width: 500px; }
.contact-submit { margin-top: 14px; }
.mt-md { margin-top: 16px; }

/* -- Social share buttons -- */
.social-share{display:flex;align-items:center;gap:10px;margin:2rem 0;padding:1rem 0;border-top:1px solid rgba(128,128,128,.2)}
.social-share a{padding:6px 12px;border:1px solid rgba(128,128,128,.2);border-radius:4px;text-decoration:none;font-size:.85rem;color:var(--w-text,#1e293b);transition:background .2s}
.social-share a:hover{background:rgba(128,128,128,.1)}
.reading-time{font-size:.85rem;opacity:.6}

/* -- Cookie consent banner -- */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;background:#1d1d1f;color:#f5f5f7;padding:1rem;z-index:9999;text-align:center;font-size:.9rem}
.cookie-banner[hidden]{display:none}
.cookie-banner__inner{max-width:800px;margin:0 auto;display:flex;align-items:center;gap:1rem;justify-content:center;flex-wrap:wrap}
.cookie-banner__inner p{margin:0}

/* -- Related posts -- */
.related-posts{margin:3rem 0;padding:2rem 0;border-top:1px solid rgba(128,128,128,.15)}
.related-posts h2{margin:0 0 1rem;font-size:1.3rem}
.related-posts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.2rem}
.related-post-card{padding:1rem;border:1px solid var(--w-border,#e2e8f0);border-radius:8px;text-decoration:none;color:var(--w-text,#1e293b);transition:box-shadow .2s,border-color .2s}
.related-post-card:hover{border-color:var(--w-primary,#2563eb);box-shadow:0 4px 12px rgba(0,0,0,.08)}
.related-post-card h3{margin:0 0 .4rem;font-size:1rem}
.related-post-card p{margin:0;font-size:.85rem;opacity:.7}
.related-post-card .related-tag{display:inline-block;font-size:.75rem;background:var(--w-surface,#f8fafc);border:1px solid var(--w-border,#e2e8f0);border-radius:999px;padding:2px 8px;margin-bottom:.4rem}

/* -- Floating donate button + modal -- */
.donate-fab{position:fixed;bottom:24px;right:24px;z-index:900;height:44px;padding:0 18px;border-radius:22px;border:none;background:var(--w-accent,#2563eb);color:#fff;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;gap:8px;font-size:.9rem;font-weight:600;font-family:inherit;transition:transform .2s,box-shadow .2s}
.donate-fab:hover{transform:scale(1.05);box-shadow:0 6px 20px rgba(0,0,0,.3)}
.donate-overlay{position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:20px}
.donate-overlay[hidden]{display:none}
.donate-dialog{background:var(--w-bg,#fff);color:var(--w-text,#1e293b);border-radius:12px;padding:28px 24px;max-width:400px;width:100%;position:relative;box-shadow:0 12px 40px rgba(0,0,0,.2)}
.donate-dialog h3{margin:0 0 8px;font-size:1.2rem}
.donate-dialog p{margin:0 0 16px;font-size:.9rem;color:var(--w-muted,#64748b)}
.donate-dialog label{display:block;font-weight:600;font-size:.85rem;margin:12px 0 4px}
.donate-opt{font-weight:400;color:var(--w-muted,#64748b)}
.donate-amount-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.donate-preset{padding:6px 14px;border:1px solid var(--w-border,#e2e8f0);border-radius:6px;background:var(--w-bg,#fff);color:var(--w-text,#1e293b);cursor:pointer;font-size:.9rem;transition:background .15s,border-color .15s}
.donate-preset:hover,.donate-preset.active{background:var(--w-accent,#2563eb);color:#fff;border-color:var(--w-accent,#2563eb)}
.donate-amount-row input{flex:1;min-width:100px;padding:6px 10px;border:1px solid var(--w-border,#e2e8f0);border-radius:6px;font-size:.9rem;background:var(--w-bg,#fff);color:var(--w-text,#1e293b)}
.donate-dialog input[type="text"],.donate-dialog textarea{width:100%;padding:6px 10px;border:1px solid var(--w-border,#e2e8f0);border-radius:6px;font-size:.9rem;font-family:inherit;background:var(--w-bg,#fff);color:var(--w-text,#1e293b);box-sizing:border-box}
.donate-submit{width:100%;margin-top:16px;padding:10px;font-size:1rem}
.donate-error{color:#dc2626;font-size:.85rem;margin-top:8px}
.donate-close{position:absolute;top:10px;right:14px;background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--w-muted,#64748b);line-height:1}
.donate-close:hover{color:var(--w-text,#1e293b)}
@media print{.donate-fab,.donate-overlay{display:none!important}}
.donate-thanks{max-width:480px;margin:5rem auto;text-align:center;padding:0 20px}
.donate-thanks h1{font-size:1.6rem;margin:0 0 12px}
.donate-thanks-sub{color:var(--w-muted,#64748b);font-size:1rem;line-height:1.6;margin:0 0 2rem}
.donate-thanks-icon{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem}
.donate-thanks-icon--success{background:rgba(52,199,89,.1);color:#34c759}
.donate-thanks-icon--cancelled{background:rgba(255,77,79,.08);color:#dc2626}
.donate-thanks-btn{display:inline-block;padding:10px 28px;font-size:1rem}

/* -- Focus indicators -- */
:focus-visible {
  outline: 2px solid var(--w-accent, #2563eb);
  outline-offset: 2px;
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--w-accent, #2563eb);
  outline-offset: 2px;
}
.ws-card:focus-within {
  outline: 2px solid var(--w-accent, #2563eb);
  outline-offset: 2px;
}

/* ── Universal layout primitives ───────────────────────────────────
 * Zero-specificity fallbacks via :where() so any theme that defines its own
 * .container / .section / .content-narrow still wins. Themes override the
 * custom properties below to tune the scale without rewriting the selectors.
 */
:root {
  --w-container-width: 1200px;
  --w-container-gutter: 1.25rem;
  --w-section-padding-y: clamp(40px, 5vw, 72px);
  --w-content-narrow: 860px;
}
:where(.container) {
  width: min(var(--w-container-width), calc(100% - 2 * var(--w-container-gutter)));
  margin-inline: auto;
}
:where(.section) {
  padding-block: var(--w-section-padding-y);
}
:where(.content-narrow) {
  max-width: var(--w-content-narrow);
  margin-inline: auto;
}
:where(.card) {
  background: var(--w-surface, #fff);
  border: 1px solid var(--w-border, rgba(148, 163, 184, 0.25));
  border-radius: 12px;
}
:where(.pad-lg) {
  padding: clamp(18px, 3vw, 32px);
}

/* Honeypot field (hidden from humans, attracts bot form-fillers). */
.i-am-human {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ── Post body: image alignment via <figure class="img--*"> ── */
.page-body figure, .post-body figure, .gh-article-body figure {
  margin: 1rem 0;
}
.page-body figure img, .post-body figure img, .gh-article-body figure img {
  max-width: 100%;
  height: auto;
}
.page-body figcaption, .post-body figcaption, .gh-article-body figcaption {
  font-size: 0.88rem;
  color: #64748b;
  padding-top: 0.35rem;
}
.page-body figure.img--center, .post-body figure.img--center, .gh-article-body figure.img--center {
  text-align: center;
}
.page-body figure.img--center img, .post-body figure.img--center img, .gh-article-body figure.img--center img {
  display: inline-block;
}
.page-body figure.img--left, .post-body figure.img--left, .gh-article-body figure.img--left {
  float: left;
  max-width: 50%;
  margin: 0.5rem 1.25rem 0.5rem 0;
}
.page-body figure.img--right, .post-body figure.img--right, .gh-article-body figure.img--right {
  float: right;
  max-width: 50%;
  margin: 0.5rem 0 0.5rem 1.25rem;
}
@media (max-width: 600px) {
  .page-body figure.img--left, .page-body figure.img--right,
  .post-body figure.img--left, .post-body figure.img--right,
  .gh-article-body figure.img--left, .gh-article-body figure.img--right {
    float: none; max-width: 100%; margin: 1rem 0;
  }
}

/* ── Post body: component blocks (CTA, FAQ, testimonial, cols, callout, pricing) ── */
.block { display: block; }
.block--cta {
  padding: 1.5rem 1.75rem;
  border-radius: 12px;
  background: rgba(37, 99, 235, 0.05);
  border: 1px solid rgba(37, 99, 235, 0.18);
  margin: 1.5rem 0;
}
.block--cta h2 { margin-top: 0; }
.block--cta p:last-child { margin-bottom: 0; }
.block--cta .form-stack { max-width: 420px; margin: 0 auto; }

/* Donation widget amount pills */
.donation-amounts { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: .5rem 0; }
.donation-amount {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 4rem; padding: .5rem .9rem;
  border: 1px solid rgba(37, 99, 235, 0.45);
  border-radius: 999px;
  cursor: pointer; font-weight: 600; font-size: .95rem;
  color: rgba(37, 99, 235, 0.85);
  background: transparent;
  transition: background .15s, color .15s, transform .15s, border-color .15s;
}
.donation-amount input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.donation-amount:hover { transform: translateY(-1px); border-color: #2563eb; }
.donation-amount:has(input:checked) {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}

.form-stack { display: flex; flex-direction: column; gap: 0.75rem; }
.form-stack input, .form-stack textarea, .form-stack select { width: 100%; }

.block--faq { margin: 1.5rem 0; }
.block--faq h2 { margin-bottom: 0.75rem; }
.block--faq details {
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  background: rgba(255, 255, 255, 0.02);
}
.block--faq summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  position: relative;
  padding-right: 1.5rem;
}
.block--faq summary::after {
  content: "▸";
  position: absolute;
  right: 0.25rem;
  transition: transform 0.2s;
}
.block--faq details[open] summary::after { transform: rotate(90deg); }
.block--faq details p { margin: 0.5rem 0 0; }

.block--testimonial {
  border-left: 4px solid var(--primary, #2563eb);
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  background: rgba(37, 99, 235, 0.04);
  font-style: italic;
  border-radius: 0 8px 8px 0;
}
.block--testimonial footer { font-style: normal; font-size: 0.9rem; color: #64748b; margin-top: 0.5rem; }
.block--testimonial footer cite { font-style: normal; }

.block--cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 1.5rem 0;
}
.block--cols .block__col h3 { margin-top: 0; }
@media (max-width: 640px) { .block--cols { grid-template-columns: 1fr; } }

.block--callout {
  padding: 1rem 1.25rem;
  border-radius: 8px;
  margin: 1rem 0;
  border-left: 4px solid;
}
.block--callout strong { margin-right: 0.25rem; }
.block--callout-info { background: rgba(37, 99, 235, 0.08); border-left-color: #2563eb; }
.block--callout-warn { background: rgba(234, 88, 12, 0.08); border-left-color: #ea580c; }
.block--callout-success { background: rgba(22, 163, 74, 0.08); border-left-color: #16a34a; }

.block--pricing { margin: 1.5rem 0; }
.block--pricing .block__price-card {
  padding: 1.5rem 1.75rem;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 12px;
  max-width: 340px;
  background: rgba(255, 255, 255, 0.02);
}
.block--pricing .block__price-card h3 { margin-top: 0; }
.block--pricing .block__price {
  font-size: 2rem;
  font-weight: 700;
  margin: 0.5rem 0;
}
.block--pricing .block__price small {
  font-size: 0.95rem;
  font-weight: 400;
  color: #64748b;
}
.block--pricing ul { padding-left: 1.25rem; margin: 0.75rem 0; }

/* ── Embedded media (YouTube, Vimeo, Google Maps) — responsive 16:9 ── */
.embed { margin: 1.5rem 0; }
.embed--video, .embed--map {
  position: relative;
  width: 100%;
  padding-top: 56.25%;  /* 16:9 */
  border-radius: 10px;
  overflow: hidden;
  background: #000;
}
.embed--map { padding-top: 50%; }
.embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── Native video (uploaded via editor) ── */
.video-wrap { margin: 1.5rem 0; }
.video-wrap video { width: 100%; max-width: 100%; border-radius: 10px; background: #000; }
.video-wrap figcaption { text-align: center; font-size: .85rem; color: var(--muted, #6b7280); margin-top: .5rem; }
video { max-width: 100%; height: auto; }

/* Post body table cell alignment classes (set via the editor popover) */
.page-body td.td--left, .post-body td.td--left, .gh-article-body td.td--left { text-align: left; }
.page-body td.td--center, .post-body td.td--center, .gh-article-body td.td--center { text-align: center; }
.page-body td.td--right, .post-body td.td--right, .gh-article-body td.td--right { text-align: right; }

/* ── Module cards (rendered by SnippetService from {{form|booking|product:slug}}) ── */
.module-card {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.25rem 1.5rem; margin: 1.5rem 0;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 12px;
  background: rgba(37, 99, 235, 0.04);
  position: relative;
}
.module-card__icon { font-size: 2rem; line-height: 1; flex-shrink: 0; }
.module-card__body { flex: 1; min-width: 0; }
.module-card__title { margin: 0 0 0.35rem 0; font-size: 1.1rem; }
.module-card__desc { margin: 0 0 0.75rem 0; color: #64748b; font-size: 0.92rem; line-height: 1.5; }
.module-card__meta { font-weight: 600; color: #2563eb; }
.module-card__cta { font-size: 0.92rem; }
.module-card--form    { background: rgba(37, 99, 235, 0.05);  border-color: rgba(37, 99, 235, 0.25); }
.module-card--booking { background: rgba(16, 185, 129, 0.05); border-color: rgba(16, 185, 129, 0.25); }
.module-card--product { background: rgba(245, 158, 11, 0.05); border-color: rgba(245, 158, 11, 0.25); }
.module-card--missing { background: rgba(220, 38, 38, 0.05);  border-color: rgba(220, 38, 38, 0.25); }
.module-card__badge {
  position: absolute; top: 6px; right: 10px;
  font-size: 0.7rem; padding: 0.1rem 0.4rem; border-radius: 4px;
  background: rgba(148, 163, 184, 0.2); color: #475569;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── Photo album snippet (CSS-only lightbox via :target) ────────────
 * Used by {{snippet:<slug>}} markers with snippet_type="album".
 * Output structure:
 *   <section class="snippet-album">
 *     <header class="album-header"><h3/><p/></header>
 *     <div class="snippet-album-grid">
 *       <figure class="album-tile"><a href="#album-x-0"><img/></a>
 *         <figcaption class="album-tile__overlay">…</figcaption></figure>
 *       …
 *     </div>
 *     <div class="album-lightbox" id="album-x-0">…</div>
 *     …
 *   </section>
 * Zero JS: clicking a tile jumps to the :target lightbox. Prev/next/close
 * are just fragment links. Sluiten via backdrop, Esc werkt niet (CSS-only)
 * maar de close-knop + achtergrond-klik is genoeg.
 */

.snippet-album { margin: 2rem 0; }
.album-header { margin-bottom: 1rem; }
.album-header h3 { margin: 0 0 0.25rem 0; font-size: 1.4rem; }
.album-header p { margin: 0; color: #64748b; font-size: 0.95rem; }

.snippet-album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.album-tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
  aspect-ratio: 4 / 3;
  background: rgba(148, 163, 184, 0.12);
  transition: transform 0.2s, box-shadow 0.2s;
}
.album-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.18); }
.album-tile__link { display: block; width: 100%; height: 100%; }
.album-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s; }
.album-tile:hover img { transform: scale(1.04); }

.album-tile__overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 12px 12px;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.72) 100%);
  color: #fff;
  font-size: 0.82rem;
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}
.album-tile:hover .album-tile__overlay { opacity: 1; transform: translateY(0); }
.album-tile__caption { font-weight: 600; }
.album-tile__loc { font-size: 0.75rem; opacity: 0.85; }

/* ── Lightbox (CSS :target) ───────────────────────────────────────── */
.album-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(8, 12, 20, 0.93);
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.album-lightbox:target { display: flex; animation: album-fade 0.18s ease-out; }
@keyframes album-fade { from { opacity: 0; } to { opacity: 1; } }
.album-lightbox__backdrop {
  position: absolute; inset: 0;
  background: transparent;
  z-index: 1;
}
.album-lightbox__inner {
  position: relative;
  z-index: 2;
  margin: 0;
  max-width: min(92vw, 1100px);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.album-lightbox__inner img {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.album-lightbox__inner figcaption {
  color: #e2e8f0;
  font-size: 0.92rem;
  text-align: center;
  max-width: 780px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.album-lightbox__caption { font-weight: 600; font-size: 1rem; }
.album-lightbox__loc     { opacity: 0.85; font-size: 0.82rem; }
.album-lightbox__credit  { opacity: 0.65; font-size: 0.75rem; font-style: italic; }

.album-lightbox__close,
.album-lightbox__nav {
  position: absolute;
  z-index: 3;
  color: #fff;
  text-decoration: none;
  user-select: none;
  opacity: 0.82;
  transition: opacity 0.15s, background 0.15s;
}
.album-lightbox__close {
  top: 20px; right: 24px;
  font-size: 2rem;
  line-height: 1;
  padding: 4px 12px;
  border-radius: 24px;
  background: rgba(0, 0, 0, 0.35);
}
.album-lightbox__nav {
  top: 50%; transform: translateY(-50%);
  font-size: 3rem;
  line-height: 1;
  padding: 4px 18px 10px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
}
.album-lightbox__nav--prev { left: 16px; }
.album-lightbox__nav--next { right: 16px; }
.album-lightbox__close:hover,
.album-lightbox__nav:hover { opacity: 1; background: rgba(0, 0, 0, 0.55); }
.album-lightbox__counter {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: #e2e8f0;
  font-size: 0.8rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(0, 0, 0, 0.4);
  padding: 3px 10px;
  border-radius: 12px;
}
.album-lightbox__download {
  position: absolute;
  z-index: 3;
  top: 20px; left: 24px;
  color: #fff;
  text-decoration: none;
  font-size: 1.4rem;
  line-height: 1;
  padding: 6px 12px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0.82;
  transition: opacity 0.15s, background 0.15s;
}
.album-lightbox__download:hover { opacity: 1; background: rgba(0, 0, 0, 0.55); }
.album-lightbox__exif,
.album-lightbox__date {
  display: block;
  font-size: 0.72rem;
  opacity: 0.7;
  margin-top: 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.album-lightbox__tags { display: block; margin-top: 4px; }
.album-lightbox__tag {
  display: inline-block;
  font-size: 0.7rem;
  padding: 1px 8px;
  margin: 2px 3px 0 0;
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
}

/* ── Watermark overlay (optional per album) ── */
.album-tile { position: relative; }
.album-tile__watermark {
  position: absolute;
  bottom: 6px;
  right: 8px;
  z-index: 2;
  pointer-events: none;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  background: rgba(0, 0, 0, 0.25);
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}

.gallery-view__download { margin: 1.5rem 0; text-align: center; }
.gallery-password .form-stack { max-width: 400px; }

@media (max-width: 700px) {
  .album-lightbox__nav { font-size: 2rem; padding: 2px 14px 8px; }
  .album-lightbox__close { font-size: 1.5rem; }
  .snippet-album-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
}

/* ── Gallery module: index card grid ───────────────────────────── */
.gallery-index__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 1.5rem;
}
.gallery-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.gallery-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
  border-color: rgba(37, 99, 235, 0.45);
}
.gallery-card__cover {
  aspect-ratio: 4 / 3;
  background: rgba(148, 163, 184, 0.12);
  overflow: hidden;
}
.gallery-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s;
}
.gallery-card:hover .gallery-card__cover img { transform: scale(1.05); }
.gallery-card__placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem;
  color: rgba(148, 163, 184, 0.6);
}
.gallery-card__body { padding: 14px 16px 18px; }
.gallery-card__body h3 { margin: 0 0 0.35rem 0; font-size: 1.1rem; }
.gallery-card__body p { margin: 0 0 0.5rem 0; font-size: 0.9rem; color: #64748b; line-height: 1.45; }
.gallery-card__meta {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
}

/* Prev/next below a single album */
.gallery-view__nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(148, 163, 184, 0.25);
}

/* ── Timeline snippet (snippet_type="timeline") ─────────────────── */
.snippet-timeline { margin: 2rem 0; }
.snippet-timeline__head { margin-bottom: 1.25rem; }
.snippet-timeline__head h3 { margin: 0 0 0.25rem 0; }
.snippet-timeline__head p { margin: 0; color: #64748b; font-size: 0.95rem; }
.snippet-timeline__list {
  list-style: none;
  padding: 0 0 0 1.5rem;
  margin: 0;
  border-left: 2px solid rgba(148, 163, 184, 0.3);
  position: relative;
}
.snippet-timeline__item {
  position: relative;
  padding: 0.35rem 0 1.1rem 1.25rem;
}
.snippet-timeline__item::before {
  content: "";
  position: absolute;
  left: -1.75rem;
  top: 0.6rem;
  width: 0.6rem;
  height: 0.6rem;
  background: var(--w-primary, #2563eb);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.snippet-timeline__year {
  display: inline-block;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  color: var(--w-primary, #2563eb);
  background: rgba(37, 99, 235, 0.08);
  padding: 2px 8px;
  border-radius: 4px;
  margin-right: 0.5rem;
}
.snippet-timeline__body b { display: block; margin: 0.25rem 0; }
.snippet-timeline__body p { margin: 0; color: #64748b; font-size: 0.92rem; line-height: 1.55; }

/* ── Social share buttons ───────────────────────────────────────── */
.share-bar {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  margin: 2rem 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(148, 163, 184, 0.25);
}
.share-bar__label {
  font-size: 0.82rem;
  color: #64748b;
  margin-right: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.share-bar a, .share-bar button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid rgba(148, 163, 184, 0.4);
  border-radius: 999px;
  background: transparent;
  color: #0f172a;
  text-decoration: none;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.share-bar a:hover, .share-bar button:hover {
  background: rgba(37, 99, 235, 0.08);
  border-color: var(--w-primary, #2563eb);
  transform: translateY(-1px);
}
.share-bar--wa:hover    { background: rgba(37, 211, 102, 0.12); border-color: #25d366; }
.share-bar--ln:hover    { background: rgba(10, 102, 194, 0.12); border-color: #0a66c2; }
.share-bar--x:hover     { background: rgba(15, 23, 42, 0.12); border-color: #0f172a; }
.share-bar--mail:hover  { background: rgba(220, 38, 38, 0.10); border-color: #dc2626; }

/* ── Print styles for route/walk pages ──────────────────────────── */
@media print {
  .site-header, .site-footer, .ml-head, .ml-foot,
  .ml-langs, .share-bar, .nav, .burger, .skip,
  #appearancePanel, .btn-edit-toggle, .btn-appearance-toggle,
  .album-lightbox, .gallery-view__nav {
    display: none !important;
  }
  body, .page-body, .post-body, .gh-article-body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
    line-height: 1.5;
  }
  a { color: #000; text-decoration: underline; }
  /* Show full URL next to external links so the paper version is usable. */
  .page-body a[href^="http"]::after,
  .post-body a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
  h1, h2, h3 { page-break-after: avoid; }
  p, li, blockquote { orphans: 3; widows: 3; }
  img { max-width: 100% !important; page-break-inside: avoid; }
  .block--cta, .block--cols, .module-card { page-break-inside: avoid; }
}

/* ── Full-width embedded map on /kaart ─────────────────────────── */
.kaart-embed {
  position: relative;
  margin: 1.5rem calc(50% - 50vw);
  padding: 0;
  width: 100vw;
  max-width: 100vw;
  height: min(70vh, 720px);
  min-height: 420px;
  background: rgba(148, 163, 184, 0.08);
}

/* Public folder drag-drop upload zone */
.pub-dropzone {
  border: 2px dashed rgba(148, 163, 184, 0.45);
  border-radius: 16px;
  padding: 2.5rem 2rem;
  text-align: center;
  color: var(--color-muted, #64748b);
  background: rgba(148, 163, 184, 0.04);
  transition: border-color .2s, background .2s, transform .15s;
  margin: 1rem 0;
}
.pub-dropzone::before {
  content: '📂';
  display: block;
  font-size: 2.5rem;
  margin-bottom: .75rem;
  opacity: .6;
  transition: opacity .2s, transform .2s;
}
.pub-dropzone p { font-size: .95rem; margin: 0; }
.pub-dropzone--active {
  border-color: var(--color-primary, #2563eb);
  background: rgba(37, 99, 235, 0.08);
  transform: scale(1.01);
}
.pub-dropzone--active::before { content: '⬇️'; opacity: 1; transform: scale(1.2); }
.pub-dropzone__label {
  color: var(--color-primary, #2563eb);
  cursor: pointer;
  text-decoration: none;
  font-weight: 600;
  padding: .3rem .6rem;
  border: 1px solid var(--color-primary, #2563eb);
  border-radius: 6px;
  transition: background .15s, color .15s;
}
.pub-dropzone__label:hover { background: var(--color-primary, #2563eb); color: #fff; }
.pub-dropzone__bar {
  height: 6px;
  background: var(--color-primary, #2563eb);
  border-radius: 3px;
  transition: width .15s;
  margin-top: .75rem;
}
@media (prefers-color-scheme: dark) {
  .pub-dropzone { background: rgba(148, 163, 184, 0.06); border-color: rgba(148, 163, 184, 0.25); }
  .pub-dropzone--active { background: rgba(37, 99, 235, 0.12); }
}
.kaart-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.kaart-embed__wrap {
  max-width: var(--w-container-width, 1200px);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--w-container-gutter, 1.25rem);
  box-sizing: border-box;
}
.kaart-embed__wrap iframe {
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 10px;
}
@media (max-width: 700px) {
  .kaart-embed { height: 60vh; min-height: 320px; margin: 1rem 0; width: 100%; }
  .kaart-embed__wrap { padding: 0; }
  .kaart-embed__wrap iframe { border-radius: 8px; }
}

/* ── Inlined from search.css (consolidatie) ── */
/* ── Shared search overlay ── */
.search-overlay{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);display:grid;place-items:start center;padding-top:18vh}
.search-overlay[hidden]{display:none}
.search-overlay__bar{width:min(560px,90vw);background:rgba(15,20,35,.96);border:1px solid rgba(255,255,255,.15);border-radius:18px;padding:6px;display:flex;align-items:center;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.search-overlay__icon{width:20px;height:20px;margin-left:10px;opacity:.4}
.search-overlay__bar input{flex:1;padding:14px 16px;background:transparent;border:none;outline:none;color:#e8eaf0;font-size:1.1rem;font-weight:600}
.search-overlay__bar input::placeholder{color:rgba(255,255,255,.35)}
.search-overlay__close{padding:10px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:rgba(255,255,255,.5);font-weight:800;font-size:12px;cursor:pointer;white-space:nowrap}
.search-overlay__close:hover{background:rgba(255,255,255,.10)}
.search-overlay__hint{text-align:center;margin-top:10px;font-size:12px;color:rgba(255,255,255,.35);font-weight:700}

/* ── Live search results ── */
.search-results{max-height:320px;overflow-y:auto;margin-top:8px;border-radius:12px}
.search-result-item{display:block;padding:10px 14px;text-decoration:none;color:#e8eaf0;border-bottom:1px solid rgba(128,128,128,.15)}
.search-result-item:hover,.search-result-item:focus,.search-result-item.is-active{background:rgba(128,128,128,.18);outline:none}
.search-result-item strong{display:block;font-size:.95rem}
.search-result-item span{display:block;font-size:.8rem;opacity:.7;margin-top:2px}
.search-no-results{padding:14px;text-align:center;opacity:.6;font-size:.9rem;color:#e8eaf0}

/* ── Sitemap inline search ── */
.sitemap-search{display:flex;gap:8px;margin:0 0 24px;max-width:480px}
.sitemap-search input{flex:1;padding:10px 14px;border:1px solid var(--w-text,#ccc);border-radius:8px;font:inherit;background:var(--w-bg,#fff);color:var(--w-text,#222)}
.sitemap-search input:focus{outline:2px solid var(--w-primary,#2563eb);outline-offset:-1px;border-color:var(--w-primary,#2563eb)}
.sitemap-search button{padding:10px 18px;border:none;border-radius:8px;background:var(--w-primary,#2563eb);color:#fff;font:inherit;font-weight:600;cursor:pointer}
.sitemap-search button:hover{opacity:.85}


/* Theme: Starter — Schoon, minimaal, sans-serif */
body.theme-starter { font-family: var(--w-font); background: var(--w-bg); color: var(--w-text); }
body.theme-starter .site-header { background: var(--w-header-bg); border-bottom: 1px solid var(--w-border); }
body.theme-starter .site-brand { color: var(--w-header-text); }
body.theme-starter .site-nav a { color: var(--w-secondary); }
body.theme-starter .site-nav a:hover { color: var(--w-nav-hover); }
body.theme-starter .site-footer { background: var(--w-footer-bg); color: var(--w-footer-text); border-top: 1px solid var(--w-border); }
body.theme-starter h1, body.theme-starter h2, body.theme-starter h3 { font-family: var(--w-font-heading); }


/* ── Ghost theme — light, matching jan-karel.nl ── */
/* Abbreviations */
abbr[title]{text-decoration:underline dotted;text-decoration-color:var(--accent,#3a6cf4);text-underline-offset:3px;cursor:help}
abbr[title]:hover{text-decoration-style:solid}
html{scroll-behavior:smooth}
html,body{height:100%}
body{
  margin:0;display:flex;flex-direction:column;min-height:100vh;
  font-family:var(--font,'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif);
  background:var(--bg,#fff);
  color:var(--text,#1a1a2e);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent,#1e1f42);text-decoration:none}
a:hover{color:var(--accent2,#3a3b6e)}
img{max-width:100%;height:auto}
#main{flex-grow:1}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.skip{
  position:absolute;left:-999px;top:8px;background:var(--bg,#fff);
  padding:8px 12px;border-radius:var(--radius,8px);border:1px solid var(--border,#e5e7eb);z-index:99
}
.skip:focus{left:16px}

/* ── Header (light, sticky, solid) ── */
.gh-head{
  position:sticky;top:0;z-index:40;
  background:rgba(30,31,66,.6);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.1);
  transition:box-shadow .2s ease,background .2s ease;
}
.gh-head.has-shadow{
  box-shadow:0 2px 12px rgba(0,0,0,.15);
  background:rgba(30,31,66,.75);
}
.gh-head-inner{
  display:flex;align-items:center;
  padding:14px 0;gap:20px;
}
.gh-head-brand{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;color:#fff;
  font-weight:700;font-size:1.1rem;letter-spacing:-.3px;
}
.gh-head-logo{height:36px;border-radius:6px}
.gh-head-nav{display:flex;gap:4px;align-items:center;margin-left:auto}
.gh-head-link{
  color:rgba(255,255,255,.7);font-weight:500;
  padding:8px 14px;border-radius:var(--radius,8px);font-size:.95rem;
  transition:color .15s,background .15s;
}
.gh-head-link:hover{color:#fff;background:rgba(255,255,255,.1)}
.gh-head-link.active{color:#fff;font-weight:600}
.gh-head-link.sub-depth-1{padding-left:16px;font-size:.9rem;opacity:.95}
.gh-head-link.sub-depth-2{padding-left:20px;font-size:.86rem;opacity:.9}
.gh-head-link.sub-depth-3,
.gh-head-link.sub-depth-4,
.gh-head-link.sub-depth-5{padding-left:24px;font-size:.84rem;opacity:.85}
.gh-head-sep{width:1px;height:20px;background:rgba(255,255,255,.2);margin:0 4px;flex-shrink:0}
.gh-head-icon{padding:8px 10px;display:flex;align-items:center;color:rgba(255,255,255,.7)}
.gh-head-icon svg{display:block}
.gh-head-btn{
  display:inline-flex;align-items:center;
  padding:7px 18px;border-radius:var(--radius,8px);font-size:.9rem;font-weight:600;
  background:var(--accent,#1e1f42);color:#fff;
  transition:background .15s,transform .1s;white-space:nowrap;
}
.gh-head-btn:hover{background:#2a2b5e;color:#fff;transform:translateY(-1px)}
.gh-burger{
  display:none;
  border:none;background:none;cursor:pointer;padding:8px;
  color:#fff;
}
.gh-burger{margin-left:auto}
.gh-burger-box{
  width:22px;height:16px;display:flex;flex-direction:column;justify-content:space-between;
}
.gh-burger-box span{
  display:block;width:100%;height:2px;
  background:currentColor;border-radius:1px;
  transition:transform .2s ease, opacity .2s ease;
}
.gh-burger[aria-expanded="true"] .gh-burger-box span:nth-child(1){transform:rotate(45deg) translate(4px,5px)}
.gh-burger[aria-expanded="true"] .gh-burger-box span:nth-child(2){opacity:0}
.gh-burger[aria-expanded="true"] .gh-burger-box span:nth-child(3){transform:rotate(-45deg) translate(4px,-5px)}
.gh-mobile{
  border-top:1px solid rgba(255,255,255,.15);
  background:rgba(30,31,66,.9);padding:12px 0;
}
.gh-mobile .gh-head-link{display:block;padding:10px 0}
.gh-mobile .gh-head-link.sub-depth-1{padding-left:14px}
.gh-mobile .gh-head-link.sub-depth-2{padding-left:22px}
.gh-mobile .gh-head-link.sub-depth-3,
.gh-mobile .gh-head-link.sub-depth-4,
.gh-mobile .gh-head-link.sub-depth-5{padding-left:30px}
.gh-mobile-sep{border:none;border-top:1px solid rgba(255,255,255,.15);margin:8px 0}
.gh-mobile-cta{
  display:inline-block;margin-top:4px;padding:10px 20px;
  background:var(--accent,#1e1f42);color:#fff;border-radius:var(--radius,8px);
  font-weight:600;text-align:center;
}
.gh-mobile-cta:hover{color:#fff;background:#2a2b5e}

/* ── Hero (navy gradient / image background) ── */
.gh-hero{
  position:relative;
  padding:100px 0 80px;
  text-align:center;
  overflow:hidden;
  min-height:400px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.gh-hero-bg{
  position:absolute;inset:0;z-index:0;
  background:linear-gradient(135deg,var(--accent,#1e1f42) 0%,#0d0e2a 100%);
}
/* When a hero image is set, use it as background */
.gh-hero-bg.has-image{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.gh-hero-bg.has-image::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(
    180deg,
    rgba(30,31,66,.4) 0%,
    rgba(13,14,42,.7) 50%,
    rgba(13,14,42,.92) 100%
  );
}
.gh-hero-content{position:relative;z-index:1;color:#fff}
.gh-hero-logo{
  width:100px;height:100px;border-radius:50%;
  object-fit:cover;margin:0 auto 24px;
  border:3px solid rgba(255,255,255,.2);
  box-shadow:0 4px 24px rgba(0,0,0,.3);
}
.gh-hero h1{
  margin:0 0 12px;font-size:2.8rem;
  font-weight:800;letter-spacing:-.5px;
  line-height:1.15;
  text-shadow:0 2px 12px rgba(0,0,0,.3);
}
.gh-hero-desc{
  margin:0 auto 24px;max-width:600px;
  font-size:1.2rem;line-height:1.6;
  opacity:.85;
}
.gh-hero-body{
  max-width:700px;margin:0 auto;
  line-height:1.7;opacity:.8;
}
.gh-hero-body p{margin:0 0 12px}
.gh-hero-count{
  margin-top:20px;font-size:.9rem;opacity:.6;
}

/* ── Cards (light surface, with image support) ── */
.gh-feed{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  padding:48px 0;
}
.gh-card{
  background:var(--surface,#fff);
  border-radius:var(--radius,8px);
  overflow:hidden;
  border:1px solid var(--border,#e5e7eb);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.gh-card:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 30px rgba(0,0,0,.1);
  border-color:var(--accent,#1e1f42);
}
.gh-card-link{display:block;text-decoration:none;color:inherit}
.gh-card-image{
  width:100%;aspect-ratio:16/9;object-fit:cover;
  background:var(--surface,#f3f4f6);display:block;
}
.gh-card-content{padding:20px}
.gh-card-meta{
  display:flex;gap:8px;align-items:center;
  font-size:.85rem;color:var(--muted,#6b7280);margin-bottom:10px;
}
.gh-card-tag{
  display:inline-block;
  padding:3px 10px;border-radius:4px;
  background:var(--accent,#1e1f42);color:#fff;
  font-size:.75rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.6px;
}
.gh-card-title{
  margin:0 0 8px;font-size:1.2rem;font-weight:700;
  letter-spacing:-.2px;line-height:1.35;
  color:var(--text,#1a1a2e);
}
.gh-card-excerpt{
  margin:0;color:var(--muted,#6b7280);line-height:1.55;
  font-size:.92rem;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

/* ── Post / subpage (article view) ── */
.gh-article{max-width:720px;margin:48px auto;padding:0 24px}
.gh-breadcrumb{
  display:flex;gap:6px;align-items:center;
  font-size:.9rem;color:var(--muted,#6b7280);margin-bottom:16px;flex-wrap:wrap;
}
.gh-breadcrumb a{color:var(--accent,#1e1f42)}
.gh-breadcrumb .sep{color:var(--border,#d1d5db)}
.gh-article-header{margin-bottom:32px}
.gh-article-tag{
  display:inline-block;
  padding:3px 10px;border-radius:4px;
  background:var(--accent,#1e1f42);color:#fff;
  font-size:.8rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.5px;
  margin-right:6px;margin-bottom:6px;
}
.gh-article-title{
  font-size:2.4rem;font-weight:800;
  letter-spacing:-.4px;line-height:1.2;
  margin:12px 0 8px;color:var(--text,#1a1a2e);
}
.gh-article-excerpt{
  font-size:1.1rem;color:var(--muted,#6b7280);line-height:1.6;
  margin:0 0 12px;
}
.gh-article-meta{font-size:.9rem;color:var(--muted,#9ca3af)}

/* Featured image for article */
.gh-article-image{
  width:100%;border-radius:var(--radius,8px);
  margin-bottom:32px;aspect-ratio:2/1;
  object-fit:cover;
}

.gh-article-body{
  line-height:1.8;font-size:1.05rem;
  color:var(--text,#374151);
}
.gh-article-body h2{margin:2em 0 .5em;font-size:1.5rem;font-weight:700;color:var(--text,#1a1a2e)}
.gh-article-body h3{margin:1.5em 0 .5em;font-size:1.25rem;font-weight:700;color:var(--text,#1a1a2e)}
.gh-article-body h4{margin:1.2em 0 .4em;font-size:1.1rem;font-weight:600;color:var(--text,#1a1a2e)}
.gh-article-body p{margin:0 0 1.2em}
.gh-article-body img{border-radius:var(--radius,8px)}
.gh-article-body a{color:var(--accent,#1e1f42);text-decoration:underline;text-underline-offset:2px}
.gh-article-body a:hover{color:var(--accent2,#3a3b6e)}
.gh-article-body blockquote{
  border-left:3px solid var(--accent,#1e1f42);
  margin:1.5em 0;padding:.5em 0 .5em 20px;
  color:var(--muted,#6b7280);font-style:italic;
}
.gh-article-body pre{
  background:var(--surface,#f3f4f6);padding:16px;border-radius:var(--radius,8px);
  overflow-x:auto;font-size:.9rem;border:1px solid var(--border,#e5e7eb);
}
.gh-article-body code{
  background:var(--surface,#f3f4f6);padding:2px 6px;border-radius:4px;
  font-size:.9em;color:var(--text,#1a1a2e);
}
.gh-article-body kbd{
  background:var(--surface,#f3f4f6);padding:2px 8px;border-radius:4px;
  font-size:.85em;font-family:inherit;border:1px solid var(--border,#e5e7eb);
  box-shadow:0 1px 0 var(--border,#e5e7eb);
}
.gh-article-body pre code{background:none;padding:0;color:var(--text,#374151)}
.gh-article-body .toc{
  background:var(--surface,#f3f4f6);border:1px solid var(--border,#e5e7eb);
  border-radius:var(--radius,8px);padding:1.5em 2em;margin:1.5em 0;
}
.gh-article-body .toc h3{margin:0 0 .75em;font-size:1.1rem}
.gh-article-body .toc ol{padding-left:1.5em;margin:0}
.gh-article-body .toc li{margin-bottom:.35em;font-size:.95rem}
/* IB / imported content: hero centered, body text left-aligned */
.gh-article-body .hero, .gh-hero-body .hero{text-align:center;padding:1em 0 2em;margin-bottom:1em}
.gh-article-body .hero h1, .gh-hero-body .hero h1{font-size:2rem;margin:0 0 .5em}
.gh-article-body .hero h1 span, .gh-hero-body .hero h1 span{color:var(--accent,#ef4444)}
.gh-article-body .hero .subtitle, .gh-hero-body .hero .subtitle{color:var(--muted,#6b7280);font-size:1.05rem;max-width:600px;margin:0 auto}
.gh-article-body .hero .hero-logo, .gh-hero-body .hero .hero-logo{display:none}
.gh-article-body .container, .gh-hero-body .container{max-width:none;padding:0;margin:0;text-align:left}
.gh-article-body strong, .gh-hero-body strong{color:var(--text,#1a1a2e)}
/* Override hero-body for long-form content: break out of hero styling */
.gh-hero-body{
  text-align:left;max-width:800px;opacity:1;
  background:var(--bg,#fff);color:var(--text,#1a1a2e);
  padding:2rem 2rem 1rem;margin:2rem auto 0;border-radius:12px 12px 0 0;
  position:relative;z-index:2;
  line-height:1.8;font-size:1.05rem;
}
.gh-hero-body h2, .gh-hero-body h3, .gh-hero-body h4{text-align:left;color:var(--text,#1a1a2e);margin:1.8em 0 .5em}
.gh-hero-body h2{font-size:1.5rem;padding-bottom:.35em;border-bottom:1px solid var(--border,#e5e7eb)}
.gh-hero-body h3{font-size:1.25rem}
.gh-hero-body p{text-align:left;margin:0 0 1.2em}
.gh-hero-body ul, .gh-hero-body ol{text-align:left;padding-left:1.5em;margin:0 0 1.2em}
.gh-hero-body li{margin-bottom:.4em;line-height:1.7}
.gh-hero-body a{color:var(--accent,#1e1f42);text-decoration:underline;text-underline-offset:2px}
.gh-hero-body a:hover{color:var(--accent2,#3a3b6e)}
.gh-hero-body pre{text-align:left;background:var(--surface,#f3f4f6);padding:1rem 1.25rem;border-radius:8px;overflow-x:auto;font-size:.88rem;border:1px solid var(--border,#e5e7eb);position:relative}
.gh-hero-body pre code{background:none;padding:0;color:var(--text,#374151)}
.gh-hero-body code{background:var(--surface,#f3f4f6);padding:2px 6px;border-radius:4px;font-size:.88em;color:var(--text,#1a1a2e)}
.gh-hero-body blockquote{text-align:left;border-left:3px solid var(--accent,#1e1f42);margin:1.5em 0;padding:.75em 1.25em;color:var(--muted,#6b7280);font-style:italic;background:var(--surface,#f3f4f6);border-radius:0 8px 8px 0}
.gh-hero-body kbd{background:var(--surface,#f3f4f6);padding:2px 8px;border-radius:4px;font-size:.85em;border:1px solid var(--border,#e5e7eb);box-shadow:0 1px 0 var(--border,#e5e7eb)}
.gh-hero-body strong{color:var(--text,#1a1a2e)}
.gh-hero-body hr{border:none;border-top:1px solid var(--border,#e5e7eb);margin:2em 0}
.gh-hero-body table{width:100%;border-collapse:collapse;margin:1.5em 0;font-size:.93rem}
.gh-hero-body th,.gh-hero-body td{padding:.6em .75em;text-align:left;border-bottom:1px solid var(--border,#e5e7eb)}
.gh-hero-body th{font-weight:600;color:var(--text,#1a1a2e);background:var(--surface,#f3f4f6)}
.gh-hero-body .toc{text-align:left;background:var(--surface,#f3f4f6);border:1px solid var(--border,#e5e7eb);border-radius:8px;padding:1.5em 2em;margin:1.5em 0}
.gh-hero-body .toc h3{margin:0 0 .75em;font-size:1.1rem;color:var(--text,#1a1a2e);border:none;padding:0}
.gh-hero-body .toc ol{padding-left:1.5em;margin:0}
.gh-hero-body .toc li{margin-bottom:.35em;font-size:.95rem}
.gh-hero-body .toc a{color:var(--accent,#1e1f42)}
.gh-hero-body .back-link{display:inline-block;color:var(--accent,#1e1f42);font-size:.9rem;margin-bottom:1em}

/* Homepage body (below hero, outside hero gradient) */
.gh-homepage-body{max-width:800px;margin:2rem auto;padding:0 1rem;line-height:1.8;font-size:1.05rem;color:var(--text,#374151)}
.gh-homepage-body h2{font-size:1.5rem;margin:2em 0 .5em;color:var(--text,#1a1a2e)}
.gh-homepage-body h3{font-size:1.2rem;margin:1.5em 0 .5em;color:var(--text,#1a1a2e)}
.gh-homepage-body p{margin:0 0 1.2em}
.gh-homepage-body a{color:var(--accent,#1e1f42);text-decoration:underline;text-underline-offset:2px}
.gh-homepage-body pre{background:var(--surface,#f3f4f6);padding:1rem;border-radius:8px;overflow-x:auto;font-size:.88rem;border:1px solid var(--border,#e5e7eb)}
.gh-homepage-body code{background:var(--surface,#f3f4f6);padding:2px 6px;border-radius:4px;font-size:.88em}
.gh-homepage-body pre code{background:none;padding:0}
.gh-homepage-body strong{color:var(--text,#1a1a2e)}

/* IB feature cards */
.gh-hero-body .ib-features,.gh-article-body .ib-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin:1.5rem 0}
.gh-hero-body .ib-feature,.gh-article-body .ib-feature{background:var(--surface,#f3f4f6);border:1px solid var(--border,#e5e7eb);border-radius:10px;padding:1.25em;text-align:center}
.gh-hero-body .ib-feature h3,.gh-article-body .ib-feature h3{margin:0 0 .4em;font-size:1.05rem;border:none;padding:0}
.gh-hero-body .ib-feature p,.gh-article-body .ib-feature p{margin:0;font-size:.9rem;color:var(--muted,#6b7280);line-height:1.5}
.gh-article-body pre.sourceCode{position:relative}
.gh-article-body code.sourceCode span a{color:inherit;text-decoration:none}
.gh-article-body code.sourceCode span.co{color:#6b7280}
.gh-article-body code.sourceCode span.st{color:#0f766e}
.gh-article-body code.sourceCode span.kw{color:#be123c}
.gh-article-body code.sourceCode span.fu{color:#7c3aed}
.gh-article-body code.sourceCode span.dv{color:#1d4ed8}
.gh-article-body code.sourceCode span.op{color:var(--text,#374151)}
.gh-article-body code.sourceCode span.dt{color:#b45309}
.gh-article-body code.sourceCode span.va{color:#b45309}
.gh-article-body code.sourceCode span.cf{color:#be123c}
.gh-article-body code.sourceCode span.bu{color:#7c3aed}
.gh-article-body code.sourceCode span.al{color:#dc2626}
.gh-article-body code.sourceCode span.at{color:#b45309}
.gh-article-body code.sourceCode span.ss{color:#0f766e}
.gh-article-body code.sourceCode span.im{color:#be123c}
.gh-article-body code.sourceCode span.cn{color:#1d4ed8}
.gh-article-body code.sourceCode span.sc{color:#0f766e}
.gh-article-body code.sourceCode span.pp{color:#b45309}
.gh-article-body code.sourceCode span.an{color:#6b7280;font-style:italic}
.gh-article-body code.sourceCode span.in{color:#6b7280;font-style:italic}
.gh-article-body code.sourceCode span.do{color:#6b7280;font-style:italic}
.gh-article-body ul,.gh-article-body ol{padding-left:1.5em;margin:0 0 1.2em}
.gh-article-body li{margin-bottom:.4em}
.gh-article-body hr{border:none;border-top:1px solid var(--border,#e5e7eb);margin:2em 0}
.gh-article-body table{width:100%;border-collapse:collapse;margin:1.5em 0}
.gh-article-body th,.gh-article-body td{
  padding:10px 14px;text-align:left;border-bottom:1px solid var(--border,#e5e7eb);
}
.gh-article-body th{font-weight:600;color:var(--text,#1a1a2e)}
.gh-article-actions{
  display:flex;gap:10px;margin-top:32px;padding-top:24px;
  border-top:1px solid var(--border,#e5e7eb);flex-wrap:wrap;
}

/* ── Related posts (children) ── */
.gh-related{margin-top:48px}
.gh-related h2{font-size:1.3rem;font-weight:700;margin:0 0 20px;color:var(--text,#1a1a2e)}
.gh-related .gh-feed{padding:0;gap:24px}

/* ── Tag page hero ── */
.gh-tag-hero{
  padding:48px 0 32px;
  text-align:center;
  border-bottom:1px solid var(--border,#e5e7eb);
}
.gh-tag-hero h1{
  font-size:2rem;font-weight:800;
  letter-spacing:-.3px;margin:0 0 4px;color:var(--text,#1a1a2e);
}
.gh-tag-hero p{color:var(--muted,#6b7280);margin:0}

/* ── Buttons (light theme) ── */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 20px;font-size:.95rem;font-weight:500;
  border-radius:var(--radius,8px);border:none;cursor:pointer;
  color:#fff;background:var(--accent,#1e1f42);
  transition:background .15s,color .15s,transform .1s;text-decoration:none;
}
.btn:hover{background:var(--accent2,#3a3b6e);color:#fff;transform:translateY(-1px)}
.btn-accent{background:var(--accent,#1e1f42);color:#fff}
.btn-accent:hover{background:var(--accent2,#3a3b6e);color:#fff}
.btn-ghost{
  background:transparent;border:1px solid var(--border,#d1d5db);color:var(--muted,#4b5563);
}
.btn-ghost:hover{background:rgba(30,31,66,.04);color:var(--accent,#1e1f42)}

/* ── Contact / Register forms (light) ── */
.gh-form{max-width:640px;margin:48px auto;padding:0 24px}
.gh-form h1{font-size:2rem;font-weight:800;letter-spacing:-.3px;margin:0 0 24px;color:var(--text,#1a1a2e)}
.gh-form-group{margin-bottom:16px}
.gh-form-group label{display:block;font-weight:600;font-size:.9rem;margin-bottom:4px;color:var(--text,#374151)}
.gh-form-input{
  width:100%;padding:10px 14px;
  border:1px solid var(--border,#d1d5db);border-radius:var(--radius,8px);
  font-size:1rem;background:var(--bg,#fff);color:var(--text,#1a1a2e);
  font-family:inherit;transition:border-color .15s;
}
.gh-form-input:focus{outline:none;border-color:var(--accent,#1e1f42);box-shadow:0 0 0 3px rgba(30,31,66,.1)}
textarea.gh-form-input{resize:vertical}
.field-error{color:var(--danger,#dc2626);font-size:.85rem;margin-top:4px}
.cooldown-box{
  background:var(--surface,#f9fafb);border:1px solid var(--border,#e5e7eb);
  border-radius:var(--radius,8px);padding:12px 16px;margin-bottom:20px;
  color:var(--muted,#6b7280);
}

/* ── Footer (dark, matching jan-karel.nl) ── */
.gh-foot{
  border-top:1px solid var(--border,#e5e7eb);
  padding:48px 0 0;margin-top:60px;
  background:#1e1f42;
  color:rgba(255,255,255,.7);
}
.gh-foot-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:32px;padding-bottom:32px;
}
@media(max-width:768px){.gh-foot-grid{grid-template-columns:1fr;gap:24px}}
.gh-foot-col h3{color:#fff;font-size:1rem;font-weight:700;margin:0 0 8px}
.gh-foot-desc{font-size:.85rem;line-height:1.5;margin:0 0 12px;color:rgba(255,255,255,.6)}
.gh-foot-trust{display:flex;gap:8px;flex-wrap:wrap}
.gh-foot-trust span{font-size:.75rem;padding:3px 8px;border:1px solid rgba(255,255,255,.2);border-radius:4px;color:rgba(255,255,255,.5)}
.gh-foot-nav--col{display:flex;flex-direction:column;gap:6px}
.gh-foot-nav--col a{color:rgba(255,255,255,.6);transition:color .15s;font-size:.85rem}
.gh-foot-nav--col a:hover{color:#fff}
.gh-foot-nl{display:flex;gap:8px}
.gh-foot-nl input{flex:1;padding:8px 12px;border:1px solid rgba(255,255,255,.2);border-radius:var(--radius,8px);background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:.85rem}
.gh-foot-nl input::placeholder{color:rgba(255,255,255,.4)}
.gh-foot-nl button{padding:8px 14px;font-size:.85rem}
.gh-foot-bottom{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px;font-size:.8rem;color:rgba(255,255,255,.4);
  padding:16px 0;border-top:1px solid rgba(255,255,255,.1);
}
.gh-foot-nav{display:flex;gap:16px}
.gh-foot-nav a{color:rgba(255,255,255,.4);transition:color .15s;font-size:.8rem}
.gh-foot-nav a:hover{color:#fff}

/* ── Flash / toasts ── */
.gh-toasts-overlay{position:fixed;top:24px;right:24px;z-index:10000;display:flex;flex-direction:column;gap:10px;max-width:400px;width:calc(100% - 48px)}
.gh-toast{
  padding:14px 40px 14px 18px;border-radius:var(--radius,10px);
  border:1px solid var(--border,#e5e7eb);
  background:#fff;color:var(--text,#1a1a2e);
  box-shadow:0 4px 24px rgba(0,0,0,.12);
  font-size:.95rem;line-height:1.4;
  position:relative;
  animation:gh-toast-in .35s ease-out;
}
.gh-toast.is-out{animation:gh-toast-out .3s ease-in forwards}
.gh-toast.success{border-color:#16a34a;background:#f0fdf4;color:#15803d}
.gh-toast.error{border-color:#dc2626;background:#fef2f2;color:#b91c1c}
.gh-toast-close{position:absolute;top:8px;right:10px;background:none;border:none;font-size:1.3rem;cursor:pointer;color:inherit;opacity:.5;line-height:1;padding:4px}
.gh-toast-close:hover{opacity:1}
@keyframes gh-toast-in{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
@keyframes gh-toast-out{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(40px)}}

/* ── Cookie consent banner ── */
/* ── Article product CTA ── */
.gh-product-cta{margin-top:2em;padding:1.5em;background:var(--bg-alt,#f9fafb);border-radius:8px;border:1px solid var(--border,#e5e7eb)}
.gh-product-cta h3{font-size:1rem;font-weight:700;margin:0 0 12px;color:var(--text,#1a1a2e)}
.gh-product-cards{display:grid;gap:10px;margin-bottom:12px}
@media(min-width:640px){.gh-product-cards{grid-template-columns:repeat(3,1fr)}}
.gh-product-card{display:flex;flex-direction:column;gap:4px;padding:12px;border:1px solid var(--border,#e5e7eb);border-radius:8px;background:var(--bg,#fff);text-decoration:none;color:inherit;transition:transform .15s}
.gh-product-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.06)}
.gh-product-card strong{color:var(--text,#1a1a2e)}
.gh-product-price{font-weight:700;color:var(--accent,#1e1f42)}
.gh-product-desc{font-size:.8rem;color:var(--muted,#6b7280);line-height:1.4}

/* ── Newsletter CTA in articles ── */
.gh-nl-cta{margin-top:2em;padding:1.5em;background:linear-gradient(135deg,#1e1f42,#2a2b5e);border-radius:8px;color:#fff;text-align:center}
.gh-nl-cta h3{font-size:1.1rem;font-weight:700;margin:0 0 4px;color:#fff}
.gh-nl-cta p{margin:0 0 12px;color:rgba(255,255,255,.7);font-size:.9rem}
.gh-nl-form{display:flex;gap:8px;justify-content:center;max-width:400px;margin:0 auto}
.gh-nl-form input{flex:1;padding:10px 14px;border:1px solid rgba(255,255,255,.3);border-radius:var(--radius,8px);background:rgba(255,255,255,.1);color:#fff;font:inherit}
.gh-nl-form input::placeholder{color:rgba(255,255,255,.5)}

/* ── Offerte form extras ── */
.gh-form-intro{color:var(--muted,#6b7280);margin:0 0 24px;font-size:1rem;line-height:1.6}
.gh-form-note{color:var(--muted,#6b7280);font-size:.85rem;margin-top:8px}

/* ── Cookie consent banner ── */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:999;background:#1e1f42;color:rgba(255,255,255,.9);padding:16px 0;box-shadow:0 -4px 24px rgba(0,0,0,.15)}
.cookie-banner[hidden]{display:none}
.cookie-banner__inner{max-width:var(--max-w,1200px);margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:space-between}
.cookie-banner__inner p{margin:0;font-size:.9rem;flex:1 1 400px}
.cookie-banner__inner button{white-space:nowrap}

/* ── SM crosslinks ── */
.gh-sm-links{margin:2em 0;padding:20px 24px;background:linear-gradient(135deg,#f0fff4,#e8ffec);border-radius:12px;border-left:4px solid #2d6a4f}
.gh-sm-links h3{margin:0 0 4px;font-size:1.05rem;color:#2d6a4f}
.gh-sm-links>p{margin:0 0 10px;font-size:.9rem;color:var(--muted,#6b7280)}
.gh-sm-links ul{margin:0;padding-left:18px;list-style:disc}
.gh-sm-links li{margin-bottom:4px;font-size:.92rem;line-height:1.5}
.gh-sm-links li a{color:#2d6a4f;font-weight:500}
.gh-sm-links li a:hover{text-decoration:underline}

/* ── Honeypot (off-screen) ── */
.gh-hp{position:absolute;left:-9999px;top:-9999px}

/* ── Empty state ── */
.gh-empty{text-align:center;padding:48px 0;color:var(--muted,#9ca3af)}

/* ── Utility ── */
.mt-sm{margin-top:12px}
.mt-md{margin-top:24px}

/* ── Scroll reveal animation ── */
.reveal{
  opacity:0;transform:translateY(20px);
  transition:opacity .5s ease,transform .5s ease;
}
.reveal.is-visible,.reveal.in-view,.reveal.is-in,.reveal.in{
  opacity:1;transform:translateY(0);
}

/* ── Webshop nav badge ── */
.ws-nav-cart{position:relative}
.ws-badge{
  background:var(--accent,#1e1f42);color:#fff;
  font-size:.7rem;font-weight:700;
  padding:1px 6px;border-radius:10px;
  margin-left:4px;
}

/* ── Sitemap page ── */
.sitemap-search{margin:20px 0;display:flex;gap:8px}
.sitemap-search input{
  flex:1;padding:8px 14px;border:1px solid var(--border,#d1d5db);
  border-radius:var(--radius,8px);background:var(--bg,#fff);
  color:var(--text,#1a1a2e);font-size:.95rem;
}
.sitemap-search button{
  padding:8px 18px;background:var(--accent,#1e1f42);color:#fff;
  border:none;border-radius:var(--radius,8px);cursor:pointer;font-weight:500;
}

/* ── Testimonials (snippet-list) ── */
.snippet-list-testimonial{margin:2.5em 0;padding:0}
.snippet-list-testimonial .snippet-testimonial{
  background:var(--bg,#fff);border:1px solid var(--border,#e5e7eb);
  border-radius:12px;padding:24px 28px;margin:0 0 16px;
  position:relative;
}
.snippet-list-testimonial .snippet-testimonial::before{
  content:"\201C";font-size:3rem;line-height:1;color:var(--accent,#1e1f42);
  opacity:.2;position:absolute;top:12px;left:16px;font-family:Georgia,serif;
}
.snippet-list-testimonial blockquote{
  margin:0;padding:0;font-size:1rem;line-height:1.7;
  color:var(--text,#1a1a2e);font-style:italic;
}
.snippet-list-testimonial figcaption{
  margin-top:12px;font-weight:600;font-size:.9rem;
  color:var(--accent,#1e1f42);
}
.snippet-list-testimonial .snippet-role{
  font-weight:400;color:var(--muted,#6b7280);margin-left:6px;
}
@media(min-width:768px){
  .snippet-list-testimonial{
    display:grid;grid-template-columns:repeat(2,1fr);gap:16px;
  }
  .snippet-list-testimonial .snippet-testimonial{margin:0}
}

/* ── Lead magnet ── */
.gh-lead-magnet{
  margin:1.5em 0;padding:20px 24px;background:var(--bg,#fff);
  border:1px solid var(--border,#e5e7eb);border-radius:12px;
}
.gh-lead-magnet h2{margin:0 0 12px;font-size:1.1rem}
.gh-lead-magnet ul{margin:0;padding-left:20px}
.gh-lead-magnet li{margin-bottom:6px;line-height:1.5}
.gh-lead-form-wrap{
  margin:2em 0;padding:28px;
  background:linear-gradient(135deg,#1e1f42,#2a2b5e);
  border-radius:12px;color:#fff;text-align:center;
}
.gh-lead-form-wrap h2{margin:0 0 8px;color:#fff;font-size:1.2rem}
.gh-lead-form-wrap>p{margin:0 0 16px;color:rgba(255,255,255,.7);font-size:.95rem}
.gh-lead-fields{display:flex;gap:8px;justify-content:center;max-width:420px;margin:0 auto}
.gh-lead-fields input{
  flex:1;padding:10px 14px;border:1px solid rgba(255,255,255,.3);
  border-radius:var(--radius,8px);background:rgba(255,255,255,.1);color:#fff;font:inherit;
}
.gh-lead-fields input::placeholder{color:rgba(255,255,255,.5)}
.gh-lead-form-wrap .gh-form-note{color:rgba(255,255,255,.5);font-size:.8rem;margin-top:10px}

/* ── Responsive ── */
@media(max-width:1000px){
  .gh-feed{grid-template-columns:repeat(2,1fr);gap:24px}
}
@media(max-width:840px){
  .gh-head-nav{display:none}
  .gh-burger{display:block}
  .gh-hero h1{font-size:2.2rem}
  .gh-hero{padding:70px 0 50px;min-height:320px}
  .gh-article-title{font-size:1.7rem}
}
@media(max-width:600px){
  .gh-feed{grid-template-columns:1fr;gap:20px}
  .gh-hero{padding:50px 0 36px;min-height:280px}
  .gh-hero h1{font-size:1.6rem}
  .gh-hero-desc{font-size:1rem}
  .gh-hero-logo{width:72px;height:72px}
  .gh-card-title{font-size:1.1rem}
}

/* ── CAPTCHA modal ── */
.captcha-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);backdrop-filter:blur(4px)}
.captcha-overlay[hidden]{display:none}
.captcha-modal{background:#fff;border-radius:12px;padding:2rem;max-width:380px;width:90%;box-shadow:0 8px 32px rgba(0,0,0,.2);text-align:center}
.captcha-modal h3{margin:0 0 .5rem;font-size:1.15rem;color:#1d1d1f}
.captcha-question{font-size:1.5rem;font-weight:700;margin:.75rem 0;color:#1d1d1f}
.captcha-input{width:120px;text-align:center;font-size:1.25rem;padding:.5rem;border:2px solid #ccc;border-radius:8px;outline:none;margin:0 auto;display:block}
.captcha-input:focus{border-color:var(--accent,#3a6cf4)}
.captcha-error{color:#c0392b;font-size:.9rem;margin:.5rem 0 0}
.captcha-actions{display:flex;gap:.75rem;justify-content:center;margin-top:1.25rem}
.captcha-actions .btn{min-width:110px}

/* -- Floating donate button + modal -- */
.donate-fab{position:fixed;bottom:24px;right:24px;z-index:900;height:44px;padding:0 18px;border-radius:22px;border:none;background:var(--accent,#3a6cf4);color:#fff;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;gap:8px;font-size:.9rem;font-weight:600;font-family:inherit;transition:transform .2s,box-shadow .2s}
.donate-fab:hover{transform:scale(1.05);box-shadow:0 6px 20px rgba(0,0,0,.3)}
.donate-overlay{position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:20px}
.donate-overlay[hidden]{display:none}
.donate-dialog{background:var(--bg,#fff);color:var(--text,#1d1d1f);border-radius:12px;padding:28px 24px;max-width:400px;width:100%;position:relative;box-shadow:0 12px 40px rgba(0,0,0,.2)}
.donate-dialog h3{margin:0 0 8px;font-size:1.2rem}
.donate-dialog p{margin:0 0 16px;font-size:.9rem;color:var(--muted,#666)}
.donate-dialog label{display:block;font-weight:600;font-size:.85rem;margin:12px 0 4px}
.donate-opt{font-weight:400;color:var(--muted,#666)}
.donate-amount-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.donate-preset{padding:6px 14px;border:1px solid var(--border,#e1e1e1);border-radius:6px;background:var(--bg,#fff);color:var(--text,#1d1d1f);cursor:pointer;font-size:.9rem;transition:background .15s,border-color .15s}
.donate-preset:hover,.donate-preset.active{background:var(--accent,#3a6cf4);color:#fff;border-color:var(--accent,#3a6cf4)}
.donate-amount-row input{flex:1;min-width:100px;padding:6px 10px;border:1px solid var(--border,#e1e1e1);border-radius:6px;font-size:.9rem;background:var(--bg,#fff);color:var(--text,#1d1d1f)}
.donate-dialog input[type="text"],.donate-dialog textarea{width:100%;padding:6px 10px;border:1px solid var(--border,#e1e1e1);border-radius:6px;font-size:.9rem;font-family:inherit;background:var(--bg,#fff);color:var(--text,#1d1d1f);box-sizing:border-box}
.donate-submit{width:100%;margin-top:16px;padding:10px;font-size:1rem}
.donate-error{color:#c0392b;font-size:.85rem;margin-top:8px}
.donate-close{position:absolute;top:10px;right:14px;background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--muted,#666);line-height:1}
.donate-close:hover{color:var(--text,#1d1d1f)}
@media print{.donate-fab,.donate-overlay{display:none!important}}
.donate-thanks{max-width:480px;margin:5rem auto;text-align:center;padding:0 20px}
.donate-thanks h1{font-size:1.6rem;margin:0 0 12px}
.donate-thanks-sub{color:var(--muted,#666);font-size:1rem;line-height:1.6;margin:0 0 2rem}
.donate-thanks-icon{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem}
.donate-thanks-icon--success{background:rgba(52,199,89,.1);color:#34c759}
.donate-thanks-icon--cancelled{background:rgba(255,77,79,.08);color:#dc2626}
.donate-thanks-btn{display:inline-block;padding:10px 28px;font-size:1rem}

/* ── Homepage featured conversion cards ── */
.gh-featured{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:2.5rem 0 0}
.gh-featured-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:24px 22px 20px;border:1px solid var(--border,#e5e7eb);border-radius:12px;text-decoration:none;color:var(--text,#1e293b);background:var(--surface,#fff);overflow:hidden;transition:box-shadow .25s,transform .2s}
.gh-featured-card:hover{box-shadow:0 8px 30px rgba(0,0,0,.1);transform:translateY(-4px)}
.gh-featured-accent{position:absolute;top:0;left:0;right:0;height:3px;background:var(--_fc)}
.gh-featured-icon-wrap{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:12px;margin-bottom:14px;background:var(--_fc-bg);color:var(--_fc)}
.gh-featured-title{margin:0 0 6px;font-size:1.05rem;font-weight:800;letter-spacing:-.01em}
.gh-featured-desc{margin:0 0 auto;font-size:.85rem;color:var(--muted,#666);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gh-featured-cta{display:inline-block;margin-top:14px;font-size:.82rem;font-weight:700;color:var(--_fc);transition:transform .2s}
.gh-featured-card:hover .gh-featured-cta{transform:translateX(4px)}
/* Per-card colors via data-color */
.gh-featured-card:nth-child(1){--_fc:#3a6cf4;--_fc-bg:rgba(58,108,244,.1)}
.gh-featured-card:nth-child(2){--_fc:#10b981;--_fc-bg:rgba(16,185,129,.1)}
.gh-featured-card:nth-child(3){--_fc:#f59e0b;--_fc-bg:rgba(245,158,11,.1)}
.gh-featured-card:nth-child(4){--_fc:#8b5cf6;--_fc-bg:rgba(139,92,246,.1)}
.gh-featured-card:nth-child(5){--_fc:#ef4444;--_fc-bg:rgba(239,68,68,.1)}
.gh-featured-card:nth-child(6){--_fc:#06b6d4;--_fc-bg:rgba(6,182,212,.1)}
@media(max-width:1000px){.gh-featured{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.gh-featured{grid-template-columns:1fr;gap:14px}}

/* ── Homepage feed sections ── */
.gh-feed-heading{font-size:1.4rem;font-weight:700;margin:2.5rem 0 0;padding-bottom:.5rem;border-bottom:2px solid var(--accent,#3a6cf4);color:var(--text,#1e293b)}
.gh-feed-heading:first-child{margin-top:1.5rem}
.feed-loader{text-align:center;margin:2rem 0}
.feed-spinner{display:inline-block;width:28px;height:28px;border:3px solid var(--border,#e5e7eb);border-top-color:var(--accent,#3a6cf4);border-radius:50%;animation:feed-spin .6s linear infinite}
@keyframes feed-spin{to{transform:rotate(360deg)}}

/* ── Light mode overrides — ghost theme is dark-by-default; these
   selectors flip header, mobile menu and shadow for [data-theme="light"]
   so white text on dark bars doesn't clash with a white body. ── */
[data-theme="light"] .gh-head{
  background:rgba(255,255,255,.85);
  border-bottom:1px solid rgba(0,0,0,.08);
}
[data-theme="light"] .gh-head.has-shadow{
  background:rgba(255,255,255,.95);
  box-shadow:0 2px 12px rgba(0,0,0,.06);
}
[data-theme="light"] .gh-head-brand{ color:#1a1a2e }
[data-theme="light"] .gh-head-link{ color:#475569 }
[data-theme="light"] .gh-head-link:hover{ color:#0f172a; background:rgba(0,0,0,.04) }
[data-theme="light"] .gh-head-link.active{ color:#0f172a }
[data-theme="light"] .gh-head-sep{ background:rgba(0,0,0,.12) }
[data-theme="light"] .gh-head-icon{ color:rgba(15,23,42,.7) }
[data-theme="light"] .gh-mobile{
  border-top:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.95);
}
[data-theme="light"] .gh-mobile-sep{ border-top-color:rgba(0,0,0,.08) }

/* ── Layout-fix pass ──
   1. Article-card excerpt + meta contrast (was 2.45 in light, 3.81 in dark);
      bump to AA-compliant slate tones in both modes.
   2. Light-mode footer override: ghost footer was hard-coded dark navy,
      which clashed with a light body. Lift to a soft slate when
      [data-theme="light"] is set.
   3. Hero padding moderation: 100/80px → 72/56px reduces the empty
      whitespace dome above the (already minimal) hero copy.
   4. Section-rhythm: explicit border between hero and feed so the
      transition doesn't read as a hard cut.
*/
.gh-card-excerpt,
.gh-card-meta{ color:#475569 }
[data-theme="dark"] .gh-card-excerpt,
[data-theme="dark"] .gh-card-meta{ color:#cbd5e1 }

[data-theme="light"] .gh-foot{
  background:#f8fafc;
  color:#475569;
  border-top:1px solid rgba(0,0,0,.08);
}
[data-theme="light"] .gh-foot-col h3{ color:#0f172a }
[data-theme="light"] .gh-foot-desc{ color:#475569 }
[data-theme="light"] .gh-foot-trust span{
  border-color:rgba(0,0,0,.12);
  color:#475569;
}
[data-theme="light"] .gh-foot-nav--col a,
[data-theme="light"] .gh-foot-nav a{ color:#475569 }
[data-theme="light"] .gh-foot-nav--col a:hover,
[data-theme="light"] .gh-foot-nav a:hover{ color:#0f172a }
[data-theme="light"] .gh-foot-bottom{
  color:#64748b;
  border-top-color:rgba(0,0,0,.06);
}
[data-theme="light"] .gh-foot-nl input{
  background:#fff;
  border-color:rgba(0,0,0,.12);
  color:#0f172a;
}
[data-theme="light"] .gh-foot-nl input::placeholder{ color:#94a3b8 }

.gh-hero{ padding:72px 0 56px; min-height:340px }
@media(max-width:768px){ .gh-hero{ padding:56px 0 40px; min-height:280px } }

/* Hard cut between hero and content feed feels jarring.
   Add a 1px subtle separator that follows the theme. */
.gh-hero + .container,
.gh-hero + #homeFeed,
.gh-hero + main,
.gh-hero ~ #homeFeed:first-of-type{
  position:relative;
}

/* ─────────────────────────────────────────────────────────────────
   Designer-pass: typografische schaal, sub-font, featured card,
   hover-states, CTA-band, section-rhythm en secondary accent.
   Exec-overzicht in commit-message.
   ───────────────────────────────────────────────────────────────── */

/* Schaal — modular, één bron van waarheid voor heading- en body-sizes.
   Mobile-first met clamp() voor vloeiende schaling op breed scherm. */
:root,
[data-theme="light"],
[data-theme="dark"]{
  --gh-fs-12: 0.75rem;
  --gh-fs-14: 0.875rem;
  --gh-fs-16: 1rem;
  --gh-fs-18: 1.125rem;
  --gh-fs-24: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --gh-fs-32: clamp(1.6rem, 1.3rem + 1.2vw, 2rem);
  --gh-fs-48: clamp(2.2rem, 1.6rem + 2.6vw, 3rem);

  --gh-section-y: clamp(56px, 7vw, 96px);
  --gh-accent2: #06b6d4;  /* cyan — security/scan-vibe naast --accent */
}

/* Heading-normalisatie — vervang ad-hoc per-component sizes.
   Specifity beats `body.theme-X h1/h2/h3` rules from the theme-CSS by
   compounding two body classes: `body[class*="theme-"]` (attribute
   selector + element) gives (0,1,1) which after cascade-order beats
   the theme rule. */
body[class*="theme-"] .gh-card-title,
body[class*="theme-"] .gh-section-title,
body[class*="theme-"] .gh-article-title,
body[class*="theme-"] .gh-feed-heading,
body[class*="theme-"] .gh-foot-col h3,
body[class*="theme-"] .gh-cta-band-title{
  font-family: var(--font-serif, Georgia, "Times New Roman", serif);
  letter-spacing: -0.015em;
}
body[class*="theme-"] .gh-hero h1,
body[class*="theme-"] main h1,
body[class*="theme-"] .gh-article-title{
  font-family: var(--font-serif, Georgia, "Times New Roman", serif);
  font-size: var(--gh-fs-48);
  line-height: 1.1;
  font-weight: 800;
}
body[class*="theme-"] main h2,
body[class*="theme-"] .gh-section-title,
body[class*="theme-"] .gh-feed-heading,
body[class*="theme-"] .gh-cta-band-title{
  font-family: var(--font-serif, Georgia, "Times New Roman", serif);
  font-size: var(--gh-fs-32);
  line-height: 1.2;
  font-weight: 700;
}
body[class*="theme-"] main h3,
body[class*="theme-"] .gh-card-title{
  font-family: var(--font-serif, Georgia, "Times New Roman", serif);
  font-size: var(--gh-fs-24);
  line-height: 1.3;
  font-weight: 700;
}
.gh-card-excerpt,
.gh-article-body p,
.gh-hero-desc{
  font-size: var(--gh-fs-18);
  line-height: 1.6;
}
.gh-card-meta,
.gh-article-meta{ font-size: var(--gh-fs-14) }
.gh-foot-bottom{ font-size: var(--gh-fs-12) }

/* Section-rhythm — uniform top/bottom padding zodat secties op één
   ritme ademen ipv elke component zijn eigen offset. */
main > section,
main > .gh-feed,
main > #homeFeed,
.gh-cta-band{ padding-top: var(--gh-section-y); padding-bottom: var(--gh-section-y) }
.gh-hero{ padding-top: calc(var(--gh-section-y) - 8px); padding-bottom: var(--gh-section-y) }

/* ── Card hover-states (was: niets) ──
   Subtiele elevatie + accent-tint border zodat er feedback is op aanwijzen. */
.gh-card{ transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease }
.gh-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,.10);
}
[data-theme="light"] .gh-card{ border:1px solid rgba(0,0,0,.06) }
[data-theme="light"] .gh-card:hover{ border-color: rgba(37,99,235,.30) }
[data-theme="dark"] .gh-card:hover{ box-shadow: 0 12px 32px rgba(0,0,0,.45) }

/* ── Featured card ──
   Eerste card in feed: 2 kolommen breed met grotere image — breekt het
   monotone 3×n grid en geeft een visuele entry-point. */
.gh-feed{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px }
.gh-feed > article:first-child{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: stretch;
  min-height: 320px;
}
.gh-feed > article:first-child .gh-card-link{
  display: contents;
}
.gh-feed > article:first-child .gh-card-image{
  height: 100%;
  min-height: 320px;
  object-fit: cover;
}
.gh-feed > article:first-child .gh-card-content{
  padding: clamp(20px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.gh-feed > article:first-child .gh-card-title{ font-size: var(--gh-fs-32) }
.gh-feed > article:first-child .gh-card-excerpt{ -webkit-line-clamp: 4 }
@media (max-width: 900px){
  .gh-feed{ grid-template-columns: repeat(2, 1fr) }
  .gh-feed > article:first-child{ grid-column: 1 / -1; grid-template-columns: 1fr; min-height: auto }
  .gh-feed > article:first-child .gh-card-image{ min-height: 220px }
}
@media (max-width: 600px){
  .gh-feed{ grid-template-columns: 1fr }
}

/* ── CTA-band ── voor footer */
.gh-cta-band{
  margin-top: clamp(40px, 6vw, 80px);
  border-top: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
  background:
    radial-gradient(600px 280px at 10% -10%, rgba(37,99,235,.06), transparent 60%),
    radial-gradient(500px 240px at 110% 110%, rgba(6,182,212,.06), transparent 60%),
    #f8fafc;
}
[data-theme="dark"] .gh-cta-band{
  background:
    radial-gradient(600px 280px at 10% -10%, rgba(37,99,235,.18), transparent 60%),
    radial-gradient(500px 240px at 110% 110%, rgba(6,182,212,.16), transparent 60%),
    #0f172a;
  border-top-color: rgba(255,255,255,.08);
  border-bottom-color: rgba(255,255,255,.08);
}
.gh-cta-band-inner{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}
.gh-cta-band-eyebrow{
  margin: 0 0 6px;
  font-size: var(--gh-fs-14);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--accent, #2563eb);
}
.gh-cta-band-title{
  margin: 0 0 8px;
  font-family: var(--font-serif, Georgia, serif);
  font-size: var(--gh-fs-32);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text, #0f172a);
}
[data-theme="dark"] .gh-cta-band-title{ color: #f1f5f9 }
.gh-cta-band-desc{
  margin: 0;
  font-size: var(--gh-fs-18);
  line-height: 1.5;
  color: var(--muted, #475569);
  max-width: 56ch;
}
[data-theme="dark"] .gh-cta-band-desc{ color: #cbd5e1 }
.gh-cta-band-btn{
  white-space: nowrap;
  padding: 14px 24px;
  border-radius: 999px;
  background: var(--accent, #2563eb);
  color: #fff !important;
  font-weight: 600;
  font-size: var(--gh-fs-16);
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(37,99,235,.25);
  transition: transform .15s ease, box-shadow .15s ease;
  display: inline-flex; align-items: center; gap: 8px;
}
.gh-cta-band-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(37,99,235,.35);
}
@media (max-width: 700px){
  .gh-cta-band-inner{ grid-template-columns: 1fr; gap: 24px }
  .gh-cta-band-btn{ width: 100% ; justify-content: center }
}

/* ── Brand-monogram ── compact JK-mark links naast de tekstuele naam */
.gh-head-brand{ gap: 10px; align-items: center; display: inline-flex }
.gh-head-brand::before{
  content: "JK";
  width: 32px; height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent, #2563eb) 0%, var(--gh-accent2, #06b6d4) 100%);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif, Georgia, serif);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.15);
}

/* Reveal-trigger — als JS-observer ontbreekt, gewoon zichtbaar maken
   ipv permanent opacity:0. Voorkomt onzichtbare content bij JS-falen. */
.reveal:not(.is-visible):not(.in-view):not(.is-in):not(.in){
  opacity: 1;
  transform: none;
}

/* ─────────────────────────────────────────────────────────────────
   Designer-pass v2: hero asymmetrisch + CTA, hero terminal-aside,
   footer dark-link AA, social icons, mobile-nav hidden a11y.
   ───────────────────────────────────────────────────────────────── */

/* ── Hero (homepage) — asymmetrisch met copy links + terminal-aside rechts ── */
.gh-hero--home .gh-hero-grid{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
  text-align: left;
}
.gh-hero--home .gh-hero-logo{ margin: 0 0 18px }
.gh-hero--home h1{ text-align: left; max-width: 14ch }
.gh-hero--home .gh-hero-desc{ margin-left: 0; margin-right: 0; max-width: 50ch; text-align: left }
.gh-hero-cta{ display: inline-flex; align-items: center; gap: 18px; margin-top: 26px; flex-wrap: wrap }
.gh-hero-btn{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 24px; border-radius: 999px;
  background: var(--accent, #2563eb); color: #fff !important;
  font-weight: 600; font-size: 1rem; text-decoration: none;
  box-shadow: 0 8px 22px rgba(37,99,235,.30);
  transition: transform .15s ease, box-shadow .15s ease;
}
.gh-hero-btn:hover{ transform: translateY(-1px); box-shadow: 0 12px 30px rgba(37,99,235,.42) }
.gh-hero--home .gh-hero-count{
  font-size: var(--gh-fs-14); opacity: .8;
}

/* Terminal aside */
.gh-hero-aside{
  background: rgba(15,23,42,.55);
  border: 1px solid rgba(110,231,255,.18);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.40), 0 0 0 1px rgba(110,231,255,.04) inset;
  backdrop-filter: blur(6px);
  padding: 18px 22px;
  font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  line-height: 1.7;
  color: #d1fae5;
  max-width: 560px;
}
.gh-hero-prompt{ margin: 0; white-space: pre-wrap; word-break: break-word }
.gh-hero-prompt-line{ display: block }
.gh-hero-prompt-sigil{ color: #6ee7ff; margin-right: 6px }
.gh-hero-prompt-out{ color: rgba(229,231,235,.78) }
.gh-hero-prompt-cursor{
  display: inline-block; width: 8px; background: #6ee7ff;
  animation: gh-blink 1.1s steps(2, start) infinite;
  color: transparent;
}
@keyframes gh-blink{ 50%{ background: transparent } }
@media (max-width: 900px){
  .gh-hero--home .gh-hero-grid{ grid-template-columns: 1fr; gap: 32px; text-align: center }
  .gh-hero--home h1{ max-width: none; text-align: center }
  .gh-hero--home .gh-hero-desc{ margin: 0 auto; text-align: center }
  .gh-hero-cta{ justify-content: center }
  .gh-hero-aside{ max-width: 100%; text-align: left }
}

/* ── Footer: dark-mode nav-link contrast lift naar AA ── */
[data-theme="dark"] .gh-foot-nav--col a,
[data-theme="dark"] .gh-foot-nav a{ color: #93c5fd }
[data-theme="dark"] .gh-foot-nav--col a:hover,
[data-theme="dark"] .gh-foot-nav a:hover{ color: #dbeafe }

/* ── Social icons — gradient round pills, theme-aware. ── */
.gh-foot-social{ display: inline-flex; gap: 8px; margin-top: 12px }
.gh-foot-social a{
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.85);
  transition: transform .15s ease, background .15s ease, color .15s ease;
  text-decoration: none;
}
.gh-foot-social a:hover{
  transform: translateY(-1px);
  background: linear-gradient(135deg, var(--accent, #2563eb) 0%, var(--gh-accent2, #06b6d4) 100%);
  color: #fff;
}
[data-theme="light"] .gh-foot-social a{
  background: rgba(0,0,0,.05);
  color: #475569;
}
[data-theme="light"] .gh-foot-social a:hover{
  color: #fff;
}

/* ── Featured-card subtle variation: accent-eyebrow op de eerste card ── */
.gh-feed > article:first-child .gh-card-meta::before{
  content: "Uitgelicht";
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent, #2563eb) 0%, var(--gh-accent2, #06b6d4) 100%);
  color: #fff;
  font-size: var(--gh-fs-12);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-right: 8px;
}

/* ── Homepage CMS-injected sections (pricing tiles + testimonial quotes) ── */
.home-section{ margin: clamp(48px, 6vw, 88px) 0 }
.home-section .lead{ font-size: var(--gh-fs-18); max-width: 60ch; margin: 0 0 28px; color: var(--muted, #475569) }
[data-theme="dark"] .home-section .lead{ color: #cbd5e1 }

.home-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px }
@media (max-width: 900px){ .home-grid{ grid-template-columns: 1fr 1fr } }
@media (max-width: 600px){ .home-grid{ grid-template-columns: 1fr } }

.home-tile{
  padding: 28px 24px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  background: #fff;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.home-tile:hover{ transform: translateY(-3px); box-shadow: 0 14px 36px rgba(0,0,0,.08); border-color: rgba(37,99,235,.30) }
[data-theme="dark"] .home-tile{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}
[data-theme="dark"] .home-tile:hover{
  border-color: rgba(110,231,255,.25);
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
}
.home-tile h3{
  margin: 0;
  font-family: var(--font-serif, Georgia, serif);
  font-size: var(--gh-fs-24);
  font-weight: 800;
  color: var(--text, #0f172a);
}
[data-theme="dark"] .home-tile h3{ color: #f1f5f9 }
.home-tile-meta{
  margin: 0;
  font-size: var(--gh-fs-14);
  color: var(--accent, #2563eb);
  font-weight: 600;
}
.home-tile p{ margin: 0; font-size: var(--gh-fs-16); line-height: 1.55; color: #475569 }
[data-theme="dark"] .home-tile p{ color: #cbd5e1 }
.home-tile-price{ margin-top: auto !important; padding-top: 12px; border-top: 1px dashed rgba(0,0,0,.10); font-size: var(--gh-fs-14) }
[data-theme="dark"] .home-tile-price{ border-top-color: rgba(255,255,255,.10) }
.home-tile--featured{
  background: linear-gradient(155deg, rgba(37,99,235,.05) 0%, rgba(6,182,212,.05) 100%);
  border-color: rgba(37,99,235,.25);
  position: relative;
}
.home-tile--featured::before{
  content: "Meest gekozen";
  position: absolute; top: -10px; right: 18px;
  padding: 4px 10px; border-radius: 999px;
  background: linear-gradient(135deg, var(--accent, #2563eb), var(--gh-accent2, #06b6d4));
  color: #fff; font-size: var(--gh-fs-12); font-weight: 700;
  letter-spacing: 0.04em;
}
[data-theme="dark"] .home-tile--featured{
  background: linear-gradient(155deg, rgba(37,99,235,.18) 0%, rgba(6,182,212,.14) 100%);
}

/* Testimonials */
.home-quotes{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px }
@media (max-width: 900px){ .home-quotes{ grid-template-columns: 1fr } }
.home-quote{
  margin: 0;
  padding: 24px 22px;
  border-left: 3px solid var(--accent, #2563eb);
  background: #f8fafc;
  border-radius: 0 12px 12px 0;
  font-style: italic;
}
[data-theme="dark"] .home-quote{
  background: rgba(255,255,255,.04);
  border-left-color: var(--gh-accent2, #06b6d4);
}
.home-quote p{ margin: 0 0 12px; font-size: var(--gh-fs-18); line-height: 1.5; color: var(--text, #0f172a) }
[data-theme="dark"] .home-quote p{ color: #f1f5f9 }
.home-quote cite{ font-style: normal; font-size: var(--gh-fs-14); color: #475569; font-weight: 600 }
[data-theme="dark"] .home-quote cite{ color: #cbd5e1 }