/* Estilos Gerais para o Cabeçalho */
.site-header {
    background-color: #1a1a1a; /* Cor de fundo escura similar ao original */
    padding: 15px 0; /* Espaçamento vertical para o cabeçalho */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Sombra sutil para destaque */
    position: relative; /* Para o posicionamento do menu mobile */
    z-index: 1000; /* Garante que o cabeçalho fique acima de outros elementos */
}

.header-container {
    max-width: 1200px; /* Largura máxima para o conteúdo do cabeçalho */
    margin: 0 auto; /* Centraliza o container */
    display: flex; /* Usa Flexbox para alinhar logo e menu */
    justify-content: space-between; /* Espaça o logo e o menu */
    align-items: center; /* Alinha verticalmente ao centro */
    padding: 0 20px; /* Espaçamento horizontal interno para evitar que o conteúdo cole nas bordas */
}

.logo img {
    max-height: 40px; /* Altura máxima para o logo, ajuste conforme a proporção original */
    width: auto; /* Mantém a proporção */
    display: block; /* Remove espaço extra abaixo da imagem */
}

/* Estilos do Menu para Desktop (padrão) */
.main-nav {
    display: block; /* Visível por padrão no desktop */
}

.nav-list {
    list-style: none; /* Remove marcadores de lista */
    margin: 0;
    padding: 0;
    display: flex; /* Itens do menu em linha */
    align-items: center; /* Alinha verticalmente os itens */
}

.nav-item {
    margin-left: 30px; /* Espaçamento entre os itens do menu */
    position: relative; /* Para efeitos de hover, se necessário */
}

.nav-item a {
    text-decoration: none; /* Remove sublinhado */
    color: #ffffff; /* Cor do texto padrão do menu */
    font-family: 'Akira-Bold', sans-serif; /* Use a fonte desejada */
    font-size: 16px;
    font-weight: 700;
    padding: 5px 0; /* Espaçamento interno para links */
    display: block; /* Torna o link um bloco para facilitar cliques e padding */
    transition: color 0.3s ease-in-out; /* Transição suave para o hover */
    white-space: nowrap; /* Evita quebras de linha nos itens do menu */
}

.nav-item a:hover {
    color: #F2892D; /* Cor laranja ao passar o mouse, similar ao seu print */
}

/* Estilo Específico para o Item "PROJETOS" - Destaque (baseado no print) */
/* Estilo Específico para o Item "PROJETOS" - REMOVER OU MODIFICAR */
/* Encontre este bloco no seu CSS e remova-o ou altere-o como abaixo */
.nav-item:first-child a {
    border: 1px solid #F2892D; /* Contorno laranja */
    padding: 8px 15px; /* Padding para o contorno */
    border-radius: 5px; /* Cantos arredondados */
    color: #F2892D; /* Cor do texto inicial do item "PROJETOS" */
}

.nav-item:first-child a:hover {
    background-color: #F2892D; /* Fundo laranja ao passar o mouse */
    color: #ffffff; /* Texto branco ao passar o mouse */
}

/* Altere o bloco acima para: */
.nav-item:first-child a {
    /* Remover estilos específicos do primeiro item, ou redefini-los para o padrão */
    border: none; /* Remove o contorno */
    padding: 5px 0; /* Volta ao padding padrão do link */
    color: #ffffff; /* Volta à cor padrão do link */
}

.nav-item:first-child a:hover {
    background-color: transparent; /* Remove fundo em hover */
    color: #F2892D; /* Mantém a cor laranja no hover, se desejar */
}


/* Estilo para o Item CTA ("Fale Conosco") - MODIFICAR */
/* Encontre este bloco no seu CSS e modifique-o como abaixo */
.nav-item.cta-item a {
    background-color: #F2892D; /* Fundo laranja para o botão CTA */
    color: #ffffff; /* Texto branco para o botão CTA */
    padding: 8px 15px; /* Padding para o botão */
    border-radius: 5px; /* Cantos arredondados */
    margin-left: 40px; /* Mais espaço para separar do último item */
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; /* Transição suave */
}

.nav-item.cta-item a:hover {
    background-color: #e07a1d; /* Tom ligeiramente mais escuro ao passar o mouse */
    color: #ffffff;
}

