/* ============================================================
   URBINO · LINK
   Atom. The one anchor style for both worlds.

   Two layers:
   1. A low-specificity branded default for bare <a> on any
      Urbino surface (.urbino-mgr / .urbino-cit), so authored /
      editor-added prose links render Urbino-blue + underlined
      instead of browser-default. Kept at (0,0,1)/(0,1,1) via
      :where() so any component used as an <a> (.u-btn, .u-card,
      .u-list-tile, …) wins on specificity and is never
      underlined.
   2. Explicit .u-link (+ modifiers) for standalone links, nav,
      footer, and "read-more" affordances.

   Apply: <a class="u-link">…</a>  ·  <a class="u-link u-link--quiet">…</a>
   ============================================================ */


/* ---------- 1 · Branded default for bare prose anchors ---------- */

:where(.urbino-mgr, .urbino-cit) a {
  color: var(--u-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--u-dur-fast) var(--u-ease-out);
}
:where(.urbino-mgr, .urbino-cit) a:hover  { color: var(--u-primary-hover); }
:where(.urbino-mgr, .urbino-cit) a:active { color: var(--u-primary-press); }
:where(.urbino-mgr, .urbino-cit) a:focus-visible {
  outline: none;
  border-radius: var(--u-radius-xs);
  box-shadow: var(--u-focus-ring);
}

/* Components used as <a> opt out of prose link styling.
   Cards / list-tiles inherit body colour; buttons / breadcrumb /
   tabs keep their own colour — all lose the underline. */
:where(.urbino-mgr, .urbino-cit) a.u-card,
:where(.urbino-mgr, .urbino-cit) a.u-list-tile { color: inherit; text-decoration: none; }
:where(.urbino-mgr, .urbino-cit) a.u-btn,
:where(.urbino-mgr, .urbino-cit) a.u-breadcrumb__link,
:where(.urbino-mgr, .urbino-cit) a.u-tabs__tab { text-decoration: none; }


/* ---------- 2 · Explicit link atom ---------- */

.u-link {
  color: var(--u-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color var(--u-dur-fast) var(--u-ease-out);
}
.u-link:hover  { color: var(--u-primary-hover); }
.u-link:active { color: var(--u-primary-press); }
.u-link:focus-visible {
  outline: none;
  border-radius: var(--u-radius-xs);
  box-shadow: var(--u-focus-ring);
}

/* Quiet — no underline until hover (top-bar nav, inline actions) */
.u-link--quiet { text-decoration: none; }
.u-link--quiet:hover { text-decoration: underline; }

/* Muted — secondary / footer / meta links */
.u-link--muted { color: var(--u-fg-2); text-decoration: none; }
.u-link--muted:hover { color: var(--u-fg-1); text-decoration: underline; }

/* Action — standalone "read-more →" affordance, icon-aligned.
   The arrow nudges 2px on hover: a gentle web cue, no bounce. */
.u-link--action {
  display: inline-flex;
  align-items: center;
  gap: var(--u-space-1);
  font-weight: 600;
  text-decoration: none;
}
.u-link--action:hover { text-decoration: none; }
.u-link--action svg,
.u-link--action img {
  width: 1em; height: 1em; flex-shrink: 0;
  transition: transform var(--u-dur-fast) var(--u-ease-out);
}
.u-link--action:hover svg,
.u-link--action:hover img { transform: translateX(2px); }