/* ==========================================================================
   SOCIAL LINKS COMPONENT
   --------------------------------------------------------------------------
   Notes:
   - .hide class is defined in global utilities and initially hides links.
   - .icon-embed-xsmall is defined in global utilities for icon sizing.
   - Use .is-center modifier on wrapper to center all social icons.
   ========================================================================== */

/* Wrapper for social links */
.social-links-wrapper {
  display: flex; /* flex layout for row of icons */
  flex-flow: row; /* horizontal row direction */
  justify-content: flex-start; /* align icons to start by default */
  align-items: center; /* vertically center icons */
  grid-column-gap: 0.75rem; /* horizontal spacing between icons */
  grid-row-gap: 0.75rem; /* vertical spacing if wrap occurs */
}

/* Center-aligned variant */
.social-links-wrapper.is-center {
  justify-content: center; /* center icons horizontally */
  align-items: center; /* center icons vertically */
}

/* Individual social link styling */
.social-links-item {
  color: #d1d1d1; /* default icon color */
  cursor: pointer; /* show pointer on hover */
  border-radius: 12rem; /* pill-shaped container if needed */
  text-decoration: none; /* remove underline */
  transition: 
    transform 0.2s cubic-bezier(.47, 0, .745, .715),
    opacity 0.2s cubic-bezier(.47, 0, .745, .715); /* smooth hover effects */
}

/* Hover effect for social link */
.social-links-item:hover {
  color: #fff; /* change icon color on hover */
  transform: translate(0, -0.125rem); /* subtle lift on hover */
}