/**
 * ExpoQueijo 2026 — Header Styles (Premium Awwward-Level)
 * Transparent → Sticky transition with adaptive contrast
 * Targets: .expo-header AND .elementor-location-header
 */

/* ═══════════════════════════════════════════════
   1. BASE HEADER — Transparent, fixed top
   ═══════════════════════════════════════════════ */

.expo-header,
.elementor-location-header {
    position: fixed !important;
    top: 32px;
    left: 0;
    right: 0;
    z-index: 9999 !important;
    transition: box-shadow 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        backdrop-filter 0.5s ease,
        padding 0.4s ease;
    background: transparent !important;
}

/* Dark background curtain overlay (injected via JS) */
.expo-header-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(20, 18, 15, 0.95);
    z-index: 0;
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    pointer-events: none;
}

/* ═══════════════════════════════════════════════
   2. NAVIGATION — Transparent, sem caixa preta
   ═══════════════════════════════════════════════ */

/* Remove background/shadow/radius do nav principal */
.expo-header .elementor-nav-menu--main,
.expo-header .elementor-nav-menu__container,
.elementor-location-header .elementor-nav-menu--main,
.elementor-location-header .elementor-nav-menu__container {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-top: 0 !important;
}

/* ═══ NUCLEAR: Override Elementor Pro nav defaults ═══ */
/* Pointer background — Elementor Pro coloca bg #3f444b no ::before */
.elementor-location-header .e--pointer-background .elementor-item:before,
.elementor-location-header .e--pointer-background .elementor-item:after,
.elementor-location-header .elementor-nav-menu a.current,
.elementor-location-header .elementor-nav-menu a.disabled,
.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu a.current {
    background: transparent !important;
    background-color: transparent !important;
}

/* Active/hover items — Elementor Pro dropdown default #3f444b */
.elementor-location-header .elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-location-header .elementor-nav-menu--main .elementor-item.highlighted,
.elementor-location-header .elementor-nav-menu--main .elementor-item:focus,
.elementor-location-header .elementor-nav-menu--main .elementor-item:hover,
.elementor-location-header .e--pointer-background .elementor-item-active:before,
.elementor-location-header .e--pointer-background .elementor-item.highlighted:before,
.elementor-location-header .e--pointer-background .elementor-item:focus:before,
.elementor-location-header .e--pointer-background .elementor-item:hover:before {
    background: transparent !important;
    background-color: transparent !important;
}

/* Link colors — branco com text-shadow forte para legibilidade */
.expo-header .elementor-nav-menu>li>a,
.expo-header .elementor-nav-menu--main .elementor-item,
.elementor-location-header .elementor-nav-menu>li>a,
.elementor-location-header .elementor-nav-menu--main .elementor-item {
    color: #FFFFFF !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6),
        0 0 20px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease !important;
    padding: 12px 16px !important;
    position: relative;
}

/* Remove bg do item ativo do Elementor */
.expo-header .elementor-item-active,
.elementor-location-header .elementor-item-active {
    background: transparent !important;
    background-color: transparent !important;
}

