/* breadcrumb.css — Breadcrumb navigation component
 *
 * Rendered by template-parts/global/breadcrumb.php.
 * Supports both Rank Math output and the manual <ol> fallback.
 * Per FONT_SPEC: DM Sans 400, 12px, muted color.
 */

/* ─── Base ──────────────────────────────────────────────── */

.breadcrumb {
	margin-bottom: 1.5rem;
}

/* ─── Rank Math breadcrumb output ───────────────────────── */

.rank-math-breadcrumb {
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 400;
	color: rgba(247, 247, 245, 0.45);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.rank-math-breadcrumb a {
	color: rgba(247, 247, 245, 0.45);
	text-decoration: none;
	transition: color var(--transition-base);
}

.rank-math-breadcrumb a:hover {
	color: var(--gold);
}

.rank-math-breadcrumb .separator {
	display: inline-block;
	margin: 0 0.5em;
	color: rgba(200, 169, 106, 0.4);
	font-size: 10px;
}

/* ─── Manual fallback breadcrumb ────────────────────────── */

.breadcrumb__list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0 0.5rem;
	list-style: none;
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.breadcrumb__item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: rgba(247, 247, 245, 0.45);
}

.breadcrumb__item a {
	color: rgba(247, 247, 245, 0.45);
	text-decoration: none;
	transition: color var(--transition-base);
}

.breadcrumb__item a:hover {
	color: var(--gold);
}

/* Separator between items */
.breadcrumb__item + .breadcrumb__item::before {
	content: '/';
	display: inline-block;
	margin-right: 0.25rem;
	color: rgba(200, 169, 106, 0.4);
	font-size: 9px;
}

/* Current page (last item) */
.breadcrumb__item[aria-current="page"],
.breadcrumb__item--current {
	color: var(--gold);
}