/* ============================================================
   Social Media Links
   HTML: <nav class="social"> > a[title] > svg
   ============================================================ */

.social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--gap-block);
}

/* Mobile: 9 Netzwerke × 24px + 8 × gap-4 sprengen schmale Viewports.
   Kleinerer Gap + wrap (oben) verhindert Overflow ohne Icons zu schrumpfen. */
@media (max-width: 29.999rem) {
  .social {
    gap: var(--space-3);
  }
}

.social a {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Tap-Target-Mindestmass 24x24 (WCAG 2.2 AA / Lighthouse). SVG selbst ist
     bereits 24px — Regel ist hier vor allem Schutz vor zukuenftiger
     Icon-Verkleinerung im Theme. */
  min-width: 1.5rem;
  min-height: 1.5rem;
  color: var(--color-text-muted);
  transition: color var(--transition), transform var(--transition);
}

.social a:hover {
  color: var(--color-text);
  transform: scale(1.1);
  text-decoration: none;
}

/* Brand colors on hover (optional, activated in theme.css) */
/*
.social a[title="Facebook"]:hover   { color: #1877f2; }
.social a[title="Instagram"]:hover  { color: #e4405f; }
.social a[title="LinkedIn"]:hover   { color: #0a66c2; }
.social a[title="YouTube"]:hover    { color: #ff0000; }
.social a[title="X"]:hover          { color: #000000; }
.social a[title="Pinterest"]:hover  { color: #bd081c; }
*/