/**
 * Unified breadcrumbs component (.ll-breadcrumbs) — full stylesheet.
 *
 * Loaded non-render-blocking site-wide by inc/breadcrumbs.php (media="print"
 * onload swap). The above-the-fold subset is inlined as critical CSS from
 * css/breadcrumbs-critical.css (wp_head, priority 2) so the first-screen
 * breadcrumb paints with no FOUC/CLS before this file arrives.
 *
 * Visual is a 1:1 match of the legacy white `.breadcrumbs` (D1) look; mobile
 * collapses to a single-line horizontal scroll with the scrollbar hidden.
 */
.ll-breadcrumbs {
	font-size: 14px;
	font-weight: 400;
	color: #fff;
}
.ll-breadcrumbs ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.ll-breadcrumbs li {
	display: flex;
	align-items: center;
	line-height: 28px;
}
.ll-breadcrumbs a {
	color: #fff;
	text-decoration: none;
}
.ll-breadcrumbs a:hover,
.ll-breadcrumbs a:focus {
	/* Force white on hover everywhere — some templates (Bootstrap, landing
	   wrappers) define their own `a:hover` colour that would otherwise win. */
	color: #fff !important;
	text-decoration: underline;
}
.ll-breadcrumbs [aria-current="page"] {
	color: #fff;
}
/* Home is icon-only: flex for vertical alignment, and never underline on hover
   (that is what caused the legacy shift-rx "stub" under the icon). */
.ll-breadcrumbs li:first-child a {
	display: inline-flex;
	align-items: center;
}
.ll-breadcrumbs li:first-child a:hover {
	text-decoration: none;
}
.ll-breadcrumbs li + li::before {
	content: "/";
	flex: 0 0 30px;
	text-align: center;
	color: #fff;
	font-weight: 400;
}
.ll-breadcrumbs img {
	display: block;
	/* Optically center the home icon: it is geometrically centered, but the house
	   glyph is bottom-heavy and the text has no descenders, so it reads ~2px low.
	   A layout-neutral nudge lines its optical centre up with the labels. */
	position: relative;
	top: -2px;
}
.hero .ll-breadcrumbs {
	padding-top: 5px;
}
/* -------------------------------------------------------------------------
 * Per-template spacing parity with the legacy breadcrumbs on prod.
 *
 * The legacy spacing that targeted the breadcrumb's OWN box (inner class) no
 * longer applies now the element is `.ll-breadcrumbs`, so it is replicated here,
 * scoped to each hero context. Spacing that came from WRAPPERS (`.breadcrumbs-row`
 * margin-top, the case-study `.breadcrumbs__row` absolute offset) or from the
 * hero H1/content is untouched and still applies — nothing to restore there.
 *   - Page Builder landings: `.landing-builder-wrapper .hero .breadcrumbs{margin-bottom:62px}` (24px ≤1024).
 *   - shift-rx dark heroes:  `.cs-block--case-hero .shift-rx-breadcrumbs{margin-bottom:20px}`.
 *   - cs26 case studies:     `.cs26-breadcrumbs{margin-bottom:20px}`.
 * ---------------------------------------------------------------------- */
.landing-builder-wrapper .hero .ll-breadcrumbs {
	margin-bottom: 62px;
}
.cs-block--case-hero .ll-breadcrumbs {
	margin-bottom: 20px;
}
.cs26-hero .ll-breadcrumbs {
	margin-bottom: 20px;
}
/* The breadcrumb was lifted out of `.shift-rx-content` — a flex column inside a
 * `align-items:flex-end` (bottom-aligned) row. On wide screens that column is
 * shorter than the hero image, so without the breadcrumb it floats to the bottom
 * and opens a large gap under the full-width breadcrumb. Pin the content column
 * to the top so the pill/H1 hug the breadcrumb (matching prod). Desktop only —
 * the hero stacks to one column below 769px. */
@media (min-width: 769px) {
	.cs-block--case-hero .shift-rx-block > .shift-rx-content {
		align-self: flex-start;
	}
}
@media (max-width: 1024px) {
	.landing-builder-wrapper .hero .ll-breadcrumbs {
		margin-bottom: 24px;
	}
}
@media (max-width: 768px) {
	.ll-breadcrumbs ol {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	.ll-breadcrumbs ol::-webkit-scrollbar {
		display: none;
	}
	.ll-breadcrumbs li {
		flex: 0 0 auto;
		white-space: nowrap;
	}
}
@media (max-width: 375px) {
	.ll-breadcrumbs {
		font-size: 12px;
	}
}