/* css\menu.css */

/* --- 0. Navbar --- */
/* Garante que nosso menu (que é transparente) ganhe uma cor sólida ao rolar */
.navbar-scrolled {
    background-color: var(--cor-navbar-bg);
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}
/* Cor da logo no menu */
.navbar-brand img {
    max-height: 45px; /* Ajuste a altura do seu logo no menu */
}

.nav-link {
    color: #FFF;
}

/* Container para os ícones, para alinhá-los */
.nav-social-icons {
    display: flex; /* Alinha os ícones em linha */
    align-items: center;
    /* No mobile (menu colapsado), damos um espaço abaixo antes do botão */
    margin-bottom: 1rem; 
}

/* Media Query para telas de desktop (largura mínima de 992px, o 'lg' do Bootstrap) 
*/
@media (min-width: 992px) { 
    .nav-social-icons {
        margin-bottom: 0; /* Remove a margem inferior no desktop */
        margin-right: 1.5rem; /* Adiciona espaço à DIREITA (entre os ícones e o botão) */
    }
}

/* Estilo de CADA ícone social (o círculo) 
 Conforme solicitado: Círculo branco, ícone na cor #00948B
*/
.nav-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;  /* Tamanho do círculo */
    height: 32px; /* Tamanho do círculo */
    background-color: #ffffff; /* Fundo do círculo: branco */
    border-radius: 50%;      /* Deixa 100% redondo */
    color: var(--cor-navbar-bg); /* Cor do ícone: #00948B */
    text-decoration: none;
    margin: 0 4px; /* Espaçamento entre os ícones */
    transition: all 0.3s ease;
}

.nav-social-icon i {
    font-size: 0.9rem; /* Tamanho do ícone (ex: 'fa-facebook-f') dentro do círculo */
}

/* Efeito 'hover' (passar o mouse) para os ícones */
.nav-social-icon:hover {
    transform: scale(1.1); /* Efeito de leve aumento */
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    color: var(--cor-navbar-bg); /* Mantém a cor do ícone */
}