/*
 * Breadcrumbs (template-parts/breadcrumbs.php, js/components/breadcrumbs.js)
 * nav.breadcrumbs > .breadcrumbs-list > span.breadcrumb-item.breadcrumb-item-{blog|category|post|car-rental|country|location|airport}
 * One line: the list scrolls sideways (no scrollbar), the nav fades the edges where there is more
 */

/* Wrapper: right below the hero, part of it (the next section is after the usual space, css/base.css); .has-background: grey like the hero above */
.breadcrumbs-wrapper {
	padding-top: 1.75rem;
}
.breadcrumbs-wrapper.has-background {
	background-color: var(--color-background-light);
}

/* Breadcrumbs: faded edges on the nav (it does not scroll, so scrolling the list stays smooth) */
nav.breadcrumbs {
	color: var(--color-grey);
	font-size: 0.8125rem; /* As on the old site (no size in the design guidelines) */
	line-height: 1.5;
}
nav.breadcrumbs.can-scroll-end {
	-webkit-mask-image: linear-gradient(to right, black calc(100% - 2.5rem), transparent);
	mask-image: linear-gradient(to right, black calc(100% - 2.5rem), transparent);
}
nav.breadcrumbs.can-scroll-start {
	-webkit-mask-image: linear-gradient(to left, black calc(100% - 2.5rem), transparent);
	mask-image: linear-gradient(to left, black calc(100% - 2.5rem), transparent);
}
nav.breadcrumbs.can-scroll-start.can-scroll-end {
	-webkit-mask-image: linear-gradient(to right, transparent, black 2.5rem, black calc(100% - 2.5rem), transparent);
	mask-image: linear-gradient(to right, transparent, black 2.5rem, black calc(100% - 2.5rem), transparent);
}
.breadcrumbs-list {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	white-space: nowrap;
}
.breadcrumbs-list::-webkit-scrollbar {
	display: none;
}
.breadcrumbs-list > span {
	flex: 0 0 auto;
}
span.breadcrumb-item > a {
	color: inherit;
	transition: color 0.25s ease-in-out;
}
span.breadcrumb-item > a:hover {
	color: var(--color-dark);
	opacity: 1;
}
span.breadcrumb-item.is-current {
	color: var(--color-text);
	font-weight: 400;
}
/* Post titles are cut with "..." (full title in the title attribute and in the H1 below) */
span.breadcrumb-item-post {
	max-width: 20rem;
	overflow: hidden;
	text-overflow: ellipsis;
}
span.breadcrumb-separator {
	display: block;
	width: 0.25rem;
	height: 0.4rem;
	color: var(--color-grey);
}
@media (max-width: 767.98px) {
	span.breadcrumb-item.is-current {
		font-weight: 500;
	}
	span.breadcrumb-item-post {
		max-width: 12rem;
	}
}