/**
 * @file
 * WMD Solutions Base Theme - Social links component.
 * Styles for wmd_social_links block type.
 * Variables defined in base.css.
 */

:root {
  --social-icon-size: 2.25rem;
  --social-icon-color: currentColor;
  --social-icon-hover-color: var(--color-accent);
  --social-icon-gap: 1.25rem;
  --social-icon-opacity: 0.8;
}

.wmd-social-links {
  display: flex;
  align-items: center;
  gap: var(--social-icon-gap);
  flex-wrap: wrap;
}

.wmd-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--social-icon-color);
  opacity: var(--social-icon-opacity);
  transition: opacity 0.2s ease, color 0.2s ease, transform 0.2s ease;
  text-decoration: none;
}

.wmd-social-link:hover,
.wmd-social-link:focus {
  color: var(--social-icon-hover-color);
  opacity: 1;
  transform: translateY(-2px);
  text-decoration: none;
}

.wmd-social-link svg {
  width: var(--social-icon-size);
  height: var(--social-icon-size);
  fill: currentColor;
  display: block;
  flex-shrink: 0;
}

/* Footer context — icons inherit footer color */
.site-footer .wmd-social-links {
  color: var(--footer-color);
}

.site-footer .wmd-social-link,
.site-footer .wmd-social-link svg {
  color: var(--footer-color);
  fill: var(--footer-color);
  opacity: var(--social-icon-opacity);
}

.site-footer .wmd-social-link:hover,
.site-footer .wmd-social-link:focus,
.site-footer .wmd-social-link:hover svg,
.site-footer .wmd-social-link:focus svg {
  color: var(--social-icon-hover-color);
  fill: var(--social-icon-hover-color);
  opacity: 1;
  transform: translateY(-2px);
}