/* Active/current page — indicador inferior dourado */
.expo-header .elementor-item.elementor-item-active::after,
.expo-header .elementor-item.current-menu-item>a::after,
.elementor-location-header .elementor-item.elementor-item-active::after,
.elementor-location-header .elementor-item.current-menu-item>a::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    background: var(--expo-bege, #C5A572);
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* Hover — texto bege com underline expandindo */
.expo-header .elementor-item:hover,
.expo-header .elementor-item:focus,
.elementor-location-header .elementor-item:hover,
.elementor-location-header .elementor-item:focus {
    color: var(--expo-bege, #C5A572) !important;
}

.expo-header .elementor-item:hover::after,
.elementor-location-header .elementor-item:hover::after {
    width: 80%;
}

/* Arrow indicators */
.expo-header .elementor-nav-menu .sub-arrow,
.expo-header .elementor-menu-toggle i,
.elementor-location-header .elementor-nav-menu .sub-arrow,
.elementor-location-header .elementor-menu-toggle i {
    color: inherit !important;
}

/* ═══════════════════════════════════════════════
   3. STICKY HEADER — Aparece ao scroll, full-width
   ═══════════════════════════════════════════════ */

.expo-header.expo-header-scrolled,
.elementor-location-header.expo-header-scrolled {
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

/* Reveal the dark curtain on scroll */
.expo-header-scrolled .expo-header-bg {
    transform: scaleY(1);
}

/* No sticky: remove text-shadow (bg escuro já garante legibilidade) */
.expo-header.expo-header-scrolled .elementor-item,
.elementor-location-header.expo-header-scrolled .elementor-item {
    text-shadow: none !important;
}



/* ═══════════════════════════════════════════════
   5. AUTO LOGO SWAP
   ═══════════════════════════════════════════════ */

.expo-header-logo-wrap {
    position: relative;
    height: auto;
}

.expo-logo-light {
    display: block !important;
    opacity: 1;
    transition: opacity 0.4s ease;
}

.expo-logo-dark {
    display: block !important;
    opacity: 0;
    position: absolute !important;
    top: 0;
    left: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}



/* ═══════════════════════════════════════════════
   6. SUBMENUS — Mantém dropdown dark premium
   ═══════════════════════════════════════════════ */

.expo-header .elementor-nav-menu--dropdown,
.elementor-location-header .elementor-nav-menu--dropdown {
    background: rgba(20, 18, 15, 0.97) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4) !important;
    padding: 8px 0 !important;
    margin-top: 12px !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.expo-header .elementor-nav-menu--dropdown a,
.expo-header .elementor-nav-menu--dropdown .elementor-item,
.elementor-location-header .elementor-nav-menu--dropdown a,
.elementor-location-header .elementor-nav-menu--dropdown .elementor-item {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 10px 24px !important;
    min-height: 48px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    transition: all 0.25s ease !important;
    text-shadow: none !important;
}

.expo-header .elementor-nav-menu--dropdown a:hover,
.elementor-location-header .elementor-nav-menu--dropdown a:hover {
    color: var(--expo-bege, #C5A572) !important;
    background: rgba(197, 165, 114, 0.1) !important;
    padding-left: 28px !important;
}

.expo-header .elementor-nav-menu--dropdown .elementor-item-active,
.elementor-location-header .elementor-nav-menu--dropdown .elementor-item-active {
    color: var(--expo-bege, #C5A572) !important;
}



/* ═══════════════════════════════════════════════
   7. HAMBURGER (mobile)
   ═══════════════════════════════════════════════ */

.expo-header .elementor-menu-toggle,
.elementor-location-header .elementor-menu-toggle {
    color: #FFFFFF !important;
}

/* Dropdown mobile: safe area e altura útil */
@media (max-width: 767px) {
    .elementor-location-header .elementor-nav-menu--dropdown {
        padding-top: max(12px, env(safe-area-inset-top)) !important;
        padding-right: max(8px, env(safe-area-inset-right)) !important;
        max-height: calc(100vh - env(safe-area-inset-top));
        max-height: calc(100dvh - env(safe-area-inset-top));
    }
}



/* ═══════════════════════════════════════════════
   8. BODY PADDING
   ═══════════════════════════════════════════════ */

body.elementor-page {
    padding-top: 140px;
    /* 32px lang bar + ~80px header + margem segura */
}

/* Homepage: o hero é fullscreen, sem padding extra */
body.home.elementor-page {
    padding-top: 0;
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — Sem IDs fixos; editável no Theme Builder.
   No Theme Builder, adicione a classe "expo-header" no container
   principal do header para garantir estilos premium no mobile.
   ═══════════════════════════════════════════════ */

@media (max-width: 1024px) {

    .expo-header,
    .elementor-location-header {
        padding: 12px 20px !important;
    }

    .expo-header-logo-wrap {
        width: 220px !important;
    }
}

@media (max-width: 767px) {

    body.elementor-page {
        padding-top: 220px;
        /* 28px lang bar + header com padding extra */
    }

    body.home.elementor-page {
        padding-top: 0;
    }

    /* Barra do header: altura estável e safe area */
    .expo-header,
    .elementor-location-header {
        padding: 0 !important;
        padding-left: max(16px, env(safe-area-inset-left)) !important;
        padding-right: max(16px, env(safe-area-inset-right)) !important;
        min-height: 56px;
        display: flex;
        align-items: center;
    }

    .expo-header-logo-wrap {
        width: 200px !important;
    }

    /* Mobile: text-shadow mais leve nos itens do dropdown */
    .expo-header .elementor-item,
    .elementor-location-header .elementor-item {
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
    }

    /* Hamburger: área de toque 48px (WCAG), centralizado */
    .elementor-location-header .elementor-menu-toggle {
        min-width: 48px !important;
        min-height: 48px !important;
        padding: 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #fff !important;
    }

    /* Container principal: uma linha, logo ao centro */
    .expo-header>.e-con,
    .elementor-location-header>.e-con {
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 0;
        padding-right: 0;
        gap: 0;
        flex-wrap: nowrap;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        overflow: visible !important;
        --flex-wrap-mobile: nowrap;
        --flex-wrap: nowrap;
        --flex-direction: row;
        min-height: 60px;
        width: 100%;
    }

    /* Coluna do logo: flex grow para centralizar */
    .expo-header>.e-con>.e-con:first-child,
    .elementor-location-header>.e-con>.e-con:first-child {
        flex: 1 1 auto;
        max-width: 100%;
        min-width: 0;
        --width: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 48px;
        /* compensa largura do hamburger para centralizar logo */
    }

    /* Logo: tamanho para leitura, altura automática */
    .elementor-location-header .elementor-widget-image img {
        width: 200px !important;
        max-width: 100% !important;
        height: auto !important;
        display: block;
    }

    /* Widget do logo: não crescer demais */
    .expo-header>.e-con>.e-con:first-child .elementor-widget-image,
    .elementor-location-header>.e-con>.e-con:first-child .elementor-widget-image {
        max-width: 100%;
    }

    /* Nav (hamburger): no fluxo flex para funcionar o toggle */
    .elementor-location-header .elementor-widget-nav-menu {
        flex: 0 0 48px !important;
        margin: 0 !important;
        z-index: 100002;
    }

    /* ── Scrolled: compacto para não ocupar tela ── */
    .expo-header.expo-header-scrolled>.e-con,
    .elementor-location-header.expo-header-scrolled>.e-con {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
        min-height: 44px;
    }

    /* Scrolled: override do padding grande do first-child */
    .expo-header.expo-header-scrolled [class*="elementor-"] .e-con:first-child,
    .elementor-location-header.expo-header-scrolled [class*="elementor-"] .e-con:first-child,
    .expo-header-scrolled .e-con:first-child {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    /* ── Nav dropdown: full-width overlay below header ── */
    .elementor-location-header .elementor-nav-menu__container.elementor-nav-menu--dropdown {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        background: rgba(20, 18, 15, 0.98) !important;
        z-index: 100001 !important;
        padding: 80px 24px 24px !important;
        box-shadow: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        border-radius: 0 !important;
    }

    /* ── Nav dropdown items: vertical list, readable ── */
    .elementor-location-header .elementor-nav-menu--dropdown .elementor-item,
    .elementor-location-header .elementor-nav-menu--dropdown .elementor-sub-item {
        color: #fff !important;
        padding: 12px 24px !important;
        font-size: 16px !important;
        text-align: center !important;
        display: block !important;
    }

    .elementor-location-header .elementor-nav-menu--dropdown .elementor-item:hover {
        background: rgba(255, 255, 255, 0.08) !important;
    }

    .expo-header.expo-header-scrolled .elementor-widget-image img,
    .elementor-location-header.expo-header-scrolled .elementor-widget-image img {
        width: 100px !important;
    }

    /* Padding vertical do container do logo no mobile — APENAS no header */
    .expo-header .e-con:first-child,
    .elementor-location-header .e-con:first-child {
        padding-top: 40px !important;
        padding-bottom: 80px !important;
    }
}