/* ============================================================================
   MPK — LINK AFFORDANCE

   An "Indexed & archived in" row with a URL and one without were pixel
   identical at rest: components.css gives both `color: inherit` and
   `text-decoration: none !important`, so `<a class="qai-index-link">` and
   `<span class="qai-index-link">` rendered the same in all twenty palettes.
   Setting the Card URL in Website Settings > Appearance > Theme therefore
   produced no visible change, which reads as "the setting did nothing".

   This file marks the rows that really are links, and nothing else. Rows
   without a URL are untouched, so a homepage that uses no card links looks
   exactly as before.

   Its own file rather than an edit to components.css on purpose: OJS links
   theme stylesheets without a version query, so a browser that already
   cached components.css would keep serving the old one. A new name cannot
   be stale.
   ============================================================================ */

/* A small outward arrow, in the row's own colour so every palette inherits it. */
.qai-index-list a.qai-index-link::after {
  content: "↗";
  margin-left: 6px;
  font-size: .92em;
  line-height: 1;
  opacity: .5;
  transition: opacity .18s ease;
}

/* Hover and keyboard focus: the arrow firms up and a hairline rule appears.
   components.css sets `text-decoration: none !important` on .qai-index-link,
   so the underline needs !important too; `a.qai-index-link:hover` (0,3,1)
   outranks that rule (0,2,0), so document order is not what decides this.

   Longhands, not the `text-decoration` shorthand: that shorthand also resets
   text-decoration-thickness, and since the losing rule declares it with
   !important, a plain thickness after an !important shorthand is discarded
   and the underline silently falls back to the browser's `auto` weight. */
.qai-index-list a.qai-index-link:hover::after,
.qai-index-list a.qai-index-link:focus-visible::after {
  opacity: 1;
}

.qai-index-list a.qai-index-link:hover,
.qai-index-list a.qai-index-link:focus-visible {
  text-decoration-line: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .qai-index-list a.qai-index-link::after { transition: none; }
}