/* main.css */

/* 1. Configurações Globais */
body {
    /* Define a fonte Poppins como padrão para todo o site. */
    font-family: 'Poppins', sans-serif;
    /* Adicionando um cinza muito suave para quebrar o branco absoluto */
    background-color: #f8fafc; 
}

html {
    /* Adiciona a rolagem suave para âncoras (links internos como #contato). */
    scroll-behavior: smooth;
}

/* 2. Estilos de segurança para imagens */
img {
    /* Garante que imagens (como logos) não tenham bordas indesejadas do navegador. */
    border: none;
    outline: none;
}

/* 3. EFEITO HOVER AZUL (Menu Navbar - Estilo Premium) */

/* Classe base para todos os links de menu que terão o efeito de hover. */
.nav-link-effect {
    /* Cor de texto padrão (Cinza escuro do Tailwind). */
    color: #4b5563; 
    padding: 8px 12px; 
    border-radius: 9999px; 
    /* Transições suaves para a animação. */
    transition: all 0.3s ease-in-out; 
    position: relative;
    overflow: hidden; 
    z-index: 10; 
}

/* Elemento pseudo (o fundo azul) que cria o efeito deslizando. */
.nav-link-effect:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Cor Primária da TSII (azul escuro). */
    background-color: #1a73e8; 
    z-index: -1;
    /* Começa 100% para baixo (escondido). */
    transform: translateY(100%); 
    transition: transform 0.3s ease-in-out;
}

/* Estilos aplicados ao passar o mouse. */
.nav-link-effect:hover {
    /* ADICIONANDO !important para forçar o texto branco no hover,
       resolvendo o conflito com o link ativo. */
    color: white !important; 
    /* Faz o link "subir" um pouco visualmente (efeito 3D de empurrão). */
    transform: translateY(-2px); 
    box-shadow: 0 6px 15px rgba(26, 115, 232, 0.4); /* Sombra AZUL mais visível no hover. */
}

/* Traz o fundo azul para cima no hover. */
.nav-link-effect:hover:before {
    transform: translateY(0); 
}