/* ==========================================================================
   CABEÇALHO — topo fixo, marca, menu do computador e faixa de editorias
   ==========================================================================

   O QUE CONTROLA (procure os títulos em maiúsculas abaixo)
   - BARRA DO TOPO: fica presa no alto da tela ao rolar a página.
   - MARCA: logo (imagem) ou nome do site em texto, com o ponto dourado.
   - MENU PRINCIPAL: links do computador, menus suspensos e o item "Mais"
     (recebe os itens que não cabem na linha).
   - AÇÕES: botões de busca e de menu (o de menu só no celular e tablet).
   - PROGRESSO DE LEITURA: linha dourada abaixo do topo, só nos artigos.
   - FAIXA DE EDITORIAS: linha de links deslizável, só no celular/tablet.

   HTML: header.php e template-parts/cabecalho/
   ALTURAS: --altura-cabecalho e --altura-logo em base/variaveis.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   BARRA DO TOPO
   -------------------------------------------------------------------------- */
.cabecalho {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px); /* Respeita a barra preta do WordPress quando logado. */
	z-index: var(--camada-cabecalho);
	background: var(--cor-fundo);
	border-top: 3px solid var(--cor-primaria);
	box-shadow: 0 1px 0 var(--cor-linha);
}

@media (max-width: 600px) {
	/* No celular, a barra do WordPress logado não fica fixa; o topo também não deve compensá-la. */
	.cabecalho {
		top: 0;
	}
}

.cabecalho__barra {
	display: flex;
	align-items: center;
	gap: var(--espaco-4);
	min-height: var(--altura-cabecalho);
}

/* --------------------------------------------------------------------------
   MARCA
   -------------------------------------------------------------------------- */
