/* =========================================================================
   WEB STYLLER - SKYSTONE - MENU (HEADER)
   Reescrito em 2026-08-28. Fonte unica de verdade do header/menu.
   -------------------------------------------------------------------------
   Antes esse menu era definido em 3 arquivos diferentes (theme.css,
   menu.css e layout.css), cada um com varias versoes antigas empilhadas
   (V8, V9, V15, 1.1, 1.3, 1.4...), tudo com !important. Por isso editar
   pelo F12 nao surtia efeito: o layout.css carregava por ultimo e vencia
   qualquer alteracao feita aqui.

   Agora e so este arquivo. Para configurar o menu, mexa SOMENTE no bloco
   "PAINEL DE CONFIGURACAO" logo abaixo. O resto do arquivo usa essas
   variaveis, entao um ajuste aqui reflete em tudo (desktop, tablet e
   mobile) sem precisar procurar regra por regra.
========================================================================= */

/* =========================================================================
   PAINEL DE CONFIGURACAO
   Mexa so aqui. Nada mais no arquivo precisa ser tocado no dia a dia.
========================================================================= */
body.template-skystone {
    /* Altura do header em cada faixa de tela */
    --sky-menu-height: clamp(44px, calc(44px + 8 * ((100vw - 600px) / 580)), 52px);
    --sky-menu-height-mobile: 52px;

    /* Largura maxima do conteudo do header (logo + menu + bandeiras) */
    --sky-menu-max-width: 1820px;

    /* Distancia da logo/bandeiras ate a borda do site */
    --sky-menu-side-padding: clamp(10px, calc(10px + 190 * ((100vw - 600px) / 580)), 200px);

    /* Tamanho da logo (agora e so um limite de altura/largura, nao uma coluna fixa) */
    --sky-menu-logo-width: clamp(90px, calc(90px + 85 * ((100vw - 600px) / 580)), 175px);
    --sky-menu-logo-width-mobile: 120px;

    /* Espacamento entre os itens do menu */
    --sky-menu-gap: clamp(8px, calc(8px + 12 * ((100vw - 600px) / 580)), 20px);

    /* Tipografia dos itens do menu */
    --sky-menu-font-family: Georgia, "Times New Roman", serif;
    --sky-menu-font-size: clamp(8px, calc(8px + 4 * ((100vw - 600px) / 580)), 12px);
    --sky-menu-font-size-mobile: 13px;
    --sky-menu-letter-spacing: .3px;

    /* Cores */
    --sky-menu-bg: #fafdfe;
    --sky-menu-border-top: rgba(64, 112, 126, .12);
    --sky-menu-border-bottom: rgba(64, 112, 126, .28);
    --sky-menu-color: #172839;
    --sky-menu-color-hover: #0a83bf;
    --sky-menu-underline-color: #3ea7d9;
    --sky-menu-underline-width: 32px;

    /* Bandeiras (widget de idioma) */
    --sky-menu-flag-size: clamp(12px, calc(12px + 3 * ((100vw - 600px) / 580)), 15px);
    --sky-menu-flag-size-tablet: 13px;
    --sky-menu-flag-gap: clamp(4px, calc(4px + 2 * ((100vw - 600px) / 580)), 6px);

    /* Faixa decorativa embaixo do menu (imagem bottom-menu.png) */
    --sky-menu-strip-height: 16px;
}

/* Modo "Site Compacto" (config do CMS: Modelo Site = Centralizado/Compacto).
   So sobrescrevemos as variaveis -- as regras abaixo se adaptam sozinhas. */
@media (min-width: 901px) {
    body.template-skystone.site-width-compact {
        --sky-menu-height: 56px;
        --sky-menu-max-width: 1000px;
        --sky-menu-logo-width: 115px;
        --sky-menu-gap: 12px;
        --sky-menu-font-size: 9.5px;
    }

    body.template-skystone.site-width-narrow {
        --sky-menu-logo-width: 100px;
        --sky-menu-gap: 9px;
        --sky-menu-font-size: 8.5px;
    }
}

/* Modo "Menu Fixo" do CMS (html.site-fixed-desktop). Mesma ideia: so
   trocamos as variaveis, sem duplicar nenhuma regra de layout. Como o
   seletor abaixo e mais especifico (html + body), ele vence normalmente
   quando esse modo estiver ativo. */
@media (min-width: 1181px) {
    html.site-fixed-desktop body.template-skystone {
        --sky-menu-height: 56px;
        --sky-menu-max-width: 1500px;
        --sky-menu-logo-width: 150px;
    }
}

/* O core (site-modelo.css) tem uma regra propria de largura pro
   .header-container quando o modo "Canvas Fixo" esta ativo. Repetimos
   aqui com seletor mais especifico (html + body) so pra garantir que a
   largura do SkyStone sempre vence, sem depender da ordem dos arquivos. */
html.site-fixed-desktop body.template-skystone .header-container {
    width: min(var(--sky-menu-max-width), calc(100% - (var(--sky-menu-side-padding) * 2))) !important;
    max-width: var(--sky-menu-max-width) !important;
}


