/* ==========================================================================
   blog.css — "Uit de werkplaats": overzichtspagina + artikelpagina's
   Wordt ALTIJD geladen ná /css/style.css. Tokens, @font-face, .nav, .btn,
   koppen en basistypografie komen daarvandaan — hier staat alléén wat het
   blog extra nodig heeft. Mobiel-eerst; kleuren volgen het AA-doorgerekende
   palet uit style.css (inkt/grafiet op papier en wit).
   ========================================================================== */

/* Blog-nav: geen menulinks — logo links, werkbon-knop rechts */
.blog .nav-inner { justify-content: space-between; }

/* Hoofdkolom */
.blog-main { padding: 10px 0 76px; }
/* Artikelpagina's: rustige leesbreedte (~68ch) binnen het bestaande raster */
.container.leeskolom { max-width: calc(68ch + 44px); }

/* --- Kruimelpad --------------------------------------------------------- */
.kruimel { padding: 24px 0 0; font-size: 0.9rem; color: var(--grafiet); }
.kruimel ol { list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.kruimel li { display: flex; align-items: baseline; gap: 8px; }
/* Pijltje als escape (\2192 = →): literal UTF-8 ging stuk zodra de server
   text/css zonder charset stuurde (mojibake "â†'") */
.kruimel li + li::before { content: "\2192"; color: var(--grafiet); opacity: 0.55; }
/* padding + negatieve margin: tikdoel ≥44px zonder de regelhoogte te veranderen */
.kruimel a { color: var(--grafiet); text-underline-offset: 3px; text-decoration-thickness: 1px; padding-block: 10px; margin-block: -10px; }
.kruimel a:hover { color: var(--terra-cta); }
.kruimel [aria-current="page"] { color: var(--inkt); font-weight: 700; }

/* --- Artikel ------------------------------------------------------------- */
.artikel { margin-top: 28px; }
/* Artikel-h1 een maat kleiner dan de homepage-hero: dit is leeswerk */
.artikel-kop h1 { font-size: clamp(1.9rem, 1.35rem + 2.4vw, 2.8rem); margin-bottom: 16px; }
.artikel-meta {
  font-size: 0.92rem; color: var(--grafiet);
  padding-bottom: 18px; margin-bottom: 34px;
  border-bottom: 1.5px dashed rgba(51, 41, 31, 0.25);
}

/* Lopende tekst: ruime regelafstand, nette verticale maat */
.artikel-body { line-height: 1.7; }
.artikel-body > * + * { margin-top: 18px; }
.artikel-body h2 { margin-top: 46px; font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.7rem); }
.artikel-body h3 { margin-top: 34px; }
.artikel-body ul, .artikel-body ol { padding-left: 26px; }
.artikel-body li + li { margin-top: 8px; }
.artikel-body li::marker { color: var(--terra-cta); }
.artikel-body a { text-underline-offset: 3px; }
.artikel-body a:hover { color: var(--terra-cta-hover); }
.artikel-body blockquote {
  border-left: 3px solid var(--terra);
  padding: 4px 0 4px 20px;
  color: var(--grafiet);
}
.artikel-body figure { margin: 34px 0; }
.artikel-body figure img { background: var(--wit); padding: 10px; border: 1px solid var(--zand); box-shadow: var(--schaduw-kaart); }
.artikel-body figcaption { margin-top: 10px; font-size: 0.9rem; color: var(--grafiet); text-align: center; }
.artikel-body hr { border: 0; border-top: 1.5px dashed rgba(51, 41, 31, 0.25); margin: 42px 0; }
/* Optionele intro-alinea: <p class="lead"> direct onder de meta-regel */
.artikel-body .lead { font-size: 1.12em; color: var(--grafiet); }
/* Tabel als bonnetje: inktlijn onder de kop, stippellijnen tussen de rijen */
.artikel-body table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.artikel-body th, .artikel-body td { padding: 10px 12px; text-align: left; vertical-align: top; }
.artikel-body thead th { border-bottom: 2px solid var(--inkt); }
.artikel-body tbody th, .artikel-body tbody td { border-bottom: 1.5px dashed rgba(51, 41, 31, 0.2); }

