/* ===================================
   LOGO ADJUSTMENTS - TANATOS PDL THEME
   =================================== */

/*
 * Este arquivo contém ajustes responsivos para os logos do tema Tanatos.
 * Os logos agora se ajustam automaticamente ao tamanho da tela e incluem
 * efeitos visuais para melhor experiência do usuário.
 * 
 * IMPORTANTE: Cada logo tem seus próprios estilos independentes para evitar conflitos.
 * 
 * Tamanhos principais:
 * - Desktop: Logo principal até 350px altura, 800px largura
 * - Tablet: Logo principal até 250px altura, 500px largura  
 * - Mobile: Logo principal até 180px altura, 350px largura
 * - Mobile Pequeno: Logo principal até 120px altura, 250px largura
 * 
 * Logo Panel (Top Navigation) - PRIMEIRO ITEM À ESQUERDA:
 * - Desktop: 58px altura, 200px largura (centralizado verticalmente, à esquerda)
 * - Tablet: 50px altura, 160px largura
 * - Mobile: 40px altura, 120px largura
 * - Mobile Pequeno: 35px altura, 100px largura
 * 
 * LAYOUT HORIZONTAL: Menu fica ao lado do logo, não abaixo
 * 
 * REDES SOCIAIS: Integradas no footer principal
 */



/* ===================================
   LOGO PANEL (TOP NAVIGATION)
   =================================== */

/* Logo Panel - Primeiro item à esquerda */
.logo-panel {
  position: relative;
  z-index: 15;
  display: flex;
  align-items: center;
  height: 80px;
  margin-right: 40px;
  flex-shrink: 0; /* Não encolhe */
}

.logo-panel img {
  height: 58px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  transition: all 0.3s ease;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.05));
}

.logo-panel img:hover {
  transform: scale(1.05);
  filter: brightness(1.1) drop-shadow(0 0 15px rgba(255, 255, 255, 0.1));
}

/* ===================================
   MAIN LOGO (HEADER SECTION)
   =================================== */

/* Main Logo (Header Section) - ESTILOS ESPECÍFICOS */
header .logo {
  position: relative;
  z-index: 10;
  margin-bottom: 30px;
}

header .logo img {
  height: auto;
  max-height: 350px;
  width: auto;
  max-width: 800px;
  object-fit: contain;
  transition: all 0.3s ease;
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.1));
}

header .logo img:hover {
  transform: scale(1.05);
  filter: brightness(1.1) drop-shadow(0 0 30px rgba(255, 255, 255, 0.2));
}

/* Ajuste específico para o logo principal no header */
header .logo {
  top: 150px;
  left: 50px;
  transform: scale(1.1);
}

header .logo img {
  filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.2));
}

/* Efeito hover específico para o logo principal */
header .logo::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

header .logo:hover::after {
  opacity: 1;
}

/* ===================================
   FOOTER LOGOS
   =================================== */

/* Footer Logos */
.logos img {
  height: auto;
  max-height: 70px;
  width: auto;
  max-width: 180px;
  margin-bottom: 20px;
  object-fit: contain;
}

/* ===================================
   FOOTER SECTION - AJUSTES DE TEXTO
   =================================== */

/* Ajustes específicos para evitar quebra de texto */
.fMenu ul li a {
  font-size: 12px; /* Reduzido de 14px para 12px */
  line-height: 1.4;
  word-wrap: break-word;
  white-space: normal;
}

.fMenu h3 {
  font-size: 16px; /* Reduzido de 18px para 16px */
  line-height: 1.3;
}

/* Seletor de idioma - texto menor */
.selectlangBlock select {
  font-size: 12px; /* Reduzido de 14px para 12px */
  padding: 8px 10px;
}

/* Links de termos - texto menor */
.s-text a {
  font-size: 12px; /* Reduzido de 14px para 12px */
  line-height: 1.4;
}

/* ===================================
   CORREÇÃO DE CORES DOS TÍTULOS
   =================================== */

/* Corrigir cor dos títulos "Streaming", "Mídia" e "Características" */
.str-m h2 {
  color: #fff !important;
}

.streamBlock h2 {
  color: #fff !important;
}

