/* =============================================================
   Cabeçalho
   Um só componente para desktop e mobile: o mesmo menu muda de
   apresentação, não de marcação.
   ============================================================= */

.cabecalho {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--c-fundo);
	border-block-end: 1px solid var(--c-borda);
}

.cabecalho__interno {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-5);
	padding-block: var(--e-4);
}

.marca {
	display: block;
	flex: 0 1 auto;
	max-width: min(100%, 19rem);
}

@media (min-width: 87.5em) {
	.marca {
		max-width: 23rem;
	}
}

.marca img {
	width: 100%;
	height: auto;
}

/* Botão do menu — só existe no mobile. */
.cabecalho__alternar {
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
	padding: var(--e-2) var(--e-3);
	background: transparent;
	border: 1px solid var(--c-borda);
	border-radius: var(--raio);
	font-size: var(--t-sm);
	font-weight: var(--peso-medio);
	color: var(--c-texto-forte);
}

.cabecalho__alternar[aria-expanded="true"] {
	background: var(--c-acao);
	border-color: var(--c-acao);
	color: var(--c-texto-inverso);
}

.cabecalho__hamburguer,
.cabecalho__hamburguer::before,
.cabecalho__hamburguer::after {
	display: block;
	width: 18px;
	height: 2px;
	background: currentcolor;
	transition: transform var(--transicao), opacity var(--transicao);
}

.cabecalho__hamburguer {
	position: relative;
}

.cabecalho__hamburguer::before,
.cabecalho__hamburguer::after {
	content: "";
	position: absolute;
	left: 0;
}

.cabecalho__hamburguer::before { top: -6px; }
.cabecalho__hamburguer::after  { top: 6px; }

[aria-expanded="true"] .cabecalho__hamburguer {
	background: transparent;
}

[aria-expanded="true"] .cabecalho__hamburguer::before {
	top: 0;
	transform: rotate(45deg);
}

[aria-expanded="true"] .cabecalho__hamburguer::after {
	top: 0;
	transform: rotate(-45deg);
}

/* Menu ------------------------------------------------------- */
.menu {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--e-1) var(--e-4);
}

.menu a {
	display: block;
	position: relative;
	padding: var(--e-2) 0;
	font-size: var(--t-xs);
	font-weight: var(--peso-medio);
	color: var(--c-texto-forte);
	text-decoration: none;
	white-space: nowrap;
}

@media (min-width: 87.5em) {
	.menu a {
		font-size: var(--t-sm);
	}
}

.menu a::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 2px;
	background: var(--c-acao);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--transicao);
}

.menu a:hover,
.menu .current-menu-item > a,
.menu .current_page_item > a {
	color: var(--c-acao);
}

.menu a:hover::after,
.menu .current-menu-item > a::after,
.menu .current_page_item > a::after {
	transform: scaleX(1);
}

/* Mobile: o menu vira painel empilhado sob o cabeçalho. */
@media (max-width: 74.99em) {
	.cabecalho__navegacao {
		position: absolute;
		inset-inline: 0;
		top: 100%;
		padding: var(--e-4) var(--gutter) var(--e-5);
		background: var(--c-fundo);
		border-block-end: 1px solid var(--c-borda);
		box-shadow: var(--sombra);
	}

	.cabecalho__navegacao[hidden] {
		display: none;
	}

	.menu {
		flex-direction: column;
		flex-wrap: wrap;
		gap: 0;
	}

	.menu li + li {
		border-block-start: 1px solid var(--c-borda);
	}

	.menu a {
		padding: var(--e-3) 0;
		font-size: var(--t-base);
	}

	.menu a::after {
		display: none;
	}
}

@media (min-width: 75em) {
	.cabecalho__alternar {
		display: none;
	}

	.cabecalho__navegacao[hidden] {
		display: block;
	}
}