/**
 * Breadcrumb component — Home / Current + gold diamond ornament.
 *
 * Figma Frame 1116607181. Shared by the PLP banner and the About Us banner, so
 * it lives in its own stylesheet; page-specific positioning stays with the
 * section that needs it (e.g. `.plp-banner .kaahel-breadcrumb`).
 *
 * Pairs with template-parts/components/breadcrumb.php.
 */

.kaahel-breadcrumb {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
}

.kaahel-breadcrumb__list {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 30px;
	color: var(--color-accent);
	white-space: nowrap;
}

.kaahel-breadcrumb__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.kaahel-breadcrumb__link,
.kaahel-breadcrumb__link:link,
.kaahel-breadcrumb__link:visited,
.kaahel-breadcrumb__current,
.kaahel-breadcrumb__sep {
	color: var(--color-accent);
	text-decoration: none;
}

.kaahel-breadcrumb__link:hover,
.kaahel-breadcrumb__link:focus {
	color: var(--color-accent-hover);
	outline: none;
}

.kaahel-breadcrumb__sep {
	margin: 0 2px;
}

/* 110×11.31 ornament: line — diamond — line */
.kaahel-breadcrumb__diamond {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	width: 110px;
	height: 11.31px;
	flex-shrink: 0;
}

.kaahel-breadcrumb__diamond-line {
	flex: 1 1 auto;
	height: 1px;
	background: var(--color-accent);
}

.kaahel-breadcrumb__diamond-line:first-child {
	background: linear-gradient(90deg, transparent 0%, var(--color-accent) 100%);
}

.kaahel-breadcrumb__diamond-line:last-child {
	background: linear-gradient(90deg, var(--color-accent) 0%, transparent 100%);
}

.kaahel-breadcrumb__diamond-glyph {
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	border: 2px solid var(--color-accent);
	background: var(--color-breadcrumb-diamond);
	transform: rotate(-45deg);
	box-sizing: border-box;
}

@media (max-width: 991px) {
	.kaahel-breadcrumb__diamond {
		display: none;
	}
}