.mediaBlock h2 {
  color: #fff !important;
}

.featuresBlock h2 {
  color: #fff !important;
}

/* ===================================
   REDES SOCIAIS NO FOOTER
   =================================== */

/* Redes Sociais no Footer */
footer .footer-social {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 15px !important;
  margin-top: 20px !important;
  padding: 15px 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  width: 100% !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 60px !important;
  background: transparent !important;
}

footer .footer-social a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  opacity: 0.7 !important;
  transition: all 0.3s ease !important;
  color: #fff !important;
  font-size: 20px !important;
  text-decoration: none !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.05) !important;
  visibility: visible !important;
  position: relative !important;
  z-index: 10 !important;
}

footer .footer-social a:hover {
  opacity: 1;
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.1);
}

/* Cores específicas para cada rede social no footer */
footer .footer-social a.tw:hover {
  color: #ff0000; /* YouTube vermelho */
  background: rgba(255, 0, 0, 0.1);
}

footer .footer-social a.fb:hover {
  color: #7289da; /* Discord azul */
  background: rgba(114, 137, 218, 0.1);
}

footer .footer-social a.vk:hover {
  color: #1877f2; /* Facebook azul */
  background: rgba(24, 119, 242, 0.1);
}

footer .footer-social a.twh:hover {
  color: #e4405f; /* Instagram rosa */
  background: rgba(228, 64, 95, 0.1);
}

/* Estilos específicos para os ícones Font Awesome no footer */
footer .footer-social a i {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  line-height: 40px !important;
  text-align: center !important;
  font-size: 20px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Footer Social Icons */
.socBlock a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  margin-right: 10px;
  margin-left: 10px;
  opacity: 0.7;
  transition: all 0.3s ease;
  color: #fff;
  font-size: 20px;
  text-decoration: none;
}

.socBlock a:hover {
  opacity: 1;
  transform: scale(1.1);
  color: #ff6e74;
}

/* Cores específicas para cada rede social no footer */
.socBlock a.tw:hover {
  color: #ff0000; /* YouTube vermelho */
}

.socBlock a.fb:hover {
  color: #7289da; /* Discord azul */
}

.socBlock a.vk:hover {
  color: #1877f2; /* Facebook azul */
}

.socBlock a.twh:hover {
  color: #e4405f; /* Instagram rosa */
}

/* ===================================
   RESPONSIVE DESIGN
   =================================== */

/* Tablet Responsive (768px and below) */
@media (max-width: 768px) {
  .logo-panel {
    margin-right: 20px;
  }
  
  .logo-panel img {
    height: 50px;
    max-width: 160px;
  }
  

  
  header .logo img {
    max-height: 250px;
    max-width: 500px;
  }
  
  .logos img {
    max-height: 50px;
    max-width: 120px;
  }
}

/* Mobile Responsive (576px and below) */
@media (max-width: 576px) {
  .logo-panel {
    margin-right: 15px;
    height: 60px;
  }
  
  .logo-panel img {
    height: 40px;
    max-width: 120px;
  }
  

  
  footer .footer-social {
    gap: 12px;
    margin-top: 15px;
  }
  
  footer .footer-social a {
    width: 35px;
    height: 35px;
    font-size: 18px;
  }
  
  header .logo img {
    max-height: 180px;
    max-width: 350px;
  }
  
  .logos img {
    max-height: 40px;
    max-width: 100px;
  }
}

/* Extra Small Mobile (480px and below) */
@media (max-width: 480px) {
  .logo-panel {
    height: 50px;
    margin-right: 10px;
  }
  
  .logo-panel img {
    height: 35px;
    max-width: 100px;
  }
  

  
  footer .footer-social {
    gap: 10px;
    margin-top: 10px;
  }
  
  footer .footer-social a {
    width: 30px;
    height: 30px;
    font-size: 16px;
  }
  
  header .logo img {
    max-height: 120px;
    max-width: 250px;
  }
  
  .logos img {
    max-height: 25px;
    max-width: 60px;
  }
}

/* Extra Extra Small Mobile (360px and below) */
@media (max-width: 360px) {

}