/**
 * RD - Foxiz Header Responsivo 1.1.2
 * Compatibilidade: Chrome/Edge, Firefox, Safari macOS/iOS, Chrome Android,
 * Samsung Internet e navegadores modernos baseados em Chromium/WebKit.
 *
 * Estratégia:
 * 1) mantém o cabeçalho desktop sempre que houver espaço real;
 * 2) reduz apenas espaçamentos quando necessário;
 * 3) o JavaScript mede colisões reais (inclusive zoom, fontes e sticky header);
 * 4) se ainda faltar espaço, ativa o cabeçalho mobile nativo do Foxiz;
 * 5) possui fallback CSS quando JavaScript estiver bloqueado/desativado.
 */

/* Não altera o conteúdo do site: todo o escopo fica dentro do Header Template. */
.header-template,
.header-template * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* Evita aumento automático de texto pelo Safari/iOS dentro do cabeçalho. */
.header-template {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ---------- Cabeçalho desktop Foxiz + Elementor ---------- */
@media screen and (min-width: 1025px) {
    .header-template .header-template-inner {
        min-width: 0;
        max-width: 100%;
    }

    /* A logo nunca pode encolher a ponto de o menu passar por cima dela. */
    .header-template .header-template-inner .elementor-widget-foxiz-logo {
        position: relative !important;
        z-index: 4 !important;
        -webkit-box-flex: 0 !important;
        -ms-flex: 0 0 190px !important;
        flex: 0 0 190px !important; /* fallback para browsers sem clamp() */
        width: 190px !important;
        min-width: 190px !important;
        max-width: 190px !important;
        overflow: visible;
    }

    @supports (width: clamp(160px, 14vw, 195px)) {
        .header-template .header-template-inner .elementor-widget-foxiz-logo {
            -ms-flex-preferred-size: clamp(160px, 14vw, 195px) !important;
            flex-basis: clamp(160px, 14vw, 195px) !important;
            width: clamp(160px, 14vw, 195px) !important;
            min-width: clamp(160px, 14vw, 195px) !important;
            max-width: clamp(160px, 14vw, 195px) !important;
        }
    }

    .header-template .header-template-inner .elementor-widget-foxiz-logo .elementor-widget-container,
    .header-template .header-template-inner .elementor-widget-foxiz-logo .the-logo,
    .header-template .header-template-inner .elementor-widget-foxiz-logo .the-logo > a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .header-template .header-template-inner .elementor-widget-foxiz-logo .the-logo img {
        display: block;
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: var(--nav-height, 60px);
        -o-object-fit: contain !important;
        object-fit: contain !important;
        -ms-flex-negative: 0;
        flex-shrink: 0;
    }

    /* O menu usa somente o espaço restante da linha. */
    .header-template .header-template-inner .elementor-widget-foxiz-navigation {
        position: relative !important;
        z-index: 2 !important;
        -webkit-box-flex: 1 !important;
        -ms-flex: 1 1 auto !important;
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: visible;
    }

    .header-template .header-template-inner .elementor-widget-foxiz-navigation .elementor-widget-container,
    .header-template .header-template-inner .elementor-widget-foxiz-navigation .main-menu-wrap {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .header-template .header-template-inner .elementor-widget-foxiz-navigation .main-menu {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-orient: horizontal !important;
        -webkit-box-direction: normal !important;
        -ms-flex-flow: row nowrap !important;
        flex-flow: row nowrap !important;
        -ms-flex-wrap: nowrap !important;
        flex-wrap: nowrap !important;
        min-width: 0;
        max-width: 100%;
        white-space: nowrap;
    }

    .header-template .header-template-inner .elementor-widget-foxiz-navigation .main-menu > li {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        min-width: 0;
    }

    .header-template .header-template-inner .elementor-widget-foxiz-navigation .main-menu > li > a {
        white-space: nowrap;
    }

    /* Ícones e controles não devem ser esmagados pelo menu. */
    .header-template .header-template-inner .elementor-widget-foxiz-search-icon,
    .header-template .header-template-inner .elementor-widget-foxiz-dark-mode-toggle,
    .header-template .header-template-inner .elementor-widget-foxiz-font-resizer,
    .header-template .header-template-inner .elementor-widget-foxiz-login-icon,
    .header-template .header-template-inner .elementor-widget-foxiz-social-list,
    .header-template .header-template-inner .elementor-widget-foxiz-sidebar-menu,
    .header-template .header-template-inner .elementor-widget-foxiz-mini-cart {
        -webkit-box-flex: 0 !important;
        -ms-flex: 0 0 auto !important;
        flex: 0 0 auto !important;
        min-width: -webkit-max-content;
        min-width: -moz-max-content;
        min-width: max-content;
    }

    /* Primeira etapa automática: economiza espaço sem reduzir a fonte. */
    html.rd-foxiz-menu-tight .header-template .header-template-inner .elementor-widget-foxiz-navigation {
        --menu-item-spacing: 7px !important;
        --m-icon-spacing: 0.22em !important;
    }

    /* Segunda etapa: ainda preserva legibilidade, mas ganha alguns pixels extras. */
    html.rd-foxiz-menu-ultra .header-template .header-template-inner .elementor-widget-foxiz-logo {
        -ms-flex-preferred-size: 160px !important;
        flex-basis: 160px !important;
        width: 160px !important;
        min-width: 160px !important;
        max-width: 160px !important;
    }

    html.rd-foxiz-menu-ultra .header-template .header-template-inner .elementor-widget-foxiz-navigation {
        --menu-item-spacing: 4px !important;
        --m-icon-spacing: 0.16em !important;
    }

    /* Se a medição real detectar colisão, usa o cabeçalho mobile nativo do Foxiz. */
    html.rd-foxiz-use-mobile-header .header-template .header-template-inner {
        display: none !important;
    }

    html.rd-foxiz-use-mobile-header .header-template .header-mobile {
        z-index: 1000;
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-flow: column nowrap;
        flex-flow: column nowrap;
        width: 100%;
        max-width: 100%;
        max-height: 100vh;
        max-height: 100dvh;
    }

    html.rd-foxiz-use-mobile-header .header-template .header-mobile-wrap {
        width: 100%;
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
    }
}

/* ---------- Fallback sem JavaScript ----------
 * Em telas críticas, a segurança prevalece: o mobile nativo evita sobreposição.
 * Quando JS funciona, a classe rd-foxiz-js remove esse fallback e decide pela
 * largura REAL disponível, não apenas por um breakpoint fixo.
 */
@media screen and (min-width: 1025px) and (max-width: 1160px) {
    html:not(.rd-foxiz-js) .header-template .header-template-inner {
        display: none !important;
    }

    html:not(.rd-foxiz-js) .header-template .header-mobile {
        z-index: 1000;
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-flow: column nowrap;
        flex-flow: column nowrap;
        max-height: 100vh;
    }
}

/* ---------- Fallback de espaçamento para notebooks ---------- */
@media screen and (min-width: 1281px) and (max-width: 1440px) {
    html:not(.rd-foxiz-js) .header-template .header-template-inner .elementor-widget-foxiz-navigation {
        --menu-item-spacing: 8px !important;
    }
}

@media screen and (min-width: 1161px) and (max-width: 1280px) {
    html:not(.rd-foxiz-js) .header-template .header-template-inner .elementor-widget-foxiz-logo {
        -ms-flex-preferred-size: 165px !important;
        flex-basis: 165px !important;
        width: 165px !important;
        min-width: 165px !important;
        max-width: 165px !important;
    }

    html:not(.rd-foxiz-js) .header-template .header-template-inner .elementor-widget-foxiz-navigation {
        --menu-item-spacing: 6px !important;
    }
}

/* Foxiz já assume o mobile em <= 1024px. Mantemos o comportamento original. */
@media screen and (max-width: 1024px) {
    html.rd-foxiz-menu-tight,
    html.rd-foxiz-menu-ultra,
    html.rd-foxiz-use-mobile-header {
        /* classes podem existir durante rotação; o Foxiz continua mandando no mobile */
    }

    .header-template .header-mobile-wrap {
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
    }
}

/* Acessibilidade: respeita quem prefere menos animações. */
@media (prefers-reduced-motion: reduce) {
    .header-template *,
    .header-template *::before,
    .header-template *::after {
        scroll-behavior: auto !important;
        -webkit-animation-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        -webkit-animation-iteration-count: 1 !important;
        animation-iteration-count: 1 !important;
        -webkit-transition-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}