/* Header */
.site-header {
  position: absolute; /* Inicialmente posicionado sobre o hero */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000; /* Acima do conteúdo */
  background-color: transparent; /* Inicialmente transparente */
  box-shadow: none; /* Sem sombra inicialmente */
  padding: 20px 0; /* Padding para o logo */
  transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}

/* Estilo do header quando fixo no scroll */
.site-header.scrolled {
  position: fixed; /* Torna-se fixo no scroll */
  background-color: var(--primary-color); /* Adiciona background azul */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* Adiciona sombra */
  padding: 10px 0; /* Reduz padding quando fixo */
}


.site-header .container {
  display: flex;
  justify-content: flex-start; /* O logo fica à esquerda */
  align-items: center; /* Alinha itens verticalmente */
  /* Removido justify-content: space-between pois o menu-icon não está mais aqui */
}

.logo img {
  height: 160px; /* Ajuste a altura do logo */
  width: auto;
  display: block;
  transition: height 0.3s ease; /* Transição suave no tamanho do logo */
}

/* Ajusta o tamanho do logo quando o header está fixo (scrolled) */
.site-header.scrolled .logo img {
  height: 70px; /* Tamanho menor quando fixo */
}


/* Media Queries específicas do Header */
@media (max-width: 1024px) {
  .site-header {
      padding: 15px 0;
  }
  .site-header.scrolled {
       padding: 10px 0;
  }
  .logo img {
      height: 80px;
  }
  .site-header.scrolled .logo img {
      height: 60px;
  }
}

@media (max-width: 768px) {
   .site-header {
      padding: 10px 0;
  }
   .site-header.scrolled {
       padding: 8px 0;
  }
  .logo img {
      height: 70px;
  }
  .site-header.scrolled .logo img {
      height: 50px;
  }
}

@media (max-width: 480px) {
  .site-header {
      padding: 8px 0;
  }
   .site-header.scrolled {
       padding: 6px 0;
  }
  .logo img {
      height: 60px;
  }
  .site-header.scrolled .logo img {
      height: 40px;
  }
}