/* ============================================================
   Voor verhuurders (voor-verhuurders.html): pagina-specifieke stijl
   Bouwt op DESIGNSYSTEEM v2 in assets/css/style.css.
   ============================================================ */

.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;
}

/* Links uitgelijnd met de page-hero; de inhoud zelf blijft binnen ±1080px */
.vh-wrap > * { max-width: 1080px; }
.vh-wrap > h2 { margin-bottom: var(--space-l); }

/* Tekstlinks in lopende tekst */
.vh-prose a, .vh-source a, .vh-table-note a, .vh-kamers a, .vh-intro a, .faq-body a, .vh-reads span a {
  color: var(--action); text-decoration: underline; text-underline-offset: 2px;
}

/* ── Hero-acties ── */
.vh-hero-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-l);
  margin-top: var(--space-l);
}

/* ── Twee kolommen ── */
.vh-split {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--space-xl); align-items: start;
}
.vh-split--even { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.vh-split > * { min-width: 0; }
.vh-prose { max-width: var(--measure); }
.vh-prose p + p { margin-top: var(--space-s); }
.vh-subhead { margin: var(--space-xl) 0 var(--space-s); }

/* ── Tijdlijn wet ── */
.vh-dates { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-m); }
.vh-dates li { border-left: 3px solid var(--info-border); padding-left: var(--space-m); }
.vh-dates__when {
  font-family: var(--font-head); font-weight: 700; color: var(--ink);
  font-size: var(--step-1); margin-bottom: var(--space-3xs);
}
.vh-dates li p:not(.vh-dates__when) { color: var(--text-muted); }
.vh-source { margin-top: var(--space-m); font-size: var(--step--2); color: var(--text-muted); }

/* ── Tabellen ── */
.vh-table {
  width: 100%; border-collapse: collapse; background: var(--surface);
  font-size: var(--step--1); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden;
}
.vh-table caption {
  caption-side: top; text-align: left; padding-bottom: var(--space-xs);
  font-family: var(--font-head); font-weight: 700; color: var(--ink); font-size: var(--step-0);
}
.vh-table th, .vh-table td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.vh-table tbody tr:last-child th, .vh-table tbody tr:last-child td { border-bottom: 0; }
.vh-table thead th {
  background: var(--bg-muted); font-family: var(--font-head); font-weight: 700;
  font-size: var(--step--2); color: var(--ink);
}
.vh-table tbody th { font-weight: 600; color: var(--ink); }
.vh-table td { color: var(--text); font-variant-numeric: tabular-nums; }
.vh-th-sub { display: block; font-weight: 400; color: var(--text-muted); }
.vh-table-note { margin-top: var(--space-xs); font-size: var(--step--2); color: var(--text-muted); }

/* Segmenten: blauw = regelgeving */
.vh-table--segments { border-color: var(--info-border); }
.vh-table--segments thead th { background: var(--info-bg); }

/* Prijstabel: dit is het ene sterke beeld van de pagina */
.vh-table--prices td { font-family: var(--font-head); font-weight: 700; font-size: var(--step-0); white-space: nowrap; }
.vh-table--prices tbody tr:last-child td { font-family: var(--font-body); font-weight: 400; color: var(--text-muted); font-size: var(--step--1); }
.vh-table--prices th[scope="row"] { white-space: nowrap; }

/* ── Wat u krijgt: genummerde opsomming ── */
.vh-steps { list-style: none; padding: 0; counter-reset: vh; display: flex; flex-direction: column; gap: var(--space-l); max-width: var(--measure); }
.vh-steps li {
  counter-increment: vh; position: relative; padding-left: 3.25rem;
}
.vh-steps li::before {
  content: counter(vh); position: absolute; left: 0; top: .1rem;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid var(--action); color: var(--action);
  font-family: var(--font-head); font-weight: 700; font-variant-numeric: tabular-nums;
}
.vh-steps__title { font-size: var(--step-1); margin-bottom: var(--space-3xs); }
.vh-steps p { color: var(--text-muted); }
.vh-kamers { margin-top: var(--space-xl); max-width: var(--measure); padding-top: var(--space-m); border-top: 1px solid var(--border); }

/* ── Tarieven ── */
.vh-intro { color: var(--text-muted); max-width: var(--measure); margin-bottom: var(--space-l); }
.vh-prices {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--space-xl); align-items: start;
}
.vh-prices > * { min-width: 0; }
.vh-prices__head { font-size: var(--step-1); margin-bottom: var(--space-xs); }
.vh-dl { border-top: 1px solid var(--border); margin-bottom: var(--space-s); }
.vh-dl > div {
  display: flex; justify-content: space-between; gap: var(--space-s);
  padding: .7rem 0; border-bottom: 1px solid var(--border);
}
.vh-dl dt { color: var(--text); }
.vh-dl dd { font-family: var(--font-head); font-weight: 700; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vh-small { font-size: var(--step--1); color: var(--text-muted); margin-bottom: var(--space-s); }
.btn--link { min-height: 44px; }

.vh-terms {
  margin-top: var(--space-l); max-width: var(--measure);
  font-size: var(--step--1); color: var(--text-muted);
  list-style: disc; padding-left: 1.2rem;
}
.vh-terms li + li { margin-top: var(--space-3xs); }

.vh-portfolio { margin-top: var(--space-xl); padding-top: var(--space-l); border-top: 1px solid var(--border); max-width: 720px; }
.vh-portfolio h3 { margin-bottom: var(--space-xs); scroll-margin-top: calc(var(--nav-h) + 1rem); }
.vh-portfolio > p { color: var(--text-muted); margin-bottom: var(--space-m); }
.vh-portfolio .vh-table { margin-bottom: var(--space-m); }

/* ── Energielabel en combi ── */
.vh-rules { margin: var(--space-xs) 0 0; padding-left: 1.2rem; list-style: disc; }
.vh-rules li { color: var(--text-muted); }
.vh-rules li + li { margin-top: var(--space-2xs); }
.vh-rules strong { color: var(--ink); }
.vh-combi { display: flex; flex-direction: column; gap: var(--space-s); align-items: flex-start; }
.vh-combi__title { font-size: var(--step-1); }
.vh-combi > p:not(.status-note) { color: var(--text-muted); font-size: var(--step--1); }

/* ── FAQ ── */
.vh-faq { max-width: 760px; }

/* ── Verder lezen: gewone lijst ── */
.vh-reads__heading { font-size: var(--step-2); margin-bottom: var(--space-m) !important; }
.vh-reads { max-width: var(--measure); border-top: 1px solid var(--border); }
.vh-reads li { padding: var(--space-s) 0; border-bottom: 1px solid var(--border); }
.vh-reads a {
  font-family: var(--font-head); font-weight: 700; color: var(--action);
  text-decoration: underline; text-underline-offset: 3px;
  display: inline-block; padding-block: .35rem;
}
.vh-reads span { display: block; color: var(--text-muted); font-size: var(--step--1); }

/* ── Responsief ── */
@media (max-width: 860px) {
  .vh-split, .vh-split--even, .vh-prices { grid-template-columns: minmax(0, 1fr); gap: var(--space-l); }
}
@media (max-width: 480px) {
  .vh-table th, .vh-table td { padding: .65rem .6rem; }
  .vh-table--prices th[scope="row"] { white-space: normal; }
  .vh-steps li { padding-left: 2.9rem; }
}
.vh-portfolio .btn { white-space: normal; max-width: 100%; text-align: center; }