/* ==========================================================================
   TRILHA DE NAVEGAÇÃO — Fase 3
   ==========================================================================

   Fica acima do título da página, discreta de propósito: ela orienta, não
   compete com o H1. Por isso texto pequeno, peso normal e cor de apoio.

   Duas superfícies, porque o site tem seções navy e seções cinza claro.
   Contrastes medidos: sobre navy, 7,3:1 no link e 8,6:1 na página atual;
   sobre o cinza #D9D9D9, 6,6:1 e 12,3:1. Todos passam no critério de texto
   normal da WCAG, que é 4,5:1.
   ========================================================================== */

.bfd-trilha {
	margin: 0 0 var( --bf-space-xs );
}

.bfd-trilha ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --bf-space-2xs );
	font-size: 0.875rem;
	line-height: 1.4;
}

/* O separador é do CSS, e não do HTML: leitor de tela lê a lista como
   lista e não precisa ouvir "barra" entre os itens. */
.bfd-trilha li + li::before {
	content: "/";
	margin-inline-end: var( --bf-space-2xs );
	color: var( --bf-blue-400 );
}

.bfd-trilha a {
	color: var( --bf-blue-200 );
	text-decoration: none;
}

.bfd-trilha a:hover,
.bfd-trilha a:focus {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bfd-trilha [aria-current="page"] {
	color: var( --bf-white );
}

/* --- sobre superfície clara ---------------------------------------------- */

.bfd-trilha--claro a {
	color: var( --bf-navy-500 );
}

.bfd-trilha--claro li + li::before {
	color: var( --bf-navy-500 );
}

.bfd-trilha--claro [aria-current="page"] {
	color: var( --bf-navy-900 );
}