/* Kennisbank en weblog. Alleen geladen op de sjablonen die het gebruiken;
   zie bsv_enqueue() in inc/assets.php. Namen volgen template-parts/kennis/. */

/* --- Leeskolom ------------------------------------------------------------
   De tekst blijft smal, de productrij en de kaarten gebruiken de volle
   breedte. Dat geeft het ritme van een naslagpagina in plaats van één brede
   lap tekst. */

.reading { width: min(760px, 100%); margin-inline: auto; }
.artpage { padding-bottom: var(--bsv-space-2); }

/* --- Kop van het artikel ------------------------------------------------- */

.arthead { padding-top: var(--bsv-space-2); }
.arthead .page-title { max-width: 100%; }

.byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--bsv-space-2);
  margin-top: var(--bsv-space-4);
  font-size: var(--bsv-fs-sm);
  color: var(--bsv-muted);
}

.byline__who { color: var(--bsv-body); }

.byline__who a {
  padding: var(--bsv-space-1) 0;
  color: var(--bsv-ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--bsv-yellow-dark);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.byline__role::before { content: ", "; }
.byline time { padding: var(--bsv-space-1) 0; }
.byline time::before { content: "\00B7"; margin-right: var(--bsv-space-2); color: var(--bsv-line-hover); }
.byline__who + time::before { content: "\00B7"; }

/* --- Onderwerp en soort ---------------------------------------------------
   Het onderwerp is een link naar het cluster; de soort is alleen een label,
   want die taxonomie heeft geen eigen archief. */

.topics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bsv-space-4);
  margin-top: var(--bsv-space-3);
}

.topic {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-height: 36px;
  padding: var(--bsv-space-2) 0;
  border-bottom: 1px solid var(--bsv-line);
  color: var(--bsv-ink);
  font-size: 12.5px;
  font-weight: 700;
}

.topic:hover { border-bottom-color: var(--bsv-ink); text-decoration: none; }
.topic svg { color: var(--bsv-muted); }