.marca {
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

.marca__texto {
	display: inline-flex;
	align-items: baseline;
	font-family: var(--fonte-titulos);
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	font-weight: var(--peso-extra);
	letter-spacing: -0.035em;
	line-height: 1;
	color: var(--cor-primaria);
	text-decoration: none;
	white-space: nowrap;
}

.marca__texto::after {
	/* O ponto dourado depois do nome: assinatura visual da marca. */
	content: "";
	width: 0.28em;
	height: 0.28em;
	margin-left: 0.1em;
	border-radius: 50%;
	background: var(--cor-destaque);
}

.marca__texto:hover {
	color: var(--cor-primaria-hover);
}

.marca .custom-logo-link {
	display: block;
}

.marca .custom-logo {
	width: auto;
	max-height: var(--altura-logo);
}

/* --------------------------------------------------------------------------
   MENU PRINCIPAL (computador)
   -------------------------------------------------------------------------- */
.navegacao-principal {
	display: none; /* No celular, o menu fica no painel e na faixa de editorias. */
}

@media (min-width: 1024px) {
	.navegacao-principal {
		display: block;
		flex: 1 1 auto;
		min-width: 0; /* Permite que o menu ocupe só o espaço livre entre o logo e a lupa. */
		margin-left: var(--espaco-5);
	}

	.navegacao-principal__lista {
		display: flex;
		align-items: center;
		gap: var(--espaco-1);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.navegacao-principal__lista > li {
		position: relative;
		flex-shrink: 0;
	}

	/* Sem JavaScript não há "Mais": a linha do menu rola de lado. */
	.no-js .navegacao-principal__lista {
		overflow-x: auto;
		scrollbar-width: thin;
	}

	.navegacao-principal__lista a,
	.menu-item-mais__botao {
		position: relative;
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: 0 var(--espaco-3);
		font-size: 0.9375rem;
		font-weight: var(--peso-medio);
		color: var(--cor-texto);
		text-decoration: none;
		white-space: nowrap;
	}

	/* Sublinhado dourado que cresce ao passar o mouse e marca a página atual. */
	.navegacao-principal__lista > li > a::after,
	.menu-item-mais__botao::after {
		content: "";
		position: absolute;
		left: var(--espaco-3);
		right: var(--espaco-3);
		bottom: 6px;
		height: 2px;
		background: var(--cor-destaque);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform var(--transicao);
	}

	.menu-item-mais__botao {
		border: 0;
		background: none;
		font-family: inherit;
		cursor: pointer;
	}

	.navegacao-principal__lista > li > a:hover,
	.navegacao-principal__lista > li > .menu-item-mais__botao:hover,
	.navegacao-principal__lista > .menu-item-mais.current-menu-ancestor > .menu-item-mais__botao,
	.navegacao-principal__lista > .current-menu-item > a,
	.navegacao-principal__lista > .current-menu-ancestor > a,
	.navegacao-principal__lista > .current-menu-parent > a {
		color: var(--cor-primaria);
	}

	.navegacao-principal__lista > li > a:hover::after,
	.navegacao-principal__lista > .menu-item-mais.current-menu-ancestor > .menu-item-mais__botao::after,
	.navegacao-principal__lista > .current-menu-item > a::after,
	.navegacao-principal__lista > .current-menu-ancestor > a::after,
	.navegacao-principal__lista > .current-menu-parent > a::after {
		transform: scaleX(1);
	}

	/* Indicador de submenu. */
	.navegacao-principal__lista > .menu-item-has-children > a,
	.menu-item-mais__botao {
		padding-right: calc(var(--espaco-3) + 14px);
	}

	.navegacao-principal__lista > .menu-item-has-children > a::before,
	.menu-item-mais__botao::before {
		content: "";
		position: absolute;
		right: var(--espaco-3);
		top: 50%;
		width: 6px;
		height: 6px;
		margin-top: -5px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(45deg);
	}

	/* Menu suspenso. Abre com o mouse ou ao navegar com Tab (focus-within). */
	.navegacao-principal .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 10;
		min-width: 240px;
		margin: 0;
		padding: var(--espaco-2);
		list-style: none;
		background: var(--cor-fundo);
		border-radius: var(--raio-medio);
		box-shadow: var(--sombra-painel);
		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
		transition: opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
	}

	.navegacao-principal li:hover > .sub-menu,
	.navegacao-principal li:focus-within > .sub-menu,
	.navegacao-principal .menu-item-mais.esta-aberto > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	/* Tecla Esc fecha o submenu (assets/js/navegacao.js). */
	.navegacao-principal li.submenu-fechado > .sub-menu {
		opacity: 0;
		visibility: hidden;
	}

	.navegacao-principal .sub-menu a {
		min-height: 40px;
		padding: var(--espaco-2) var(--espaco-3);
		border-radius: var(--raio-pequeno);
		white-space: normal;
	}

	.navegacao-principal .sub-menu a:hover {
		background: var(--cor-superficie);
		color: var(--cor-primaria);
	}

	/* "MAIS": abre alinhado à direita e mostra os subitens já abertos, com recuo. */
	.navegacao-principal .menu-item-mais > .sub-menu {
		left: auto;
		right: 0;
		max-height: calc(100vh - var(--altura-cabecalho) - 24px);
		overflow-y: auto;
	}

	.navegacao-principal .menu-item-mais .sub-menu .sub-menu {
		position: static;
		min-width: 0;
		padding: 0 0 0 var(--espaco-3);
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.navegacao-principal .menu-item-mais .sub-menu .menu-item-has-children > a {
		font-weight: var(--peso-semi);
	}
}

/* --------------------------------------------------------------------------
   AÇÕES (busca e menu)
   -------------------------------------------------------------------------- */
.cabecalho__acoes {
	display: flex;
	align-items: center;
	gap: var(--espaco-1);
	margin-left: auto;
	margin-right: calc(-1 * var(--espaco-2)); /* Alinha o ícone à margem visual. */
}

.cabecalho__botao-busca[aria-expanded="true"] {
	background: var(--cor-superficie);
	color: var(--cor-primaria);
}

/* Sem JavaScript, o botão de menu não funcionaria: fica escondido.
   A navegação continua possível pela faixa de editorias e pelo rodapé. */
.no-js .cabecalho__botao-menu {
	display: none;
}

@media (min-width: 1024px) {
	.cabecalho__botao-menu {
		display: none;
	}
}


/* --------------------------------------------------------------------------
   FAIXA DE EDITORIAS (celular e tablet)
   Pílulas deslizáveis com os itens do Menu principal. Aceita qualquer
   quantidade de itens: o leitor desliza a faixa para o lado.
   -------------------------------------------------------------------------- */
.faixa-editorias {
	background: var(--cor-fundo);
	border-bottom: 1px solid var(--cor-linha);
}

.faixa-editorias .container {
	position: relative;
	padding-inline: 0;
}

.faixa-editorias__lista {
	display: flex;
	gap: var(--espaco-2);
	margin: 0;
	padding: var(--espaco-3) var(--margem-lateral);
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-padding-inline: var(--margem-lateral); /* O primeiro item respeita a margem da tela. */
	scrollbar-width: none; /* Esconde a barra de rolagem (a lista continua deslizável). */
	-webkit-overflow-scrolling: touch;
	mask-image: linear-gradient(to right, #000 85%, transparent); /* Sugere que há mais itens à direita. */
}

.faixa-editorias__lista::-webkit-scrollbar {
	display: none;
}

.faixa-editorias__lista li {
	flex-shrink: 0;
	scroll-snap-align: start;
}

.faixa-editorias__lista a {
	display: flex;
	align-items: center;
	min-height: 40px;
	padding: 0 var(--espaco-4);
	border: 1px solid var(--cor-linha);
	border-radius: var(--raio-pilula);
	background: var(--cor-fundo);
	font-size: 0.875rem;
	font-weight: var(--peso-medio);
	color: var(--cor-texto);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--transicao), border-color var(--transicao), color var(--transicao);
}

.faixa-editorias__lista a:hover {
	border-color: var(--cor-primaria);
	color: var(--cor-primaria);
}

.faixa-editorias__lista .current-menu-item > a,
.faixa-editorias__lista .current-menu-ancestor > a {
	border-color: var(--cor-primaria);
	background: var(--cor-primaria);
	color: var(--cor-sobre-primaria);
}

@media (min-width: 1024px) {
	.faixa-editorias {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   PROGRESSO DE LEITURA (só nos artigos)
   Linha dourada fina no pé do topo fixo, que cresce conforme a leitura.
   Comportamento: assets/js/artigo.js
   -------------------------------------------------------------------------- */
.progresso-leitura {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 3px;
	pointer-events: none;
}

.progresso-leitura__barra {
	display: block;
	height: 100%;
	background: var(--cor-destaque);
	transform: scaleX(0);
	transform-origin: left;
}