/*
 * TVR Kenniscentrum — Gutenberg-opmaak
 * ------------------------------------------------------------------
 * Erft de typografie/kleuren van het thema (Montserrat 16px/1.5,
 * koppen #1e2022, Bootstrap-spacing) en voegt alléén toe wat ontbreekt:
 * de leeskolom, de artikel-hero met meta, en de opmaak-toolkit.
 * Strikt gescoped op de `blog`/kenniscentrum-CPT (`.single-blog`).
 */

/* ---- 1. Tokens (kleur + layout; typografie komt uit het thema) ------ */
.single-blog {
  --kc-head: #1e2022;        /* thema heading-kleur */
  --kc-muted: #677788;
  --kc-navy: #001d4d;
  --kc-navy-700: #0a2d63;
  --kc-slate: #71869d;
  --kc-green: #00b900;
  --kc-green-700: #009d00;
  --kc-amber: #e6a700;
  --kc-line: #e7eaf3;
  --kc-surface: #f7faff;
  --kc-surface-2: #eef3fb;

  --kc-content: 820px;
  --kc-wide: 1080px;
  --kc-pad: 20px;
  --kc-radius: 12px;
  --kc-shadow: 0 18px 40px -24px rgba(0, 29, 77, .35);
}

/* ---- 2. Leeskolom & breedte-per-blok -------------------------------- */
.single-blog .e-content.is-layout-constrained > * {
  max-width: var(--kc-content);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--kc-pad);
  padding-right: var(--kc-pad);
}
.single-blog .e-content.is-layout-constrained > .alignwide { max-width: var(--kc-wide); }
.single-blog .e-content.is-layout-constrained > .alignfull { max-width: none; padding-left: 0; padding-right: 0; }

/* ---- 3. Typografie-aanvullingen (rest erft het thema) --------------- */
/* Intro/lead = eerste paragraaf */
.single-blog .e-content.is-layout-constrained > p:first-of-type {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: #33425a;
  font-weight: 500;
  margin-bottom: 1.25rem;
}
/* Ritme: lucht boven secties (thema-koppen hebben margin-top:0) */
.single-blog .e-content h2 { margin-top: 2.25rem; }
.single-blog .e-content h3 { margin-top: 1.75rem; }
.single-blog .e-content h2:first-child,
.single-blog .e-content h3:first-child { margin-top: 0; }
/* Links: thema-kleur, met onderstreping voor leesbaarheid */
.single-blog .e-content a:not(.wp-element-button) { text-decoration: underline; text-underline-offset: 2px; }
/* Lijsten: duidelijk inspringen t.o.v. de bodytekst (leespadding + indent). */
.single-blog .e-content :where(ul, ol):not([class*="is-style-tvr"]) {
  padding-left: calc(var(--kc-pad) + 1.75rem);
  margin: 0 0 1.3rem;
  list-style-position: outside;
}
.single-blog .e-content :where(ul):not([class*="is-style-tvr"]) { list-style-type: disc; }
.single-blog .e-content :where(ol):not([class*="is-style-tvr"]) { list-style-type: decimal; }
.single-blog .e-content li { margin-bottom: .35rem; padding-left: .25rem; }
.single-blog .e-content li::marker { color: var(--kc-green); }
/* geneste lijsten */
.single-blog .e-content li > :where(ul, ol) { margin: .4rem 0 .4rem; padding-left: 1.5rem; }

/* Citaat (merk-accent) */
.single-blog .e-content blockquote:not([class*="is-style"]) {
  border-left: 4px solid var(--kc-green);
  margin: 2rem 0;
  padding: .2rem 0 .2rem 1.5rem;
  color: var(--kc-head);
}
.single-blog .e-content blockquote cite { color: var(--kc-muted); font-size: .9rem; font-style: normal; }