.arttype {
  color: var(--bsv-muted);
  font-size: var(--bsv-fs-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- Kort antwoord --------------------------------------------------------
   Geen kaart met schaduw: een gele balk links. Dit is het eerste wat de lezer
   leest en ook wat een AI-overzicht overneemt; het bestaat dus niet alleen
   voor de machine. Blijft het veld leeg, dan rendert het sjabloon niets. */

.answer {
  margin-top: var(--bsv-space-5);
  padding: var(--bsv-space-4) 18px;
  border: 1px solid var(--bsv-line);
  border-left: 3px solid var(--bsv-yellow);
  background: var(--bsv-surface);
}

.answer h2 {
  margin-bottom: 9px;
  color: var(--bsv-muted);
  font-size: var(--bsv-fs-xs);
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.answer p {
  margin: 0;
  color: var(--bsv-ink);
  font-size: var(--bsv-fs-copy);
  line-height: var(--bsv-lh-copy);
}

/* --- Beeld --------------------------------------------------------------- */

.artmedia { margin-top: var(--bsv-space-5); }
.artmedia img { width: 100%; border-radius: var(--bsv-radius); aspect-ratio: 4 / 3; object-fit: cover; }
.artmedia figcaption { margin-top: var(--bsv-space-2); color: var(--bsv-muted); font-size: 12.5px; }

/* --- Inhoudsopgave --------------------------------------------------------
   Server-side uit de tussenkoppen gehaald; zie inc/kennisbank-tekst.php. */

.toc {
  margin-top: var(--bsv-space-5);
  padding: 15px 18px;
  border: 1px solid var(--bsv-line);
  background: var(--bsv-surface);
}

.toc h2 { margin-bottom: var(--bsv-space-3); font-size: var(--bsv-fs-sm); }
.toc ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; counter-reset: bsv-toc; }
.toc li { counter-increment: bsv-toc; }

.toc a {
  display: flex;
  gap: var(--bsv-space-3);
  align-items: baseline;
  min-height: 36px;
  padding: 7px 0;
  color: var(--bsv-body);
  font-size: 14px;
}

.toc a::before { content: counter(bsv-toc) "."; flex: 0 0 auto; color: var(--bsv-muted); font-size: 12.5px; font-weight: 700; }
.toc a:hover { color: var(--bsv-ink); }

/* --- De tekst -------------------------------------------------------------
   scroll-margin-top is hier niet optioneel: de kop plakt, dus zonder deze
   regel landt elke sprong uit de inhoudsopgave onder de header. De waarde
   volgt --bsv-header-h, nooit een vast getal. */

.entry {
  margin-top: var(--bsv-space-5);
  color: var(--bsv-body);
  font-size: var(--bsv-fs-copy);
  line-height: var(--bsv-lh-copy);
}
.entry :is(h2, h3) { scroll-margin-top: calc(var(--bsv-header-h) + var(--bsv-space-4)); }
.entry h2 { margin: 30px 0 var(--bsv-space-3); font-size: 21px; line-height: 1.22; letter-spacing: -0.02em; }
.entry h2:first-child { margin-top: 0; }
.entry h3 { margin: var(--bsv-space-5) 0 var(--bsv-space-2); font-size: 18px; }
.entry p { margin: 0 0 var(--bsv-space-4); }
.entry li::marker { color: var(--bsv-muted); }
.entry strong { color: var(--bsv-ink); }

.entry a {
  color: var(--bsv-ink);
  text-decoration: underline;
  text-decoration-color: var(--bsv-yellow-dark);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.entry a:hover { text-decoration-color: var(--bsv-ink); }

/* Tabellen zijn hoekig; dat is een expliciete regel uit design-reference.md.
   Op een telefoon wordt iedere rij een kaart met zichtbare kolomlabels. Zo is
   alle informatie leesbaar zonder horizontaal vegen. */

.entry .tablewrap { overflow-x: auto; margin: 0 0 20px; border: 1px solid var(--bsv-line); background: var(--bsv-surface); }
.entry table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14.5px; }
.entry caption { padding: var(--bsv-space-3) var(--bsv-space-4) 0; color: var(--bsv-muted); font-size: 12.5px; text-align: left; }
.entry :is(th, td) { padding: 11px var(--bsv-space-4); border-bottom: 1px solid var(--bsv-line-soft); text-align: left; vertical-align: top; }

.entry thead th {
  border-bottom: 1px solid var(--bsv-line);
  background: var(--bsv-bg);
  color: var(--bsv-ink);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.entry tbody tr:last-child :is(th, td) { border-bottom: 0; }
.entry tbody th { color: var(--bsv-ink); font-weight: 700; }

@media (width <= 760px) {
  .entry .tablewrap { overflow: visible; border: 0; background: transparent; }
  .entry table { display: block; min-width: 0; border-collapse: separate; font-size: 14px; }
  .entry caption { display: block; width: 100%; box-sizing: border-box; }

  .entry thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .entry :is(tbody, tr, th, td) { display: block; width: 100%; }

  .entry tbody tr {
    margin-bottom: var(--bsv-space-3);
    border: 1px solid var(--bsv-line);
    background: var(--bsv-surface);
  }

  .entry tbody th {
    padding: 10px var(--bsv-space-3);
    border-bottom: 1px solid var(--bsv-line);
    background: var(--bsv-bg);
  }

  .entry tbody td {
    display: grid;
    grid-template-columns: minmax(7.5rem, 42%) minmax(0, 1fr);
    gap: var(--bsv-space-3);
    padding: 9px var(--bsv-space-3);
    overflow-wrap: anywhere;
  }

  .entry tbody td::before {
    content: attr(data-label);
    color: var(--bsv-muted);
    font-size: var(--bsv-fs-xs);
    font-weight: 700;
    line-height: 1.35;
  }

  .entry tbody tr:last-child { margin-bottom: 0; }
}


/* --- Sectiekop binnen een artikel ---------------------------------------- */

.sechead { margin-bottom: var(--bsv-space-3); }
.sechead h2 { font-size: 20px; letter-spacing: -0.015em; }
.sechead p { margin-top: 3px; color: var(--bsv-muted); font-size: 13.5px; }

/* --- Naar de categorie ----------------------------------------------------
   De brug naar de winkel staat zichtbaar op de pagina, en pas daarna in de
   gestructureerde data. */

.tocat {
  display: flex;
  flex-flow: column wrap;
  gap: var(--bsv-space-3);
  align-items: flex-start;
  justify-content: space-between;
  margin-top: var(--bsv-space-3);
  padding: 18px 22px;
  border: 1px solid var(--bsv-line);
  background: var(--bsv-surface);
}

.tocat b { display: block; color: var(--bsv-ink); font-size: 15.5px; }
.tocat span { color: var(--bsv-muted); font-size: 13.5px; }

.readmore { margin-top: var(--bsv-space-6); }

/* Drie artikelen onder een categoriepagina in plaats van vier: de rij staat
   daar onder de producten en hoeft de breedte niet vol te maken. */
.article-grid--three { grid-template-columns: 1fr; }
.backlink { margin-top: var(--bsv-space-5); font-size: 13.5px; }

/* --- Onderwerpen als ingang ----------------------------------------------
   Elk vak toont het aantal artikelen. Dezelfde regel als op de productkaart:
   een tegel met alleen een naam is een tegel zonder inhoud. */

.topic-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bsv-space-3);
  margin: var(--bsv-space-5) 0 var(--bsv-space-6);
}

.topic-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid var(--bsv-line);
  background: var(--bsv-surface);
}

