/* =====================================================
   HEADER RESPONSIVO MOBILE - COMPLEMENTOS
   Arquivo: mobile-header-fix.css
   Usado em conjunto com menu_customizado.css
   ===================================================== */

/* ===== VARIÁVEIS MOBILE ===== */
:root {
    --mobile-header-height: 70px;
    --mobile-breakpoint: 768px;
    --mobile-menu-bg: rgba(255, 255, 255, 0.98);
    --mobile-overlay-bg: rgba(0, 0, 0, 0.5);
    --mobile-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    --mobile-border-radius: 16px;
    --mobile-animation-speed: 0.3s;
}

/* ===== MELHORIAS ESPECÍFICAS PARA MOBILE ===== */
@media (max-width: 768px) {
    /* Smooth scrolling para menu mobile */
    .custom-menu-items {
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    .custom-menu-items::-webkit-scrollbar {
        display: none !important;
    }

    /* Melhorar acessibilidade mobile */
    .custom-menu-mobile-toggle:focus,
    .custom-menu-mobile-close:focus {
        outline: 2px solid #f15a22 !important;
        outline-offset: 2px !important;
    }

    .custom-menu-link:focus {
        outline: 2px solid #f15a22 !important;
        outline-offset: -2px !important;
        background: #f5f5f5 !important;
        color: #f15a22 !important;
    }

    /* Otimizações de performance */
    .custom-menu-items {
        will-change: transform !important;
    }

    .mobile-menu-overlay {
        will-change: opacity !important;
    }
}

/* ===== MOBILE PEQUENO (max-width: 480px) ===== */
@media (max-width: 480px) {
    .custom-menu-container {
        height: 60px !important;
    }

    .custom-menu {
        height: 60px !important;
        padding: 0 0.75rem !important;
    }

    .custom-menu-logo {
        font-size: 1.25rem !important;
        max-width: 150px !important;
    }

    .custom-menu-mobile-toggle {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.1rem !important;
    }

    .custom-menu-right .btn {
        padding: 0.4rem 0.6rem !important;
        font-size: 0.8rem !important;
    }

    /* Menu mobile menor */
    .custom-menu-items {
        width: 90% !important;
        max-width: 280px !important;
        padding-top: 70px !important;
    }

    .custom-menu-link {
        padding: 0.875rem 1rem !important;
        font-size: 1rem !important;
    }

    /* Ajuste do body para mobile pequeno */
    body {
        padding-top: 60px !important;
    }
}

/* ===== MODO ESCURO (OPCIONAL) ===== */
@media (max-width: 768px) and (prefers-color-scheme: dark) {
    .custom-menu-container {
        background: #1a1a1a !important;
        border-bottom-color: #333 !important;
    }

    .custom-menu-items {
        background: rgba(26, 26, 26, 0.98) !important;
    }

    .custom-menu-link {
        color: #e0e0e0 !important;
    }

    .custom-menu-link:hover {
        background: rgba(241, 90, 34, 0.1) !important;
        color: #f15a22 !important;
    }

    .mobile-menu-overlay {
        background: rgba(0, 0, 0, 0.7) !important;
    }
}

/* ===== CORREÇÕES ESPECÍFICAS PARA CONFLITOS ===== */
@media (max-width: 768px) {
    /* Garantir que modais funcionem corretamente */
    .modal {
        z-index: 1060 !important;
    }

    /* Reset de estilos conflitantes */
    .custom-menu-item > a {
        display: flex !important;
        width: 100% !important;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .custom-menu-container {
        display: none !important;
    }

    body {
        padding-top: 0 !important;
    }
}