/* --- CTA-blok onderaan elk artikel --------------------------------------- */
.artikel-cta {
  position: relative;
  margin-top: 56px;
  background: var(--zand); border: var(--lijn); border-radius: var(--r-m);
  padding: 32px 26px 28px;
}
/* Plakbandje bovenop het CTA-blok (basisklasse .tape uit style.css) */
.tape-cta { top: -13px; left: 30px; transform: rotate(-4deg); }
.artikel-cta h2 { font-size: 1.4rem; margin-bottom: 8px; }
.artikel-cta p { color: var(--grafiet); max-width: 48ch; margin-bottom: 22px; }
.artikel-cta-knoppen { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 560px) { .artikel-cta-knoppen { flex-direction: row; flex-wrap: wrap; } }

/* --- Verder lezen --------------------------------------------------------- */
.verder-lezen { margin-top: 48px; border-top: var(--lijn); padding-top: 30px; }
.verder-lezen h2 { font-size: 1.3rem; margin-bottom: 16px; }
.verder-lezen ul { list-style: none; display: grid; gap: 12px; }
.verder-lezen li { position: relative; padding-left: 26px; }
.verder-lezen li::before { content: "\2192"; position: absolute; left: 0; top: 0; color: var(--terra-cta); font-weight: 700; }
.verder-lezen a { font-weight: 700; text-underline-offset: 3px; padding-block: 12px; }
.verder-lezen a:hover { color: var(--terra-cta-hover); }

/* --- Overzichtspagina ------------------------------------------------------ */
.blog-kop { margin-top: 30px; }
.blog-kop h1 { margin-bottom: 12px; }
.blog-intro { color: var(--grafiet); max-width: 58ch; margin-bottom: 42px; }

.leesgrid { list-style: none; display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 660px) { .leesgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .leesgrid { grid-template-columns: repeat(3, 1fr); } }

.leeskaart {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--wit); border: var(--lijn); border-radius: var(--r-m);
  padding: 26px 24px 22px;
  box-shadow: var(--schaduw-kaart);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
@media (hover: hover) {
  .leeskaart:hover { transform: translateY(-4px); box-shadow: var(--schaduw-lift); border-color: rgba(154, 70, 32, 0.4); }
}
.leeskaart h2 { font-size: 1.12rem; line-height: 1.35; }
.leeskaart-link { color: var(--inkt); text-decoration: none; }
/* Hele kaart klikbaar via de titel-link; focusring om de kaart (fallback:
   in browsers zonder :has() krijgt de link zelf de ring uit style.css) */
.leeskaart-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-m); }
.leeskaart:has(.leeskaart-link:focus-visible) { outline: 3px solid var(--inkt); outline-offset: 2px; }
.leeskaart-tekst { color: var(--grafiet); font-size: 0.95rem; flex-grow: 1; }
.leeskaart-meer { font-weight: 700; font-size: 0.92rem; color: var(--terra-cta); }

