/* =========================================
   HEADER MOBILE - FINAL (CLEAN & SEM DUPLICIDADE)
   Arquivo: /assets/css/mobile/header.css
   ========================================= */

@media (max-width: 1024px) {

    /* --- 1. AJUSTES GERAIS --- */
    body {
        padding-top: 70px; /* Compensa a altura do header fixo */
        padding-left: 0;   
    }

    /* Esconde elementos de PC */
    .desktop-only, 
    .desktop-navigation {
        display: none !important;
    }

    /* Exibe elementos Mobile */
    .mobile-only {
        display: flex !important;
    }


    /* --- 2. CONTAINER DO HEADER --- */
    .site-header {
        height: 70px !important;
        padding: 0 20px; /* Espaçamento lateral confortável */
        
        background-color: var(--cor-background-fundo);
        /* Sombra suave e difusa para dar profundidade */
        box-shadow: 0 4px 20px rgba(0,0,0,0.15); 
        border-bottom: 1px solid rgba(255,255,255,0.05);
        
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2000;
    }

    .header-flex-container {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between; /* Logo na Esq | Ações na Dir */
    }


    /* --- 3. ÁREA ESQUERDA (APENAS LOGO) --- */
    .header-left {
        display: flex;
        align-items: center;
    }

    /* REMOVIDO: O botão de catálogo do header (já existe no footer) */
    .header-left .header-icon-btn {
        display: none !important;
    }

    .header-logo img {
        height: 36px; /* Logo com tamanho legível */
        width: auto;
        display: block;
    }


    /* --- 4. ÁREA DIREITA (PARCEIROS + MENU) --- */
    .header-actions {
        display: flex;
        align-items: center;
        gap: 12px; /* Espaço entre Parceiros e Menu */
    }

    /* Botão Parceiros (Estilo "Pílula" Clean) */
    .btn-header-parceiros {
        height: 36px;
        padding: 0 14px;
        gap: 6px;
        
        background-color: rgba(255,255,255,0.1); /* Fundo translúcido moderno */
        color: var(--cor-branco);
        border: 1px solid rgba(255,255,255,0.2);
        
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        text-decoration: none;
        border-radius: 50px; /* Arredondado */
        
        display: flex; align-items: center;
        transition: background 0.2s;
    }
    
    .btn-header-parceiros i { font-size: 12px; }
    
    .btn-header-parceiros:active {
        background-color: rgba(255,255,255,0.3);
    }
    
    /* Esconde o texto "Parceiros" em telas muito pequenas (iPhone SE/5) */
    @media (max-width: 340px) {
        .btn-header-parceiros span { display: none; }
        .btn-header-parceiros { padding: 0; width: 36px; justify-content: center; }
    }

    /* Botão Menu (Hambúrguer) */
    .header-icon-btn[aria-label="Menu Site"] {
        background: transparent;
        border: none;
        color: var(--cor-branco);
        font-size: 26px; /* Ícone grande */
        width: 44px; height: 44px; /* Área de toque grande */
        
        display: flex; align-items: center; justify-content: center;
        cursor: pointer;
        padding: 0;
        margin-right: -10px; /* Compensa o padding visual da direita para alinhar com a borda */
    }


    /* =========================================
       5. GAVETA DE NAVEGAÇÃO (MENU LATERAL)
       ========================================= */
    
    /* Overlay Escuro */
    .mobile-nav-overlay {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.6);
        z-index: 2998;
        opacity: 0; visibility: hidden;
        transition: all 0.3s ease;
        backdrop-filter: blur(3px);
    }
    .mobile-nav-overlay.active { opacity: 1; visibility: visible; }

    /* A Gaveta em Si */
    .mobile-nav-drawer {
        position: fixed; top: 0; right: 0;
        width: 85%; max-width: 320px;
        height: 100%;
        
        background: var(--cor-quase-preto); 
        box-shadow: -5px 0 30px rgba(0,0,0,0.2);
        z-index: 2999;
        
        transform: translateX(100%); 
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex; flex-direction: column;
    }

    .mobile-nav-drawer.active { transform: translateX(0); }

    /* Cabeçalho da Gaveta */
    .drawer-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: 25px 20px;
        background: var(--cor-principal);
        color: var(--cor-branco);
    }

    .drawer-title {
        font-weight: 800; font-size: 18px; text-transform: uppercase; letter-spacing: 1px;
    }

    .close-drawer-btn {
        background: transparent; border: none;
        color: var(--cor-branco); font-size: 24px;
        cursor: pointer; display: flex; align-items: center;
    }

    /* Lista de Links */
    .drawer-content {
        padding: 10px 0;
        overflow-y: auto;
    }

    .mobile-menu-list {
        display: flex; flex-direction: column; gap: 0;
        list-style: none; margin: 0; padding: 0;
    }

    .mobile-menu-list li {
        border-bottom: 1px solid #f5f5f5;
    }

    .mobile-menu-list a {
        display: flex; justify-content: space-between; align-items: center;
        padding: 18px 25px;
        color: var(--cor-branco);
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
        text-transform: uppercase;
        transition: background 0.2s;
    }

    .mobile-menu-list a:active {
        background-color: #f9f9f9;
        color: var(--cor-principal);
    }

    /* Submenus (Se houver) */
    .mobile-menu-list .sub-menu {
        background: #fafafa;
        padding: 0;
        display: block; /* Sempre aberto ou controlado via JS */
    }
    
    .mobile-menu-list .sub-menu li { border-bottom: 1px solid #eee; }
    
    .mobile-menu-list .sub-menu a {
        padding: 14px 25px 14px 40px; /* Mais recuo */
        font-size: 14px;
        color: var(--cor-texto-medio);
        text-transform: none;
        font-weight: 500;
    }
}