/* Elevate circular social media buttons. */
.elevate-social-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.elevate-social-icon {
  --social-accent: #2563eb;
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.75rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--social-accent) 65%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--social-accent) 8%, #ffffff);
  color: var(--social-accent);
  font-size: 1.15rem;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, color 160ms ease;
}

.elevate-social-icon:hover,
.elevate-social-icon:focus-visible {
  background: var(--social-accent);
  color: #ffffff;
  border-color: var(--social-accent);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--social-accent) 24%, transparent);
  transform: translateY(-2px);
  outline: none;
}

.elevate-social-icon:focus-visible {
  box-shadow:
    0 0 0 3px #ffffff,
    0 0 0 6px color-mix(in srgb, var(--social-accent) 35%, transparent),
    0 12px 24px color-mix(in srgb, var(--social-accent) 24%, transparent);
}

.elevate-social-icon i {
  display: block;
  line-height: 1;
}

.elevate-social-icon--instagram {
  --social-accent: #e1306c;
}

.elevate-social-icon--tiktok {
  --social-accent: #111827;
}

.elevate-social-icon--whatsapp {
  --social-accent: #16a34a;
}

@media (max-width: 575.98px) {
  .elevate-social-links {
    width: 100%;
    justify-content: flex-start;
  }

  .elevate-social-icon {
    width: 2.625rem;
    height: 2.625rem;
    flex-basis: 2.625rem;
  }
}

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