/*
 * HEADER FIXO COMPLETO - SAVAS
 * Torna top-banner e header-nav fixos durante o scroll
 */

/* ==================== TOP-BANNER FIXO ==================== */

.top-banner {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1001 !important; /* Acima do header */
    
    /* Estilo do banner */
    background-color: var(--background-dark) !important;
    color: var(--secondary-color) !important;
    padding: 0.5rem 0 !important;
    font-size: 0.875rem !important;
    text-align: center !important;
    
    /* Sombra sutil para separar do conteúdo */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    
    /* Transição suave */
    transition: all 0.3s ease !important;
}

.top-banner .container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.top-banner strong {
    color: #11ab6b !important;
}

/* ==================== HEADER FIXO (AJUSTADO) ==================== */

.header {
    position: fixed !important;
    top: 40px !important; /* Altura do top-banner */
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important; /* Abaixo do top-banner */
    background-color: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
}

/* Estado scrolled - header com fundo mais sólido */
.header.scrolled {
    background-color: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

/* ==================== AJUSTE DO MAIN-CONTENT ==================== */

/* Ajustar margem-top para compensar header fixo completo */
.main-content {
    margin-top: 130px !important; /* top-banner (40px) + header (90px) */
    padding-top: 0 !important;
}

/* ==================== MOBILE RESPONSIVE ==================== */

@media (max-width: 768px) {
    /* Top-banner mobile */
    .top-banner {
        padding: 0.4rem 0 !important;
        font-size: 0.75rem !important;
    }
    
    /* Header mobile */
    .header {
        top: 32px !important; /* Altura reduzida do top-banner mobile */
    }
    
    /* Main-content mobile */
    .main-content {
        margin-top: 113px !important; /* top-banner (32px) + header (81px) */
    }
    
    /* Ocultar top-banner em telas muito pequenas se necessário */
    @media (max-width: 480px) {
        .top-banner {
            display: none !important;
        }
        
        .header {
            top: 0 !important;
        }
        
        .main-content {
            margin-top: 81px !important; /* Apenas header */
        }
    }
}

/* ==================== ESTADOS DE SCROLL ==================== */

/* Quando rolar para baixo - header compacto */
body.scrolled .top-banner {
    padding: 0.3rem 0 !important;
    font-size: 0.8rem !important;
}

body.scrolled .header {
    top: 30px !important; /* Top-banner compacto */
}

/* ==================== ANIMAÇÕES E TRANSIÇÕES ==================== */

/* Transição suave para o top-banner */
.top-banner {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

/* Estado oculto (se necessário) */
.top-banner.hidden {
    transform: translateY(-100%) !important;
    opacity: 0 !important;
}

/* Transição suave para o header */
.header {
    transform: translateY(0) !important;
}

/* ==================== CORREÇÕES DE Z-INDEX ==================== */

/* Garantir hierarquia correta */
.top-banner {
    z-index: 1001 !important;
}

.header {
    z-index: 1000 !important;
}

.mobile-menu {
    z-index: 1002 !important; /* Acima de tudo quando aberto */
}

.modal-overlay {
    z-index: 1003 !important; /* Modais acima de tudo */
}

/* ==================== MELHORIAS VISUAIS ==================== */

/* Efeito glassmorphism no header */
.header {
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
}

/* Sombra mais suave no top-banner */
.top-banner {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* ==================== CORREÇÃO PARA HERO-SLIDER ==================== */

/* Garantir que hero-slider não fique atrás do header fixo */
.hero-slider {
    margin-top: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

/* ==================== OTIMIZAÇÕES PARA PERFORMANCE ==================== */

/* Usar transform para animações mais suaves */
.top-banner,
.header {
    will-change: transform, opacity !important;
    transform: translateZ(0) !important; /* Força aceleração de hardware */
}

/* ==================== ACESSIBILIDADE ==================== */

/* Garantir contraste adequado */
.top-banner {
    color: #ffffff !important;
}

.top-banner strong {
    color: #11ab6b !important;
    font-weight: 600 !important;
}

/* ==================== ESTADOS ESPECIAIS ==================== */

/* Para PWA/Standalone */
@media (display-mode: standalone) {
    .top-banner {
        top: env(safe-area-inset-top, 0) !important;
        padding-top: calc(0.5rem + env(safe-area-inset-top, 0)) !important;
    }
    
    .header {
        top: calc(40px + env(safe-area-inset-top, 0)) !important;
    }
}

/* Para landscape mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .top-banner {
        padding: 0.2rem 0 !important;
        font-size: 0.7rem !important;
    }
    
    .header {
        top: 25px !important;
    }
    
    .main-content {
        margin-top: 95px !important;
    }
}

/* ==================== DEBUG (Remover em produção) ==================== */
/*
.top-banner {
    border: 2px solid red !important;
}

.header {
    border: 2px solid blue !important;
}

.main-content {
    border: 2px solid green !important;
}
*/