/* Global styles for HTML and Body to ensure full black background coverage */
html, body {
    height: 100%; /* Ensure HTML and Body take full viewport height */
    margin: 0; /* Remove default margins */
    padding: 0; /* Remove default padding */
    background-color: #000000; /* Absolute black background for both HTML and Body */
    color: #ffffff; /* Default text color for contrast */
    font-family: 'Inter', sans-serif; /* Usando Inter como fonte principal */
}

body {
    /* The padding-top will be adjusted via JavaScript to handle the fixed navbar */
    /* No need for background-color here as it's set on html and inherited/covered */
}

/* Styles for the main navigation bar */
#main-navbar {
    background-color: #000000; /* Absolute black navbar */
    border-bottom: 1px solid #1a1a1a; /* Subtle line to separate */
    padding: 15px 0; /* PADDING para acomodar layout vertical */
    transition: all 0.3s ease-in-out; /* Smooth transition for position scroll effect */
    position: fixed; /* Fix navbar to the top */
    width: 100%; /* Occupy full width */
    top: 0; /* Agora começa no topo */
    left: 0;
    z-index: 1030; /* Ensure navbar is above other elements */
    display: flex; /* Usar flexbox para layout */
    flex-direction: column; /* LAYOUT VERTICAL: logo em cima, menu e contato embaixo */
    align-items: flex-start; /* ALINHA TUDO À ESQUERDA */
    height: auto; /* Altura automática baseada no conteúdo */
    min-height: 120px; /* Altura mínima para o hover funcionar bem */
}

/* Logo alinhada à esquerda no topo */
#main-navbar .navbar-brand {
    margin: 0 !important; /* Remove todas as margens */
    text-align: left; /* ALINAMENTO À ESQUERDA */
    margin-bottom: 10px !important; /* Espaço entre logo e menu */
    margin-left: 30px !important; /* MARGEM À ESQUERDA para não colar na borda */
}

#main-navbar .navbar-brand img {
    height: 90px; /* LOGO GRANDE mantém o tamanho */
    transition: none; /* Remove height transition */
    filter: drop-shadow(0 2px 4px rgba(5, 252, 4, 0.3)); /* Green glow */
}

/* Container do navbar alinhado à esquerda */
#nav-container {
    text-align: left !important; /* ALINHADO À ESQUERDA */
    padding: 0 30px !important; /* PADDING lateral */
    display: flex; /* Transforma em flex container */
    flex-direction: column; /* Layout vertical */
    align-items: flex-start; /* ALINHA TUDO NO CENTRO verticalmente */
    width: 100%; /* Ocupa a largura total */
}

/* Oculta o toggler em telas maiores, onde o menu não colapsa */
.navbar-toggler {
    display: none; /* Esconde o toggler por padrão em desktop */
}

/* Menu horizontal embaixo da logo - ALINHADO À ESQUERDA */
.menu-horizontal {
    display: flex;
    flex-direction: row;
    justify-content: flex-start; /* ALINHADO À ESQUERDA para harmonizar com a logo */
    align-items: center;
    width: auto; /* Largura automática baseada no conteúdo */
    margin: 0;
    padding: 0;
    flex-wrap: wrap; /* Permite quebra de linha se necessário */
    margin-left: 30px; /* MARGEM À ESQUERDA igual à logo */
}

.menu-horizontal .nav-item {
    margin: 0 8px; /* MARGIN entre os itens do menu */
    display: flex;
    align-items: center;
}

/* Navbar collapse - alinhado à esquerda */
.navbar-collapse {
    flex-grow: 1; /* Permite que o collapse ocupe o espaço restante */
    width: 100%; /* Ocupa a largura total para alinhar os itens */
    display: flex; /* Garante que seja flexbox */
    align-items: center; /* Alinha verticalmente */
    justify-content: space-between; /* Espaça o menu e as infos de contato */
}

/* Styles for navigation links - TAMANHO 50% MENOR */
#main-navbar .nav-link {
    color: #ffffff !important; /* Navbar links white */
    font-weight: bold;
    font-size: 0.55rem; /* 50% MENOR que 1.1rem */
    transition: color 0.3s ease;
    padding: 6px 10px; /* PADDING mais compacto */
    text-transform: uppercase; /* MAIÚSCULAS */
    letter-spacing: 0.6px; /* ESPAÇAMENTO ENTRE LETRAS reduzido */
    border-bottom: 2px solid transparent; /* BORDA INVISÍVEL para hover */
    text-decoration: none;
}

#main-navbar .nav-link:hover {
    color: #05FC04 !important; /* Green hover effect for links */
    border-bottom-color: #05FC04; /* BORDA VERDE no hover */
    transform: translateY(-2px); /* LEVE ELEVAÇÃO no hover */
}

