/* ==========================================================
   IDEAL — HEADER HEADROOM (DESKTOP)
   Requer: style.css (tokens :root). Enfileirado após 'wpbs-style'.
   ========================================================== */

:root {
    --ideal-header-height-compact: 78px;
    --ideal-header-z: 1030;
    --ideal-header-bg: rgba(248, 248, 250, 0.88);
    --ideal-header-hairline: rgba(16, 16, 20, 0.08);
    --ideal-header-blur: 14px;
    --ideal-header-scrim: linear-gradient(180deg, rgba(11, 18, 30, 0.34) 0%, rgba(11, 18, 30, 0) 100%);
    --ideal-header-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ideal-header-hide-ms: 280ms;
    --ideal-header-show-ms: 190ms;
    --ideal-header-tint-ms: 220ms;
}

html {
    scroll-padding-top: calc(var(--ideal-header-height-compact) + 16px);
}

/* --- 1. Posicionamento: vence 'body > header[role=banner]' (0-1-2) --- */

body.ideal-header-sticky > .ideal-site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: var(--ideal-header-z);
    transform: translate3d(0, 0, 0);
    will-change: transform;
    transition:
        transform var(--ideal-header-show-ms) var(--ideal-header-ease),
        background-color var(--ideal-header-tint-ms) ease,
        border-color var(--ideal-header-tint-ms) ease,
        backdrop-filter var(--ideal-header-tint-ms) ease;
    background: transparent;
    border-bottom: 1px solid transparent;
}

body.admin-bar.ideal-header-sticky > .ideal-site-header {
    top: 32px;
}

/* O <nav> deixa de posicionar; passa a ser apenas contêiner. */
body.ideal-header-sticky .ideal-site-header .navbar,
body.ideal-header-sticky .ideal-site-header .navbar-default {
    position: static;
    inset: auto;
    min-height: var(--ideal-header-height);
    background: var(--ideal-header-scrim);
    border: 0;
    box-shadow: none;
    transition: min-height var(--ideal-header-tint-ms) var(--ideal-header-ease),
                background var(--ideal-header-tint-ms) ease;
}

/* Internas: sem hero, sem scrim. */
body.ideal-header-sticky:not(.home) .ideal-site-header .navbar,
body.ideal-header-sticky:not(.home) .ideal-site-header .navbar-default {
    background: transparent;
}

body.ideal-header-sticky:not(.home) > .ideal-site-header {
    background: var(--ideal-branco);
    border-bottom-color: var(--ideal-header-hairline);
}

/* Compensação de fluxo — o header saiu do fluxo nas internas. */
body.ideal-header-sticky:not(.home) .ideal-site-shell {
    padding-top: var(--ideal-header-height);
}

/* Layout flexível robusto do Header para todas as páginas */
.ideal-site-header .ideal-header-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: var(--ideal-header-height, 96px);
    width: 100%;
}

