/**
 * StepDecor Breadcrumb
 * Used on both light (blog archive hero) and dark (single hero over
 * photo) backgrounds — modifier class controls contrast.
 */

.sd-breadcrumb {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin-bottom: 1.5rem;
	flex-wrap: wrap;
}

.sd-breadcrumb a,
.sd-breadcrumb__current {
	font-size: .72rem;
	letter-spacing: .15em;
	text-transform: uppercase;
	font-weight: 600;
	transition: color var(--sd-transition-fast);
}

.sd-breadcrumb__sep {
	opacity: .35;
}

.sd-breadcrumb--on-dark a {
	color: rgba(255, 255, 255, .45);
}

.sd-breadcrumb--on-dark a:hover {
	color: var(--sd-color-accent);
}

.sd-breadcrumb--on-dark .sd-breadcrumb__current {
	color: rgba(255, 255, 255, .7);
}

.sd-breadcrumb--on-dark .sd-breadcrumb__sep {
	color: rgba(255, 255, 255, .2);
}

.sd-breadcrumb--on-light a {
	color: var(--sd-color-text-muted);
}

.sd-breadcrumb--on-light a:hover {
	color: var(--sd-color-accent);
}

.sd-breadcrumb--on-light .sd-breadcrumb__current {
	color: var(--sd-color-accent);
}