/* Altere o bloco acima para que 'DOAÇÕES' receba o destaque e 'FALE CONOSCO' fique como um item normal. */
/* Você não precisará do seletor `.nav-item.cta-item` se ele for apenas um item de menu normal. */
/* A forma mais fácil é dar uma classe única ao item DOAÇÕES no HTML e referenciá-la no CSS. */

/* Estilos para o Item "DOAÇÕES" - Destaque (desktop) */
/* Este bloco substitui o antigo .nav-item:first-child a, etc. */
.nav-item.highlight-donate-button a {
    border: 1px solid #F2892D; /* Contorno laranja */
    padding: 8px 15px; /* Padding para o contorno */
    border-radius: 5px; /* Cantos arredondados */
    color: #F2892D; /* Cor do texto inicial do item "DOAÇÕES" */
    margin-left: 30px; /* Mantenha o espaçamento, se desejar */
}

.nav-item.highlight-donate-button a:hover {
    background-color: #F2892D; /* Fundo laranja ao passar o mouse */
    color: #ffffff; /* Texto branco ao passar o mouse */
}

/* Estilos para o Item CTA ("Fale Conosco") - Apenas para o estilo de botão, sem o destaque principal */
/* Ajusta para que o "Fale Conosco" seja apenas um botão normal, sem o contorno laranja */
.nav-item.cta-item a {
    background-color: #F2892D; /* Fundo laranja para o botão CTA */
    color: #ffffff; /* Texto branco para o botão CTA */
    padding: 8px 15px; /* Padding para o botão */
    border-radius: 5px; /* Cantos arredondados */
    margin-left: 40px; /* Mais espaço para separar do último item */
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; /* Transição suave */
}

.nav-item.cta-item a:hover {
    background-color: #e07a1d; /* Tom ligeiramente mais escuro ao passar o mouse */
    color: #ffffff;
}

/* --- Media Queries --- */

@media (max-width: 980px) {
    /* Remove o contorno e a cor de destaque em mobile/tablet para o botão "DOAÇÕES" */
    .nav-item.highlight-donate-button a {
        border: none; /* Remove o contorno */
        padding: 15px 20px; /* Volta ao padding padrão do link mobile */
        color: #ffffff; /* Volta à cor padrão do link mobile */
        margin-left: 0; /* Remove margem lateral */
        background-color: transparent; /* Garante que não tenha fundo destacado em mobile */
    }

    .nav-item.highlight-donate-button a:hover {
        background-color: transparent; /* Remove fundo laranja em hover */
        color: #F2892D; /* Mantém a cor laranja no hover, se desejar */
    }

    /* Garante que o botão CTA em mobile/tablet se mantenha como um botão normal */
    .nav-item.cta-item a {
        margin-left: 0; /* Remove margem lateral */
        margin-top: 10px; /* Adiciona margem superior */
        padding: 12px 20px; /* Ajusta padding */
        display: inline-block; /* Para alinhar no centro se for o caso */
    }
}

/* Estilos do Botão de Hambúrguer (Inicialmente oculto no desktop) */
.menu-toggle {
    display: none; /* Oculto no desktop */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    position: relative;
    z-index: 1100; /* Garante que o botão esteja acima do menu mobile */
}

.menu-toggle .bar {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #ffffff; /* Cor das barras do hambúrguer */
    margin: 5px auto;
    transition: all 0.3s ease-in-out;
    border-radius: 2px;
}

/* Estilos para o menu aberto (via JS) */
.main-nav.active {
    /* Estes estilos serão controlados pelo JavaScript em mobile/tablet */
    /* (Definidos em Media Queries abaixo) */
}

/* Media Queries para Responsividade */

