/**
 * Estados específicos do header (normal, scroll, hover, etc)
 * Separando estas regras do CSS principal para melhor organização
 */

/* Estado normal */
header {
  height: 80px;
  background-color: var(--dark-bg);
}

.header-container {
  height: 80px;
}

/* Estado scrolled (quando a página é rolada) */
header.scrolled {
  height: 70px;
  background-color: rgba(26, 26, 26, 0.97);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

header.scrolled .header-container {
  height: 70px;
}

header.scrolled .logo {
  width: 130px;
}

header.scrolled .logo-container {
  padding: 6px 10px;
}

/* Estado hover para elementos de navegação */
nav ul li a:hover {
  color: var(--primary-color);
}

nav ul li a:hover::after {
  width: 100%;
}

/* Estado ativo para o menu mobile */
header.has-mobile-active {
  background-color: transparent;
  box-shadow: none;
}

/* Media queries para os diferentes estados do header */
@media (max-width: 992px) {
  header.scrolled .logo {
    width: 120px;
  }
}

@media (max-width: 768px) {
  header.scrolled,
  header.scrolled .header-container {
    height: 60px;
  }
  
  .logo {
    width: 130px;
  }
  
  header.scrolled .logo {
    width: 110px;
  }
}