/**
 * Artikel in de rekentool-opmaak (templates/article-calculator.php).
 * Basis: rekentools.css (rk-*) + begrippen.css (IGNITE9-kaart). Hier alleen wat een
 * artikel extra heeft: lange titel, titel boven de rekentool, kerngetallen in
 * Kort antwoord, de artikeltekst als uitleg en een lichte Kopgroep-kaart.
 */

/* Kop: een artikeltitel is langer dan "BMI berekenen". */
.akc .akc-title { font-size: clamp(48px, 5.6vw, 88px); line-height: .86; max-width: 22ch; }
.akc-tool__title { margin: 0 0 12px; font: 900 clamp(22px, 2vw, 28px)/.95 var(--font-display); text-transform: uppercase; color: var(--ink-950); }

/* Kort antwoord met de twee kerngetallen. */
.akc-short > p { margin: 0; }
.akc-nums { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 16px 0 0; padding: 0; list-style: none; }
.akc-nums li { display: flex; align-items: baseline; gap: 8px; font-size: 15px; color: var(--paper-ink-3); }
.akc-nums b { font: 900 32px/1 var(--font-display); color: var(--ink-950); white-space: nowrap; }
.akc-nums small { font-size: 13px; }
.rk-short .akc-note { margin-top: 12px; font-size: 13.5px; line-height: 1.5; font-weight: 500; color: var(--paper-ink-3); }

/* Artikeltekst als uitleg: koppen zoals de vaste onderdelen van een rekentool-pagina. */
.akc-text.ar-content { gap: 18px; margin-top: 8px; font-size: inherit; line-height: inherit; }
.akc-text.ar-content h2 { margin: 40px 0 -2px; font: 900 clamp(32px, 3vw, 40px)/.92 var(--font-display); text-transform: uppercase; color: var(--ink-950); scroll-margin-top: calc(var(--header-h) + 24px); }
.akc-text.ar-content h3 { margin-top: 8px; font-size: 21px; }
.akc-text.ar-content table caption { padding-bottom: 8px; font-size: 14px; font-weight: 700; text-align: left; color: var(--paper-ink-3); }
.akc-text .ar-table th :is(strong, b), .akc-text .ar-table table:not(:has(thead, th)) tr:first-child td :is(strong, b) { color: inherit; }
/* Coachingregel alleen op mobiel: op desktop staat IGNITE9 al in de rail. */
.akc-text.ar-content .at-coach { display: none; }
@media (max-width: 900px) { .akc-text.ar-content .at-coach { display: block; } }

/* Bronnen: artikelreferenties hebben opmaak in een <div>. */
.akc-refs li > div { min-width: 0; overflow-wrap: anywhere; }
.akc-refs li > div a { border-bottom: 1px solid var(--paper-line); color: inherit; text-decoration: none; }
.akc-refs li > div a:hover { border-color: var(--ink-950); }

/* De Kopgroep: lichte kaart (geen donker vlak op een lichte pagina). */
.akc .at-kop { margin: 56px 0 0; padding: 28px; background: var(--white); border: 0; border-left: 4px solid var(--amber); color: var(--paper-ink-2); }
.akc .at-kop > div > p { color: var(--paper-ink-2); }
.akc .at-kop .eyebrow { color: var(--amber-text-on-light); }
.akc .at-kop > div > .at-kop__h { color: var(--ink-950); }
.akc .at-kop .nl-form input[type="email"], .akc .at-kop .nl-form input[name="first_name"] { background: var(--white); color: var(--ink-950); border-color: var(--paper-line); }
.akc .at-kop .nl-form input::placeholder { color: var(--paper-ink-3); }
.akc .at-kop .nl-form__meta { color: var(--paper-ink-3); }
.akc .at-kop .nl-form__next time { color: var(--ink-950); }
.akc .at-kop .nl-form__proof { color: var(--amber-text-on-light); }
.akc .at-kop .nl-form__note { color: var(--paper-ink-3); }
.akc .at-kop .nl-form__msg { color: var(--ink-950); }
.akc .at-kop .nl-form__msg.is-error { color: #a63a22; }

/* Reacties onder de Kopgroep, binnen de tekstkolom. */
.akc .rk-main > :is(.ar-comments, section[class*="comment"]) { margin-top: 56px; }

/* Brede tabellen mogen de kolom niet oprekken (ze scrollen zelf in .ar-table). */
.akc .rk-main { min-width: 0; }
@media (max-width: 1100px) {
	.akc .rk-body { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
	.akc .akc-title { font-size: clamp(40px, 11vw, 56px); }
	.akc-nums { gap: 6px 20px; }
	.akc .at-kop { padding: 22px 18px; }
	.akc-text.ar-content h2 { margin-top: 32px; }
}