/* --- Compacte blogvoet ------------------------------------------------------ */
.voet-blog { background: var(--inkt); color: #CFC7BA; padding: 26px 0; font-size: 0.92rem; }
.voet-blog-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; }
.voet-blog a { color: #EDE6D8; font-weight: 700; text-decoration: none; padding-block: 10px; margin-block: -10px; }
.voet-blog a:hover { color: var(--zand); text-decoration: underline; }
.voet-blog :focus-visible { outline-color: var(--papier); }

/* Print: artikelen worden geprint meegenomen naar gesprekken — alleen het
   leeswerk zelf, zwart op wit, checklists heel (zie ook @media print in
   style.css: die verbergt .nav al). */
@media print {
  @page { margin: 20mm 18mm; }

  /* Schermelementen weg */
  .nav, .kruimel, .artikel-cta, .verder-lezen, .pakket-advies, .tape { display: none !important; }

  /* Voet gereduceerd tot één regel tekst: alleen het ©-regeltje */
  .voet-blog { background: none !important; color: #000 !important; padding: 14pt 0 0; font-size: 9pt; }
  .voet-blog a { display: none; }
  .voet-blog p { color: #000 !important; }

  /* Zwart op wit, volle breedte, leesbare maat (~11.5pt) */
  body { background: #fff !important; }
  .blog-main, .blog-main * {
    color: #000 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  .blog-main { padding: 0; }
  .container.leeskolom { max-width: 100%; padding: 0; }
  .artikel { margin-top: 0; }
  .artikel-body { font-size: 11.5pt; line-height: 1.55; }
  .artikel-kop h1 { font-size: 20pt; }
  .artikel-body h2 { font-size: 14pt; margin-top: 22pt; }
  .artikel-body h3 { font-size: 12.5pt; margin-top: 16pt; }
  .artikel-meta { font-size: 9.5pt; border-bottom-color: #999; }
  .artikel-body li::marker { color: #000; }

  /* Links: onderstreept, externe met URL erachter (interne niet) */
  .artikel-body a { text-decoration: underline; }
  .artikel-body a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    word-break: break-all;
  }

  /* Nette pagina-einden: kop niet onderaan, lijstpunten en figuren heel */
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
  .artikel-body li, .artikel-body blockquote, .artikel-body figure { break-inside: avoid; page-break-inside: avoid; }
  .artikel-body p { orphans: 3; widows: 3; }
}

/* Gegroepeerde blogindex + pillar-startpunt */
.leesgroep { margin-top: 44px; }
.leesgroep-kop { font-size: 1.45rem; margin-bottom: 16px; }
.leeskaart h3 { font-size: 1.12rem; line-height: 1.35; }
.pillar-tip { margin-top: 22px; padding: 14px 18px; background: var(--zand); border-radius: var(--r-m); font-size: 0.98rem; }
.pillar-stappen li { margin-bottom: 14px; }

/* Pakketadvies-blok in branche-artikelen */
.pakket-advies { margin: 26px 0; padding: 14px 18px; background: var(--zand); border-radius: var(--r-m); font-size: 0.98rem; line-height: 1.6; }

/* Over-pagina: portretfoto */
.over-foto { margin: 0 0 28px; max-width: 260px; }
.over-foto img { display: block; width: 100%; height: auto; border-radius: var(--r-m); border: 1px solid rgba(51,41,31,0.14); box-shadow: var(--schaduw-kaart); }

/* Blogindex: in-page clusternavigatie + scroll-marge */
.cluster-nav { margin-top: 14px; font-size: 0.95rem; color: var(--grafiet); }
.cluster-nav a { display: inline-block; padding: 6px 2px; }
.leesgroep { scroll-margin-top: 90px; }

/* FAQ op dienst/servicepagina's */
.pagina-faq { margin: 32px 0; }
.pagina-faq details { border-top: 1px solid rgba(51,41,31,0.14); padding: 14px 0; }
.pagina-faq summary { cursor: pointer; font-weight: 700; font-family: var(--kop, Fraunces), Georgia, serif; }
.pagina-faq p { margin-top: 10px; color: var(--grafiet); }

/* Blogindex: zoekveld */
.blog-zoek { margin-top: 18px; }
.blog-zoek input { width: 100%; max-width: 460px; min-height: 46px; padding: 10px 14px; font-size: 1rem; font-family: inherit; color: var(--inkt); background: var(--wit); border: 1px solid rgba(51,41,31,0.28); border-radius: var(--r-m); }
.blog-zoek-teller { margin-top: 8px; font-size: 0.9rem; color: var(--grafiet); min-height: 1.2em; }
.blog-geen-treffer { margin: 8px 0 0; color: var(--grafiet); }

/* Zoekfilter: [hidden] moet de display:flex van .leeskaart overrulen */
.leeskaart[hidden], .leesgroep[hidden] { display: none !important; }