/*
 Theme Name:   Dots Child
 Theme URI:    https://wdtdots.wpengine.com/
 Description:  Dots Child Theme
 Author:       the WeDesignTech team
 Author URI:   https://wedesignthemes.com/
 Template:     dots
 Version:      1.0.0
 Text Domain:  dots-child
*/
/*
  =====================================================================
  CÓDIGO CSS PARA MUDAR A COR DOS ÍCONES SOCIAIS PARA ROXO NO HOVER
  =====================================================================
  Instruções:
  1. Copie todo este código.
  2. No seu painel do WordPress, vá para "Aparência" -> "Personalizar".
  3. No menu de personalização, encontre a opção "CSS Adicional".
  4. Cole o código neste campo e clique em "Publicar".
*/

/* Este seletor encontra o container dos ícones de redes sociais 
  do Elementor e aplica o efeito de cor roxa quando o mouse
  passa por cima do link (tag 'a').
*/
.elementor-widget-social-icons .elementor-social-icon:hover {
    color: #9933FF !important; /* Cor roxa desejada */
    background-color: transparent !important; /* Garante que não haja fundo */
}

/*
  Este seletor garante que o ícone em si (tag 'i') também
  receba a cor roxa no hover.
*/
.elementor-widget-social-icons .elementor-social-icon:hover i {
    color: #9933FF !important;
}

/*
  Este seletor garante que o texto do ícone (tag 'span') também
  receba a cor roxa no hover.
*/
.elementor-widget-social-icons .elementor-social-icon:hover span {
    color: #9933FF !important;
}
/*
  =====================================================================
  CÓDIGO CSS PARA MUDAR A COR DOS ÍCONES SOCIAIS PARA ROXO
  =====================================================================
  Instruções:
  1. Copie todo este código.
  2. No seu painel do WordPress, vá para "Aparência" -> "Personalizar".
  3. No menu de personalização, encontre a opção "CSS Adicional".
  4. Cole o código neste campo e clique em "Publicar".
*/

/* Esta seção define a cor ROXA como PADRÃO para os ícones e textos.
*/
.elementor-widget-social-icons .elementor-social-icon,
.elementor-widget-social-icons .elementor-social-icon i,
.elementor-widget-social-icons .elementor-social-icon span {
    color: #9933FF !important; /* Cor roxa padrão */
    background-color: transparent !important; /* Garante que não haja fundo */
}

/*
  Esta seção cria um efeito de brilho (roxo mais claro)
  quando o mouse passa por cima, para manter a interatividade.
*/
.elementor-widget-social-icons .elementor-social-icon:hover,
.elementor-widget-social-icons .elementor-social-icon:hover i,
.elementor-widget-social-icons .elementor-social-icon:hover span {
    color: #B366FF !important; /* Roxo mais claro para o efeito hover */
}