/* Estilos para o botão de Login */
.menu-horizontal .nav-item .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px 10px; /* Ajuste o padding para centralizar */
    min-width: 80px; /* Garante largura mínima para centralizar o texto */
    /* Estilos padrão do botão de Login */
    background-color: transparent; /* Fundo transparente */
    border-color: #05FC04 !important; /* Borda verde */
    color: #05FC04 !important; /* Texto verde */
    font-weight: bold;
    border-radius: 5px;
    transition: all 0.3s ease;
    /* Adicionado para centralizar o botão de login */
    margin-left: 0; /* Garante que não há margem extra que o desloque */
    margin-right: auto; /* Empurra para a esquerda se necessário */
}

.menu-horizontal .nav-item .btn:hover,
.menu-horizontal .nav-item .btn:focus { /* Adicionado :focus para acessibilidade */
    background-color: #05FC04 !important; /* Fundo verde no hover */
    border-color: #05FC04 !important; /* Borda verde no hover */
    color: #000000 !important; /* Texto preto no hover */
    transform: translateY(-2px); /* Leve elevação no hover */
    box-shadow: 0 4px 15px rgba(5, 252, 4, 0.4); /* Sombra verde */
}

/* Informações de Contato e Redes Sociais no cabeçalho */
.navbar-contact-info {
    display: flex;
    align-items: center;
    /* Corrigindo alinhamento e cores */
    margin-left: auto; /* Empurra para a direita no desktop */
    margin-right: 30px; /* Margem direita para não colar na borda */
}

.navbar-contact-info .contact-info {
    font-size: 0.8rem;
    color: #ffffff; /* Letras brancas */
    margin-right: 15px; /* Espaçamento entre os itens de contato */
    display: flex;
    align-items: center;
}

.navbar-contact-info .contact-info i {
    color: #05FC04; /* Ícones verdes */
    margin-right: 5px;
    font-size: 1rem;
}

.navbar-contact-info .social-icons a {
    margin: 0 5px;
    font-size: 1rem;
    transition: transform 0.3s ease;
}

/* Cores específicas para os ícones das redes sociais na Top Bar e Main Navbar */
.top-bar .fab.fa-facebook-f,
.navbar-contact-info .social-icons a .fab.fa-facebook-f {
    color: #3b5998; /* Facebook Blue */
}
.top-bar .fab.fa-google-plus-g,
.navbar-contact-info .social-icons a .fab.fa-google-plus-g {
    color: #db4437; /* Google Red */
}
.top-bar .fab.fa-instagram,
.navbar-contact-info .social-icons a .fab.fa-instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1rem; /* Adjust font size if needed */
}

.navbar-contact-info .social-icons a:hover {
    transform: scale(1.2); /* Pequeno zoom no hover */
}


