/* ============================================================
   PATRIMÔNIO PRESERVADO — Cabeçalho e rodapé
   O que faz as páginas virarem um site só.
   Tudo em px: a raiz do OceanWP é 10px, `rem` mente aqui.
   ============================================================ */

/* ---------- Cabeçalho ---------- */
.pp-cabecalho {
	position: sticky;
	top: 0;
	z-index: 900;
	background: var(--pp-branco);
	border-bottom: 1px solid var(--pp-cinza-200);
	box-shadow: var(--pp-sombra-1);
}
.admin-bar .pp-cabecalho { top: 32px; }
@media (max-width: 782px) { .admin-bar .pp-cabecalho { top: 46px; } }

.pp-cabecalho__barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pp-e6);
	padding-block: var(--pp-e4);
}

.pp-cabecalho__marca { display: inline-flex; line-height: 0; }
.pp-cabecalho__marca img { height: 44px; width: auto; display: block; }

.pp-cabecalho__lista {
	display: flex;
	align-items: center;
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.pp-cabecalho__lista li { margin: 0; }
.pp-cabecalho__lista a {
	display: inline-block;
	padding: 12px 4px;
	font-size: var(--pp-fs-corpo-p);
	font-weight: 500;
	color: var(--pp-texto);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: border-color var(--pp-t-rapido) var(--pp-curva);
}
.pp-cabecalho__lista a:hover { border-bottom-color: var(--pp-cinza-300); }

/* Página atual: o filete dourado. Vale para os dois jeitos de o WP marcar. */
.pp-cabecalho__lista .current-menu-item > a,
.pp-cabecalho__lista .current_page_item > a,
.pp-cabecalho__lista .current-menu-ancestor > a {
	font-weight: 600;
	border-bottom-color: var(--pp-filete);
}

.pp-cabecalho__acao { flex-shrink: 0; }

/* Gatilho da gaveta — só existe no celular. */
.pp-cabecalho__gatilho {
	display: none;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	background: var(--pp-branco);
	color: var(--pp-texto);
	border: 1px solid var(--pp-borda);
	border-radius: var(--pp-raio);
	cursor: pointer;
	flex-shrink: 0;
}
.pp-cabecalho__gatilho .pp-gatilho__fechar { display: none; }
.pp-cabecalho__gatilho[aria-expanded="true"] .pp-gatilho__abrir { display: none; }
.pp-cabecalho__gatilho[aria-expanded="true"] .pp-gatilho__fechar { display: inline; }

/* ---------- Gaveta (celular) ---------- */
.pp-gaveta { background: var(--pp-azul-800); padding: 8px 0 20px; }
.pp-gaveta[hidden] { display: none; }
.pp-gaveta__lista { margin: 0; padding: 0; list-style: none; }
.pp-gaveta__lista li { margin: 0; }
.pp-gaveta__lista a {
	display: block;
	padding: 15px var(--pp-e5);
	font-size: 17px;
	color: var(--pp-branco);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.pp-gaveta__lista .current-menu-item > a,
.pp-gaveta__lista .current_page_item > a { font-weight: 600; }
.pp-gaveta__rodape { padding: var(--pp-e5) var(--pp-e5) 0; }

@media (max-width: 1023px) {
	.pp-cabecalho__nav,
	.pp-cabecalho__acao { display: none; }
	.pp-cabecalho__gatilho { display: inline-flex; }
	.pp-cabecalho__marca img { height: 34px; }
	.pp-cabecalho__barra { padding-block: var(--pp-e3); }
}
@media (min-width: 1024px) {
	.pp-gaveta { display: none; }
}

/* Botões que só existem sobre fundo escuro. */
.pp-botao--claro { background: var(--pp-branco); border-color: var(--pp-branco); color: var(--pp-azul-600); }
.pp-botao--claro:hover { background: var(--pp-azul-100); color: var(--pp-azul-600); }
.pp-botao--fantasma-claro { background: transparent; border-color: var(--pp-branco); color: var(--pp-branco); }
.pp-botao--fantasma-claro:hover { background: rgba(255, 255, 255, .12); color: var(--pp-branco); }
.pp-botao--bloco { width: 100%; }

/* ---------- Rodapé ---------- */
.pp-rodape { background: var(--pp-azul-800); color: var(--pp-azul-200); }
.pp-rodape__corpo { padding-block: var(--pp-e9) var(--pp-e7); }

.pp-rodape__grade {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
	gap: var(--pp-e7);
	align-items: start;
}

.pp-rodape__marca { display: flex; flex-direction: column; gap: var(--pp-e4); }
/* Largura explícita: dentro de uma coluna flex, `width:auto` estica e deforma. */
.pp-rodape__marca img { width: 277px; height: 81px; align-self: flex-start; max-width: 100%; }
.pp-rodape__marca p {
	margin: 0;
	width: 277px;
	max-width: 100%;
	font-size: var(--pp-fs-corpo-p);
	line-height: 1.6;
	color: var(--pp-azul-200);
}

.pp-rodape__redes { display: flex; gap: 10px; flex-wrap: wrap; }
.pp-rodape__redes a {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--pp-branco);
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: var(--pp-raio);
	transition: background var(--pp-t-rapido) var(--pp-curva);
}
.pp-rodape__redes a:hover { background: rgba(255, 255, 255, .12); }

.pp-rodape__coluna { display: flex; flex-direction: column; gap: var(--pp-e3); }
.pp-rodape__titulo {
	margin: 0;
	font-family: var(--pp-fonte-titulo);
	font-size: 17px;
	font-weight: var(--pp-peso-titulo);
	color: var(--pp-branco);
	padding-bottom: 10px;
	border-bottom: var(--pp-filete-espessura) solid var(--pp-filete);
}

.pp-rodape__lista { margin: 0; padding: 0; list-style: none; }
.pp-rodape__lista li { margin: 0; }
.pp-rodape__lista a {
	display: block;
	padding: 5px 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--pp-azul-200);
	text-decoration: none;
}
.pp-rodape__lista a:hover { color: var(--pp-branco); text-decoration: underline; }

