/*
 * Cabeçalho adaptativo.
 *
 * Recolore o logotipo e o botão do menu conforme o fundo que estiver sob a
 * barra, deixa a barra da home totalmente transparente antes da rolagem e
 * acelera a revelação do menu offcanvas.
 *
 * Os seletores partem de #textual-header-bar (CSS ID autoral definido no
 * Elementor) porque as regras geradas pelo Elementor para esse contêiner têm
 * especificidade de quatro classes; um ID as vence sem !important e sem
 * depender dos IDs gerados (.elementor-element-*), que mudam ao recriar ou
 * reimportar o modelo.
 *
 * A recoloração e a transparência dependem de atributos que só o script define,
 * então sem JavaScript o cabeçalho mantém a aparência autoral. Os tempos do
 * offcanvas são só CSS e valem em qualquer caso.
 */

#textual-header-bar {
	/* Estado padrão: fundo escuro, tinta clara — a aparência atual do site. */
	--textual-header-ink: #fff;
	--textual-header-ink-hover: var(--e-global-color-secondary, #696969);

	transition: background-color 250ms ease;
}

#textual-header-bar[data-textual-backdrop="light"] {
	--textual-header-ink: #000;
}

/* Home: barra transparente no topo; ao rolar volta ao fundo autoral. */
body.home #textual-header-bar[data-textual-scroll="top"] {
	background-color: transparent;
}

/*
 * Logotipo — o PNG é arte branca pura sobre transparência, então brightness(0)
 * o leva a preto exato preservando alfa e antisserrilhado, sem um segundo
 * arquivo para manter em sincronia.
 */
#textual-header-bar .elementor-widget-image img {
	transition: filter 250ms ease;
}

#textual-header-bar[data-textual-backdrop="light"] .elementor-widget-image img {
	filter: brightness(0);
}

/* Botão do menu (offcanvas). */
#textual-header-bar .ekit_navSidebar-button {
	color: var(--textual-header-ink);
	transition: color 250ms ease;
}

#textual-header-bar .ekit_navSidebar-button svg,
#textual-header-bar .ekit_navSidebar-button svg path {
	fill: var(--textual-header-ink);
	stroke: var(--textual-header-ink);
	transition: fill 250ms ease, stroke 250ms ease;
}

/*
 * O ID também vence a regra de hover do Elementor, então o realce cinza
 * precisa ser restabelecido aqui para não se perder.
 */
#textual-header-bar .ekit_navSidebar-button:hover,
#textual-header-bar .ekit_navSidebar-button:focus-visible {
	color: var(--textual-header-ink-hover);
}

#textual-header-bar .ekit_navSidebar-button:hover svg,
#textual-header-bar .ekit_navSidebar-button:hover svg path,
#textual-header-bar .ekit_navSidebar-button:focus-visible svg,
#textual-header-bar .ekit_navSidebar-button:focus-visible svg path {
	fill: var(--textual-header-ink-hover);
	stroke: var(--textual-header-ink-hover);
}

/*
 * Revelação do menu offcanvas.
 *
 * O ElementsKit fixa `all 1s ease-out 1.2s` no contêiner de conteúdo: a gaveta
 * preta chega em 0,5s, fica 0,7s vazia e só então o menu entra num fade de 1s —
 * 2,2s no total. O controle de duração do widget no Elementor alimenta apenas
 * --transition-duration, que a sobreposição e a gaveta usam mas esse contêiner
 * ignora, e o arquivo do plugin é dependência e não pode ser editado. Daí a
 * sobrescrita aqui.
 *
 * A regra do plugin tem especificidade de três classes; o escopo por ID a vence
 * sem !important.
 */

#textual-header-bar .ekit-sidebar-group .ekit_sidebar-widget-container {
	transition: all 0.2s ease-in 0s;
}

/* Entra assim que a gaveta chega (0,4s), em vez de 0,7s depois. */
#textual-header-bar .ekit-sidebar-group.ekit_isActive .ekit_sidebar-widget-container {
	transition: all 0.35s ease-out 0.4s;
}

