/* ==========================================================================
   Knoppen en pijl — het enige knopsysteem van het thema
   --------------------------------------------------------------------------
   .btn           pilvormige knop, uppercase
   .btn--primary  gevuld petrol, witte tekst
   .btn--light    gevuld wit, petrol tekst; voor donkere vlakken
   .btn--ghost    transparant met rand; standaard voor donkere grond.
                  Op lichte grond zet de omgeving --btn-ghost-border en
                  --btn-ghost-hover (zie header.css).
   .arrow         lijnpijl, schuift op bij hover van de knop
   ========================================================================== */

:root {
  /* Pijlvorm, ook gebruikt door de submenu-links in header.css. */
  /* Opvulling links in de knop; ook gebruikt om tekst eronder op de
     knoptekst uit te lijnen (cta-section.css). 28px: optisch gelijk met
     de pijl rechts. */
  --btn-pad-start: 1.75rem;
  --arrow-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M0 6h11M7 2l4 4-4 4'/%3E%3C/svg%3E");
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6) var(--space-4) var(--btn-pad-start);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-ui);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-ui);
  line-height: var(--lh-body);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--dur-2) var(--ease-plain),
    border-color var(--dur-2) var(--ease-plain),
    color var(--dur-2) var(--ease-plain);
}

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

.btn--primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--white);
}

.btn--light {
  background: var(--white);
  border-color: var(--white);
  color: var(--petrol-900);
}

.btn--light:hover {
  background: var(--petrol-200);
  border-color: var(--petrol-200);
  color: var(--petrol-900);
}

.btn--ghost {
  background: transparent;
  color: inherit;
  border-color: var(--btn-ghost-border, var(--border-on-dark));
}

.btn--ghost:hover {
  color: inherit;
  background: var(--btn-ghost-hover, var(--hover-on-dark));
}

/* Lijnpijl als één SVG-vorm, gebruikt als masker en gevuld met
   currentColor. Schacht en punt worden zo samen getekend en blijven
   op elke (sub)pixelpositie precies op één lijn; twee losse
   pseudo-elementen werden verschillend afgerond. */
.arrow {
  display: inline-block;
  flex: none;
  width: var(--space-3);
  height: var(--space-3);
  background-color: currentColor;
  -webkit-mask: var(--arrow-shape) center / contain no-repeat;
  mask: var(--arrow-shape) center / contain no-repeat;
  transition: transform var(--dur-3) var(--ease-soft);
}

.btn:hover .arrow {
  transform: translateX(var(--space-1));
}