/**
 * Estilos do site que o Elementor free não cobre.
 * Carregado em todas as páginas (arquivo minúsculo).
 */

/* Cabeçalho fixo no topo. O "sticky" do Elementor é recurso Pro. */
.qb-header-sticky,
.e-con.qb-header-sticky {
	position: sticky;
	top: 0;
	z-index: 999;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

/* A barra de administração do WordPress ocupa o topo quando você está logado. */
.admin-bar .qb-header-sticky,
.admin-bar .e-con.qb-header-sticky {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .qb-header-sticky {
		top: 46px;
	}
}

/* ─── Âncoras da landing ──────────────────────────────────────────────
   O cabeçalho fixo cobriria o topo da seção ao pular para a âncora.
   scroll-margin-top reserva essa altura. Vale para qualquer container
   do Elementor que tenha ID, então seções novas já nascem certas. */
:root {
	--qb-header-h: 101px;
}

html {
	scroll-behavior: smooth;
}

.elementor .e-con[id] {
	scroll-margin-top: var(--qb-header-h);
}

/* Logado, a barra do admin soma ao deslocamento. */
.admin-bar .elementor .e-con[id] {
	scroll-margin-top: calc(var(--qb-header-h) + 32px);
}

@media screen and (max-width: 782px) {
	.admin-bar .elementor .e-con[id] {
		scroll-margin-top: calc(var(--qb-header-h) + 46px);
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* ─── Menu mobile ─────────────────────────────────────────────────────
   O widget de navegação do Elementor é recurso Pro. Aqui o menu é feito
   com elementos normais: abaixo de 900px a nav vira painel e o botão
   "Menu" (widget de botão) abre e fecha, via site.js.

   A regra pende de .qb-header-sticky, não do cabeçalho de uma página
   específica: todos os cabeçalhos do site carregam essa classe, então
   home, edições e redesign herdam o mesmo comportamento de um só lugar. */
.qb-burger {
	display: none;
}

/* Aparência do botão para os cabeçalhos que não a definem no Elementor. */
.qb-burger .elementor-button {
	background-color: #ffffff;
	color: #232120;
	border: 1px solid rgba(35, 33, 32, 0.2);
	border-radius: 8px;
	padding: 9px 14px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08px;
	text-transform: uppercase;
}

@media (max-width: 900px) {
	.qb-burger {
		display: block;
	}

	.qb-header-sticky .qb-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: auto;
		/* Linha que quebra, não coluna: com os links ocupando 100% cada um
		   cai numa linha própria, e os ícones de rede social — que têm
		   largura automática — continuam lado a lado na última linha. */
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 14px;
		background: #ffffff;
		padding: 16px 20px;
		border-bottom: 1px solid rgba(35, 33, 32, 0.12);
		box-shadow: 0 18px 30px -22px rgba(35, 33, 32, 0.5);
		z-index: 5;
	}

	.qb-header-sticky .qb-nav.qb-nav--aberto {
		display: flex;
	}

	/* No painel os itens ficam um por linha, com área de toque decente. */
	.qb-header-sticky .qb-nav .elementor-widget-heading {
		width: 100%;
	}

	.qb-header-sticky .qb-nav .elementor-widget-heading a {
		display: block;
		padding: 6px 0;
	}

	/* As redes sociais continuam lado a lado, centralizadas no fim do painel. */
	.qb-header-sticky .qb-nav .elementor-widget-image {
		display: inline-block;
		width: auto;
	}
}

/* ─── Correções da Home v2 ────────────────────────────────────────────
   A barra do admin do WordPress só fica fixa acima de 600px; abaixo
   disso ela rola junto com a página. Descontar a altura dela ali
   deixava o cabeçalho "descolado" do topo, com conteúdo aparecendo
   por cima. */
@media screen and (max-width: 600px) {
	.admin-bar .qb-header-sticky {
		top: 0;
	}
}

/* Rodapé centralizado no celular, quando as colunas empilham. */
@media (max-width: 767px) {
	#contato {
		text-align: center;
	}

	#contato .e-con {
		align-items: center;
	}
}

/* Ícones sociais centralizados quando o rodapé empilha. */
@media (max-width: 767px) {
	#contato .e-con {
		justify-content: center;
	}
}

/* O atributo height="300" da imagem deixava o wrapper com 300px enquanto a
   imagem escalava para 333px: ela transbordava e o rótulo do país caía por
   cima. height:auto faz o wrapper acompanhar o tamanho real. */
#convidados .elementor-widget-image img {
	display: block;
	height: auto;
}

/* Logos de parceiros: quem define o tamanho é a altura, não a largura.
   As proporções variam muito (um wordmark 298x58 ao lado de um selo
   quadrado 300x300), então largura fixa faz o quadrado parecer gigante
   e o wordmark parecer minúsculo. Limitando a altura, o peso visual
   fica parelho. As imagens já vêm aparadas e em 2x, para ficar nítido. */
#parceiros .qb-logo img {
	width: auto;
	height: auto;
	max-width: 170px;
	max-height: 60px;
	object-fit: contain;
}

@media (max-width: 767px) {
	#parceiros .qb-logo img {
		max-width: 130px;
		max-height: 46px;
	}
}

/* Rodapé de 2026: o padrão de mapas é claro e movimentado, e sozinho
   apagaria o texto branco. A seção já traz o marrom da marca como cor de
   fundo atrás da imagem — misturar os dois com multiply escurece o
   desenho sem precisar de uma camada extra de sobreposição. */
