/*
 * Imob Engine — cabeçalho premium e navegação mobile acessível.
 */

.ie-site-header {
	background: color-mix(in srgb, var(--ie-surface) 92%, transparent);
	border-bottom: 1px solid var(--ie-border);
	backdrop-filter: saturate(1.1) blur(6px);
}
/* O cabeçalho fixo é uma promessa frágil: basta UM ancestral com
   `overflow: hidden`, `auto` ou `scroll` para o `position: sticky` parar de
   grudar, sem erro nenhum no console. Por isso a contenção horizontal do tema
   usa `overflow-x: clip` (ver core.css), que corta o vazamento sem criar
   contexto de rolagem — e o cabeçalho continua colando. */
.ie-site-header--sticky {
	position: sticky;
	top: 0;
	z-index: var(--ie-z-header);
	/* `isolation` cria um contexto de empilhamento próprio: o submenu compete
	   com os irmãos DELE, não com a página inteira. */
	isolation: isolate;
}

.ie-site-header__inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: var(--ie-header-height-top, 64px);
	padding-block: var(--ie-header-padding-top, 14px);
	transition: min-height var(--ie-transition-fast), padding-block var(--ie-transition-fast);
}
.ie-site-header--sticky.is-stuck .ie-site-header__inner {
	min-height: var(--ie-header-height-sticky, 56px);
	padding-block: var(--ie-header-padding-sticky, 9px);
}

