/*
  inlineLink — a link inside running text (component.json inlineLink, 9 tokens).
  Same type as the text around it. Every link is underlined (text only, never the icon).
  External links (leave the site) add a trailing arrow-square-out icon.
  A standalone link that moves forward within the site (a work card's "View work")
  adds a trailing arrow-right. The icon is never underlined.
  (Changed 2026-09-26, Vivek: external links are underlined too.)
  Split by surface: default = light surfaces; --dark = the hero.
  Hover (pointer devices only, light surfaces): a very light blue highlight behind the words
  (blue.200 at 5%; decided by Vivek 2026-09-26). Nothing else changes. Focus: the ring only.
  MOTION (BUILD 19): the highlight fades at inlineLink.transition (feedback). A tap shows it
  at once while the finger is down and fades out on release.
*/

.inline-link {
  color: var(--inline-link-content-light);
  font-family: var(--inline-link-text-style-all-font-family);
  font-size: var(--inline-link-text-style-all-font-size);
  font-weight: var(--inline-link-text-style-all-font-weight);
  line-height: var(--inline-link-text-style-all-line-height);
  text-decoration: underline;
  --link-ring: var(--inline-link-focus-ring-color-light);
  -webkit-box-decoration-break: clone; /* a link that wraps gets a highlight on each line */
  box-decoration-break: clone;
  transition: background-color var(--inline-link-transition-all-duration) var(--inline-link-transition-all-easing);
}
/* The highlight hugs the words, no padding, square corners; a link that wraps
   gets its own highlight on each line. */
@media (hover: hover) {
  .inline-link:not(.inline-link--dark):hover {
    background-color: var(--inline-link-fill-hover);
  }
}

/* tap (and mouse press): the highlight, at once; it fades out on release */
.inline-link:not(.inline-link--dark):active {
  background-color: var(--inline-link-fill-hover);
  transition-duration: 0s;
}

.inline-link--dark {
  color: var(--inline-link-content-dark);
  --link-ring: var(--inline-link-focus-ring-color-dark);
}

.inline-link__icon {
  display: inline-block;
  width: var(--inline-link-icon-size-all);
  height: var(--inline-link-icon-size-all);
  margin-inline-start: var(--inline-link-icon-gap-all);
  vertical-align: -0.2em; /* sits on the text's line, not above it */
}

.inline-link:focus-visible {
  outline: var(--inline-link-focus-ring-width-focus) solid var(--link-ring);
  outline-offset: var(--inline-link-focus-ring-offset-focus);
  border-radius: 2px;
}