/* ══════════════════════════════════════════════════ knoppen in de tekst ══
 *
 * Wat dit is: een knop die een redacteur in een tekst kan zetten zonder code.
 * Hij kiest een stijl, typt een woord en plakt er een adres bij; de rest staat
 * hier.
 *
 * Waarom de stijlen hier staan en niet in het thema: een knop hoort bij de
 * tekst en niet bij de winkel. Wie van thema wisselt, wil zijn knoppen houden.
 * De kleuren komen wél uit het thema, via --accent en --steun, zodat een knop
 * die vandaag oker is morgen mee verandert.
 *
 * De opbouw is één basisklasse en dan per set een tweede. Wie maar één set
 * heeft, laadt niet de negen andere: de sets staan in aparte blokken die het
 * beheer los aan- en uitzet.
 */

/* ── de basis, en die is voor iedereen ──────────────────────────────────── */

.kn {
    --kn-kleur: var(--accent, #2F6F62);
    --kn-op: var(--op-accent, #fff);

    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: .72em 1.35em;
    border: 0;
    font: inherit;
    font-weight: 700;
    line-height: 1.15;
    text-decoration: none;
    cursor: pointer;
    transition:
        background 180ms ease,
        color 180ms ease,
        border-color 180ms ease,
        box-shadow 200ms ease,
        transform 160ms cubic-bezier(.22, 1, .36, 1);
}

.kn:focus-visible { outline: 3px solid var(--accent-diep, #1E4A40); outline-offset: 3px; }

/* Wie beweging uitzet, krijgt de kleurwissel wel en de verplaatsing niet. Een
   knop moet blijven laten zien dat hij aangeraakt wordt. */
@media (prefers-reduced-motion: reduce) {
    .kn { transition: background 180ms ease, color 180ms ease, border-color 180ms ease; }
    .kn:hover { transform: none !important; }
}

/* Een knop in een alinea heeft lucht nodig, anders plakt hij aan de regel
   erboven zodra iemand er twee onder elkaar zet. */
p > .kn, .ed-proza > .kn { margin-block: .35em; }
.kn + .kn { margin-inline-start: .5em; }

/* ── de drie gratis stijlen ─────────────────────────────────────────────── */

/*
 * Vol, rand en stil: massief, omlijnd, en alleen tekst. Dat zijn de drie
 * rollen die elke bladzijde nodig heeft — de hoofdactie, het alternatief en
 * de uitweg — en daarom zijn ze gratis. Wie hiermee niet toekomt, heeft geen
 * vierde knop nodig maar een andere bladzijde.
 */

.kn--vol {
    background: var(--kn-kleur);
    color: var(--kn-op);
    border-radius: var(--radius-m, 10px);
}

.kn--vol:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgb(0 0 0 / 0.16); }
.kn--vol:active { transform: translateY(0); }

.kn--rand {
    background: transparent;
    color: var(--kn-kleur);
    border: 2px solid currentColor;
    border-radius: var(--radius-m, 10px);
}

.kn--rand:hover { background: var(--kn-kleur); color: var(--kn-op); }

.kn--stil {
    background: transparent;
    color: var(--kn-kleur);
    padding-inline: .4em;
    border-radius: var(--radius-s, 6px);
    text-decoration: underline;
    text-underline-offset: .28em;
    text-decoration-thickness: 2px;
}

.kn--stil:hover { text-decoration-thickness: 3px; }