/*
 * mirani-breadcrumb-skin.css — NAV-03 breadcrumb surface, site-wide.
 *
 * The body is pure white on every template, so the frozen trail (bare grey text, no surface) simply
 * dissolved into the page. This lifts every breadcrumb onto one shared component: a rounded sunken
 * bar that hugs its crumbs, each crumb a chip, the current page a raised white one. No markup
 * changes — the three trail families that exist on the site are matched exactly as they ship:
 *
 *   nav.breadcrumb     → theme parts/*.php, mirani-pages.php, mirani-league.php, mirani-octane-calc.php
 *   nav.mi-breadcrumbs → octane-suite [octane_breadcrumbs] shortcode (no separator elements of its own)
 *   nav.mi-acct-crumb  → the mirani-account.php page header
 *
 * Every colour is a var(--mi-*) token, so the sitewide re-theme (mirani-recolor.css) keeps owning the
 * palette. Selectors are tag-qualified (nav.breadcrumb > ol beats .breadcrumb ol) so they win on
 * specificity rather than on load order. Logical properties only — RTL safe.
 */

/* ---------- The bar ---------- */

nav.breadcrumb > ol,
nav.mi-breadcrumbs > ol,
nav.mi-acct-crumb {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 2px;
	max-inline-size: 100%;
	padding: 7px 10px;
	border: 1px solid var(--mi-color-border, #e3e6eb);
	border-radius: 20px;
	background: var(--mi-color-bg-sunken, #f1f2f5);
	box-shadow: 0 1px 2px rgba(26, 29, 34, 0.05);
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--mi-color-text-secondary, #404751);
	list-style: none;
}

nav.breadcrumb > ol,
nav.mi-breadcrumbs > ol {
	margin: 0;
}

/* A touch of air under the bar; the frozen rule only padded the top. */
nav.breadcrumb {
	padding-block: var(--mi-space-4, 16px) var(--mi-space-1, 4px);
}

/* The auth view centres its header, and an inline-flex bar no longer answers to justify-content. */
.mi-acct-head--auth nav.mi-acct-crumb {
	margin-inline: auto;
}

/* ---------- Crumbs ---------- */

nav.breadcrumb ol li,
nav.mi-breadcrumbs ol li,
nav.mi-acct-crumb > * {
	display: flex;
	align-items: center;
}

nav.breadcrumb ol li a,
nav.mi-breadcrumbs ol li a,
nav.mi-acct-crumb a {
	display: block;
	padding: 3px 10px;
	border-radius: var(--mi-radius-pill, 999px);
	color: var(--mi-color-text-secondary, #404751);
	text-decoration: none;
	white-space: nowrap;
	transition:
		background var(--mi-motion-duration-120, 120ms) var(--mi-ease-standard, ease),
		color var(--mi-motion-duration-120, 120ms) var(--mi-ease-standard, ease);
}

nav.breadcrumb ol li a:hover,
nav.breadcrumb ol li a:focus-visible,
nav.mi-breadcrumbs ol li a:hover,
nav.mi-breadcrumbs ol li a:focus-visible,
nav.mi-acct-crumb a:hover,
nav.mi-acct-crumb a:focus-visible {
	background: var(--mi-color-bg-elevated, #fff);
	color: var(--mi-color-brand-primary, #112250);
}

/* «You are here» — a raised chip inside the sunken bar. */
nav.breadcrumb ol li[aria-current],
nav.mi-breadcrumbs ol li[aria-current],
nav.mi-acct-crumb [aria-current] {
	padding: 3px 12px;
	border: 1px solid var(--mi-color-border, #e3e6eb);
	border-radius: var(--mi-radius-pill, 999px);
	background: var(--mi-color-bg-elevated, #fff);
	color: var(--mi-color-text-primary, #102134);
	font-weight: var(--mi-type-weight-600, 600);
}

/* ---------- Separators ---------- */

/* NAV-03 ships its own chevron <li>; keep the frozen mirroring, just calm the colour. */
nav.breadcrumb ol li svg {
	inline-size: 13px;
	block-size: 13px;
	margin-inline: 1px;
	stroke: var(--mi-color-text-tertiary, #6e6a66);
	opacity: 0.5;
}

nav.mi-acct-crumb span[aria-hidden] {
	margin-inline: 1px;
	color: var(--mi-color-text-tertiary, #6e6a66);
	opacity: 0.5;
}

/* The shortcode trail has no separator elements of its own — draw them. */
nav.mi-breadcrumbs ol li + li::before {
	content: "\2039";
	margin-inline: 4px;
	color: var(--mi-color-text-tertiary, #6e6a66);
	opacity: 0.5;
}

/* ---------- Narrow screens ---------- */

@media (max-width: 700px) {
	nav.breadcrumb > ol,
	nav.mi-breadcrumbs > ol,
	nav.mi-acct-crumb {
		padding: 6px 8px;
		border-radius: 16px;
	}

	/* A product title is long enough to turn the bar into a paragraph — clamp it to one line. */
	nav.breadcrumb ol li[aria-current],
	nav.mi-breadcrumbs ol li[aria-current] {
		display: block;
		max-inline-size: 58vw;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
}