/* =========================================================================
   ESTRUTURA BASE DO HEADER
========================================================================= */
body.template-skystone .main-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    width: 100% !important;
    height: var(--sky-menu-height) !important;
    min-height: var(--sky-menu-height) !important;
    background: var(--sky-menu-bg) !important;
    border-top: 1px solid var(--sky-menu-border-top) !important;
    border-bottom: 1px solid var(--sky-menu-border-bottom) !important;
}

/* Como o header agora e "position: fixed" (fora do fluxo normal), abrimos
   um espaco no topo da .site-page do tamanho exato do header, senao o
   conteudo fica escondido embaixo dele. */
body.template-skystone .site-page {
    padding-top: var(--sky-menu-height) !important;
}

/* Faixa decorativa (bottom-menu.png): agora ocupa a largura TOTAL do site,
   nao so a largura do conteudo central. */
body.template-skystone .main-header::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc((var(--sky-menu-strip-height) * -1) + 8px) !important;
    width: 100% !important;
    height: var(--sky-menu-strip-height) !important;
    pointer-events: none !important;
    background: url("../images/bottom-menu.png") center top / 100% var(--sky-menu-strip-height) no-repeat !important;
}

/* O container do conteudo (logo + menu + bandeiras) continua limitado pra
   nao esticar demais em telas muito largas, mas o fundo branco do
   .main-header acima ja e 100% do site (nao muda com isso). */
