/* ==========================================================
   IROZON DESIGN SYSTEM — Link (canonical, v1)
   Public API:
     <a class="iz-link" href="...">Explore services</a>

     <a class="iz-link" data-directional href="...">
       <span>Explore projects</span>
       <svg class="iz-link__icon" ...></svg>
     </a>
   Ordinary inline/editorial navigation — not a button. Links navigate;
   buttons perform actions. A real <a> always; never a clickable <div>
   or a JS-only click handler standing in for navigation. Depends only
   on Irozon design tokens.

   Rest text uses --color-link — brand-carrying, not the generic
   primary foreground, but not raw --irozon-green either: on light
   surfaces that value is a contrast-adjusted Green/Ink mix (raw Green
   is ~2.2:1 against White, well under WCAG AA's 4.5:1 floor for
   normal text). On dark surfaces --color-link resolves to the actual
   --irozon-lime primitive, which already has excellent contrast
   there. See the token's definition in design-tokens/semantic.css and
   themes.css for the exact values/math. Decoration
   (--color-link-decoration) is always the pure primitive (Green
   light, Lime dark) — an underline isn't held to text contrast
   minimums, so it can stay the real brand color even where the text
   itself can't.

   :visited is deliberately left unstyled — .iz-link's own rule already
   sets color/decoration unconditionally, so nothing falls back to the
   browser's default visited purple. No separate visited rule needed.
   ========================================================== */

.iz-link {
  color: var(--color-link);
  text-decoration-line: underline;
  text-decoration-color: color-mix(in srgb, var(--color-link-decoration) 45%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition:
    text-decoration-color var(--motion-duration-fast) var(--motion-ease-standard),
    text-decoration-thickness var(--motion-duration-fast) var(--motion-ease-standard),
    opacity var(--motion-duration-instant) var(--motion-ease-standard);
}
.iz-link:hover {
  text-decoration-color: var(--color-link-decoration);
  text-decoration-thickness: 2px;
}
.iz-link:focus-visible {
  outline: 2px solid var(--color-focus);
  /* 3px, one more than Button/Card's 2px — inline text has less
     natural clearance around it than a padded control, so the ring
     needs the extra px to sit clear of the underline/descenders
     instead of cutting through them. */
  outline-offset: 3px;
  border-radius: 2px;
}
.iz-link:active {
  opacity: 0.7;
}
.iz-link[aria-disabled="true"] {
  color: var(--color-text-muted);
  text-decoration-color: transparent;
  pointer-events: none;
  cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
  .iz-link {
    transition: none;
  }
}

/* ---------- Directional ----------
   For "Learn more →" / "Explore projects →" style links. Same visual
   language, plus a decorative icon that nudges toward its semantic
   direction on hover/focus — motion communicates direction, which our
   motion principle explicitly allows. Never generated via a
   pseudo-element; always a real, aria-hidden <svg> so the icon can
   carry its own transform independent of text layout. */
.iz-link[data-directional] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.iz-link__icon {
  inline-size: 16px;
  block-size: 16px;
  flex: none;
  transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
}
.iz-link[data-directional]:hover .iz-link__icon,
.iz-link[data-directional]:focus-visible .iz-link__icon {
  transform: translateX(3px);
}
.iz-link[data-directional]:dir(rtl):hover .iz-link__icon,
.iz-link[data-directional]:dir(rtl):focus-visible .iz-link__icon {
  transform: translateX(-3px);
}
@media (prefers-reduced-motion: reduce) {
  .iz-link__icon {
    transition: none;
  }
}