/* 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: 90%; /* Aumenta a largura para aproximar da borda (5% de cada lado) */
    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; /* Garante alinhamento vertical perfeito */
    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 */
    margin: 0; /* Garante que não haja margem externa */
}

/* Estilos do Menu para Desktop (padrão) */
.main-nav {
    display: block; /* Visível por padrão no desktop */
    margin-top: 2px; /* Pequeno ajuste visual para compensar o peso visual da fonte */
}

.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: 40px; /* Aumentado o espaçamento para mais respiro */
    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: 'Roboto', sans-serif; /* Fonte UI Elements */
    font-size: 13px; /* Tamanho levemente reduzido */
    font-weight: 500; /* Peso Medium */
    padding: 10px 0; /* Mais área de clique e respiro vertical */
    letter-spacing: 0.5px; /* Letter-spacing sutil */
    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 */
    position: relative;
}

/* Linha Laranja Minimalista (Hover e Active) */
.nav-item a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 5px; /* Distância do texto */
    left: 0;
    background-color: #F2892D;
    transition: width 0.3s ease;
}

.nav-item a.active {
    color: #ffffff; /* Mantém branco */
}

.nav-item a:hover::after,
.nav-item a.active::after {
    width: 100%; /* Expande a linha */
}

/* 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;
}

/* Seletor de Idioma */
.language-switcher {
    display: flex;
    align-items: center;
    margin-left: 40px; /* Separa do menu */
}

/* --- 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 */
    }
    
    /* No mobile, o seletor de idioma fica à esquerda do hambúrguer */
    .language-switcher {
        margin-left: auto; /* Empurra para a direita, perto do hambúrguer */
        margin-right: 20px; /* Espaço entre idioma e hambúrguer */
    }
}

/* 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 */
}

/* 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! */
}

/* --- Botões Flutuantes --- */
.floating-buttons-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 9999;
    align-items: center;
}

.floating-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    outline: none;
    text-decoration: none;
}

.floating-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.4);
}

.whatsapp-btn {
    background-color: #25D366;
    color: #ffffff;
}

.whatsapp-btn:hover {
    background-color: #128C7E;
}

.email-btn {
    background-color: #007bff;
    color: #ffffff;
}

.email-btn:hover {
    background-color: #0056b3;
}

.back-to-top {
    background-color: #F2892D;
    color: #1a1a1a;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background-color: #ff9d42;
}

.phone-btn {
    background-color: #333333;
    color: #ffffff;
}

.phone-btn:hover {
    background-color: #555555;
}