.topic-tile:hover { border-color: var(--bsv-line-hover); text-decoration: none; }

/* Met beeld loopt de foto tot de rand en krijgt de tekst zijn eigen ruimte.
   isolation om dezelfde reden als bij de artikelkaart: placeholder-art.js zet
   zijn illustratie op z-index -2 en zakt anders door de achtergrond heen. */
.topic-tile--beeld { padding: 0; }
.topic-tile--beeld > :not(.topic-tile__image) { margin-inline: 20px; }
.topic-tile--beeld > b { margin-top: var(--bsv-space-4); }
.topic-tile--beeld > .topic-tile__count { margin-bottom: 18px; }

.topic-tile__image {
  display: block;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--bsv-bg);
}

.topic-tile__image img { width: 100%; height: 100%; object-fit: cover; }
.topic-tile b { color: var(--bsv-ink); font-size: var(--bsv-fs-md); }
.topic-tile__text { color: var(--bsv-body); font-size: 13.5px; line-height: 1.5; }
.topic-tile__count { margin-top: auto; padding-top: var(--bsv-space-2); color: var(--bsv-muted); font-size: 12.5px; }

/* Zonder teller mag de tekst niet tegen de onderrand plakken. */
.topic-tile__text:last-child { padding-bottom: var(--bsv-space-1); }

/* --- Filteren op soort ----------------------------------------------------
   Gewone links met een GET-parameter, net als de productfilters. Geen
   JavaScript, dus geen INP-kosten, en de uitkomst staat in de URL. */

.type-filter { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: var(--bsv-space-5); }

.type-filter__link {
  min-height: 36px;
  padding: var(--bsv-space-2) 0;
  border-bottom: 1px solid transparent;
  color: var(--bsv-ink);
  font-size: var(--bsv-fs-sm);
  font-weight: 600;
}

.type-filter__link:hover { border-bottom-color: var(--bsv-ink); text-decoration: none; }
.type-filter__link.is-active { border-bottom-color: var(--bsv-ink); }

/* --- Weblog ---------------------------------------------------------------
   Het verschil met een kennisbankartikel begint bij de opening: naslag begint
   met een antwoord, een verslag met een beeld. */

.blogmedia { margin-top: var(--bsv-space-4); }
.blogmedia img { width: 100%; border-radius: var(--bsv-radius); aspect-ratio: 4 / 3; object-fit: cover; }
.blogcap { margin-top: 9px; color: var(--bsv-muted); font-size: 12.5px; }

