/* =========================================================================
   Boyle Built — Breadcrumbs

   One markup structure, two colour themes (`--theme-light` / `--theme-dark`)
   toggled by the consuming component depending on what's behind it — e.g.
   the Internal Hero switches to `--theme-dark` whenever it has a background
   image. Separators are decorative text ("/"), aria-hidden, and never the
   only cue: every crumb (including the current page) is real link/text
   content, not an icon.
   ========================================================================= */

.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
}

.breadcrumbs__item {
	display: flex;
	align-items: center;
	gap: 6px;
}

.breadcrumbs__link,
.breadcrumbs__current {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	text-decoration: none;
}

.breadcrumbs__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.breadcrumbs__separator {
	font-family: var(--font-body);
	font-size: 12px;
	line-height: 1;
}

/* -------------------------------------------------------------------------
   Theme: light (default) — for use on light section backgrounds
   ------------------------------------------------------------------------- */

.breadcrumbs--theme-light .breadcrumbs__link,
.breadcrumbs--theme-light .breadcrumbs__separator {
	color: var(--color-body-muted);
}

.breadcrumbs--theme-light .breadcrumbs__link:hover {
	color: var(--color-ink);
}

.breadcrumbs--theme-light .breadcrumbs__current {
	color: var(--color-ink);
}

/* -------------------------------------------------------------------------
   Theme: dark — for use over a photo background + dark overlay
   ------------------------------------------------------------------------- */

.breadcrumbs--theme-dark .breadcrumbs__link,
.breadcrumbs--theme-dark .breadcrumbs__separator {
	color: var(--color-text-muted-lt2);
}

.breadcrumbs--theme-dark .breadcrumbs__link:hover {
	color: var(--color-text-light);
}

.breadcrumbs--theme-dark .breadcrumbs__current {
	color: var(--color-text-light);
}