body.template-skystone .header-container {
    position: relative !important;
    width: min(var(--sky-menu-max-width), calc(100% - (var(--sky-menu-side-padding) * 2))) !important;
    max-width: var(--sky-menu-max-width) !important;
    height: var(--sky-menu-height) !important;
    min-height: var(--sky-menu-height) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

/* =========================================================================
   LOGO
========================================================================= */
body.template-skystone .header-logo {
    order: 1 !important;
    flex: 0 0 auto !important;
    width: var(--sky-menu-logo-width) !important;
    max-width: var(--sky-menu-logo-width) !important;
    height: 100% !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: visible !important;
}

body.template-skystone .header-logo-image {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: visible !important;
}

body.template-skystone .header-logo-image img {
    display: block !important;
    width: calc(var(--sky-menu-logo-width) - 15px) !important;
    max-width: calc(var(--sky-menu-logo-width) - 15px) !important;
    max-height: calc(var(--sky-menu-height) - 8px) !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: left center !important;
}

/* =========================================================================
   MENU (DESKTOP/TABLET, >= 600px)
   Sempre no tamanho "cheio" (design). Abaixo de 1180px o JS
   (site-desktop-scale.js) encolhe isso tudo proporcionalmente via
   zoom, entao NAO precisamos de breakpoints manuais de fonte/gap
   aqui -- o zoom preserva a forma exata.
========================================================================= */
@media (min-width: 600px) {
    body.template-skystone .main-nav {
        order: 2 !important;
        position: static !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: var(--sky-menu-gap) !important;
        transform: none !important;
        background: transparent !important;
    }

    body.template-skystone .main-nav .site-menu-item {
        position: relative !important;
        flex: 0 0 auto !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 1px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 0 !important;
        background: transparent !important;
        color: var(--sky-menu-color) !important;
        font-family: var(--sky-menu-font-family) !important;
        font-size: var(--sky-menu-font-size) !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        letter-spacing: var(--sky-menu-letter-spacing) !important;
        text-decoration: none !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        transition: color .16s ease !important;
    }

    body.template-skystone .main-nav .site-menu-item::after {
        content: "" !important;
        position: absolute !important;
        left: 50% !important;
        bottom: 9px !important;
        width: 0 !important;
        height: 2px !important;
        border-radius: 2px !important;
        background: var(--sky-menu-underline-color) !important;
        transform: translateX(-50%) !important;
        transition: width .16s ease !important;
    }

    body.template-skystone .main-nav .site-menu-item:hover,
    body.template-skystone .main-nav .site-menu-item.active {
        color: var(--sky-menu-color-hover) !important;
    }

    body.template-skystone .main-nav .site-menu-item:hover::after,
    body.template-skystone .main-nav .site-menu-item.active::after {
        width: var(--sky-menu-underline-width) !important;
    }

    /* Bandeiras (widget de idioma): sempre por ultimo (order:3) e coladas
       na borda direita, com margin-left:auto como reforco -- nao depende
       da ordem em que o PHP renderiza os elementos. */
    body.template-skystone .site-language-switcher {
        order: 3 !important;
        position: static !important;
        flex: 0 0 auto !important;
        width: auto !important;
        height: 100% !important;
        margin: 0 0 0 auto !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: var(--sky-menu-flag-gap) !important;
        background: transparent !important;
    }

    body.template-skystone .site-language-button,
    body.template-skystone .site-language-button.active {
        width: var(--sky-menu-flag-size) !important;
        min-width: var(--sky-menu-flag-size) !important;
        height: var(--sky-menu-flag-size) !important;
        min-height: var(--sky-menu-flag-size) !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        border: 0 !important;
        border-radius: 50% !important;
        outline: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        transform: none !important;
        transition: transform .12s ease !important;
    }

    body.template-skystone .site-language-button.active {
        box-shadow: 0 0 0 2px rgba(49, 159, 202, .3) !important;
    }

    body.template-skystone .site-language-button:hover {
        transform: translateY(-1px) !important;
    }

    body.template-skystone .site-language-flag,
    body.template-skystone .site-language-flag img {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    body.template-skystone .site-language-flag {
        overflow: hidden !important;
        border: 0 !important;
        background: transparent !important;
    }

    body.template-skystone .site-language-code {
        display: none !important;
    }

    /* botao hamburguer some no desktop/tablet -- reforcado pra nunca
       ocupar espaco no flex do header-container mesmo em algum caso raro */
    body.template-skystone .menu-toggle {
        order: 99 !important;
        display: none !important;
        flex: 0 0 0 !important;
        width: 0 !important;
        overflow: hidden !important;
    }
}

/* Menu centralizado em relacao a TELA TODA (nao ao espaco entre logo
   e bandeiras). A partir de 600px -- abaixo de 1180px o JS aplica
   zoom proporcional em cima disso, entao a posicao continua correta
   (so menor). */
@media (min-width: 600px) {
    body.template-skystone .main-nav {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        flex: 0 0 auto !important;
        width: max-content !important;
        max-width: none !important;
    }
}


/* =========================================================================
   MENU (MOBILE <= 599px) - vira dropdown com botao hamburguer.
   So entra nesse modo em telas realmente pequenas (celular). Casa
   exatamente com o MOBILE_MAX do site-desktop-scale.js.
========================================================================= */
@media (max-width: 599px) {
    body.template-skystone .main-header,
    body.template-skystone .header-container {
        height: var(--sky-menu-height-mobile) !important;
        min-height: var(--sky-menu-height-mobile) !important;
    }

    body.template-skystone .header-container {
        display: block !important;
        width: calc(100% - 18px) !important;
    }

    body.template-skystone .header-logo {
        width: var(--sky-menu-logo-width-mobile) !important;
        max-width: var(--sky-menu-logo-width-mobile) !important;
        height: 100% !important;
    }

    body.template-skystone .menu-toggle {
        position: absolute !important;
        right: 6px !important;
        top: 50% !important;
        z-index: 30 !important;
        width: 38px !important;
        height: 38px !important;
        padding: 8px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 4px !important;
        border: 1px solid #cfe2e7 !important;
        border-radius: 4px !important;
        background: rgba(255, 255, 255, .92) !important;
        transform: translateY(-50%) !important;
        cursor: pointer !important;
    }
    body.template-skystone .menu-toggle span {
        width: 100% !important;
        height: 2px !important;
        display: block !important;
        background: #187a96 !important;
    }

    body.template-skystone .main-nav {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: var(--sky-menu-height-mobile) !important;
        z-index: 25 !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 8px !important;
        display: none !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        border: 1px solid #d2e5e9 !important;
        background: rgba(255, 255, 255, .98) !important;
        box-shadow: 0 12px 28px rgba(33, 79, 93, .12) !important;
    }
    body.template-skystone .main-nav.open {
        display: flex !important;
    }
    body.template-skystone .main-nav .site-menu-item {
        width: 100% !important;
        height: 42px !important;
        min-height: 42px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 0 13px !important;
        border-bottom: 1px solid #e3eef1 !important;
        color: var(--sky-menu-color) !important;
        font-family: var(--sky-menu-font-family) !important;
        font-size: var(--sky-menu-font-size-mobile) !important;
        font-weight: 700 !important;
        letter-spacing: var(--sky-menu-letter-spacing) !important;
        text-decoration: none !important;
        text-transform: uppercase !important;
    }
    body.template-skystone .main-nav .site-menu-item:hover,
    body.template-skystone .main-nav .site-menu-item.active {
        color: var(--sky-menu-color-hover) !important;
    }

    body.template-skystone .site-language-switcher {
        position: absolute !important;
        right: 54px !important;
        top: 0 !important;
        width: auto !important;
        height: var(--sky-menu-height-mobile) !important;
        display: flex !important;
        align-items: center !important;
        gap: var(--sky-menu-flag-gap) !important;
    }
    body.template-skystone .site-language-button,
    body.template-skystone .site-language-button.active,
    body.template-skystone .site-language-flag,
    body.template-skystone .site-language-flag img {
        width: var(--sky-menu-flag-size-tablet) !important;
        min-width: var(--sky-menu-flag-size-tablet) !important;
        height: var(--sky-menu-flag-size-tablet) !important;
        min-height: var(--sky-menu-flag-size-tablet) !important;
        border-radius: 50% !important;
    }
    body.template-skystone .site-language-code {
        display: none !important;
    }
}


/* =========================================================================
   SIDEBAR DE PAGINAS INTERNAS
   (Nao e parte do menu, mas historicamente vivia neste arquivo: o bloco
   de Login sempre deve aparecer primeiro na sidebar.)
========================================================================= */
body.template-skystone .skystone-page-sidebar {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}
body.template-skystone .skystone-page-sidebar > * { margin: 0; }
body.template-skystone .skystone-sidebar-login-block { order: -100; }