/* Social icons render as a white disc with the platform's brand-colored
   logo painted on top (Facebook navy, Instagram gradient, X black,
   LinkedIn blue, YouTube red). The white disc is BAKED INTO each SVG
   so brand colors stay vivid regardless of footer background — no CSS
   border or background needed at the wrapper level. */

ul.social-links {
  --social-icon-size: 32px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
}

ul.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--social-icon-size);
  height: var(--social-icon-size);
  border-radius: 50%;
  transition: transform 0.18s ease;
}

ul.social-links a:hover {
  transform: translateY(-2px);
  /* Disable the brightness dimming the dev's style.css applies on hover
     so brand colors stay vivid instead of going gray. */
  filter: none;
}

/* The .site-footer qualifier matches the dev's higher-specificity rule at
   style.css (.site-footer ul.social-links img { width: 28px; height:
   28px }) so our 100%/100% sizing wins via source order. The second
   selector covers usages outside .site-footer (e.g. directory_detail). */
.site-footer ul.social-links a img,
ul.social-links a img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
}