.ideal-site-header .ideal-brand-wrap {
    display: flex !important;
    align-items: center !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ideal-site-header .ideal-header-navigation {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 1 1 auto;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.ideal-site-header .ideal-main-menu {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    float: none !important;
    margin: 0 28px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* --- 2. Estado rolado --- */

body.ideal-header-sticky > .ideal-site-header.has-scrolled {
    background: var(--ideal-header-bg);
    border-bottom-color: var(--ideal-header-hairline);
    -webkit-backdrop-filter: blur(var(--ideal-header-blur)) saturate(1.4);
    backdrop-filter: blur(var(--ideal-header-blur)) saturate(1.4);
}

body.ideal-header-sticky .ideal-site-header.has-scrolled .navbar,
body.ideal-header-sticky .ideal-site-header.has-scrolled .navbar-default {
    min-height: var(--ideal-header-height-compact);
    background: rgba(248, 248, 250, 0.45);
}

body.ideal-header-sticky .ideal-site-header.has-scrolled .ideal-header-inner {
    min-height: var(--ideal-header-height-compact);
}

/* --- 3. Ocultação direcional --- */

body.ideal-header-sticky > .ideal-site-header.is-hidden {
    transform: translate3d(0, -105%, 0);
    transition-duration: var(--ideal-header-hide-ms);
}

/* --- 4. Marca e crossfade de logotipo --- */

body.ideal-header-sticky .ideal-site-header .ideal-brand {
    display: inline-grid;
    padding: 4px 0;
    text-shadow: none;
}

.ideal-brand-logo {
    grid-area: 1 / 1;
    width: 153px;
    height: 69px;
    object-fit: contain;
    object-position: left center;
    transition: opacity var(--ideal-header-tint-ms) ease;
}

.ideal-brand-logo--light { opacity: 0; }
.ideal-brand-logo--dark  { opacity: 1; }
.ideal-brand-logo--solo  { opacity: 1; }

body.home .ideal-site-header:not(.has-scrolled) .ideal-brand-logo--light { opacity: 1; }
body.home .ideal-site-header:not(.has-scrolled) .ideal-brand-logo--dark  { opacity: 0; }

/* --- 5. Navegação: tipografia pequena, respiro horizontal amplo --- */

body.ideal-header-sticky .ideal-main-menu > li {
    margin: 0 0 0 38px;
}

body.ideal-header-sticky .ideal-main-menu > li > a {
    position: relative;
    padding: 14px 0;
    color: var(--ideal-grafite);
    font-family: var(--ideal-font-titulo);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    background: transparent;
    border-bottom: 0;
    transition: color 180ms ease;
}

/* Assinatura visual: hairline dourada que cresce a partir da esquerda. */
body.ideal-header-sticky .ideal-main-menu > li > a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 6px;
    width: 0;
    height: 1px;
    background: var(--ideal-dourado-nobre);
    transition: width 180ms var(--ideal-header-ease);
}

body.ideal-header-sticky .ideal-main-menu > li > a:hover::after,
body.ideal-header-sticky .ideal-main-menu > li > a:focus-visible::after,
body.ideal-header-sticky .ideal-main-menu > .active > a::after {
    width: 100%;
}

/* Conteúdo claro apenas no topo da home. */
body.home .ideal-site-header:not(.has-scrolled) .ideal-main-menu > li > a {
    color: rgba(255, 255, 255, 0.92);
}

body.home .ideal-site-header:not(.has-scrolled) .ideal-main-menu > li > a:hover {
    color: var(--ideal-branco);
}

body.ideal-header-sticky .ideal-main-menu > li > a:hover,
body.ideal-header-sticky .ideal-main-menu > .active > a {
    color: var(--ideal-azul-imperial);
}

/* --- 6. Submenu (depth 2, Bootstrap_walker) --- */

body.ideal-header-sticky .ideal-main-menu .dropdown-menu {
    margin-top: 0;
    padding: 8px;
    min-width: 230px;
    background: var(--ideal-branco);
    border: 0;
    border-radius: var(--ideal-radius-md);
    box-shadow: var(--ideal-shadow-sm);
}

body.ideal-header-sticky .ideal-main-menu .dropdown-menu > li > a {
    padding: 10px 14px;
    color: var(--ideal-cinza-700);
    font-size: 15px;
    border-radius: var(--ideal-radius-sm);
}

body.ideal-header-sticky .ideal-main-menu .dropdown-menu > li > a:hover {
    color: var(--ideal-azul-imperial);
    background: var(--ideal-cinza-050);
}

/* --- 7. CTA: único elemento de alto contraste --- */

.ideal-header-cta {
    display: inline-flex;
    align-items: center;
    height: 40px;
    margin-left: 8px;
    padding: 0 22px;
    color: var(--ideal-branco);
    background: var(--ideal-azul-imperial);
    border: 1px solid transparent;
    border-radius: var(--ideal-radius-pill);
    font-family: var(--ideal-font-titulo);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background 180ms ease, color 180ms ease,
                border-color 180ms ease, transform 180ms var(--ideal-header-ease);
}

.ideal-header-cta:hover,
.ideal-header-cta:focus-visible {
    color: var(--ideal-branco);
    background: var(--ideal-roxo-profundo);
    text-decoration: none;
    transform: translateY(-1px);
}

body.home .ideal-site-header:not(.has-scrolled) .ideal-header-cta {
    color: var(--ideal-branco);
    background: transparent;
    border-color: rgba(255, 255, 255, 0.55);
}

body.home .ideal-site-header:not(.has-scrolled) .ideal-header-cta:hover {
    color: var(--ideal-azul-imperial);
    background: var(--ideal-branco);
    border-color: var(--ideal-branco);
}

/* --- 8. Foco visível e skip link --- */

body.ideal-header-sticky .ideal-site-header a:focus-visible {
    outline: 2px solid var(--ideal-dourado-nobre);
    outline-offset: 4px;
    border-radius: var(--ideal-radius-xs);
}

.ideal-skip-link:focus {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: calc(var(--ideal-header-z) + 10);
    width: auto;
    height: auto;
    padding: 12px 20px;
    clip: auto;
    color: var(--ideal-branco);
    background: var(--ideal-azul-imperial);
    border-radius: var(--ideal-radius-sm);
}

/* --- 9. Movimento reduzido: sem deslize, apenas troca de tom --- */

@media (prefers-reduced-motion: reduce) {
    body.ideal-header-sticky > .ideal-site-header.is-hidden {
        transform: none;
    }
}