/* =============================================================
   KNOPPEN.CSS — Heart Workx
   Alle knopvarianten op één plek.
   Geladen op elke pagina, na base.css.

   Naamgeving:
   .hw-knop              basis — altijd aanwezig
   .hw-knop-primair      rood, gevuld — hoofd CTA
   .hw-knop-outline      omtrek, rode rand
   .hw-knop-ghost        wit op donker — L5 winkelier
   .hw-knop-zacht        crème op donker — alternatief
   --groot               modifier voor hogere padding
   ============================================================= */

/* ── Basis knop — gedeelde eigenschappen ─────────────────── */
.hw-knop {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--ruimte-2);
    padding:         14px 28px;
    border-radius:   var(--radius-md);
    font-family:     var(--body-font), sans-serif;
    font-size:       var(--tekst-sm);
    font-weight:     var(--gewicht-vet);
    letter-spacing:  var(--spatie-knop);
    line-height:     1;
    text-decoration: none;
    border:          2px solid transparent;
    cursor:          pointer;
    white-space:     nowrap;
    min-height:      44px;   /* toegankelijkheid — minimale raakoppervlak */
    transition:
        background  var(--overgang-normaal),
        color       var(--overgang-normaal),
        border-color var(--overgang-normaal),
        transform   var(--overgang-snel),
        box-shadow  var(--overgang-snel);
}

.hw-knop:hover {
    text-decoration: none;
    transform: translateY(-2px);
}

.hw-knop:active {
    transform: translateY(0);
}

/* ── Gedeelde basis — ook zonder .hw-knop class ─────────────
   Elke variant erft de volledige basis zodat het volstaat
   om alleen bv. class="hw-knop-primair hw-knop--groot" te gebruiken.
   ──────────────────────────────────────────────────────────── */
.hw-knop-primair,
.hw-knop-outline,
.hw-knop-ghost,
.hw-knop-zacht {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--ruimte-2);
    padding:         14px 28px;
    border-radius:   var(--radius-md);
    font-family:     var(--body-font), sans-serif;
    font-size:       var(--tekst-sm);
    font-weight:     var(--gewicht-vet);
    letter-spacing:  var(--spatie-knop);
    line-height:     1;
    text-decoration: none;
    border:          2px solid transparent;
    cursor:          pointer;
    white-space:     nowrap;
    min-height:      44px;
    -webkit-tap-highlight-color: transparent;
    transition:
        background   var(--overgang-normaal),
        color        var(--overgang-normaal),
        border-color var(--overgang-normaal),
        transform    var(--overgang-snel),
        box-shadow   var(--overgang-snel);
}

.hw-knop-primair:hover,
.hw-knop-outline:hover,
.hw-knop-ghost:hover,
.hw-knop-zacht:hover {
    text-decoration: none;
    transform: translateY(-2px);
}

.hw-knop-primair:active,
.hw-knop-outline:active,
.hw-knop-ghost:active,
.hw-knop-zacht:active {
    transform: translateY(0);
}

/* ── Primair — rood gevuld ────────────────────────────────── */
.hw-knop-primair {
    background:   var(--hoofdkleur);
    color:        var(--wit);
    border-color: var(--hoofdkleur);
}

.hw-knop-primair:hover {
    background:   var(--donker-diep);
    border-color: var(--donker-diep);
    color:        var(--wit);
    box-shadow:   var(--schaduw-md);
}

/* ── Outline — transparant met rode rand ──────────────────── */
.hw-knop-outline {
    background:   transparent;
    color:        var(--hoofdkleur);
    border-color: var(--hoofdkleur);
}

.hw-knop-outline:hover {
    background:   var(--hoofdkleur);
    color:        var(--wit);
    box-shadow:   var(--schaduw-sm);
}

/* ── Ghost — wit op donkere achtergrond (L5) ─────────────── */
.hw-knop-ghost {
    background:   transparent;
    color:        var(--wit);
    border-color: rgba(255, 255, 255, 0.5);
}

.hw-knop-ghost:hover {
    background:   rgba(255, 255, 255, 0.12);
    border-color: var(--wit);
    color:        var(--wit);
}

/* ── Zacht — crème op donkere achtergrond ────────────────── */
.hw-knop-zacht {
    background:   var(--accentkleur);
    color:        var(--donker);
    border-color: var(--accentkleur);
}

.hw-knop-zacht:hover {
    background:   var(--wit);
    border-color: var(--wit);
    color:        var(--donker);
    box-shadow:   var(--schaduw-sm);
}

/* ── Modifier: groot ──────────────────────────────────────── */
.hw-knop--groot {
    padding:    18px 40px;
    font-size:  var(--tekst-base);
    min-height: 54px;
}

/* ── Modifier: vol (100% breedte) ────────────────────────── */
.hw-knop--vol {
    width:          100%;
    justify-content: center;
}

/* ── Prijs hint onder knop ────────────────────────────────── */
.hw-knop-hint {
    display:    block;
    margin-top: var(--ruimte-3);
    font-size:  var(--tekst-xs);
    color:      var(--tekst-zacht);
    text-align: center;
}

/* Op donkere achtergrond */
.hw-knop-hint--licht {
    color: rgba(255, 255, 255, 0.6);
}

/* ── Responsief ───────────────────────────────────────────── */
@media (min-width: 480px) {
    .hw-knop--groot {
        padding: 20px 48px;
    }
}