/* ============================================================================
   REDES SOCIAIS — chips coloridos  ·  social-chips.css
   ----------------------------------------------------------------------------
   Colore os quadradinhos de rede social nos TRÊS lugares que os listam:
   topbar, drawer mobile e rodapé. O markup vem de _default_header.php e
   _default_footer.php, que marcam cada <a> com data-soc="instagram|facebook|
   google|…" (a chave sai de _socKey(), em base.php).

   POR QUE UM ARQUIVO SÓ PARA ISSO, carregado por último:
   as três listas já tinham regra de cor em arquivos diferentes, com
   especificidades diferentes e crescentes:
       gt-chrome.css        .agc-topbar__soc a:hover        (0,2,1)
       gt-chrome-light.css  .agc-topbar__soc a:hover        (0,2,1)
       footer-portal.css    .agc-footer .agc-footer__soc a:hover (0,3,2)
   Todas pintam o chip de dourado no hover, o que apagaria a cor da marca.
   O :is() abaixo empata em (0,3,1)/(0,3,2) — o ancestral .agc-footer entra
   dentro do :is() justamente para isso — e vence por ORDEM DE CARGA, por ser
   o último <link> do chrome em base.php. Mover este arquivo para antes do
   footer-portal.css quebra o rodapé em silêncio.

   PALETA: o chrome do site é claro (topbar e rodapé em pergaminho #F6F3EE,
   header branco). As cores de marca entram misturadas com 8% de marinho, o
   suficiente para sentarem na paleta sem deixarem de ser reconhecíveis. O
   aro e a sombra do hover são dourados (#B4915E), que é a assinatura do site.
   O "G" do Google é o mark oficial de 4 cores (SVG em base.php) e por isso
   pede fundo branco com fio de contorno, senão some no pergaminho.
   ============================================================================ */

:is(.agc-topbar__soc, .agc-dr__soc, .agc-footer .agc-footer__soc) a[data-soc]{
  border:1px solid transparent;
  transition:filter .18s, transform .18s, box-shadow .18s, border-color .18s;
}
:is(.agc-topbar__soc, .agc-dr__soc, .agc-footer .agc-footer__soc) a[data-soc="instagram"]{
  color:#FFFFFF;
  background:linear-gradient(135deg,
    color-mix(in srgb,#F9A03C 92%,#101C35),
    color-mix(in srgb,#E1306C 92%,#101C35) 46%,
    color-mix(in srgb,#8134AF 92%,#101C35) 76%,
    color-mix(in srgb,#4C5FD7 92%,#101C35));
}
:is(.agc-topbar__soc, .agc-dr__soc, .agc-footer .agc-footer__soc) a[data-soc="facebook"]{
  color:#FFFFFF;
  background:color-mix(in srgb,#1877F2 92%,#101C35);
}
:is(.agc-topbar__soc, .agc-dr__soc, .agc-footer .agc-footer__soc) a[data-soc="google"]{
  background:#FFFFFF;
  border-color:rgba(16,28,53,.16);
}
/* o mark de 4 cores acompanha o tamanho do chip em cada contexto
   (28px na topbar, 38 no rodapé, 40 no drawer) em vez de ficar fixo em 14px */
:is(.agc-topbar__soc, .agc-dr__soc, .agc-footer .agc-footer__soc) a[data-soc="google"] .agc-soc-g{
  display:block;width:58%;height:58%;
}

/* hover: mantém a cor da marca (o dourado do legado apagaria) e usa o ouro
   do site como aro, que é o que amarra os três chips à identidade */
:is(.agc-topbar__soc, .agc-dr__soc, .agc-footer .agc-footer__soc) a[data-soc]:hover{
  filter:brightness(1.08);
  transform:translateY(-2px);
  border-color:rgba(180,145,94,.85);
  box-shadow:0 10px 20px -12px rgba(16,28,53,.55);
}
:is(.agc-topbar__soc, .agc-dr__soc, .agc-footer .agc-footer__soc) a[data-soc="instagram"]:hover,
:is(.agc-topbar__soc, .agc-dr__soc, .agc-footer .agc-footer__soc) a[data-soc="facebook"]:hover{
  color:#FFFFFF;
}
:is(.agc-topbar__soc, .agc-dr__soc, .agc-footer .agc-footer__soc) a[data-soc="google"]:hover{
  background:#FFFFFF;
}

@media (prefers-reduced-motion:reduce){
  :is(.agc-topbar__soc, .agc-dr__soc, .agc-footer .agc-footer__soc) a[data-soc]{transition:none}
  :is(.agc-topbar__soc, .agc-dr__soc, .agc-footer .agc-footer__soc) a[data-soc]:hover{transform:none}
}