/* ---- 4. Media ------------------------------------------------------- */
.single-blog .e-content img { max-width: 100%; height: auto; }
.single-blog .e-content .wp-block-image { margin: 2rem 0; }
.single-blog .e-content .wp-block-image img { border-radius: var(--kc-radius); box-shadow: var(--kc-shadow); }
.single-blog .e-content figure figcaption { margin-top: .6em; font-size: .875rem; color: var(--kc-muted); text-align: center; }
/* Galerij (eigen grid; dit thema laadt de core gallery-CSS niet) */
.single-blog .e-content .wp-block-gallery.has-nested-images { display: flex; flex-wrap: wrap; gap: 14px; margin: 2rem 0; }
.single-blog .e-content .wp-block-gallery.has-nested-images .wp-block-image { margin: 0; }
.single-blog .e-content .wp-block-gallery.has-nested-images:not([class*="columns-"]) .wp-block-image { width: calc(50% - 7px); }
.single-blog .e-content .wp-block-gallery.columns-2.has-nested-images .wp-block-image { width: calc(50% - 7px); }
.single-blog .e-content .wp-block-gallery.columns-3.has-nested-images .wp-block-image { width: calc(33.333% - 9.34px); }
.single-blog .e-content .wp-block-gallery.columns-4.has-nested-images .wp-block-image { width: calc(25% - 10.5px); }
.single-blog .e-content .wp-block-gallery.has-nested-images .wp-block-image img { width: 100%; border-radius: 10px; display: block; }
.single-blog .e-content .wp-block-gallery.is-cropped .wp-block-image img { aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 600px) {
  .single-blog .e-content .wp-block-gallery.has-nested-images .wp-block-image { width: calc(50% - 7px); }
}

/* Afbeelding + tekst (eigen grid) */
.single-blog .e-content .wp-block-media-text { display: grid; grid-template-columns: 50% 1fr; gap: 0 28px; align-items: center; margin: 2rem 0; }
.single-blog .e-content .wp-block-media-text.has-media-on-the-right { grid-template-columns: 1fr 50%; }
.single-blog .e-content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media { order: 2; }
.single-blog .e-content .wp-block-media-text__media img { width: 100%; height: auto; border-radius: var(--kc-radius); display: block; }
.single-blog .e-content .wp-block-media-text__content > :first-child { margin-top: 0; }
@media (max-width: 600px) {
  .single-blog .e-content .wp-block-media-text { grid-template-columns: 1fr; gap: 1rem; }
}

/* Knoppen-rij */
.single-blog .e-content .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.single-blog .e-content figure.wp-block-embed { margin: 2rem 0; }
.single-blog .e-content figure.wp-block-embed iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: var(--kc-radius); }

