/* Hallmark · shape: Long Document (subpage calculator) · genre: editorial · theme: Editorial (by request) · v2.0.0 */
/* De rekenhulp op wat-kost-een-webshop-per-maand: drie groepen als rijen onder een inktlijn, de uitkomst als een rekenblad met de totalen in de koppenletter. Geen kaarten, geen schaduw, geen ronde hoeken. */

.rh { margin: var(--space-lg) 0 var(--space-xl); border-top: var(--rule-heavy) solid var(--color-ink); }

.rh__groep { margin: 0; padding: var(--space-lg) 0 var(--space-md); border: 0; border-bottom: var(--rule-hair) solid var(--color-rule); min-width: 0; }
.rh__groep legend { float: left; width: 100%; margin-bottom: var(--space-md); padding: 0; font-family: var(--font-display); font-weight: var(--display-weight); font-variation-settings: "wdth" 75, "opsz" 96; font-size: var(--text-title); line-height: 1.1; color: var(--color-ink); }
.rh__velden { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md) var(--space-lg); }

.rh__rij { display: flex; flex-direction: column; gap: var(--space-2xs); min-width: 0; }
.rh__rij label { font-size: var(--text-sm); line-height: 1.35; color: var(--color-ink); }
.rh__uitleg { margin: 0 !important; font-size: var(--text-sm); line-height: 1.4; color: var(--color-muted); }

.rh__veld { display: flex; align-items: stretch; border: var(--rule-hair) solid var(--color-muted); background: var(--color-paper); }
.rh__veld:focus-within { border-color: var(--color-ink); }
.rh__teken { display: flex; align-items: center; padding-inline: var(--space-sm); font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 12; font-size: var(--text-md); color: var(--color-muted); }
.rh__veld input { flex: 1; min-width: 0; min-height: 48px; padding: 0 var(--space-sm); border: 0; border-radius: 0; background: transparent; color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-lg); font-variant-numeric: lining-nums tabular-nums; }
.rh__veld input::placeholder { color: var(--color-muted); }
.rh__veld input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -3px; }

.rh select { min-height: 48px; padding: 0 var(--space-sm); border: var(--rule-hair) solid var(--color-muted); border-radius: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-md); }
.rh select:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.rh__knop { padding-block: var(--space-lg); }
.rh__bereken { min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-ink); border-radius: 0; background: var(--color-ink); color: var(--color-paper); font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 12; font-size: var(--text-md); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.rh__bereken:hover { background: var(--color-ink-2); }
.rh__bereken:active { transform: translateY(1px); }
.rh__bereken:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Zonder script: de uitleg om zelf te rekenen; met script: de uitkomst */
.rh__zonder { padding: var(--space-md) 0; color: var(--color-ink-2); }
.js .rh__zonder { display: none; }
.rh__uit { display: none; }
.js .rh__uit { display: block; }
.rh__knop { display: none; }
.js .rh__knop { display: block; }

.rh__uit { padding: var(--space-lg) var(--space-lg) var(--space-md); background: var(--color-paper-2); border-top: var(--rule-hair) solid var(--color-rule-2); color: var(--color-ink); }
.rh__uit p { margin-bottom: var(--space-sm); }
.rh__blad { width: 100%; margin: 0 0 var(--space-md); border-collapse: collapse; }
.rh__blad th, .rh__blad td { padding: var(--space-xs) 0; border-bottom: var(--rule-hair) solid var(--color-rule); text-align: left; vertical-align: baseline; }
.rh__blad th { font-family: var(--font-body); font-weight: 400; color: var(--color-ink-2); }
.rh__blad td { text-align: right; font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 12; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; padding-left: var(--space-md); }
.rh__blad .rh__som th { color: var(--color-ink); font-weight: 600; }
.rh__blad .rh__som td { font-weight: var(--display-weight); font-variation-settings: "wdth" 75, "opsz" 96; font-size: var(--text-xl); }
.rh__blad .rh__som th, .rh__blad .rh__som td { border-bottom-color: var(--color-rule-2); }
.rh__blad .rh__sub th, .rh__blad .rh__sub td { font-size: var(--text-sm); color: var(--color-muted); }
.rh__zin { font-size: var(--text-lead); line-height: 1.4; }
.rh__zin b { font-family: var(--font-display); font-weight: var(--display-weight); font-variation-settings: "wdth" 75, "opsz" 96; color: var(--color-accent); font-variant-numeric: lining-nums tabular-nums; }
.rh__klein { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }

@media (max-width: 40rem) {
  .rh__velden { grid-template-columns: minmax(0, 1fr); }
  .rh__uit { padding-inline: var(--space-md); }
}
@media (prefers-reduced-motion: reduce) {
  .rh__bereken { transition: none; }
}