/* =========================================================
   social-link — an icon-only link to an external network
   (X, LinkedIn, Behance). Brand glyphs are solid-fill and
   inherit colour via currentColor. These are NOT Heroicons
   and do not use the .icon rule.
   ========================================================= */

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;    /* 24px hit target */
  height: 1.5rem;
  color: var(--color-font-light);
  border-radius: var(--border-radius-pill);
  transition: color 120ms ease;
}

.social-link__glyph {
  display: block;
  width: 1rem;      /* 16px glyph, centred in the 24px target */
  height: 1rem;
  fill: currentColor;
}

.social-link:hover  { color: var(--color-font); }
.social-link:active { color: var(--color-font); }

.social-link:focus-visible {
  outline: var(--accessibility-focus-outline-width)
           var(--accessibility-focus-outline-style, solid)
           var(--accessibility-focus-outline-color);
  outline-offset: var(--accessibility-focus-outline-offset);
  border-radius: var(--border-radius-pill);   /* keep the pill — overrides the global 5px focus default */
}