/* ==========================================================================
   Link Component
   Reusable styled link patterns
   ========================================================================== */

/* --------------------------------------------------------------------------
   Underline Link
   Link with animated underline on hover
   -------------------------------------------------------------------------- */
.link-underline {
  color: var(--color-accent-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.3s ease;
}

.link-underline:hover,
.link-underline:focus {
  color: #0c5320;
}

/* --------------------------------------------------------------------------
   Uppercase Link
   Small caps link with letter-spacing
   -------------------------------------------------------------------------- */
.link-uppercase {
  font-size: 0.9rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-accent-primary);
  border-bottom: 1px solid rgba(8, 59, 16, 0.35);
  padding-bottom: 0.4rem;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.link-uppercase:hover,
.link-uppercase:focus {
  color: #0c5320;
  border-color: #0c5320;
}

/* Secondary color variant */
.link-uppercase--dark {
  color: var(--color-text-primary);
  border-bottom: none;
}

.link-uppercase--dark:hover,
.link-uppercase--dark:focus {
  color: var(--color-accent-primary);
}

/* --------------------------------------------------------------------------
   Nav Link
   Navigation link with animated underline
   -------------------------------------------------------------------------- */
.nav-link {
  position: relative;
  transition: color 0.3s ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: #1A1A1A;
  transition: width 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
  color: #1A1A1A;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}