/* =================================================================
   HEADER MENU ANIMATIONS - Efeito de deslize suave
   ================================================================= */

/* ✅ HEADER COMO JANELA/CORTINA - Efeito de Revelação */
header.main-header {
    /* Não animar altura: apenas o menu desliza */
    transition: box-shadow 0.3s ease,
                background 0.3s ease !important;
    /* ✅ CORREÇÃO SCROLL: Impedir scroll vertical desnecessário no header */
    overflow-x: hidden !important; /* 🎭 HORIZONTAL: Esconder overflow horizontal */
    overflow-y: hidden !important; /* ✅ VERTICAL: Evitar scroll vertical no header */
    position: relative !important;
}

/* ✅ CONTAINER DO MENU - COM TRANSIÇÕES PARA SLIDE EFFECT */
.header-menu-container {
    /* 🎯 EFEITO SLIDE: Menu anima com opacity e transform */
    visibility: visible !important;
    /* Não forçar max-height/overflow aqui para não conflitar com header.css */
    
    /* ✅ POSICIONAMENTO: Menu na posição final desde o início */
    position: relative !important;
    
    /* ✅ TRANSIÇÕES PARA SLIDE: opacity + transform coordenado com header */
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ✅ DROPDOWN FIX: Garantir que área de busca no header não tenha overflow cortado */
header.main-header .search-box-container,
header.main-header .header-left,
header.main-header .search-input-wrapper {
    overflow: visible !important;
    contain: none !important;
    isolation: auto !important;
}

/* 🎭 ESTADO FECHADO - Header pequeno, menu oculto atrás */
/* APENAS PARA HEADERS COM JS CARREGADO - evita conflito com anti-FOUC */
header.main-header.js-loaded:not(.menu-active) {
    /* 🚪 JANELA FECHADA: Altura mínima esconde o menu */
    min-height: var(--header-height) !important; /* Apenas 60px - menu fica "atrás" */
    max-height: var(--header-height) !important; /* Forçar altura máxima pequena */
}

/* 🎭 MENU FECHADO - Estado inicial com slide para cima */
header.main-header:not(.menu-active) .header-menu-container {
    opacity: 0;
    transform: translateY(-20px);
}

/* 🎭 ESTADO ABERTO - Header cresce, revelando menu como cortina */
/* APENAS PARA HEADERS COM JS CARREGADO - evita conflito com anti-FOUC */
header.main-header.js-loaded.menu-active {
    /* 🚪 JANELA ABERTA: Header cresce e revela o menu gradualmente */
    min-height: calc(var(--header-height) + 65px) !important; /* 60px header + 65px menu */
    max-height: calc(var(--header-height) + 65px) !important; /* Altura máxima para revelar menu */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* 🎭 MENU ABERTO - Estado final com slide para baixo */
header.main-header.menu-active .header-menu-container {
    opacity: 1;
    transform: translateY(0);
}

/* ✅ MENU SEMPRE NA POSIÇÃO FINAL - Não muda com estado do header */
header.main-header .header-menu-container {
    /* Menu permanece na mesma posição, independente do estado do header */
    /* A revelação é feita pelo crescimento do header pai, não movimento do menu */
}

/* ✅ BODY QUANDO MENU ESTÁ ATIVO - REMOVIDO: Não alterar padding do body */
/* O deslocamento será feito pelo content-wrapper, não pelo body */
/* body.menu-active {
    padding-top: var(--header-height) !important;
    transition: padding-top 0.4s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
} */

/* Removido: manter .header-flex-container imóvel (alinhamento consistente) */

/* ✅ MENU HORIZONTAL - HERDA ANIMAÇÕES DO CONTAINER PAI */
.header-menu-container .menu-horizontal-filtros-position-wrapper {
    /* 🎯 EFEITO SLIDE: Menu herda animações do container pai */
    position: relative !important;
    /* Remover overrides de transform e opacity - deixar container pai controlar */
}

/* ✅ CONTEÚDO DO MENU - HERDA ANIMAÇÕES */
header.main-header .header-menu-container .menu-horizontal-filtros-position-wrapper {
    /* Menu herda animações do container pai - não forçar estados */
}

/* ✅ RESPONSIVIDADE MOBILE - Efeito Cortina */
@media (max-width: 768px) {
    /* 🎭 TABLET: Header menor revela menu menor */
    header.main-header:not(.menu-active) {
        min-height: 55px !important;
        max-height: 55px !important;
    }
    
    header.main-header.menu-active {
        min-height: calc(55px + 60px) !important; /* 55px header + 60px menu */
        max-height: calc(55px + 60px) !important;
    }
    
    /* ✅ REMOVIDO: Não alterar padding do body - deslocamento via content-wrapper */
    /* body.menu-active {
        padding-top: var(--header-height-mobile) !important;
    } */
    
    .header-menu-container {
        max-height: 70px !important; /* Menu dimensionado para tablet */
    }
}

@media (max-width: 480px) {
    /* 🎭 MOBILE: Header ainda menor revela menu compacto */
    header.main-header:not(.menu-active) {
        min-height: 55px !important;
        max-height: 55px !important;
    }
    
    header.main-header.menu-active {
        min-height: calc(55px + 55px) !important; /* 55px + 55px */
        max-height: calc(55px + 55px) !important;
    }
    
    /* ✅ REMOVIDO: Não alterar padding do body - deslocamento via content-wrapper */
    /* body.menu-active {
        padding-top: var(--header-height-mobile) !important;
    } */
    
    .header-menu-container {
        max-height: 65px !important; /* Menu mais compacto para mobile */
    }
}

/* ✅ PREVENÇÃO DE LAYOUT SHIFT */
/* Reservar espaço para evitar "salto" do conteúdo */
.content-below-header {
    transition: transform 0.4s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
}

/* ✅ MELHORAR PERFORMANCE - Apenas Header Anima */
header.main-header {
    will-change: height !important; /* Apenas altura muda */
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    transform-style: preserve-3d !important;
}

/* ✅ FORÇA MÁXIMA DE ESPECIFICIDADE - Efeito Cortina */
html body header.main-header.menu-active {
    min-height: calc(var(--header-height) + 65px) !important;
    max-height: calc(var(--header-height) + 65px) !important;
    /* Sem transição de altura; apenas menu anima */
    padding: 0px 10px !important;
}

html body header.main-header:not(.menu-active) {
    min-height: var(--header-height) !important;
    max-height: var(--header-height) !important;
}

/* ✅ FORÇA MÁXIMA DE ESPECIFICIDADE - Efeito Slide do Menu */
html body header.main-header:not(.menu-active) .header-menu-container {
    opacity: 0 !important;
    transform: translateY(-20px) !important;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

html body header.main-header.menu-active .header-menu-container {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* (Removido) Bloco que neutralizava as transições do menu */

/* ✅ CORREÇÃO: Esconder menu original quando header está ativo */
body.menu-active .menu-horizontal-filtros-position-wrapper:not(#menu-filtros-header):not(.header-menu-container *) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* ✅ SAFEGUARD - Garantir que menu nunca corte conteúdo */
@media (max-height: 600px) {
    /* Em telas muito pequenas, reduzir animações */
    header.main-header,
    .header-menu-container,
    .header-menu-container .menu-horizontal-filtros-position-wrapper {
        transition-duration: 0.2s !important;
    }
}