/**
 * Widget "Cabeçalho de Página"
 *
 * Hero simples de página interna: eyebrow opcional, título, subtítulo,
 * breadcrumb opcional, fundo em cor sólida ou imagem com overlay, altura
 * configurável em 4 níveis (todos reaproveitando os tokens de padding
 * vertical de seção de tokens.css — nenhum valor de altura literal novo).
 *
 * Cores customizáveis pelo painel Elementor chegam como custom properties
 * inline (`--fjpn-cabecalho-*`, injetadas por widgets/pagina-cabecalho.php,
 * já validadas por `sanitizar_cor_css()`) — este arquivo só consome
 * `var(--fjpn-cabecalho-*)`, com fallback no token institucional mais
 * próximo, mesmo padrão de assets/css/sections/areas.css.
 */

.fjpn-pagina-cabecalho {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	padding-block: var(--fjpn-space-section-py-md);
	background-color: var(--fjpn-cabecalho-bg, var(--fjpn-blue-primary));
	text-align: center;
}

/* ==========================================================
 * ALTURA — 4 níveis, todos derivados dos tokens de padding vertical de
 * seção já usados no resto do site (design-tokens.md §10).
 * ========================================================== */

.fjpn-pagina-cabecalho--altura-compacta {
	padding-block: var(--fjpn-space-section-py-sm);
}

.fjpn-pagina-cabecalho--altura-media {
	padding-block: var(--fjpn-space-section-py-md);
}

.fjpn-pagina-cabecalho--altura-grande {
	padding-block: var(--fjpn-space-section-py-lg);
}

.fjpn-pagina-cabecalho--altura-extra-grande {
	padding-block: var(--fjpn-space-section-py-xl);
}

/* ==========================================================
 * FUNDO EM IMAGEM — background-image decorativo + overlay de cor para
 * manter o texto legível (ver decisão nº 2 no topo do widget PHP).
 * ========================================================== */

.fjpn-pagina-cabecalho--fundo-imagem {
	background-image: var(--fjpn-cabecalho-imagem);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.fjpn-pagina-cabecalho__overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: var(--fjpn-cabecalho-overlay-color, var(--fjpn-blue-dark));
	opacity: var(--fjpn-cabecalho-overlay-opacidade, 0.55);
	pointer-events: none;
}

/* ==========================================================
 * CONTAINER — conteúdo centralizado, acima do overlay.
 * ========================================================== */

.fjpn-pagina-cabecalho__container {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 48rem; /* largura de leitura confortável para título + subtítulo, sem token dedicado */
	margin-inline: auto;
}

/* ==========================================================================
   VISUAL DOS MODELOS APROVADOS (23-08-2026)
   A cliente escolheu o cabeçalho dos mockups das páginas internas: alinhado
   à esquerda, largura cheia, traço laranja ACIMA do rótulo e breadcrumb com
   "›". O centralizado continua disponível pelo seletor "Alinhamento".
   ========================================================================== */

.fjpn-pagina-cabecalho--alinhado-esquerda .fjpn-pagina-cabecalho__container {
	align-items: flex-start;
	/* Volta ao limite do `.fjpn-container` (1280px), NÃO à largura da janela.
	   O max-width de 48rem acima é do layout centralizado, em que a medida
	   curta é o que mantém a leitura; alinhado à esquerda o título usa o mesmo
	   container do resto da página, para o texto começar na mesma vertical das
	   seções seguintes.
	   ARMADILHA (errei isto uma vez): `max-width: none` faz o bloco ocupar a
	   janela inteira e o título encosta na borda — em tela larga ele fica
	   descolado de todo o resto do conteúdo. */
	max-width: var(--fjpn-container-width);
	text-align: start;
}

.fjpn-pagina-cabecalho--alinhado-esquerda .fjpn-pagina-cabecalho__breadcrumb ol {
	justify-content: flex-start;
}

.fjpn-pagina-cabecalho--alinhado-esquerda .fjpn-pagina-cabecalho__eyebrow {
	align-self: flex-start;
}

/* Traço ACIMA do rótulo, não ao lado. O utilitário `.fjpn-eyebrow` de
   base.css é um flex em linha com o traço como ::before — aqui basta virar
   o eixo, o que mantém o traço sendo o mesmo elemento e não duplica nada. */
.fjpn-pagina-cabecalho--traco-acima .fjpn-eyebrow {
	flex-direction: column;
	align-items: flex-start;
	gap: 10px; /* valor do modelo */
}

