/**
 * FIX DEFINITIVO: Ícone Hambúrguer - 3 linhas iguais
 * 
 * Sobrescreve TODOS os outros CSS com máxima especificidade
 * 
 * @package Apathany
 * @version 3.0 - FINAL
 */

/* ═══════════════════════════════════════════════════════════
   RESETAR TODOS OS ESTILOS ANTERIORES DO HAMBÚRGUER
   ═══════════════════════════════════════════════════════════ */

/* Remover TODOS os estilos conflitantes */
html body .mobile-menu-toggle .hamburger,
html body button.mobile-menu-toggle .hamburger,
html body .mobile-menu-toggle > .hamburger {
    /* RESET COMPLETO */
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    
    /* Tamanho fixo */
    width: 22px !important;
    height: 16px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    
    /* Sem margin, padding ou gap */
    margin: 0 auto !important;
    padding: 0 !important;
    gap: 0 !important;
    
    /* Sem transformações */
    transform: none !important;
}

/* ═══════════════════════════════════════════════════════════
   3 LINHAS IDÊNTICAS
   ═══════════════════════════════════════════════════════════ */

html body .mobile-menu-toggle .hamburger span,
html body button.mobile-menu-toggle .hamburger span,
html body .mobile-menu-toggle > .hamburger > span,
html body .mobile-menu-toggle .hamburger > span {
    /* RESET posicionamento absoluto */
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    
    /* Tamanho FIXO para todas */
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    min-height: 2px !important;
    max-height: 2px !important;
    
    /* Visual */
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-radius: 1px !important;
    
    /* Sem margin ou padding */
    margin: 0 !important;
    padding: 0 !important;
    
    /* Transição suave */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    
    /* Opacidade inicial */
    opacity: 1 !important;
    
    /* Sem transformação inicial */
    transform: none !important;
}

/* Garantir que TODAS as 3 linhas sejam IDÊNTICAS */
html body .mobile-menu-toggle .hamburger span:nth-child(1),
html body .mobile-menu-toggle .hamburger span:nth-child(2),
html body .mobile-menu-toggle .hamburger span:nth-child(3) {
    width: 22px !important;
    height: 2px !important;
    background: #ffffff !important;
    position: relative !important;
    top: auto !important;
}

/* ═══════════════════════════════════════════════════════════
   ANIMAÇÃO PARA X (QUANDO MENU ABERTO)
   ═══════════════════════════════════════════════════════════ */

/* Linha 1: Move para baixo e rota 45° */
html body.mobile-menu-open .mobile-menu-toggle .hamburger span:nth-child(1),
html body .mobile-menu-open .mobile-menu-toggle .hamburger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
    top: auto !important;
}

/* Linha 2: Desaparece (fade out) */
html body.mobile-menu-open .mobile-menu-toggle .hamburger span:nth-child(2),
html body .mobile-menu-open .mobile-menu-toggle .hamburger span:nth-child(2) {
    opacity: 0 !important;
    transform: translateX(-20px) !important;
    top: auto !important;
}

/* Linha 3: Move para cima e rota -45° */
html body.mobile-menu-open .mobile-menu-toggle .hamburger span:nth-child(3),
html body .mobile-menu-open .mobile-menu-toggle .hamburger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
    top: auto !important;
}

/* ═══════════════════════════════════════════════════════════
   MEDIA QUERIES - GARANTIR APLICAÇÃO EM MOBILE
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 991px) {
    html body .mobile-menu-toggle .hamburger {
        display: flex !important;
    }
    
    html body .mobile-menu-toggle .hamburger span {
        display: block !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   REMOVER CONFLITOS DE OUTROS ARQUIVOS CSS
   ═══════════════════════════════════════════════════════════ */

/* Sobrescrever mobile-menu-modern.css */
@media (max-width: 991px) {
    html body .hamburger {
        position: relative !important;
    }
    
    html body .hamburger span {
        position: relative !important;
    }
}

/* Sobrescrever header-clean.css */
@media (max-width: 991px) {
    html body .mobile-menu-toggle .hamburger {
        gap: 0 !important;
        justify-content: space-between !important;
    }
    
    html body .mobile-menu-toggle .hamburger span {
        width: 22px !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   DEBUG - Descomente para visualizar estrutura
   ═══════════════════════════════════════════════════════════ */

/*
.mobile-menu-toggle {
    border: 2px solid red !important;
}

.mobile-menu-toggle .hamburger {
    border: 2px solid yellow !important;
}

.mobile-menu-toggle .hamburger span {
    border: 1px solid lime !important;
}
*/