/* =========================================================
   Buttons

   Vorm uit het concept (concept.leadsprint.nl/autogloss):
   pill, Onest medium 16px, 16/26 padding, pijl die 4px
   opschuift bij hover. Geen lift, geen schaduw — de knop is
   een vlak, geen object dat zweeft.

   Varianten:
     .btn-primary          goud vlak, zwarte tekst   (hoofd-CTA)
     .btn-secondary        outline, bone tekst       (op donker)
     .btn-dark             zwart vlak, bone tekst    (op goud of bone)
     .btn--sm              compacter, voor in de nav
========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);

  padding: var(--space-md) var(--space-xl);
  border: 0;
  border-radius: var(--radius-full);

  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: 0;

  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;

  transition:
    background   var(--dur-fast) var(--ease-out),
    color        var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

/* Pijl in de knop schuift mee — het enige bewegende onderdeel */
.btn svg {
  width: 18px;
  height: 18px;
  flex: none;
  transition: transform var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
  .btn:hover svg {
    transform: translateX(4px);
  }
}


/* =========================================================
   Primair — goud vlak
========================================================= */

.btn-primary {
  background: var(--color-accent);
  color: var(--color-inverted);
}

@media (hover: hover) {
  .btn-primary:hover {
    background: var(--color-accent-dark);
  }
}


/* =========================================================
   Secundair — outline op donker
========================================================= */

.btn-secondary {
  background: transparent;
  color: var(--color-text);
  border: 1.5px solid rgba(243, 239, 232, .35);
}

@media (hover: hover) {
  .btn-secondary:hover {
    border-color: var(--color-text);
  }
}

/* Alias — de starter gebruikt deze naam nog in templates */
.btn-secondary--light {
  background: transparent;
  color: var(--color-text);
  border: 1.5px solid rgba(243, 239, 232, .35);
}

@media (hover: hover) {
  .btn-secondary--light:hover {
    border-color: var(--color-text);
  }
}


/* =========================================================
   Donker — voor op een goud of bone vlak
========================================================= */

.btn-dark {
  background: var(--color-ink);
  color: var(--color-bone);
}

@media (hover: hover) {
  .btn-dark:hover {
    background: #000;
  }
}


/* =========================================================
   Outline op licht — voor op een bone vlak
========================================================= */

.btn-outline-dark {
  background: transparent;
  color: var(--color-inverted);
  border: 1.5px solid rgba(14, 14, 14, .35);
}

@media (hover: hover) {
  .btn-outline-dark:hover {
    border-color: var(--color-inverted);
  }
}


/* =========================================================
   Maten
========================================================= */

.btn--sm {
  padding: var(--space-sm) 20px;
  font-size: var(--fs-xs);
}

.btn--block {
  width: 100%;
}


/* =========================================================
   Tekstlink met pijl — geen knop, wel hetzelfde gedrag
========================================================= */

.ls-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);

  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  text-decoration: none;
  color: inherit;

  transition: color var(--dur-fast) var(--ease-out);
}

.ls-link svg {
  width: 18px;
  height: 18px;
  flex: none;
  transition: transform var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
  .ls-link:hover {
    color: var(--color-accent);
  }

  .ls-link:hover svg {
    transform: translateX(4px);
  }
}


/* =========================================================
   Chip — niet-klikbaar label, zelfde pill-vorm
   (in het concept: de "feiten" onder de intro)
========================================================= */

.ls-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);

  padding: 9px var(--space-md);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);

  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}

/* Op een goud vlak moet de rand donker zijn */
.ls-section--gold .ls-chip {
  border-color: rgba(14, 14, 14, .35);
}