/* Para Tablets (ex: telas menores que 980px e maiores que 768px ou ajuste a seu critério) */
@media (max-width: 980px) {
    .header-container {
        padding: 0 15px;
    }

    .logo img {
        max-height: 35px; /* Ajusta o tamanho do logo para tablets */
    }

    .main-nav {
        display: none; /* Oculta o menu padrão no tablet */
        flex-direction: column; /* Itens em coluna */
        position: absolute;
        top: 100%; /* Abaixo do cabeçalho */
        left: 0;
        width: 100%;
        background-color: #262626; /* Fundo do menu mobile/tablet */
        box-shadow: 0 5px 10px rgba(0,0,0,0.3);
        transition: all 0.3s ease-in-out;
        z-index: 999; /* Garante que o menu fique acima do conteúdo */
    }

    .main-nav.active {
        display: flex; /* Mostra o menu quando ativo no tablet */
    }

    .nav-list {
        flex-direction: column; /* Itens em coluna */
        text-align: center; /* Centraliza o texto */
        width: 100%;
        padding: 10px 0;
    }

    .nav-item {
        margin: 0; /* Remove margem lateral */
        border-bottom: 1px solid rgba(255,255,255,0.1); /* Linha divisória */
        width: 100%;
    }

    .nav-item:last-child {
        border-bottom: none; /* Remove a borda do último item */
    }

    .nav-item a {
        padding: 15px 20px; /* Mais padding para itens de menu mobile/tablet */
        font-size: 18px; /* Aumenta o tamanho da fonte */
    }

    .nav-item:first-child a { /* Remove o contorno do botão PROJETOS em mobile */
        border: none;
        padding: 15px 20px;
        color: #ffffff; /* Volta a cor padrão */
    }

    .nav-item:first-child a:hover {
        background-color: transparent; /* Remove fundo laranja em hover */
        color: #F2892D; /* Volta a cor laranja no hover */
    }

    .nav-item.cta-item a {
        margin-left: 0; /* Remove margem para o botão CTA */
        margin-top: 10px; /* Adiciona margem superior */
        padding: 12px 20px; /* Ajusta padding */
        display: inline-block; /* Para alinhar no centro se for o caso */
    }

    .menu-toggle {
        display: block; /* Mostra o botão de hambúrguer no tablet */
    }

    /* Animação do ícone do hambúrguer */
    .menu-toggle.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .menu-toggle.active .bar:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}

/* Para Smartphones (ex: telas menores que 767px, ajuste a seu critério) */
@media (max-width: 767px) {
    .header-container {
        padding: 0 10px;
    }

    .logo img {
        max-height: 30px; /* Ajusta o tamanho do logo para smartphones */
    }

    .nav-item a {
        font-size: 16px;
    }

    .nav-item.cta-item a {
        padding: 10px 15px;
        font-size: 15px;
    }
}

/* Correção para o estilo do hover do link no menu lateral/overlays antigos, se ainda existir */
/* Se você manteve algum dos overlays, pode ser necessário manter este estilo ou adaptá-lo */
/* Esta é a base do seu CSS anterior:
a:hover {
    color: #f2892d;
}
*/

/* Estilos Gerais para o Cabeçalho (Modificado) */
.site-header {
    background-color: #1a1a1a; /* Cor de fundo escura similar ao original */
    padding: 15px 0; /* Espaçamento vertical para o cabeçalho */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Sombra sutil para destaque */
    position: fixed; /* Alterado de 'relative' para 'fixed' */
    top: 0; /* Fixa no topo da viewport */
    left: 0; /* Fixa na esquerda da viewport */
    width: 100%; /* Garante largura total */
    z-index: 1000; /* Garante que o cabeçalho fique acima de outros elementos */
    transition: transform 0.3s ease-out, opacity 0.3s ease-out; /* Adiciona transição para o efeito de sumir/aparecer */
}

/* Novas classes para controlar o comportamento de esconder/mostrar */
.site-header.hidden {
    transform: translateY(-100%); /* Move o cabeçalho para cima para escondê-lo */
    opacity: 0; /* Torna-o invisível */
}

.site-header.visible {
    transform: translateY(0); /* Traz o cabeçalho de volta para a posição normal */
    opacity: 1; /* Torna-o visível */
}

/* Adicione padding ao body para compensar o cabeçalho fixo,
   para que o conteúdo não fique escondido atrás dele. */
body {
    padding-top: 70px; /* Ajuste este valor para a altura exata do seu cabeçalho,
                           incluindo o padding que você definiu no .site-header */
    /* Por exemplo, se o padding do header é 15px em cima e embaixo e o logo tem 40px,
       a altura total pode ser 15+15+40 = 70px. Teste o valor! */
}