/* CSS específico para o menu hambúrguer */

/* FORÇAR VISIBILIDADE DO MENU HAMBÚRGUER */
#menuToggle {
    z-index: 10002 !important;
    pointer-events: auto !important;
    position: relative !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: none !important;
    border: none !important;
    color: hsl(var(--primary)) !important;
    font-size: 1.5rem !important;
    cursor: pointer !important;
    padding: 0.5rem !important;
    transition: all 0.3s ease !important;
    width: auto !important;
    height: auto !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

#menuToggle i {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 1.5rem !important;
    color: hsl(var(--primary)) !important;
    pointer-events: none !important;
}

#menuToggle:hover {
    color: hsl(var(--primary-light)) !important;
    transform: scale(1.1) !important;
}

#menuToggle:focus {
    outline: 2px solid hsl(var(--primary)) !important;
    outline-offset: 2px !important;
}

#menuToggle:active {
    transform: scale(0.95) !important;
}

/* Overlay: apenas visual, não bloqueia clique */
.mobile-menu-overlay {
    pointer-events: none !important;
    z-index: 9998 !important;
}
.mobile-menu-overlay.active {
    pointer-events: none !important;
}

/* Debug - Força visibilidade do menu hambúrguer */
.debug-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 99999 !important;
    pointer-events: auto !important;
}

.debug-menu i {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

/* Garantir que o menu hambúrguer apareça em mobile */
@media (max-width: 768px) {
    .menu-toggle {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    
    .menu-toggle i {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: none !important;
    }
}

/* Esconder menu hambúrguer em desktop */
@media (min-width: 769px) {
    .menu-toggle {
        display: none !important;
    }
}

/* Garantir que o botão de dark mode apareça */
#toggleDarkMode {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 10001 !important;
    position: relative !important;
    pointer-events: auto !important;
}

#toggleDarkMode i {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Garantir que o botão X do menu hambúrguer fique sempre por cima */
#menuToggle {
    z-index: 10002 !important;
    pointer-events: auto !important;
    position: relative !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: none !important;
    border: none !important;
    color: hsl(var(--primary)) !important;
    font-size: 1.5rem !important;
    cursor: pointer !important;
    padding: 0.5rem !important;
    transition: all 0.3s ease !important;
    width: auto !important;
    height: auto !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

/* Garantir que o botão X fique por cima mesmo quando o menu está aberto */
.nav-links.active ~ .header-container #menuToggle,
.header-container #menuToggle {
    z-index: 10003 !important;
    position: relative !important;
}