/* Our social channels matches the Language row and works without JavaScript. */
.social-menu > summary {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--yomm-charcoal, #34353B);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.2;
  text-align: left;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

.social-menu > summary::-webkit-details-marker {
  display: none;
}

.social-menu > summary:hover {
  background: color-mix(in srgb, #6B6A6A 12%, transparent);
}

.social-menu > summary:focus-visible {
  outline: 3px solid color-mix(in srgb, #FD681A 36%, transparent);
  outline-offset: -3px;
}

.social-menu-list {
  overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  .social-menu[open] > .social-menu-list {
    animation: languages-unfold 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .social-menu.is-folding > .social-menu-list {
    animation: languages-fold 150ms ease-in forwards;
  }
}

/* Local social links; the circles use each service's own brand colors. */
.site-menu-social {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
}

.site-menu-list .social-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--social-brand-color);
  color: #FFFFFF;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 120ms ease;
}

.site-menu-list .x-follow-button {
  --social-brand-color: #FFFFFF;
  color: #000000;
}

.site-menu-list .discord-button {
  --social-brand-color: #5865F2;
}

.social-button svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.social-button img {
  display: block;
  width: 24px;
  height: auto;
}

.site-menu-list .social-button:hover {
  background: var(--social-brand-color);
  opacity: 0.85;
}

.site-menu-list .social-button:focus-visible {
  outline: 2px solid var(--yomm-charcoal, #34353B);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .site-menu-list .social-button {
    transition: none;
  }
}