.bloghead { margin-top: var(--bsv-space-5); }
.bloghead .page-title { max-width: 100%; }
.blogkicker { display: block; margin-bottom: var(--bsv-space-3); color: var(--bsv-sale); font-size: var(--bsv-fs-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }

/* Het weblog wijkt pas af zodra er ruimte voor is; op de telefoon leest het
   als elk ander artikel. De afwijkende maten staan onderaan in de query. */
.entry--blog {
  line-height: var(--bsv-lh-copy);
  font-size: var(--bsv-fs-copy);
}

/* Eén rustige verwijzing naar de winkel, in plaats van de rij van acht die
   een kennisbankartikel wel heeft. */

.shoplink {
  display: flex;
  flex-flow: column wrap;
  gap: var(--bsv-space-3);
  align-items: flex-start;
  justify-content: space-between;
  margin-top: var(--bsv-space-6);
  padding: 18px 0;
  border-top: 1px solid var(--bsv-line);
  border-bottom: 1px solid var(--bsv-line);
}

.shoplink b { display: block; color: var(--bsv-ink); font-size: 15.5px; }
.shoplink span { color: var(--bsv-muted); font-size: 13.5px; }

/* --- Breder --------------------------------------------------------------
   De basis hierboven is de telefoon. Vanaf twee kolommen mag de tekst weer
   ademen en gaan de rijen uiteen. */

@media (width >= 761px) {
  .arthead .page-title { max-width: 24ch; }
  .bloghead .page-title { max-width: 23ch; }
  .answer { padding: 20px 24px; }
  .artmedia img { aspect-ratio: 16 / 9; }
  .toc { padding: 18px 22px; }
  .entry { margin-top: 34px; }
  .entry h2 { margin-top: 38px; font-size: 24px; }
  .entry--blog h2 { margin-top: 36px; font-size: var(--bsv-fs-lg); }

  .tocat,
  .shoplink { flex-flow: row wrap; gap: 18px; align-items: center; }

  .blogmedia img { border-radius: var(--bsv-radius-lg); aspect-ratio: 16 / 7; }

  .topic-grid,
  .article-grid--three { grid-template-columns: repeat(2, 1fr); }
}

@media (width >= 1001px) {
  .topic-grid,
  .article-grid--three { grid-template-columns: repeat(3, 1fr); }
}

/* Auteurs en reacties: een herkenbare afsluiting van het artikel. */
.reading .author-card {
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
  margin-top: 48px;
  padding: 28px;
  border: 1px solid var(--bsv-line);
  border-top: 3px solid var(--bsv-yellow);
  background: var(--bsv-surface);
}
.author-card__body { min-width: 0; }

.author-card__initial,
.reading .author-card__photo {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
}

.author-card__initial {
  display: grid;
  place-items: center;
  background: var(--bsv-ink);
  color: var(--bsv-yellow);
  font-size: 28px;
  font-weight: 800;
}

.author-card__eyebrow {
  margin: 0 0 8px;
  color: var(--bsv-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.reading .author-card__name { font-size: 22px; }
.reading .author-card__name a { text-decoration: none; }
.reading .author-card__role { margin-top: 6px; }
.reading .author-card__bio { margin-top: 14px; font-size: 15px; line-height: 1.7; }
.reading .author-card__links { margin-top: 16px; font-weight: 700; }
.author-card__links a { overflow-wrap: anywhere; }

.article-comments {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--bsv-line);
}

.article-comments .comment-respond {
  padding: 28px;
  border: 1px solid var(--bsv-line);
  border-radius: var(--bsv-radius);
  background: var(--bsv-surface);
  scroll-margin-top: calc(var(--bsv-header-h) + 20px);
}
.article-comments :is(.comment-reply-title, .article-comments__title) { margin: 0 0 12px; font-size: 24px; line-height: 1.3; }
.article-comments .comment-notes { margin: 0; color: var(--bsv-muted); line-height: 1.65; }
.article-comments .comment-required-note { margin: 8px 0 0; color: var(--bsv-muted); font-size: 13px; }
.article-comments .comment-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.article-comments .comment-form > * { grid-column: 1 / -1; margin: 0; min-width: 0; }
.article-comments .comment-form-author { grid-column: 1; }
.article-comments .comment-form-email { grid-column: 2; }
.article-comments label { display: block; margin-bottom: 8px; color: var(--bsv-ink); font-size: 14px; font-weight: 700; }

.article-comments :is(input[type="text"], input[type="email"], textarea) {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--bsv-line-hover, #999);
  border-radius: 6px;
  background: #fff;
  color: var(--bsv-ink);
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
}
.article-comments textarea { resize: vertical; min-height: 160px; }
.article-comments :is(input, textarea, a, button):focus-visible { outline: 2px solid var(--bsv-ink); outline-offset: 3px; }
.article-comments .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 10px; }
.article-comments .comment-form-cookies-consent input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 3px; }
.article-comments .comment-form-cookies-consent label { margin: 0; font-weight: 400; line-height: 1.6; color: var(--bsv-muted); }
.article-comments .form-submit .btn { min-height: 48px; cursor: pointer; }
.article-comments__list { list-style: none; padding: 0; margin: 24px 0; }
.article-comments__list .children { list-style: none; padding-left: 24px; }
.article-comments__list .comment-body { padding: 20px 0; border-bottom: 1px solid var(--bsv-line); }
.article-comments__list .avatar { float: left; margin: 0 12px 8px 0; border-radius: 50%; }
.article-comments__list .comment-metadata { margin: 6px 0 16px; font-size: 13px; color: var(--bsv-muted); }
.article-comments__list .comment-content { clear: both; overflow-wrap: anywhere; }
.article-comments__list .reply { font-size: 14px; font-weight: 700; }
.article-comments #cancel-comment-reply-link { display: inline-block; margin-left: 12px; font-size: 14px; }

@media (width <= 560px) {
  .reading .author-card { flex-wrap: wrap; gap: 16px; padding: 22px; }
  .reading .author-card__body { flex: 1 1 220px; }
  .article-comments .comment-respond { padding: 22px 18px; }
  .article-comments .comment-form { grid-template-columns: 1fr; }
  .article-comments .comment-form :is(.comment-form-author, .comment-form-email) { grid-column: 1; }
  .article-comments .form-submit .btn { width: 100%; }
  .article-comments__list .children { padding-left: 12px; }
}

.blog-article .post-navigation { margin-top: 24px; }
.blog-article .post-navigation .nav-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }
.blog-article .post-navigation a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--bsv-ink); font-size: 14px; font-weight: 700; text-decoration: none; }
.blog-article .nav-previous a::before { content: "←"; }
.blog-article .nav-next { margin-left: auto; }
.blog-article .nav-next a::after { content: "→"; }
.blog-article .post-navigation a:hover { text-decoration: underline; text-underline-offset: 4px; }

@media (width <= 560px) {
  .reading .author-card { flex-direction: column; }
  .reading .author-card__body { flex: none; width: 100%; }
}