/*
 * VisionReach — premium artikel-opmaak (IMP-012, P5 baseline).
 *
 * Strakke, leesbare "magazine"-basis voor door het platform gegenereerde artikelen. Alles is
 * gescoped binnen .vrp-article (de pipeline wikkelt de body daarin) zodat de rest van de site
 * ongemoeid blijft. De companion-plugin enqueuet dit bestand automatisch op plugin-sites; voor
 * REST-sites plak je de inhoud in Weergave → Extra CSS (of laad 'm via het thema).
 *
 * Aanpasbaar via de CSS-variabelen hieronder (kleur/leeskolom). Dit is een BASELINE — de
 * fijn-afstemming per site doen we daarna (showcase parfumdeal).
 */

.vrp-article {
  /* Boetiek-tokens met veilige fallbacks; overschrijf per site indien gewenst. */
  --vrp-ink: #1a1d1a;
  --vrp-muted: #6b6e76;
  --vrp-accent: #147a57;
  --vrp-accent-soft: #e7f1ec;
  --vrp-line: #e4e6e3;
  --vrp-paper: #f7f8f6;
  --vrp-measure: 720px;

  max-width: var(--vrp-measure);
  margin-inline: auto;
  color: var(--vrp-ink);
  font-size: 1.0625rem;
  line-height: 1.75;
  /* Letteren los van het thema laten: we erven de thema-font, maar zetten leesbaarheid recht. */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Leesbare alinea's + ruime witruimte. */
.vrp-article p {
  margin: 0 0 1.25em;
}

/* Koppen — duidelijke hiërarchie, ruimte erboven, strak eronder. */
.vrp-article h2,
.vrp-article h3,
.vrp-article h4 {
  color: var(--vrp-ink);
  line-height: 1.25;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.vrp-article h2 {
  font-size: 1.6rem;
  margin: 2em 0 0.6em;
}
.vrp-article h3 {
  font-size: 1.25rem;
  margin: 1.6em 0 0.5em;
}
.vrp-article h4 {
  font-size: 1.075rem;
  margin: 1.4em 0 0.4em;
}
.vrp-article > h2:first-child,
.vrp-article > h3:first-child {
  margin-top: 0;
}

/* Lijsten — comfortabele inspring + regelafstand. */
.vrp-article ul,
.vrp-article ol {
  margin: 0 0 1.25em;
  padding-left: 1.4em;
}
.vrp-article li {
  margin: 0.35em 0;
}
.vrp-article li::marker {
  color: var(--vrp-accent);
}

/* Links — accent + nette onderlijn. */
.vrp-article a {
  color: var(--vrp-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.vrp-article a:hover {
  text-decoration-thickness: 2px;
}

/* Beeld — afgerond, gecentreerd, met max-hoogte zodat één beeld de pagina niet domineert. */
.vrp-article figure {
  margin: 1.75em auto;
  text-align: center;
}
.vrp-article figure img {
  max-width: 100%;
  max-height: 440px; /* voorkomt dat 1 beeld de pagina domineert */
  width: auto;
  height: auto;
  margin: 0 auto;
  border-radius: 10px;
  display: block;
}
.vrp-article figcaption {
  margin-top: 0.5em;
  font-size: 0.875rem;
  color: var(--vrp-muted);
  text-align: center;
}

/* Citaat — accent-rand, ingetogen. */
.vrp-article blockquote {
  margin: 1.75em 0;
  padding: 0.25em 0 0.25em 1.1em;
  border-left: 3px solid var(--vrp-accent);
  color: var(--vrp-muted);
  font-style: italic;
}

/* Tabel — strak, leesbaar, scroll-veilig op smal. */
.vrp-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.75em 0;
  font-size: 0.95rem;
}
.vrp-article th,
.vrp-article td {
  border: 1px solid var(--vrp-line);
  padding: 0.6em 0.8em;
  text-align: left;
  vertical-align: top;
}
.vrp-article thead th {
  background: var(--vrp-paper);
  font-weight: 650;
}

.vrp-article hr {
  border: 0;
  border-top: 1px solid var(--vrp-line);
  margin: 2.25em 0;
}

/* "In het kort"-blok — opvallende callout-box bovenaan (scanbaarheid + snippet-kans). */
.vrp-article .vrp-callout {
  background: var(--vrp-accent-soft);
  border: 1px solid var(--vrp-line);
  border-left: 4px solid var(--vrp-accent);
  border-radius: 12px;
  padding: 1.1em 1.3em;
  margin: 0 0 2em;
}
.vrp-article .vrp-callout h2 {
  margin: 0 0 0.5em;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--vrp-accent);
}
.vrp-article .vrp-callout ul {
  margin: 0;
}
.vrp-article .vrp-callout li {
  margin: 0.3em 0;
}

/* Byline — subtiele auteurs-/controleregel onder de titel. */
.vrp-article .vrp-byline {
  font-size: 0.9rem;
  color: var(--vrp-muted);
  padding-bottom: 0.9em;
  margin-bottom: 1.6em;
  border-bottom: 1px solid var(--vrp-line);
}
.vrp-article .vrp-byline a {
  color: inherit;
}

/* Bronnen — ingetogen afsluiting, gescheiden van de hoofdtekst. */
.vrp-article .vrp-sources {
  margin-top: 2.5em;
  padding-top: 1.25em;
  border-top: 1px solid var(--vrp-line);
  font-size: 0.95rem;
}
.vrp-article .vrp-sources h2 {
  font-size: 1.1rem;
  margin: 0 0 0.5em;
  color: var(--vrp-muted);
}

/* FAQ — de "Veelgestelde vragen"-sectie rendert als h2 + h3-vragen; de h3-vragen krijgen
 * (binnen de generieke kop-stijl) al duidelijk reliëf. Geen JS-accordion in de baseline. */

/* Smal scherm: kleinere koppen + ruimte, geen horizontale overflow. */
@media (max-width: 600px) {
  .vrp-article {
    font-size: 1rem;
    line-height: 1.7;
  }
  .vrp-article h2 {
    font-size: 1.4rem;
  }
  .vrp-article h3 {
    font-size: 1.15rem;
  }
  .vrp-article .vrp-callout {
    padding: 1em 1.1em;
  }
}