/*!
 * YTI&W Social Buttons — CSS base
 * Este arquivo provê estilos do widget de botões sociais.
 * Mantém compatibilidade com classes existentes e adiciona melhorias de acessibilidade e foco.
 * Versão do estilo: 1.1.0
 */

/* ================================
   Reset mínimo e utilitários
   ================================ */

.ytiw-sb :where(*) {
  box-sizing: border-box;
}

/* Classe utilitária para conteúdo apenas para leitores de tela,
   caso o tema não forneça. */
.ytiw-sb .screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ================================
   Container dos botões
   ================================ */

/* Envolva o widget com uma classe-namespace leve para evitar colisões. 
   (O PHP já emite as classes abaixo; esta aqui é só para escopo/encapsulamento). */
.ytiw-sb .social-buttons-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;              /* espaço padrão entre botões */
  width: 100%;
  align-items: center;
  /* Permite múltiplas linhas mantendo espaçamento consistente */
}

/* Alinhamentos (mantidos para compatibilidade retroativa) */
.ytiw-sb .social-buttons-container-left   { justify-content: flex-start; text-align: left; }
.ytiw-sb .social-buttons-container-center { justify-content: center;     text-align: center; }
.ytiw-sb .social-buttons-container-right  { justify-content: flex-end;   text-align: right; }
.ytiw-sb .social-buttons-container-justify{ justify-content: space-between; }

/* Evita que em "justify" um único botão fique colado nas bordas */
.ytiw-sb .social-buttons-container-justify > .social-button:only-child {
  margin-left: auto;
  margin-right: auto;
}

/* ================================
   Botões
   ================================ */

.ytiw-sb .social-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;                 /* ícones brancos por padrão */
  background-color: #666;      /* cor fallback; cor real vem inline por rede */
  border-radius: 999px;        /* circular */
  min-width: 2rem;             /* tamanhos mínimos (o diâmetro real é definido pelo inline via PHP) */
  min-height: 2rem;
  line-height: 1;
  transition: opacity 160ms ease, transform 160ms ease, box-shadow 160ms ease;
  will-change: opacity, transform, box-shadow;
  outline: none;
}

/* O ícone interno (Font Awesome) herda o tamanho via inline-style do PHP */
.ytiw-sb .social-button > i {
  display: inline-block;
  line-height: 1;
}

/* Estados de interação */
.ytiw-sb .social-button:hover,
.ytiw-sb .social-button:active {
  opacity: 0.9;
  transform: translateY(-1px);
}

.ytiw-sb .social-button:focus {
  outline: none;
}

/* Acessibilidade: foco visível */
.ytiw-sb .social-button:focus-visible {
  box-shadow: 0 0 0 3px rgba(0,0,0,.15), 0 0 0 5px rgba(255,255,255,.85);
}

/* Usuários que preferem menos animação */
@media (prefers-reduced-motion: reduce) {
  .ytiw-sb .social-button {
    transition: none;
  }
}

/* ================================
   Ajustes responsivos
   ================================ */

/* Em telas muito estreitas, garante que os botões quebrem linha com conforto */
@media (max-width: 420px) {
  .ytiw-sb .social-buttons-container {
    gap: 0.4rem;
  }
}

/* ================================
   Alta-contraste (quando suportado)
   ================================ */
@media (forced-colors: active) {
  .ytiw-sb .social-button {
    /* Deixa o sistema controlar as cores e força contorno visível */
    background: ButtonFace;
    color: ButtonText;
    border: 1px solid ButtonText;
  }
  .ytiw-sb .social-button:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
    box-shadow: none;
  }
}

/* ================================
   Compatibilidade retro
   ================================ */

/* Caso o HTML legado não tenha o wrapper .yt iw-sb, 
   aplicamos regras mínimas para manter aparência estável. */
.social-buttons-container:not(.yt iw-sb *) .social-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;
  border-radius: 999px;
  line-height: 1;
}

/* Nota: As cores específicas por rede continuam aplicadas inline pelo PHP. */