/**
 * Buttons: .knop variants (site-wide).
 *
 * @package HelloElementorChild
 */

/* ─── KNOPPEN ───────────────────────────────────────────── */
.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space: nowrap;
}

.knop:hover  { transform: translateY(-2px); }
.knop:active { transform: translateY(0); }

.knop--primair {
  background: var(--goud);
  color: var(--blauw);
  box-shadow: 0 4px 16px rgba(245,200,66,.35);
}
.knop--primair:hover { box-shadow: 0 8px 28px rgba(245,200,66,.45); }

.knop--outline {
  background: transparent;
  color: var(--blauw);
  border-color: var(--blauw);
}
.knop--outline:hover { background: var(--ijsblauw); }

.knop--licht {
  background: rgba(255,255,255,.15);
  color: var(--wit);
  border-color: rgba(255,255,255,.4);
  backdrop-filter: blur(4px);
}
.knop--licht:hover { background: rgba(255,255,255,.25); }