#contato {
	/* Um marrom mais claro que o da seção: o multiply com o marrom cheio
	   escurecia tanto que o desenho dos mapas sumia. Este mantém o padrão
	   visível e o texto branco ainda fica com contraste folgado. */
	background-color: #6b4a3a;
	background-blend-mode: multiply;
}

/* ─── Ícones de rede social do cabeçalho ──────────────────────────────
   As artes têm proporções muito diferentes — o do YouTube é um retângulo
   largo, o do Facebook é uma letra estreita. Largura igual faria um
   parecer o dobro do outro, então quem manda é a altura. */
.qb-social img,
.qb-social svg {
	height: 22px;
	width: auto;
	max-width: none;
	object-fit: contain;
	display: block;
}

.qb-social .elementor-icon {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

/* "Saiba mais": o cliente pediu um link, não um acordeão de sistema.
   Escondo a moldura e a seta e deixo com cara de link de texto. */
#sobre .elementor-widget-toggle .elementor-tab-title {
	border: 0;
	padding: 0;
	text-decoration: underline;
	cursor: pointer;
}

#sobre .elementor-widget-toggle .elementor-toggle-icon {
	display: none;
}

#sobre .elementor-widget-toggle .elementor-tab-content {
	border: 0;
	padding: 14px 0 0;
}

/* ─── Programação no celular ──────────────────────────────────────────
   O bloco da data tem largura fixa no desktop; ao empilhar, ele vira uma
   faixa no topo do cartão. Sem isso ele fica alto e vazio. */
@media (max-width: 767px) {
	#programacao .e-con-inner,
	#programacao .e-con {
		--gap: 0px;
	}

	#programacao .e-child {
		padding-left: 14px;
		padding-right: 14px;
	}

	/* data e dia lado a lado, para não gastar duas linhas altas */
	#programacao .e-con > .e-con:first-child {
		flex-direction: row;
		align-items: baseline;
		gap: 10px;
		flex-wrap: wrap;
	}
}

/* Fotos dos convidados no celular: maiores e centralizadas.
   O widget empilha imagem e texto; sem isso a foto fica pequena e
   encostada à esquerda, com muito espaço vazio ao lado. */
/* Retrato sem proporção fixa: a foto aparece inteira, sem recorte que
   decepe a cabeça. Só que o card é um grid, e item de grid estica até a
   altura da linha — a foto virava uma caixa do tamanho da biografia, com
   a imagem centralizada nela e o resto pintado de fundo. Alinhar o grid
   ao topo resolve na raiz, para os dois lados do card. */
#convidados .qw-convidado {
	align-items: start;
}

#convidados .qw-convidado__retrato {
	align-self: start;
	height: auto;
}

/* Sem esticamento não sobra fundo aparecendo; o tom neutro só serve para
   os retratos que ainda não chegaram. */
#convidados .qw-convidados {
	--qw-retrato-fundo: #ece5dd;
}

/* Quem ainda não tem foto: um bloco discreto no lugar, com proporção
   definida. Sem isso o vazio herda "auto" e colapsa ou estica. */
#convidados .qw-convidado__retrato--vazio {
	aspect-ratio: 4 / 5;
}

@media (max-width: 767px) {
	#convidados .qw-convidado__retrato {
		width: 100%;
		max-width: 340px;
		margin-left: auto;
		margin-right: auto;
		align-self: center;
		display: block;
		height: auto;
	}
}

/* ─── Hero de ponta a ponta ───────────────────────────────────────────
   O banner ficava com margem branca dos lados no celular, o que já é
   pouco espaço para uma arte larga. Sangrando até a borda ele aparece
   no maior tamanho que a tela permite. */
.qb-hero,
.qb-hero > .e-con-inner {
	padding-left: 0;
	padding-right: 0;
	max-width: 100%;
}

.qb-hero img {
	display: block;
	width: 100%;
	height: auto;
}

/* No celular a arte é larga demais e o caderno com as datas fica pequeno.
   As bordas do banner são só o mapa decorativo — o caderno começa a cerca
   de 21% de cada lado. Ampliando 135% e centralizando, corto 17,5% de
   cada borda: ganha tamanho sem encostar no conteúdo. */
@media (max-width: 767px) {
	/* O recorte precisa acontecer em toda a cadeia até a imagem: o widget
	   e o container do Elementor ficam entre o hero e o <img>, e sem
	   overflow neles a imagem ampliada escapava e a página inteira ganhava
	   rolagem horizontal. */
	.qb-hero,
	.qb-hero > .e-con-inner,
	.qb-hero .elementor-widget-image,
	.qb-hero .elementor-widget-container {
		overflow: hidden;
	}

	/* O !important é contra a regra que o próprio Elementor gera para o
	   widget de imagem (largura 100%), que tem especificidade maior que
	   qualquer seletor de classe daqui. Sem ele só a margem aplicava e a
	   arte saía torta em vez de ampliada. */
	.qb-hero .elementor-widget-image img {
		width: 135% !important;
		max-width: none !important;
		margin-left: -17.5% !important;
	}
}

/* O banner é uma arte larga; no celular ela encolhe muito. Sem versão
   vertical do designer, ao menos garanto que não estoure a largura. */
#sobre,
#programacao,
#convidados,
#contato {
	overflow-x: hidden;
}

/* Lista de apresentações do festival: só o festival vai ao público com
   horário, então ela precisa se destacar do parágrafo sem virar uma
   tabela pesada dentro do cartão. */
#programacao .qb-apresentacoes {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
}

#programacao .qb-apresentacoes li {
	padding: 3px 0;
}

#programacao .qb-apresentacoes strong {
	display: inline-block;
	min-width: 62px;
}