.fjpn-pagina-cabecalho--traco-acima .fjpn-eyebrow::before {
	width: 54px; /* valor do modelo — 48px é a medida usada no resto do site */
	/* O ::before global carrega `margin-bottom: var(--fjpn-gap-medium)`, que
	   existe para erguer o traço ao centro óptico quando ele está NA MESMA
	   LINHA do texto. Empilhado, essa margem viraria um vão duplicado ao lado
	   do `gap` acima. */
	margin-bottom: 0;
}

.fjpn-pagina-cabecalho--sem-traco .fjpn-eyebrow::before {
	display: none;
}


/* ==========================================================
 * BREADCRUMB
 * ========================================================== */

.fjpn-pagina-cabecalho__breadcrumb {
	margin-bottom: var(--fjpn-gap-medium);
}

.fjpn-pagina-cabecalho__breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--fjpn-gap-icon-text);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fjpn-pagina-cabecalho__breadcrumb li {
	display: flex;
	align-items: center;
	gap: var(--fjpn-gap-icon-text);
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-small);
	font-weight: var(--fjpn-weight-medium);
}

.fjpn-pagina-cabecalho__breadcrumb li:not(:last-child)::after {
	/* Configurável pelo painel; os modelos aprovados usam "›". O "/" fica
	   como reserva para quando a cliente apagar o campo. */
	content: var(--fjpn-cabecalho-separador, '/');
	color: var(--fjpn-cabecalho-cor-subtitulo, var(--fjpn-white));
	opacity: 0.6;
}

.fjpn-pagina-cabecalho__breadcrumb a {
	color: var(--fjpn-cabecalho-cor-subtitulo, var(--fjpn-white));
	text-decoration: none;
	opacity: 0.85;
	transition: opacity var(--fjpn-duration-fast) var(--fjpn-ease-simple);
}

.fjpn-pagina-cabecalho__breadcrumb a:hover,
.fjpn-pagina-cabecalho__breadcrumb a:focus-visible {
	opacity: 1;
	text-decoration: underline;
}

.fjpn-pagina-cabecalho__breadcrumb span {
	color: var(--fjpn-cabecalho-cor-subtitulo, var(--fjpn-white));
}

/* ==========================================================
 * EYEBROW / TÍTULO / SUBTÍTULO
 * O eyebrow reaproveita `.fjpn-eyebrow` (base.css) para tipografia/traço,
 * só a cor é sobrescrita aqui via custom property (fundo escuro por padrão).
 * ========================================================== */

.fjpn-pagina-cabecalho__eyebrow {
	color: var(--fjpn-cabecalho-cor-eyebrow, var(--fjpn-orange-primary));
	align-self: center;
}

.fjpn-pagina-cabecalho__titulo {
	margin-block: 0 var(--fjpn-gap-medium);
	color: var(--fjpn-cabecalho-cor-titulo, var(--fjpn-white));
}

.fjpn-pagina-cabecalho__subtitulo {
	margin: 0;
	color: var(--fjpn-cabecalho-cor-subtitulo, var(--fjpn-blue-light));
}

/* ==========================================================
 * SANGRIA — largura total dentro do Elementor.
 * Mesmo padrão/justificativa da seção 5 de base.css: este widget é uma
 * SEÇÃO (não um componente aninhado), então zera margin/padding e força
 * width:100% no container do Elementor para o fundo nunca "sobrar" preso
 * numa coluna com padding.
 * ========================================================== */

.elementor-widget-fjpn-pagina-cabecalho > .elementor-widget-container {
	width: 100%;
	margin: 0;
	padding: 0;
}

/* ==========================================================
 * LOGO OPCIONAL (parceiro / mantenedor / programa)
 * Só existe no DOM quando a imagem é escolhida no painel.
 * A altura vem do controle responsivo; aqui fica só o que
 * precisa valer antes de qualquer escolha.
 * ========================================================== */

.elementor .fjpn-pagina-cabecalho__logo {
	/* `width: auto` + altura controlada preserva a proporção de qualquer
	   marca, larga ou quadrada, sem a cliente precisar recortar o arquivo. */
	width: auto;
	max-width: 100%;
	margin-bottom: var(--fjpn-gap-medium);
	object-fit: contain;
}

.fjpn-pagina-cabecalho__logo-link {
	display: inline-flex;
	/* O link herda a margem do <img>; sem isto o espaçamento dobraria. */
	margin-bottom: var(--fjpn-gap-medium);
}

.fjpn-pagina-cabecalho__logo-link .fjpn-pagina-cabecalho__logo {
	margin-bottom: 0;
}