/* =====================================================================
   SOCIAL ICONS — hover animation
   From Uiverse.io by wilsondesouza.

   A white circle whose brand colour rises from the bottom on hover, turning
   the icon white, while the network's name slides up above it on a label of
   the same colour.

   Kept to the original's behaviour and brand colours, with three changes:

   · The original's first rule, `ul { list-style: none; }`, is left out. It
     reaches every list on the site, not just this one.

   · Everything sits under .social-anim instead of .example-2. The original's
     .tooltip is one of the commonest class names there is, and the Support
     menu already has a .tooltip of its own.

   · Size, spacing and the label's travel are custom properties, so the one
     rule set serves both the footer and the much smaller mobile top bar. The
     top bar also flips the label to open downward (--below): it sits at the
     very top of the page, where a label rising upward would be cut off.

   It also answers keyboard focus, not only hover, and Facebook and WhatsApp
   are added to the brand set since those are the networks this site links.
   ===================================================================== */
.social-anim {
  --sa-size: 50px;
  --sa-icon: 30px;
  --sa-gap: 20px;
  --sa-tip-rest: -30px;
  --sa-tip-open: -50px;
  --sa-tip-size: 14px;
  display: flex;
  align-items: center;
  gap: var(--sa-gap);
}
.social-anim .icon-content {
  position: relative;
  margin: 0;
}
.social-anim .icon-content .tooltip {
  position: absolute;
  top: var(--sa-tip-rest);
  left: 50%;
  z-index: 5;
  transform: translateX(-50%);
  color: #fff;
  padding: 6px 10px;
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  font-size: var(--sa-tip-size);
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  transition: all 0.3s ease;
}
.social-anim .icon-content:hover .tooltip,
.social-anim .icon-content:focus-within .tooltip {
  opacity: 1;
  visibility: visible;
  top: var(--sa-tip-open);
}
.social-anim .icon-content a {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--sa-size);
  height: var(--sa-size);
  border-radius: 50%;
  color: #4d4d4d;
  background-color: #fff;
  opacity: 1;
  transform: none;
  transition: all 0.3s ease-in-out;
}
.social-anim .icon-content a:hover,
.social-anim .icon-content a:focus-visible {
  box-shadow: 3px 2px 45px 0px rgb(0 0 0 / 12%);
  color: white;
  outline: none;
}
.social-anim .icon-content a svg {
  position: relative;
  z-index: 1;
  width: var(--sa-icon);
  height: var(--sa-icon);
}
.social-anim .icon-content a .filled {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: #000;
  transition: all 0.3s ease-in-out;
}
.social-anim .icon-content a:hover .filled,
.social-anim .icon-content a:focus-visible .filled {
  height: 100%;
}

/* ------------------------------ brand colours ------------------------------ */
.social-anim .icon-content a[data-social="facebook"] .filled,
.social-anim .icon-content a[data-social="facebook"] ~ .tooltip {
  background-color: #1877F2;
}
.social-anim .icon-content a[data-social="instagram"] .filled,
.social-anim .icon-content a[data-social="instagram"] ~ .tooltip {
  background: linear-gradient(
    45deg,
    #405de6,
    #5b51db,
    #b33ab4,
    #c135b4,
    #e1306c,
    #fd1f1f
  );
}
.social-anim .icon-content a[data-social="youtube"] .filled,
.social-anim .icon-content a[data-social="youtube"] ~ .tooltip {
  background-color: #ff0000;
}
.social-anim .icon-content a[data-social="whatsapp"] .filled,
.social-anim .icon-content a[data-social="whatsapp"] ~ .tooltip {
  background-color: #25D366;
}
/* In the original, and ready for when the site links them. */
.social-anim .icon-content a[data-social="linkedin"] .filled,
.social-anim .icon-content a[data-social="linkedin"] ~ .tooltip {
  background-color: #0274b3;
}
.social-anim .icon-content a[data-social="github"] .filled,
.social-anim .icon-content a[data-social="github"] ~ .tooltip {
  background-color: #24262a;
}
.social-anim .icon-content a[data-social="x"] .filled,
.social-anim .icon-content a[data-social="x"] ~ .tooltip {
  background-color: #000000;
}

/* --------------------------------- sizes ---------------------------------- */
/* The footer's column is narrow: four full-size circles would wrap. */
.social-anim--md {
  --sa-size: 42px;
  --sa-icon: 22px;
  --sa-gap: 12px;
  --sa-tip-rest: -28px;
  --sa-tip-open: -44px;
  --sa-tip-size: 13px;
}
.fsocial.social-anim { max-width: none; }

/* The mobile top bar is a thin strip. */
.social-anim--sm {
  --sa-size: 30px;
  --sa-icon: 16px;
  --sa-gap: 10px;
  --sa-tip-rest: -22px;
  --sa-tip-open: -34px;
  --sa-tip-size: 12px;
}

/* The label opens downward, for a row at the very top of the page. */
.social-anim--below .icon-content .tooltip {
  top: auto;
  bottom: var(--sa-tip-rest);
}
.social-anim--below .icon-content:hover .tooltip,
.social-anim--below .icon-content:focus-within .tooltip {
  top: auto;
  bottom: var(--sa-tip-open);
}

@media (prefers-reduced-motion: reduce) {
  .social-anim .icon-content .tooltip,
  .social-anim .icon-content a,
  .social-anim .icon-content a .filled { transition: none; }
}