/* ============================================================================
   PROFILE LINKS — the one rule behind every "@handle" and avatar that points at
   /profile/{username}.
   ----------------------------------------------------------------------------
   These links were retrofitted onto markup that already had its own typography:
   .comment-username, .member-name, .reviewer-name, .builder-name, .artist-name,
   … all carry their own font-size / weight / colour. So this rule deliberately
   does NOT style text — it only neutralises the UA anchor defaults (blue,
   underlined) so an element that used to be a <div> or <span> looks exactly the
   same after becoming an <a>, and adds the hover affordance.

   display:inline-block matters. Several of the hosts were block elements sitting
   in a flex column (.comment-username has white-space:nowrap + text-overflow:
   ellipsis, which needs a block box to clip against); a bare inline anchor would
   collapse those. inline-block keeps the box while leaving the anchor shrink-to-
   fit where it wraps an avatar.

   LOADED SITE-WIDE from templates/fragments/head-styles.html — these links show
   up on nearly every page (comments, cards, sidebars, notifications, popups), so
   a per-component copy would mean a dozen near-identical rules and a <link> on
   every htmx-swappable fragment. See static/css/new/README.md.
   ========================================================================== */

.profile-link {
    color: inherit;
    text-decoration: none;
    display: inline-block;
    max-width: 100%;
    transition: color 0.2s, opacity 0.2s;
}

/* Text handles get the accent + underline; an avatar wrapper has no text to
   underline, so it dims slightly instead (see the :has() rule below). */
.profile-link:hover,
.profile-link:focus-visible {
    color: var(--accent-tertiary, #e935c1);
    text-decoration: underline;
}

/* Avatar wrappers: the anchor's only child is the image. */
.profile-link:has(> img) {
    line-height: 0;          /* no descender gap under the avatar */
    border-radius: 50%;
}

.profile-link:has(> img):hover,
.profile-link:has(> img):focus-visible {
    text-decoration: none;
    opacity: 0.85;
}

.profile-link:focus-visible {
    outline: 2px solid var(--accent-tertiary, #e935c1);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ============================================================================
   SERIES LINKS — the same idea for the other entity that shows up inside text
   the page already styled: the franchise a character belongs to, pointing at
   /cosplay/{slug}.

   Same reasoning as .profile-link above, and it lives in this file for the same
   reason: these links appear inside rows (the character page's "Medium Titles",
   card subtitles) whose typography is set by their host, so the rule only
   neutralises the anchor defaults and adds the hover affordance. Site-wide
   because the hosts are, and a per-page copy would be three near-identical
   rules a month from now.

   Gold rather than the pink accent .profile-link uses: on a character page both
   kinds of link can sit a few rows apart, and "this is a person" and "this is a
   series" should not look like the same destination.
   ========================================================================== */

.series-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.series-link:hover,
.series-link:focus-visible {
    color: var(--color-gold, #f5b301);
    text-decoration: underline;
}

.series-link:focus-visible {
    outline: 2px solid var(--color-gold, #f5b301);
    outline-offset: 2px;
    border-radius: 4px;
}