/* ==========================================================================
   Link met pijl — tekstlink met lijn eronder, uppercase
   <a class="link-arrow" href="…">Ons verhaal <span class="arrow"></span></a>
   Kleur volgt de tekstkleur, zodat hij op licht en donker werkt.
   ========================================================================== */

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem; /* 10px, ontwerp */
  padding-bottom: var(--space-1);
  border-bottom: var(--border-width) solid currentColor;
  color: inherit;
  font-size: var(--fs-ui);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-ui);
  text-decoration: none;
  text-transform: uppercase;
  transition: gap var(--dur-3) var(--ease-plain);
}

.link-arrow:hover {
  gap: var(--space-4);
  color: inherit;
}

.link-arrow .arrow {
  width: 0.875rem;  /* 14px, iets groter dan in knoppen (ontwerp) */
  height: 0.875rem;
}

/* Groter klikvlak (minimaal ~44px hoog) zonder dat de link groter oogt. */
.link-arrow,
.page-hero__back,
.site-footer__bottom a {
  position: relative;
}

.link-arrow::before,
.page-hero__back::before,
.site-footer__bottom a::before {
  content: "";
  position: absolute;
  inset: -0.75rem -0.25rem; /* 12px boven en onder, 4px opzij */
}