/* Barra de Navegação – estilos unificados para todas as páginas */
/* (comportamento desktop e mobile) */

/* ==============================================
   0. Isolamento do nav e melhoria de contraste
   ============================================== */
.nav-menu {
    position: fixed;
    inset: 0 0 auto 0;
    height: 88px;
    padding: 0 48px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    /* gradiente escuro → transparente */
    background: linear-gradient(to bottom,
            rgba(12, 18, 38, 0.90) 0%,
            rgba(12, 18, 38, 0.00) 100%);
    /* blur suave por trás */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(8px);
    /* remove qualquer borda inferior */
    border-bottom: none;
    z-index: 1000;
}

/* =======================================
   1. Estilos gerais (desktop) — sem mudanças
   ======================================= */
.nav-menu::before {
    display: none;
}

.nav-links {
    display: flex;
    gap: 32px;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.nav-links .nav-link {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: 10px 16px;
    font: 600 1rem/1 "Poppins", sans-serif;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    background: transparent;
    /* fundo limpo */
    transition: background-color .3s ease, transform .2s ease;
    text-shadow: 0 0 0.5px rgba(0, 0, 0, 0.952);
    /* remove borrão nas letras */
}

.nav-links .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: #90ee90;
    transform: translateY(-1px);
}

.nav-links .nav-link.active {
    background-color: rgba(255, 255, 255, 0.12);
    color: #90ee90;
    transform: translateY(-1px);
}

/* ========================================
   3. Botão hamburger (mobile) — sem mudanças
   ======================================== */
.hamburger-menu {
    display: none;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.6rem;
    cursor: pointer;
    z-index: 1100;
}

/* Itens apenas-do-mobile e divisor de menu (escondidos em desktop) */
.mobile-only,
.nav-links .divider {
    display: none;
}

/* ================================
     MOBILE (max-width: 768px)
     Overlay + sidebar + interação
  ================================= */
@media (max-width: 768px) {

    /* mostra hamburger no mobile */
    .hamburger-menu {
        display: block;
        background: rgba(0, 0, 0, .5);
        border-radius: 8px;
        padding: 5px 9px;
    }

    /* ajusta container nav no mobile */
    .nav-menu {
        padding: 0 20px;
        justify-content: flex-start;
        backdrop-filter: none;
        box-shadow: none;
    }

    /* sidebar de links */
    .nav-menu .nav-links {
        position: fixed;
        top: 0;
        left: 0;
        width: 240px;
        height: 100vh;
        flex-direction: column;
        gap: 24px;
        padding: 100px 24px 24px;
        background: rgba(12, 18, 38, .97);
        transform: translateX(-100%);
        opacity: 0;
        transition: transform .35s ease, opacity .35s ease;
        z-index: 1001;
    }

    .nav-menu.open .nav-links {
        transform: translateX(0);
        opacity: 1;
    }

    /* overlay escuro bloqueando interações atrás do menu */
    #menuOverlay {
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, .5);
        opacity: 0;
        pointer-events: none;
        transition: opacity .35s ease;
        z-index: 1000;
    }

    #menuOverlay.show {
        opacity: 1;
        pointer-events: auto;
    }

    /* desativa scroll e toque no body quando aberto */
    body.no-scroll {
        overflow: hidden;
        touch-action: none;
    }

    /* revela itens mobile-only e divisor */
    .mobile-only {
        display: block;
    }

    .nav-links .divider {
        display: block;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        margin: 8px 0;
    }

    /* links ocupam toda a largura para área de clique maior */
    .nav-links .nav-link {
        width: 100%;
        font-size: 1.05rem;
    }
}