/**
 * FIX: Menu Hambúrguer Mobile - Alinhamento com Logo
 * 
 * Alinha o botão hambúrguer na mesma altura do logo + texto
 * 
 * @package Apathany
 * @version 1.0
 */

/* ═══════════════════════════════════════════════════════════
   ALINHAMENTO DO BOTÃO HAMBÚRGUER COM LOGO
   ═══════════════════════════════════════════════════════════ */

/* Botão hambúrguer deve estar alinhado com o centro do logo */
.mobile-menu-toggle,
button.mobile-menu-toggle,
.modern-mobile-toggle {
    /* Logo tem 45px + padding 8px = centro em ~30px */
    /* Botão tem 44-50px, ajustar para centro ficar alinhado */
    top: 8px !important;
    right: 15px !important;
    
    /* Tamanho consistente */
    width: 45px !important;
    height: 45px !important;
    min-width: 45px !important;
    min-height: 45px !important;
    
    /* Flexbox para centralizar o conteúdo */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Visual */
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    padding: 0 !important;
    
    /* Posicionamento */
    position: fixed !important;
    z-index: 10001 !important;
    
    /* Transições */
    transition: all 0.2s ease !important;
}

/* Hover */
.mobile-menu-toggle:hover,
button.mobile-menu-toggle:hover,
.modern-mobile-toggle:hover {
    background: rgba(102, 126, 234, 0.2) !important;
    border-color: #667eea !important;
    transform: scale(1.05) !important;
}

/* Active */
.mobile-menu-toggle:active,
button.mobile-menu-toggle:active,
.modern-mobile-toggle:active {
    transform: scale(0.95) !important;
}

/* ═══════════════════════════════════════════════════════════
   ÍCONE HAMBÚRGUER
   ═══════════════════════════════════════════════════════════ */

.mobile-menu-toggle .hamburger,
.mobile-menu-toggle > .hamburger {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 22px !important;
    height: 16px !important;
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
}

.mobile-menu-toggle .hamburger span,
.mobile-menu-toggle > .hamburger span {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    background: #ffffff !important;
    border-radius: 1px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Garantir que todas as 3 linhas sejam idênticas */
.mobile-menu-toggle .hamburger span:nth-child(1),
.mobile-menu-toggle .hamburger span:nth-child(2),
.mobile-menu-toggle .hamburger span:nth-child(3) {
    width: 22px !important;
    height: 2px !important;
    background: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════
   ANIMAÇÃO QUANDO MENU ESTÁ ABERTO - X
   ═══════════════════════════════════════════════════════════ */

body.mobile-menu-open .mobile-menu-toggle .hamburger span:nth-child(1),
.mobile-menu-open .mobile-menu-toggle .hamburger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
}

body.mobile-menu-open .mobile-menu-toggle .hamburger span:nth-child(2),
.mobile-menu-open .mobile-menu-toggle .hamburger span:nth-child(2) {
    opacity: 0 !important;
    transform: translateX(-20px) !important;
}

body.mobile-menu-open .mobile-menu-toggle .hamburger span:nth-child(3),
.mobile-menu-open .mobile-menu-toggle .hamburger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVO - AJUSTES POR TAMANHO DE TELA
   ═══════════════════════════════════════════════════════════ */

/* Desktop: Esconder hambúrguer */
@media (min-width: 992px) {
    .mobile-menu-toggle,
    button.mobile-menu-toggle,
    .modern-mobile-toggle {
        display: none !important;
    }
}

/* Tablet e Mobile: Mostrar hambúrguer */
@media (max-width: 991px) {
    .mobile-menu-toggle,
    button.mobile-menu-toggle,
    .modern-mobile-toggle {
        display: flex !important;
    }
}

/* Mobile pequeno: Ajustar tamanho ligeiramente */
@media (max-width: 480px) {
    .mobile-menu-toggle,
    button.mobile-menu-toggle,
    .modern-mobile-toggle {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        right: 10px !important;
        top: 8px !important;
    }
    
    .mobile-menu-toggle .hamburger span {
        width: 18px !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   GARANTIR QUE LOGO E HAMBÚRGUER ESTEJAM NA MESMA LINHA
   ═══════════════════════════════════════════════════════════ */

/* Se header tiver altura fixa, garantir alinhamento */
.modern-header,
.app-header,
#header {
    min-height: 61px !important; /* 45px logo + 8px padding top + 8px padding bottom */
}

/* Container do header deve ter flexbox para alinhamento */
.modern-header-container,
.app-header .container,
#header .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 15px !important;
}

/* Logo deve estar no mesmo nível visual */
.modern-header-brand,
.navbar-header {
    display: flex !important;
    align-items: center !important;
}

/* ═══════════════════════════════════════════════════════════
   ACESSIBILIDADE
   ═══════════════════════════════════════════════════════════ */

.mobile-menu-toggle:focus,
button.mobile-menu-toggle:focus,
.modern-mobile-toggle:focus {
    outline: 2px solid #667eea !important;
    outline-offset: 2px !important;
}

.mobile-menu-toggle:focus-visible,
button.mobile-menu-toggle:focus-visible,
.modern-mobile-toggle:focus-visible {
    outline: 2px solid #667eea !important;
    outline-offset: 2px !important;
}

/* ═══════════════════════════════════════════════════════════
   GARANTIR PRIORIDADE SOBRE OUTROS CSS
   ═══════════════════════════════════════════════════════════ */

/* Especificidade máxima */
html body .mobile-menu-toggle,
html body button.mobile-menu-toggle {
    top: 8px !important;
    height: 45px !important;
    width: 45px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

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

@media (min-width: 992px) {
    html body .mobile-menu-toggle,
    html body button.mobile-menu-toggle {
        display: none !important;
    }
}