.pp-rodape__contato {
	font-style: normal;
	font-size: 15px;
	line-height: 1.6;
	color: var(--pp-azul-200);
}
.pp-rodape__contato a { color: var(--pp-azul-200); text-decoration: none; }
.pp-rodape__contato a:hover { color: var(--pp-branco); text-decoration: underline; }
.pp-rodape__coluna .pp-botao { align-self: flex-start; margin-top: var(--pp-e2); }

.pp-rodape__legal { background: var(--pp-azul-900); padding-block: var(--pp-e5); }
/* Landing: só a barra legal, sem as quatro colunas. */
.pp-rodape--so-legal { background: var(--pp-azul-900); }
.pp-rodape--so-legal .pp-rodape__legal { padding-block: var(--pp-e6); }
.pp-rodape__legal p {
	margin: 0 0 10px;
	font-size: var(--pp-fs-legenda);
	line-height: 1.6;
	color: var(--pp-azul-300);
}
.pp-rodape__legal p:last-child { margin-bottom: 0; }

.pp-rodape a:focus-visible,
.pp-gaveta a:focus-visible,
.pp-gaveta .pp-botao:focus-visible {
	outline: 2px solid var(--pp-ouro-400);
	outline-offset: 2px;
}

@media (max-width: 1023px) {
	.pp-rodape__grade { grid-template-columns: 1fr 1fr; gap: var(--pp-e6); }
	.pp-rodape__marca { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
	.pp-rodape__grade { grid-template-columns: 1fr; }
	.pp-rodape__corpo { padding-block: var(--pp-e7) var(--pp-e6); }
	.pp-rodape__marca img { width: 220px; height: 64px; }
	.pp-rodape__marca p { width: 100%; }
}


/* ---------- Foco de teclado ----------
   O OceanWP tem `a:focus { outline: solid 1px !important }`, que anulava o anel
   de 3px do design system em todo link. Aqui o anel volta, só para teclado
   (`:focus-visible`), e some no clique do mouse. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) { outline: none !important; }
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	/* Atenção ao medir: o OceanWP põe `transition: all .3s` nos links, então o
	   anel CRESCE de 0 a 3px. Medir logo após o Tab dá 0–1px e parece defeito;
	   medido 700ms depois, 3px em todos. */
	outline-width: 3px !important;
	outline-style: solid !important;
	outline-color: var(--pp-azul-500) !important;
	outline-offset: 2px !important;
}
/* Sobre fundo escuro o anel azul some: lá ele é dourado. */
.pp-hero a:focus-visible,
.pp-secao--escura a:focus-visible,
.pp-rodape a:focus-visible,
.pp-gaveta a:focus-visible,
.pp-barra-blog__chamada a:focus-visible,
.pp-post__chamada a:focus-visible,
.pp-c-btn:focus-visible,
.pp-sim:focus-visible,
.pp-nao:focus-visible { outline-color: var(--pp-ouro-400) !important; }

/* ---------- Alvo de toque: 44 px no celular ---------- */
@media (max-width: 767px) {
	.pp-rodape__lista a,
	.pp-rodape__contato a,
	.pp-link-seta,
	.pp-canais a,
	.pp-legal__sumario a,
	.pp-post__conteudo .toc_list a,
	.pp-barra-blog__bloco a {
		min-height: 44px;
		display: flex;
		align-items: center;
	}
	.pp-link-seta { display: inline-flex; }
	.pp-rodape__contato a { display: inline-flex; }
}