/* MOBILE MENU CORREÇÕES */
@media (max-width: 991.98px) { /* Tablets and smaller desktops */
    .navbar-toggler {
        display: block; /* Mostra o toggler em mobile */
        position: absolute; /* Posiciona o toggler */
        right: 20px;
        top: 30px;
        border: none; /* REMOVIDO: Borda que criava o quadrado preto */
        background-color: transparent; /* REMOVIDO: Fundo que criava o quadrado preto */
        padding: 8px 10px; /* Mantém o padding para área de clique */
        border-radius: 5px;
        transition: all 0.3s ease;
    }
    
    .navbar-toggler:hover,
    .navbar-toggler:focus {
        background-color: rgba(5, 252, 4, 0.1); /* Fundo sutil no hover */
        border-color: transparent; /* Garante que a borda não apareça */
        box-shadow: 0 0 0 0.2rem rgba(5, 252, 4, 0.25);
        outline: none;
    }
    
    /* Ícone do hamburger personalizado */
    .navbar-toggler-icon {
        width: 24px; /* Largura do ícone */
        height: 2px; /* A barra do meio */
        background-color: #05FC04; /* Cor da barra do meio */
        position: relative;
        display: block;
        border-radius: 1px;
        transition: all 0.3s ease;
    }
    
    .navbar-toggler-icon::before,
    .navbar-toggler-icon::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 2px; /* Espessura das barras */
        left: 0;
        background: #05FC04; /* Cor das barras */
        transition: all 0.3s ease;
        border-radius: 1px;
    }
    
    .navbar-toggler-icon::before {
        top: -6px; /* Posição da barra superior */
    }
    
    .navbar-toggler-icon::after {
        bottom: -6px; /* Posição da barra inferior */
    }
    
    /* Animação do ícone hamburger quando expandido */
    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
        background-color: transparent; /* Barra do meio desaparece */
    }
    
    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
        transform: rotate(45deg); /* Gira para formar um 'X' */
        top: 0; /* Move para o centro */
    }
    
    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
        transform: rotate(-45deg); /* Gira para formar um 'X' */
        bottom: 0; /* Move para o centro */
    }

    /* Navbar collapse styles for mobile */
    #main-navbar {
        flex-direction: row; /* Volta a ser row para alinhar logo e toggler */
        justify-content: space-between;
        align-items: center;
        min-height: auto;
        padding: 15px 20px; /* Ajusta padding para mobile */
    }

    #main-navbar .navbar-brand {
        margin: 0 !important;
        text-align: left;
    }

    #main-navbar .navbar-brand img {
        height: 60px; /* Logo menor para mobile */
    }

    #nav-container {
        padding: 0 !important;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .navbar-collapse {
        position: absolute;
        top: 100%; /* Abre abaixo da navbar */
        left: 0;
        width: 100%;
        background-color: #000000;
        border-top: 1px solid #1a1a1a;
        border-radius: 0 0 15px 15px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
        z-index: 1000;
        padding: 0; /* Remove padding extra aqui, será nos itens */
        display: none; /* Escondido por padrão, Bootstrap gerencia 'show' */
        flex-direction: column; /* Itens do menu empilhados */
        align-items: center;
    }
    .navbar-collapse.show {
        display: flex; /* Mostra o menu colapsado */
        animation: slideDownMenu 0.3s ease-out;
    }
    
    .menu-horizontal {
        flex-direction: column !important;
        align-items: center !important;
        padding: 20px 0;
        margin: 0 !important;
        width: 100%;
    }
    
    .menu-horizontal .nav-item {
        margin: 8px 0;
        width: 90%; /* Ocupa mais largura */
        text-align: center;
    }
    
    .menu-horizontal .nav-link {
        padding: 15px 20px !important;
        border-radius: 8px;
        transition: all 0.3s ease;
        display: block;
        width: 100%; /* Ocupa a largura do item */
        margin: 0 auto;
    }
    
    .menu-horizontal .nav-link:hover {
        background-color: rgba(5, 252, 4, 0.1);
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(5, 252, 4, 0.2);
    }
    
    .navbar-contact-info {
        flex-direction: column;
        align-items: center;
        margin: 20px 0 10px 0;
        padding-top: 20px;
        border-top: 1px solid #333;
        width: 100%;
    }
    
    .navbar-contact-info .contact-info {
        margin: 8px 0;
        text-align: center;
        font-size: 0.9rem;
        color: #ffffff; /* Letras brancas */
    }
    
    .navbar-contact-info .contact-info i {
        color: #05FC04; /* Ícone verde */
        margin-right: 5px;
    }
    
    .navbar-contact-info .social-icons {
        margin-top: 15px;
    }
    
    .navbar-contact-info .social-icons a {
        margin: 0 10px;
        font-size: 1.3rem;
        /* Cores das redes sociais */
        transition: color 0.3s ease; /* Transição para o hover */
    }

    /* Cores específicas para os ícones das redes sociais */
    .navbar-contact-info .social-icons a .fa-facebook-f {
        color: #3b5998; /* Facebook Blue */
    }
    .navbar-contact-info .social-icons a .fa-google-plus-g {
        color: #db4437; /* Google Red */
    }
    .navbar-contact-info .social-icons a .fa-instagram {
        background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 1.3rem; /* Adjust font size if needed */
    }
    
    /* Hover para ícones sociais - mantém a cor original */
    .navbar-contact-info .social-icons a:hover {
        transform: scale(1.1); /* Pequeno zoom no hover */
    }
}

/* Animação para abertura do menu */
@keyframes slideDownMenu {
    from {
        opacity: 0;
        transform: translateY(-10px); /* Ajuste para descer um pouco menos */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Desktop: Mantém comportamento original */
@media (min-width: 992px) {
    /* Remove qualquer interferência mobile no desktop */
    .navbar-toggler {
        display: none !important;
    }
    
    .navbar-collapse {
        display: flex !important;
        position: static !important;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    /* Comportamento original do hover */
    #navigation {
        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    }
    
    #navigation.hidden {
        transform: translateY(-100%);
        opacity: 0;
        pointer-events: none;
    }
    
    /* Hover no desktop funciona normalmente */
    #navigation:hover {
        transform: translateY(0) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}
/* Estilos para o menu suspenso */
.dropdown-menu {
    background-color: #0d0d0d !important; /* Fundo preto */
    border: 1px solid #1a1a1a !important; /* Borda sutil */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4) !important;
    border-radius: 8px !important;
}

.dropdown-item {
    color: #ffffff !important; /* Texto branco padrão */
    transition: all 0.2s ease-in-out !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #05FC04 !important; /* Fundo verde no hover */
    color: #000000 !important; /* Texto preto no hover */
}