@media (prefers-reduced-motion: reduce) {
	#textual-header-bar,
	#textual-header-bar .elementor-widget-image img,
	#textual-header-bar .ekit_navSidebar-button,
	#textual-header-bar .ekit_navSidebar-button svg,
	#textual-header-bar .ekit_navSidebar-button svg path,
	#textual-header-bar .ekit-sidebar-group .ekit_sidebar-widget-container,
	#textual-header-bar .ekit-sidebar-group.ekit_isActive .ekit_sidebar-widget-container {
		transition: none;
	}
}

/*
 * Trilho lateral: vira barra inferior abaixo de 1025px (D3).
 *
 * O trilho são três widgets independentes do Elementor, cada um com
 * `_position: fixed` próprio e ancorado à borda direita do viewport:
 * `d642ac0` (redes sociais), `a025bb8` (o CTA "Vamos falar?", com o CSS ID
 * autoral `to-top-button`) e `50c3962` (voltar ao topo). A faixa que eles
 * ocupam tem 75px constantes em qualquer largura, e a coluna de texto cresce
 * com o viewport até invadi-la: 48px de invasão na Cases e no Hub, 33px nas
 * páginas de conteúdo, com colisão de glifo confirmada no pixel a 360px, onde
 * o próprio CTA sai cortado pela borda.
 *
 * Afastar o trilho não resolve em largura nenhuma que verificamos: só sobra
 * gutter para ele acima de ~1410px, porque a coluna de conteúdo é boxed em
 * 1280px. Abaixo de 1025 os três passam a formar uma barra na base — a área
 * que não disputa espaço com a coluna de texto — preservando os quatro
 * destinos, que são conteúdo.
 *
 * Por que aqui e não nos controles do Elementor: `_position` é `add_control`,
 * não `add_responsive_control`, e emite uma classe (`elementor-fixed`) em vez
 * de uma regra por breakpoint. O builder não consegue expressar "fixo de um
 * jeito no desktop e de outro no mobile" — só os offsets dele são responsivos.
 * É o caso que este arquivo existe para cobrir.
 *
 * Especificidade: o Elementor escreve `body:not(.rtl) .elementor-14152
 * .elementor-element.elementor-element-XXXX` (0,4,1) para os offsets. O escopo
 * por ID dá 1,1,0 e vence sem !important e sem depender do ID do modelo, que
 * muda ao reimportar.
 *
 * Acima de 1024px nada aqui se aplica: o trilho vertical do desktop fica
 * exatamente como está.
 */

@media (max-width: 1024px) {
	#textual-header-bar #to-top-button,
	#textual-header-bar .elementor-element-50c3962,
	#textual-header-bar .elementor-element-d642ac0 {
		top: auto;
		bottom: 12px;
	}

	/* Redes sociais à esquerda, em linha. O widget é um grid de uma coluna. */
	#textual-header-bar .elementor-element-d642ac0 {
		right: auto;
		left: 12px;
		--grid-template-columns: repeat(3, auto);
		--grid-column-gap: 4px;
	}

	/* O CTA guarda a vaga do meio; `right` conta a partir da borda direita, e
	   os 52px são a largura do voltar-ao-topo mais as duas folgas. */
	#textual-header-bar #to-top-button {
		right: 52px;
	}

	#textual-header-bar .elementor-element-50c3962 {
		right: 12px;
	}
}

/*
 * Folga para a barra inferior.
 *
 * A barra ocupa os 60px de baixo do viewport (12px de afastamento mais os 48px
 * do bloco de redes sociais, que é o mais alto dos três). Sem folga, no fim da
 * rolagem ela cobre permanentemente a última linha do rodapé — medido: os
 * "Todos os direitos reservados" ficavam sob o CTA em todas as páginas.
 *
 * O recuo vai no rodapé, e não no `body`, para que o fundo do rodapé acompanhe
 * em vez de abrir uma faixa da cor do corpo embaixo dele.
 */

@media (max-width: 1024px) {
	.ekit-template-content-footer {
		padding-bottom: 60px;
	}
}