// ============================================
// OVERRIDES — Links
// ============================================
// $link-color and $link-hover-color are set in _variables.scss
// (currently: $secondary-purpurrot / darken 10%)
$link-color-hover: $link-hover-color !default;
$link-color-visited: darken($secondary-purpurrot, 20%) !default;
$link-underline-offset: 0.15em !default;
$link-underline-width-hover: 2px !default;

// Base reset — all <a> elements
a {
  color: $link-color;
  text-decoration: none;
  transition: color 0.2s ease;
  font-weight: $font-weight-semibold;
  &:hover,
  &:focus-visible {
    color: $link-color-hover;
  }
}

// ============================================
// INLINE LINKS — classless, empty class, or .ext
// ============================================
// Prose links inside body copy, RTE output, and TYPO3
// external links (.ext treated identically to classless).

a:not([class]),
a[class=""],
a.ext {
  color: $link-color;
  font-weight: $font-weight-semibold;
  transition:
    color $transition-duration $transition-easing,
    text-decoration-color $transition-duration $transition-easing,
    text-decoration-thickness $transition-duration $transition-easing;

  strong {
    font-weight: $font-weight-semibold;
  }

  &:hover {
    color: $link-color-hover;
    text-decoration: underline;
    text-decoration-color: $link-color-hover;
    text-decoration-thickness: $link-underline-width-hover;
    text-underline-offset: $link-underline-offset;
  }

  // &:visited {
  //   color: $link-color-visited;
  //   text-decoration-color: rgba($link-color-visited, 0.4);
  // }

  &:active {
    color: darken($link-color-hover, 10%);
  }

  @include focus-visible($color: $link-color);
}

// ============================================
// DARK / BLUE THEME OVERRIDES
// ============================================
// Applies to classless links AND .ext on dark backgrounds.

.t-dark,
.t-blue {
  a:not([class]),
  a[class=""],
  a.ext,
  a.b-footer__nav-link {
    color: $color-text-inverse;
    text-decoration-color: rgba($color-text-inverse, 0.4);

    &:hover {
      color: $color-text-inverse;
      text-decoration-color: $color-text-inverse;
    }

    // &:visited {
    //   color: rgba($color-text-inverse, 0.8);
    // }

    &:active {
      color: rgba($color-text-inverse, 0.7);
    }

    &:focus-visible {
      outline-color: $color-text-inverse;
    }
  }
}

// ============================================
// LINK-DYNAMIC
// ============================================
// Standalone animated underline link. No icon.
//
// <a href="..." class="link-dynamic">Label</a>

.link-dynamic {
  display: inline-block;
  padding-block: 0.1rem; // tap target without inline-flex
  color: $link-color;
  text-decoration: none;
  font-size: inherit;

  @include dynamic-underline-hover(
    $color: currentColor,
    $thickness: 2px,
    $offset: 0.3em
  );

  // &:visited {
  //   color: $link-color-visited;
  // }

  &:active {
    color: darken($link-color-hover, 10%);
  }

  @include focus-visible($color: currentColor, $offset: 3px);
}

.t-dark,
.t-blue {
  .link-dynamic {
    color: $color-text-inverse;

    // &:visited {
    //   color: rgba($color-text-inverse, 0.8);
    // }
  }
}

// ============================================
// LINK-DYNAMIC-WRAPPED
// ============================================
// Animated underline spanning link + optional icon.
// Underline lives on the wrapper, not the link.
//
// <div class="link-dynamic-wrapped">
//     <svg class="icon">...</svg>   <!-- optional -->
//     <a href="...">Label</a>
// </div>

.link-dynamic-wrapped {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 24px;
  color: $link-color;
  font-size: inherit;

  @include dynamic-underline-hover(
    $color: currentColor,
    $thickness: 1px,
    $offset: 0.1em
  );

  &:hover::after,
  &:focus-within::after {
    transform: scaleX(1);
  }

  a {
    color: inherit;
    text-decoration: none;

    // &:visited {
    //   color: $link-color-visited;
    // }

    &::after {
      display: none;
    }

    @include focus-visible();
  }
}

.t-dark,
.t-blue {
  .link-dynamic-wrapped {
    color: $color-text-inverse;

    // a:visited {
    //   color: rgba($color-text-inverse, 0.8);
    // }
  }
}

// ============================================
// SHARED VARIANTS — inverse / muted
// ============================================

.link-dynamic,
.link-dynamic-wrapped {
  &--inverse {
    color: $color-text-inverse;
  }

  &--muted {
    color: $color-text-muted;
  }
}