/* ===== Ink Bleed Underline — hover effect for email + footer links =====
   Adapted from CodeFronts "Ink Bleed Underline" (MIT). A hand-drawn SVG
   underline strokes in from left to right on hover via stroke-dasharray.
   The stroke uses currentColor, so it follows each link's own colour and
   fits the design system rather than a fixed palette. */

.cle-ink {
  position: relative;
  display: inline-block;
  text-decoration: none;
}
/* never show the browser's default underline on these links */
a.cle-ink,
a.cle-ink:hover,
a.cle-ink:focus-visible {
  text-decoration: none;
}

.cle-ink-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px; /* sits in the leading below the text, so line flow is untouched */
  width: 100%;
  height: 0.5em;
  pointer-events: none;
  overflow: visible;
}
.cle-ink-line path {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition: stroke-dashoffset 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}
.cle-ink:hover .cle-ink-line path,
.cle-ink:focus-visible .cle-ink-line path {
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .cle-ink-line path {
    transition: none;
    stroke-dashoffset: 0; /* show a static underline instead of animating */
    opacity: 0;
  }
  .cle-ink:hover .cle-ink-line path,
  .cle-ink:focus-visible .cle-ink-line path {
    opacity: 1;
  }
}