/* External link icon styling */
:root{
  --ext-link-icon-size: 0.9em;
  --ext-link-icon-gap: 0.25em;
}

/* Apply only when JS marks links as external */
a.is-external{
  position: relative;
  white-space: normal;
}

a.is-external::after{
  content: "🔗";
  display: inline-block;
  width: var(--ext-link-icon-size);
  height: var(--ext-link-icon-size);
  margin-left: var(--ext-link-icon-gap);
  line-height: 1;
  font-size: var(--ext-link-icon-size);
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  opacity: 0.8;
}

/* Optional: subtle hover emphasis */
a.is-external:hover::after{ opacity: 1; }

/* Allow opt-out */
a[data-no-external-icon]::after, a.no-external-icon::after{ display: none !important; }

/* Emphasized internal link pill for important in-site references
   Usage: <a href="/..." class="internal-presets-link">…</a>
   Keeps neutral design; does not interfere with CTAs (class is opt-in). */
a.internal-presets-link{
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 18%);
  background: rgb(255 255 255 / 6%);
  color: inherit;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}

a.internal-presets-link:hover,
a.internal-presets-link:focus{
  background: rgb(255 255 255 / 10%);
  border-color: rgb(255 255 255 / 28%);
  box-shadow: 0 6px 18px rgb(0 0 0 / 18%);
}

/* Light background fallback: if parent declares a light bg, gently adjust */
[data-theme="light"] a.internal-presets-link,
body.light a.internal-presets-link{
  border-color: rgb(0 0 0 / 16%);
  background: rgb(0 0 0 / 4%);
}

[data-theme="light"] a.internal-presets-link:hover,
body.light a.internal-presets-link:hover{
  background: rgb(0 0 0 / 6%);
  border-color: rgb(0 0 0 / 28%);
}