/*
 * Every breadcrumb on the site is one premium bar (Mo, 31 Oct 2026, "apply the premium button bar to the
 * breadcrumbs"): the landing tab bar's look (.ols-ltabs-list in ols-quiz/assets/landing-tabs.css), a pale
 * inset segmented bar with the links as hover pills and the current page as the navy gradient pill.
 *
 * What it covers:
 *   nav[aria-label="Breadcrumb"]  page content (1,434 pages: a / a / span, the "/" text hidden by the nav's
 *                                 zero font size), WooCommerce (template woocommerce/global/breadcrumb.php),
 *                                 ols-quiz and teacher trails (ols_quiz_trail), the KASP report (.okr-crumbs)
 *                                 product pages (.ols-pcrumb) too
 *   nav.ols-live-crumbs           the teacher dashboard (assets/live/teach-app.js)
 * Pages are not edited: ":root nav[...]" beats any page's own rules, and !important beats the theme and
 * plugin rules that whiten links on hover and focus. Trails wrap inside the bar, so never sideways scroll.
 */
:root nav[aria-label="Breadcrumb"],
:root nav.ols-live-crumbs {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 4px !important;
	box-sizing: border-box !important;
	width: fit-content !important;
	max-width: 100% !important;
	padding: 5px !important;
	border-radius: 16px !important;
	background: #eef1f8 !important;
	box-shadow: inset 0 0 0 1px rgba(28, 36, 75, 0.07) !important;
	font-size: 0 !important;
	margin: 0 !important;
	min-width: 0 !important;
	border: 0 !important;
	color: #3a4468 !important;
}
:root nav[aria-label="Breadcrumb"] .ols-breadcrumb-sep,
:root nav.ols-live-crumbs .ols-live-crumb-sep {
	display: none !important;
}
/* The links. */
:root nav[aria-label="Breadcrumb"] a,
:root nav[aria-label="Breadcrumb"] a:visited,
:root nav.ols-live-crumbs a,
:root nav.ols-live-crumbs a:visited {
	display: inline-flex !important;
	align-items: center !important;
	box-sizing: border-box !important;
	min-width: 0 !important;
	max-width: 100% !important;
	min-height: 38px !important;
	margin: 0 !important;
	padding: 7px 14px !important;
	border: 0 !important;
	border-radius: 11px !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #3a4468 !important;
	font: 600 13.5px/1.25 "Poppins", Arial, sans-serif !important;
	letter-spacing: -0.01em !important;
	text-decoration: none !important;
	white-space: normal !important;
	overflow-wrap: anywhere !important;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
	-webkit-tap-highlight-color: transparent;
}
:root nav[aria-label="Breadcrumb"] a::before,
:root nav[aria-label="Breadcrumb"] a::after,
:root nav.ols-live-crumbs a::before,
:root nav.ols-live-crumbs a::after {
	content: none !important;
}
:root nav[aria-label="Breadcrumb"] a:hover,
:root nav[aria-label="Breadcrumb"] a:focus,
:root nav[aria-label="Breadcrumb"] a:active,
:root nav.ols-live-crumbs a:hover,
:root nav.ols-live-crumbs a:focus,
:root nav.ols-live-crumbs a:active {
	background: #ffffff !important;
	box-shadow: 0 4px 12px rgba(28, 36, 75, 0.08) !important;
	color: #1c244b !important;
	text-decoration: none !important;
}
:root nav[aria-label="Breadcrumb"] a:focus-visible,
:root nav.ols-live-crumbs a:focus-visible {
	outline: 3px solid #467ff7 !important;
	outline-offset: 2px !important;
}
/* The current page. */
:root nav[aria-label="Breadcrumb"] span::before,
:root nav[aria-label="Breadcrumb"] span::after,
:root nav.ols-live-crumbs span::before,
:root nav.ols-live-crumbs span::after {
	content: none !important;
}
:root nav[aria-label="Breadcrumb"] > span:not(.ols-breadcrumb-sep),
:root nav[aria-label="Breadcrumb"] [aria-current="page"],
:root nav.ols-live-crumbs [aria-current="page"] {
	display: inline-flex !important;
	align-items: center !important;
	box-sizing: border-box !important;
	min-width: 0 !important;
	max-width: 100% !important;
	min-height: 38px !important;
	margin: 0 !important;
	padding: 7px 14px !important;
	border-radius: 11px !important;
	border: 0 !important;
	background: linear-gradient(135deg, #1c244b, #2f3f86) !important;
	box-shadow: 0 8px 18px rgba(28, 36, 75, 0.26) !important;
	color: #ffffff !important;
	font: 600 13.5px/1.25 "Poppins", Arial, sans-serif !important;
	letter-spacing: -0.01em !important;
	white-space: normal !important;
	overflow-wrap: anywhere !important;
}
@media (max-width: 600px) {
	:root nav[aria-label="Breadcrumb"] a,
	:root nav[aria-label="Breadcrumb"] a:visited,
	:root nav.ols-live-crumbs a,
	:root nav.ols-live-crumbs a:visited,
	:root nav[aria-label="Breadcrumb"] > span:not(.ols-breadcrumb-sep),
	:root nav[aria-label="Breadcrumb"] [aria-current="page"],
	:root nav.ols-live-crumbs [aria-current="page"] {
		min-height: 36px !important;
		padding: 6px 11px !important;
		font-size: 13px !important;
	}
}
/* A view loaded inside a landing tab has no trail of its own (ols-quiz/assets/landing-embed.css). */
:root .ols-lembed-view nav.ols-course-nav {
	display: none !important;
}
/*
 * The slot (Mo, 31 Oct 2026): every trail sits here, under the header and outside the page content, so its
 * left edge and top are the same on every page. It is a .site-main so it takes the page's own width at
 * each breakpoint, and the rail's padding below matches body > main in the rail code (900 to 1439px).
 * Nothing printed = no slot (home page, checkout).
 */
:root .ols-trail-slot {
	box-sizing: border-box;
	padding: 0;
	margin-top: 0;
	margin-bottom: 18px;
	background: #ffffff;
}
:root .woocommerce-products-header__title.page-title {
	margin-top: 0;
}
:root .ols-trail-slot:empty {
	display: none;
}
:root .ols-trail-slot.has-own > nav:not(:last-child) {
	display: none !important;
}
@media (min-width: 900px) and (max-width: 1439px) {
	:root body.olsr-on > .ols-trail-slot {
		padding-left: calc(var(--olsr-wc, 84px) + 28px);
	}
}
@media (max-width: 575px) {
	:root .ols-trail-slot {
		padding: 0 16px;
	}
}
@media (prefers-reduced-motion: reduce) {
	:root nav[aria-label="Breadcrumb"] a,
	:root nav.ols-live-crumbs a {
		transition: none !important;
	}
}