/* Footer social links — shared across pages.
   Inherits each page's own footer colour and typography scale.
   Pages may set --social-ink / --social-dim on the footer to tune the tone. */

.social-links {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-inline: -0.35rem;
}

.social-links a {
  display: inline-flex;
  padding: 0.35rem;
  color: var(--social-ink, currentColor);
  opacity: var(--social-dim, 0.7);
  text-decoration: none;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.social-links a:hover,
.social-links a:focus-visible {
  opacity: 1;
}

.social-links a:focus-visible {
  border-radius: 4px;
  outline: 1px solid currentColor;
  outline-offset: 2px;
}

.social-links svg {
  display: block;
  width: 1.05rem;
  height: 1.05rem;
}

/* Roomier tap target on touch-sized screens; the icons stay the same size. */
@media (max-width: 640px) {
  .social-links {
    gap: 0.6rem;
    margin-inline: -0.55rem;
  }

  .social-links a { padding: 0.55rem; }
}

@media (prefers-reduced-motion: reduce) {
  .social-links a { transition: none; }
}