/* ============================================================
   Voor VvE's (voor-vve.html) — pagina-specifieke stijl
   Bouwt op DESIGNSYSTEEM v2 in assets/css/style.css.
   Ronde 3: geen eyebrows, geen icoonvakjes, geen pillen, geen kaartgrids.
   Eén sterk beeld: de rekenvoorbeeld-tabel van de portefeuillekorting.
   ============================================================ */

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

.vv-wrap { max-width: var(--wide); }
.vv-wrap > h2 { margin-bottom: var(--space-s); }
.vv-wrap p { overflow-wrap: break-word; }
.vv-intro { color: var(--text-muted); max-width: var(--measure); margin-bottom: var(--space-l); }

/* Tekstlinks in lopende tekst */
.vv-wrap p a:not(.btn):not(.btn--link),
.vv-wrap dd a, .vv-steps a, .faq-body a {
  color: var(--action); text-decoration: underline; text-underline-offset: 2px;
}

/* ── Wanneer speelt het: definitielijst met lijnen ── */
.vv-moments { margin: 0; border-top: 1px solid var(--border); max-width: 52rem; }
.vv-moments__row {
  display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: var(--space-m);
  padding: var(--space-s) 0; border-bottom: 1px solid var(--border);
}
.vv-moments dt { font-family: var(--font-head); font-weight: 700; color: var(--ink); }
.vv-moments dd { margin: 0; color: var(--text-muted); max-width: var(--measure); }
.vv-source { margin-top: var(--space-s); font-size: var(--step--2); color: var(--text-muted); max-width: var(--measure); }
.vv-source a { display: inline-block; padding-block: .2rem; }

/* ── Aanbod: twee kolommen gewone tekst ── */
.vv-cols {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl);
  margin-top: var(--space-m);
}
.vv-cols h3 { font-size: var(--step-1); margin-bottom: var(--space-xs); }
.vv-cols p { color: var(--text-muted); margin-bottom: var(--space-s); }
.vv-cols .status-note { margin: var(--space-2xs) 0 0; }

/* ── Rekenvoorbeeld ── */
.vv-example {
  margin: 0; max-width: 52rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: var(--space-m) var(--space-l);
}
.vv-example__cap { font-size: var(--step--1); color: var(--text-muted); margin-bottom: var(--space-s); }
.vv-example__cap strong { color: var(--ink); }
.vv-table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.vv-table thead th {
  font-size: var(--step--2); font-weight: 600; color: var(--text-muted);
  text-align: left; padding: 0 var(--space-s) .5rem 0; border-bottom: 2px solid var(--ink);
  white-space: nowrap;
}
.vv-table tbody th, .vv-table td { padding: .7rem var(--space-s) .7rem 0; text-align: left; vertical-align: top; }
.vv-table tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; }
.vv-table td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.vv-table td:nth-child(3) { font-family: var(--font-head); font-weight: 700; color: var(--ink); }
.vv-table tbody tr + tr > * { border-top: 1px solid var(--border); }
.vv-table__ex { color: var(--text-muted); }
.vv-table__ex strong { color: var(--action); }
.vv-table__ex span { display: block; font-size: var(--step--2); }
.vv-table td[colspan] { color: var(--text-muted); }
.vv-example__note { margin-top: var(--space-s); font-size: var(--step--2); color: var(--text-muted); max-width: var(--measure); }

.vv-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-l);
  margin-top: var(--space-l);
}
.vv-actions .btn--link { min-height: 44px; }

/* ── Wat ik nodig heb: genummerde lijst ── */
.vv-steps {
  list-style: none; counter-reset: vv; padding: 0; margin: var(--space-m) 0 0;
  display: flex; flex-direction: column; gap: var(--space-s); max-width: var(--measure);
}
.vv-steps li {
  counter-increment: vv; position: relative; padding-left: 2.5rem; color: var(--text-muted);
}
.vv-steps li::before {
  content: counter(vv); position: absolute; left: 0; top: 0;
  font-family: var(--font-head); font-weight: 700; font-size: var(--step-1); line-height: 1.2;
  color: var(--action); font-variant-numeric: tabular-nums;
}
.vv-steps strong { color: var(--ink); }
.vv-terms { margin-top: var(--space-m); font-size: var(--step--1); color: var(--text-muted); max-width: var(--measure); }

/* ── FAQ ── */
.vv-faq { max-width: 760px; margin-top: var(--space-m); }
.vv-reads { margin-top: var(--space-l); color: var(--text-muted); max-width: var(--measure); }
.vv-reads a { color: var(--action); text-decoration: underline; text-underline-offset: 2px; display: inline-block; padding: .35rem 0; }

/* ── Mobiel ── */
@media (max-width: 760px) {
  .vv-moments__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); }
  .vv-cols { grid-template-columns: minmax(0, 1fr); gap: var(--space-l); }
  .vv-example { padding: var(--space-s); }
  .vv-actions .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; }
}
@media (max-width: 520px) {
  /* Tabel als gestapelde rijen: geen zijwaarts scrollen op 390/320 */
  .vv-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .vv-table, .vv-table tbody, .vv-table tr, .vv-table th, .vv-table td { display: block; }
  .vv-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .15rem var(--space-s); padding: .7rem 0; }
  .vv-table tbody tr + tr { border-top: 1px solid var(--border); }
  .vv-table tbody tr + tr > * { border-top: 0; }
  .vv-table tbody th, .vv-table td { padding: 0; }
  .vv-table td.vv-table__ex { grid-column: 1 / -1; white-space: normal; }
  .vv-table td[colspan] { grid-column: 2 / -1; }
}
.vv-nowrap { white-space: nowrap; }