/* Brand SVG marks used as social icons across the site.
   Each logo renders in its NATIVE brand color by default
   (Facebook blue, Instagram gradient, YouTube red,
    WhatsApp green, LinkedIn blue) via inline SVG fill.

   Markup expected on every page:
     <a class="social-link social-fb" href="..." aria-label="Facebook">
       <span class="social-mark"></span>
     </a>

   .social-mark gets its SVG injected by js/social-icons.js at runtime.
   The CSS below sizes/positions the mark and styles the link card.
   On hover the link gets a glass-lift + gold border; the mark keeps
   its brand color. */

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--glass-light, rgba(255,255,255,0.06));
  border: 1px solid var(--glass-border, rgba(255,255,255,0.18));
  color: var(--text-light, #ffffff);
  text-decoration: none;
  transition: background 0.25s ease, transform 0.25s ease,
              border-color 0.25s ease, box-shadow 0.25s ease;
}
.social-link .social-mark {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.05em;
}
.social-link .social-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}
.social-link:hover {
  background: rgba(255,255,255,0.10);
  border-color: var(--gold, #d4af37);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

@media (max-width: 540px) {
  .social-link { width: 2.4rem; height: 2.4rem; }
  .social-link .social-mark { width: 1.05em; height: 1.05em; }
}