/* ---- 5. Tabel & code (core-blocks krijgen geen thema-styling) ------- */
.single-blog .e-content .wp-block-table { margin: 2rem 0; }
.single-blog .e-content .wp-block-table table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--kc-line); border-radius: var(--kc-radius); overflow: hidden;
}
.single-blog .e-content .wp-block-table th,
.single-blog .e-content .wp-block-table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--kc-line); }
.single-blog .e-content .wp-block-table thead th { background: var(--kc-navy); color: #fff; font-weight: 600; }
.single-blog .e-content .wp-block-table tbody tr:nth-child(even) { background: var(--kc-surface); }
.single-blog .e-content .wp-block-table tbody tr:last-child td { border-bottom: 0; }
.single-blog .e-content pre,
.single-blog .e-content .wp-block-code {
  background: var(--kc-surface); border: 1px solid var(--kc-line); border-radius: var(--kc-radius);
  padding: 1rem 1.25rem; margin: 1.5rem 0; overflow: auto; font-size: .9375rem; line-height: 1.5;
}
.single-blog .e-content .wp-block-separator { border: 0; border-top: 1px solid var(--kc-line); margin: 2.25rem auto; }

/* ---- 6. Kenniscentrum-hero (Optie 2: navy-band + golf) -------------- */
.single-blog .kc-hero { position: relative; background: var(--kc-navy); }
/* Inhoud lijnt uit met de leeskolom (820px) van de content eronder. */
.single-blog .kc-hero__inner { max-width: var(--kc-content); margin: 0 auto; padding: 130px var(--kc-pad) 96px; position: relative; z-index: 2; }

.single-blog .kc-crumbs { margin-bottom: 1rem; font-size: .85rem; }
.single-blog .kc-crumbs,
.single-blog .kc-crumbs a,
.single-blog .kc-crumbs span { color: #9fb0c9 !important; }
.single-blog .kc-crumbs a:hover { color: #fff !important; }

.single-blog .kc-pill {
  display: inline-block; background: rgba(255, 255, 255, .12); color: #fff;
  font-weight: 700; font-size: .75rem; letter-spacing: .4px; text-transform: uppercase;
  padding: .42em .9em; border-radius: 50rem; margin-bottom: 1rem;
}
.single-blog .kc-title { color: #fff; margin: 0 0 .7rem; max-width: 24ch; }
.single-blog .kc-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; color: #aebcd4; font-size: .9rem; align-items: center; }
.single-blog .kc-meta__author { display: inline-flex; align-items: center; }
.single-blog .kc-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #2b6fb3, #2f9fb8); margin-right: 8px; }
.single-blog .kc-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .5; }

/* De golf onderaan de navy-band → wit. */
.single-blog .kc-hero__wave { position: absolute; left: 0; right: 0; bottom: -1px; line-height: 0; z-index: 1; }
.single-blog .kc-hero__wave svg { width: 100%; height: 72px; display: block; }

@media (max-width: 991.98px) {
  .single-blog .kc-hero__inner { padding-top: 92px; padding-bottom: 80px; }
}

/* ---- 7. Artikel-kolom ---------------------------------------------- */
.single-blog .kc-article { padding-top: 1.5rem; }

/* ==================================================================== */
/* Opmaak-toolkit (block-styles)                                        */
/* ==================================================================== */

/* Knoppen on-brand */
.single-blog .e-content .wp-block-button__link { background: var(--kc-green); color: #fff; border-radius: 50rem; padding: .55rem 1.5rem; font-weight: 600; }
.single-blog .e-content .wp-block-button__link:hover { background: var(--kc-green-700); color: #fff; }
.single-blog .e-content .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--kc-navy); border: 1.5px solid var(--kc-navy); }

/* Callout / Let op / Goed om te weten */
.single-blog .e-content .is-style-tvr-callout,
.single-blog .e-content .is-style-tvr-warning,
.single-blog .e-content .is-style-tvr-info {
  position: relative; border: 1px solid var(--kc-line); border-left-width: 4px;
  border-radius: var(--kc-radius); padding: 16px 20px 16px 62px; margin: 1.5rem 0; background: var(--kc-surface);
}
.single-blog .e-content .is-style-tvr-callout::before,
.single-blog .e-content .is-style-tvr-warning::before,
.single-blog .e-content .is-style-tvr-info::before {
  position: absolute; left: 16px; top: 16px; width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; line-height: 1;
}
.single-blog .e-content .is-style-tvr-callout { border-left-color: var(--kc-green); }
.single-blog .e-content .is-style-tvr-callout::before { content: "\2605"; background: rgba(0, 185, 0, .12); color: var(--kc-green); }
.single-blog .e-content .is-style-tvr-warning { border-left-color: var(--kc-amber); background: #fff8e6; }
.single-blog .e-content .is-style-tvr-warning::before { content: "!"; background: rgba(230, 167, 0, .16); color: var(--kc-amber); }
.single-blog .e-content .is-style-tvr-info { border-left-color: var(--kc-navy); background: var(--kc-surface-2); }
.single-blog .e-content .is-style-tvr-info::before { content: "i"; background: rgba(0, 29, 77, .1); color: var(--kc-navy); font-family: Georgia, serif; font-style: italic; }
.single-blog .e-content [class*="is-style-tvr-callout"] > :first-child,
.single-blog .e-content [class*="is-style-tvr-warning"] > :first-child,
.single-blog .e-content [class*="is-style-tvr-info"] > :first-child { margin-top: 0; }
.single-blog .e-content .is-style-tvr-callout p:last-child,
.single-blog .e-content .is-style-tvr-warning p:last-child,
.single-blog .e-content .is-style-tvr-info p:last-child { margin-bottom: 0; }

/* Key takeaway */
.single-blog .e-content .is-style-tvr-takeaway { background: var(--kc-navy); color: #fff; border-radius: var(--kc-radius); padding: 20px 24px; margin: 1.5rem 0; box-shadow: var(--kc-shadow); }
.single-blog .e-content .is-style-tvr-takeaway :is(h2, h3, h4, p, li, strong) { color: #fff; }
.single-blog .e-content .is-style-tvr-takeaway > :first-child { margin-top: 0; }
.single-blog .e-content .is-style-tvr-takeaway p:last-child { margin-bottom: 0; }

/* Stappenplan */
.single-blog .e-content .is-style-tvr-steps { list-style: none; counter-reset: s; padding: 0; margin: 1.5rem 0; }
.single-blog .e-content .is-style-tvr-steps > li { counter-increment: s; position: relative; padding: 0 0 20px 56px; border-left: 2px solid var(--kc-line); margin-left: 18px; }
.single-blog .e-content .is-style-tvr-steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.single-blog .e-content .is-style-tvr-steps > li::before { content: counter(s); position: absolute; left: -19px; top: -4px; width: 36px; height: 36px; border-radius: 50%; background: var(--kc-navy); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* Checklist (vinkjes) */
.single-blog .e-content .is-style-tvr-checklist { list-style: none; padding-left: 0; }
.single-blog .e-content .is-style-tvr-checklist li { position: relative; padding-left: 2rem; margin-bottom: .5rem; }
.single-blog .e-content .is-style-tvr-checklist li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 18px; height: 18px; background-repeat: no-repeat;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none'%3E%3Cpath fill='%2300B900' d='M13.303 4.764a.75.75 0 0 1 1.143.972l-6.375 7.5a.75.75 0 0 1-1.07.074l-3.374-3a.75.75 0 1 1 .996-1.12l2.802 2.49 5.878-6.916Z'/%3E%3C/svg%3E");
}

/* Pull-quote */
.single-blog .e-content .wp-block-quote.is-style-tvr-pullquote { border-left: 4px solid var(--kc-green); padding-left: 1.5rem; }
.single-blog .e-content .wp-block-quote.is-style-tvr-pullquote p { font-size: 1.4rem; font-weight: 600; line-height: 1.4; color: var(--kc-head); }
.single-blog .e-content .wp-block-quote.is-style-tvr-pullquote cite { color: var(--kc-muted); font-size: .9rem; font-style: normal; }

/* Download / brochure */
.single-blog .e-content .is-style-tvr-download { position: relative; border: 1px solid var(--kc-line); border-radius: var(--kc-radius); padding: 18px 22px 18px 84px; margin: 1.5rem 0; background: var(--kc-surface); }
.single-blog .e-content .is-style-tvr-download::before { content: "PDF"; position: absolute; left: 22px; top: 18px; width: 46px; height: 58px; border-radius: 8px; background: var(--kc-navy); color: #fff; font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.single-blog .e-content .is-style-tvr-download > :first-child { margin-top: 0; }
.single-blog .e-content .is-style-tvr-download .wp-block-buttons { margin-top: .8em; margin-bottom: 0; }
.single-blog .e-content .is-style-tvr-download .wp-block-button__link { background: var(--kc-navy); }

/* CTA-blok (in content) */
.single-blog .e-content .is-style-tvr-cta { background: linear-gradient(120deg, var(--kc-navy), var(--kc-navy-700)); color: #fff; border-radius: var(--kc-radius); padding: 26px 28px; margin: 1.5rem 0; box-shadow: var(--kc-shadow); }
.single-blog .e-content .is-style-tvr-cta :is(h2, h3, h4, p) { color: #fff; }
.single-blog .e-content .is-style-tvr-cta > :first-child { margin-top: 0; }
.single-blog .e-content .is-style-tvr-cta .wp-block-buttons { margin-top: 1em; margin-bottom: 0; }