.ie-site-branding { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.ie-site-header__creci {
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	padding: .25rem .52rem;
	border: 1px solid var(--ie-border);
	border-radius: var(--ie-radius-pill);
	background: var(--ie-surface-strong);
	color: var(--ie-text-muted);
	font-size: .72rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .025em;
	white-space: nowrap;
}
.ie-site-title { font-weight: 700; font-size: 1.3rem; color: var(--ie-text); letter-spacing: -0.01em; }
.ie-site-title:hover { color: var(--ie-brand-fg); text-decoration: none; }
.ie-site-branding img, .ie-site-branding .custom-logo { max-height: var(--ie-header-logo-max-top, 46px); width: auto; transition: max-height var(--ie-transition-fast); }
.ie-site-header--sticky.is-stuck .ie-site-branding img,
.ie-site-header--sticky.is-stuck .ie-site-branding .custom-logo { max-height: var(--ie-header-logo-max-sticky, 46px); }

/* Logo com variantes claro/escuro (aba Estilos → Logotipo). */
.ie-site-logo { display: inline-flex; align-items: center; }
.ie-site-logo__img { max-height: var(--ie-header-logo-max-top, 46px); width: auto; transition: max-height var(--ie-transition-fast); }
.ie-site-header--sticky.is-stuck .ie-site-logo__img { max-height: var(--ie-header-logo-max-sticky, 46px); }
.ie-site-logo__img--dark { display: none; }
[data-theme="dark"] .ie-site-logo__img--light { display: none; }
[data-theme="dark"] .ie-site-logo__img--dark { display: block; }

/* Disposição "logo centralizado". */
.ie-site-header--center .ie-site-header__inner { flex-wrap: wrap; justify-content: center; text-align: center; }
.ie-site-header--center .ie-site-branding { order: 1; flex: 1 0 100%; justify-content: center; margin-bottom: .5rem; }
.ie-site-header--center .ie-primary-nav { order: 2; margin-inline-start: 0; }
.ie-site-header--center .ie-header-actions { order: 3; }

/* Menu principal (desktop). */
.ie-primary-nav { margin-inline-start: auto; }
.ie-menu {
	list-style: none;
	display: flex;
	align-items: center;
	gap: .35rem;
	margin: 0;
	padding: 0;
}
.ie-menu > li { position: relative; }
.ie-menu a {
	display: block;
	color: var(--ie-text);
	padding: .5rem .7rem;
	border-radius: var(--ie-radius-sm);
	font-weight: 500;
	transition: color var(--ie-transition-fast), background var(--ie-transition-fast);
}
.ie-menu a:hover { color: var(--ie-brand-fg); background: var(--ie-surface-strong); text-decoration: none; }
.ie-menu .current-menu-item > a,
.ie-menu .current_page_item > a { color: var(--ie-brand-fg); }
.ie-menu .current-menu-item > a::after {
	content: ""; display: block; height: 2px; margin-top: .25rem;
	background: var(--ie-brand-fg); border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Submenus (desktop): revelados por hover E focus-within, em quantos níveis
   o menu tiver. O primeiro nível desce; do segundo em diante, abre para o
   LADO — e vira para o lado oposto quando não há espaço na tela, que é o
   comportamento que todo menu nativo tem (navigation.js mede e marca).
   -------------------------------------------------------------------------- */

/* `relative` em TODO item com filhos, não só no primeiro nível: sem isso o
   submenu do submenu se posicionaria pelo item de topo e abriria no lugar
   errado. */
.ie-menu li { position: relative; }

.ie-menu .sub-menu {
	list-style: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 230px;
	max-width: min(320px, 90vw);
	/* O afastamento do painel filho tem de descontar o recuo interno do
	   painel pai — o `li` começa `--ie-submenu-pad` para dentro, e ancorar
	   em `100%` sem essa conta fazia o filho invadir a borda do pai. */
	--ie-submenu-pad: .35rem;
	--ie-submenu-gap: .3rem;
	margin: var(--ie-submenu-gap) 0 0;
	padding: var(--ie-submenu-pad);
	background: var(--ie-surface);
	border: 1px solid var(--ie-border);
	border-radius: var(--ie-radius);
	box-shadow: var(--ie-shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--ie-transition-fast), transform var(--ie-transition-fast), visibility var(--ie-transition-fast);
	/* Um degrau acima do cabeçalho: o submenu nasce DENTRO da barra, e sem
	   isso ele abriria por baixo dela — ilegível justamente na parte que
	   importa. */
	z-index: var(--ie-z-dropdown);
}

/* Do segundo nível em diante: abre ao lado do item, alinhado ao topo dele. */
.ie-menu .sub-menu .sub-menu {
	top: calc(var(--ie-submenu-pad) * -1);
	left: 100%;
	margin: 0 0 0 calc(var(--ie-submenu-gap) + var(--ie-submenu-pad));
	transform: translateX(-6px);
}

/* Virada de lado. A classe é aplicada por navigation.js quando o painel não
   cabe à direita — no primeiro nível ele alinha pela borda direita do item;
   nos níveis internos ele passa para a esquerda. */
.ie-menu > li > .sub-menu.is-flipped { left: auto; right: 0; }
.ie-menu .sub-menu .sub-menu.is-flipped {
	left: auto;
	right: 100%;
	margin: 0 calc(var(--ie-submenu-gap) + var(--ie-submenu-pad)) 0 0;
	transform: translateX(6px);
}

.ie-menu li:hover > .sub-menu,
.ie-menu li:focus-within > .sub-menu,
.ie-menu li > .sub-menu.is-open { opacity: 1; visibility: visible; transform: none; }

.ie-menu .sub-menu a {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem .7rem;
	white-space: normal;
}

/* Item com filhos: a setinha diz que há mais adiante. No primeiro nível ela
   aponta para baixo; nos internos, para o lado em que o painel vai abrir. */
.ie-menu .menu-item-has-children > a::after {
	content: "";
	flex: none;
	width: .42em;
	height: .42em;
	margin-left: auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-.06em, -.06em);
	opacity: .65;
	transition: transform var(--ie-transition-fast), opacity var(--ie-transition-fast);
}
.ie-menu > li.menu-item-has-children > a { display: flex; align-items: center; gap: .35rem; }
.ie-menu .sub-menu .menu-item-has-children > a::after { transform: rotate(-45deg) translate(-.06em, .06em); }
.ie-menu .sub-menu .menu-item-has-children.is-flipped-parent > a::after { transform: rotate(135deg) translate(.06em, -.06em); }
.ie-menu li:hover > a::after,
.ie-menu li:focus-within > a::after { opacity: 1; }

/* Ações do cabeçalho. */
.ie-header-actions { display: flex; align-items: center; gap: .35rem; }
.ie-header-action { position: relative; }

/* Alternador de tema: mostra sol no escuro, lua no claro. */
.ie-theme-toggle .ie-theme-toggle__sun { display: none; }
.ie-theme-toggle .ie-theme-toggle__moon { display: inline-flex; }
[data-theme="dark"] .ie-theme-toggle .ie-theme-toggle__sun { display: inline-flex; }
[data-theme="dark"] .ie-theme-toggle .ie-theme-toggle__moon { display: none; }

/* Botão hambúrguer: inoperante sem JavaScript, portanto só aparece com .ie-js. */
.ie-nav-toggle {
	display: none;
	background: transparent;
	border: 1px solid var(--ie-border);
	border-radius: var(--ie-radius-sm);
	color: var(--ie-text);
	cursor: pointer;
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: center;
}
.ie-nav-toggle:hover { background: var(--ie-surface-strong); }
.ie-nav-toggle:focus-visible { outline: none; box-shadow: var(--ie-focus-ring); }

/* -------------------------------------------------------------------------
 * Navegação mobile.
 *
 * Sem JavaScript (html sem .ie-js): o painel é um bloco estático, em fluxo,
 * acessível — nenhum menu essencial fica oculto. Com JavaScript (.ie-js): vira
 * drawer fixo controlado por [hidden]/.is-open.
 * ---------------------------------------------------------------------- */
.ie-mobile-nav { position: static; inset: auto; z-index: auto; }
.ie-mobile-nav__backdrop { display: none; }
.ie-mobile-nav__head { display: none; }

.ie-js .ie-mobile-nav { position: fixed; inset: 0; z-index: var(--ie-z-drawer); }
.ie-js .ie-mobile-nav[hidden] { display: none; }
.ie-js .ie-mobile-nav__backdrop { display: block; }
.ie-js .ie-mobile-nav__head { display: flex; }
.ie-mobile-nav__backdrop {
	position: absolute; inset: 0;
	background: rgba(0, 0, 0, .5);
	opacity: 0;
	transition: opacity var(--ie-transition);
}
.ie-mobile-nav.is-open .ie-mobile-nav__backdrop { opacity: 1; }
/* Base (sem JS): painel estático em fluxo, visível e acessível. */
.ie-mobile-nav__panel {
	background: var(--ie-surface);
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}
/* Drawer (com JS): painel fora da tela até abrir. */
.ie-js .ie-mobile-nav__panel {
	position: absolute;
	top: 0; right: 0;
	height: 100%;
	width: min(360px, 86vw);
	border-left: 1px solid var(--ie-border);
	box-shadow: var(--ie-shadow-lg);
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform var(--ie-transition-slow);
}
.ie-js .ie-mobile-nav.is-open .ie-mobile-nav__panel { transform: translateX(0); }
.ie-mobile-nav__head {
	display: flex; align-items: center; justify-content: space-between;
	padding-bottom: .75rem; margin-bottom: .25rem;
	border-bottom: 1px solid var(--ie-border);
}
.ie-mobile-nav__title { font-weight: 700; font-size: 1.1rem; }
.ie-mobile-menu { list-style: none; margin: 0; padding: 0; }
.ie-mobile-menu a {
	display: block;
	padding: .7rem .5rem;
	color: var(--ie-text);
	border-radius: var(--ie-radius-sm);
	font-weight: 500;
	min-height: 44px;
}
.ie-mobile-menu a:hover { background: var(--ie-surface-strong); color: var(--ie-brand-fg); text-decoration: none; }
/* No drawer não existe "abrir ao lado": o espaço é vertical. Cada nível
   recua um degrau e ganha a própria guia à esquerda — assim dá para ver, de
   relance, a que item aquele bloco pertence, em qualquer profundidade. */
.ie-mobile-menu .sub-menu {
	list-style: none;
	margin: .1rem 0 .35rem .75rem;
	padding: 0 0 0 .6rem;
	border-left: 2px solid var(--ie-border);
}
.ie-mobile-menu .sub-menu .sub-menu {
	border-left-color: color-mix(in srgb, var(--ie-brand) 35%, var(--ie-border));
}
.ie-mobile-menu .sub-menu a { font-weight: 400; font-size: .95rem; }
.ie-mobile-menu .sub-menu .sub-menu a { font-size: .92rem; opacity: .92; }
/* O item que tem filhos ganha peso: é um agrupador, não mais um destino. */
.ie-mobile-menu .menu-item-has-children > a { font-weight: 650; }

/* Breakpoint: no mobile a nav principal some; o hambúrguer aparece só com JS. */
@media (max-width: 860px) {
	.ie-primary-nav { display: none; }
	.ie-js .ie-nav-toggle { display: inline-flex; }
	.ie-site-branding { gap: .45rem; }
	.ie-site-header__creci { padding-inline: .42rem; font-size: .66rem; }
}
@media (max-width: 560px) {
	.ie-site-branding { flex-direction: column; align-items: flex-start; gap: .2rem; }
	.ie-site-header--center .ie-site-branding { align-items: center; }
	.ie-site-header__creci { min-height: 0; padding: 0; border: 0; background: transparent; font-size: .64rem; }
}

/* Desktop sem JavaScript: o bloco estático mobile some (a nav principal cobre). */
@media (min-width: 861px) {
	html:not(.ie-js) .ie-mobile-nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ie-mobile-nav__panel, .ie-mobile-nav__backdrop, .ie-menu .sub-menu { transition-duration: .001ms; }
}