/* components/breadcrumb.css
   The trail under the hero, on the products archive, a brand, a system and a product.

   It used to live in pages/product.css, which the manifest only loads on a single
   product - so on the archive and the taxonomy pages the trail rendered with no styling
   at all. It is a component now, loaded wherever vivo_breadcrumb() is called.

   Part of assets/css/. The load order lives in
   inc/setup.php - add new files there, not with @import. */

.breadcrumb {
	background: #fff;
	border-bottom: 1px solid var(--line);
}

.breadcrumb-inner {
	display: flex;
	align-items: center;
	gap: 4px;
	padding-top: 15px;
	padding-bottom: 15px;
	font-size: 12px;
	letter-spacing: 0.01em;
	color: var(--mute);
	/* A long trail scrolls sideways rather than wrapping into a second line and
	   changing the header's height. */
	overflow-x: auto;
	scrollbar-width: none;
	white-space: nowrap;
}

.breadcrumb-inner::-webkit-scrollbar { display: none; }

.breadcrumb-inner a {
	position: relative;
	display: inline-flex;
	align-items: center;
	/* Keeps the link a comfortable tap target without making the row taller. */
	min-height: 24px;
	padding: 4px 2px;
	color: var(--ink-3);
	transition: color 0.18s ease;
}

/* A rule that draws itself in from the left, rather than a plain underline. */
.breadcrumb-inner a::after {
	content: "";
	position: absolute;
	left: 2px;
	right: 2px;
	bottom: 2px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.breadcrumb-inner a:hover,
.breadcrumb-inner a:focus-visible { color: var(--navy); }

.breadcrumb-inner a:hover::after,
.breadcrumb-inner a:focus-visible::after { transform: scaleX(1); }

/* The separator is a slash in the markup; a chevron sits better between labels, and
   swapping it here keeps the trail's HTML and its schema in step. */
.breadcrumb-inner span[aria-hidden="true"] {
	font-size: 0;
	line-height: 1;
	flex: none;
	color: var(--line-2);
	padding: 0 3px;
}

.breadcrumb-inner span[aria-hidden="true"]::before {
	content: "\203A";
	font-size: 14px;
	font-weight: 400;
}

.breadcrumb-current {
	padding: 4px 2px;
	color: var(--ink);
	font-weight: 500;
	/* The last crumb is the only part worth truncating when the row runs out of room. */
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
	.breadcrumb-inner a,
		.breadcrumb-inner a::after { transition: none; }
}

@media (max-width: 680px) {
	.breadcrumb-inner { padding-top: 12px; padding-bottom: 12px; font-size: 11.5px; }
}