/**
 * SITE FOOTER COMPONENT
 * Minimal footer with social icon links
 *
 * BEM NAMING:
 * - Block: .site-footer
 * - Elements: .site-footer__links, .site-footer__link, .site-footer__icon
 */

/* ==========================================================================
   SITE FOOTER - Container
   ========================================================================== */

.site-footer {
  display: flex;
  justify-content: center;
  padding: var(--pad-xl) 0 var(--pad-md);
}

/* ==========================================================================
   LINKS ROW
   ========================================================================== */

.site-footer__links {
  display: flex;
  align-items: center;
  gap: var(--gap-lg);
}

/* ==========================================================================
   INDIVIDUAL LINK
   ========================================================================== */

.site-footer__link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--color-muted) 60%, transparent);
  text-decoration: none;
  transition:
    color var(--transition-base),
    filter var(--transition-base);
}

.site-footer__link:hover {
  color: var(--color-purple-primary);
  filter: drop-shadow(0 0 6px var(--glow-purple));
}

.site-footer__link:focus-visible {
  outline: 2px solid var(--color-purple-primary);
  outline-offset: 4px;
  border-radius: var(--radius-xs);
}

/* ==========================================================================
   ICONS
   ========================================================================== */

.site-footer__icon {
  width: 1.375rem;
  height: 1.375rem;
  fill: currentColor;
}

svg.site-footer__icon {
  translate: 0 1px;
}

.site-footer__link .material-symbols-outlined {
  font-size: 1.5rem;
  line-height: 1;
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .site-footer__link {
    transition: none;
  }
}