/**
 * Alpine — Breadcrumbs
 * Bare <nav>, no background. Colours inherit from the parent section via
 * `currentColor`; force-light / force-dark modifiers override. Separators are
 * CSS-drawn chevrons, hidden from assistive tech. Trail wraps gracefully and
 * can collapse behind an ellipsis on small screens (see breadcrumbs.view.js).
 */

.am-breadcrumbs {
	/* Inherit mode: adopt the parent's text colour. */
	color: inherit;
	font-size: var(--oe-font-size-xsmall, 0.75rem);
	line-height: 1.4;
	/* Shrink to the width of the trail itself (not the full parent) so a
	   background / border / padding added via oe- utility classes wraps only
	   the breadcrumb — the "pill" look. Still wraps safely on narrow screens. */
	width: fit-content;
	max-width: 100%;
}

/* Forced colour contexts (design-system aligned). */
.am-breadcrumbs--light { color: #ffffff; }
.am-breadcrumbs--dark  { color: var(--oe-color-secondary, #003469); }

/* ── Float placement ──────────────────────────────────────────────────── */
/* Lifts the nav up out of flow and into the padding ABOVE its container, so
   sibling hero content reclaims its natural top position AND the breadcrumb
   stays left-aligned with that content (no dependence on the section's
   padding value). Anchor = the nearest positioned ancestor: add
   `oe-position-relative` to the content container this block sits in.
   `--am-bc-gap` is the breathing space between the breadcrumb and the
   content below it, set per-block in the editor. */
.am-breadcrumbs--float {
	position: absolute;
	left: 0;
	right: auto;
	bottom: 100%;                       /* sit directly above the container top */
	/* Editor value if set, else the design-system spacing token (auto). */
	margin-bottom: var(--am-bc-gap, var(--oe-spacing-medium, 1rem));
	z-index: 2;
}
/* On mobile, hero padding is smaller — revert to normal flow to avoid the
   breadcrumb overlapping the heading. */
@media (max-width: 600px) {
	.am-breadcrumbs--float.am-breadcrumbs--float-nomobile {
		position: static;
		top: auto;
		left: auto;
		z-index: auto;
	}
}

/* ── List ─────────────────────────────────────────────────────────────── */
.am-breadcrumbs__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;              /* wrap elegantly on narrow screens */
	align-items: center;
}

.am-breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	min-width: 0;                /* allow long labels to shrink/wrap */
}

/* Chevron separator — drawn in CSS, decorative (never read by screen readers
   because it is generated content, not real text). Sits before every item
   except the first, so it always stays attached to the following label. */
.am-breadcrumbs__item + .am-breadcrumbs__item::before {
	content: "";
	flex: none;
	width: 0.42em;
	height: 0.42em;
	margin: 0 0.6em;
	border: solid currentColor;
	border-width: 2px 2px 0 0;   /* top + right → a right-pointing chevron */
	transform: rotate(45deg);
	opacity: 0.55;
}

/* ── Links & current page ─────────────────────────────────────────────── */
.am-breadcrumbs__link {
	color: inherit;
	text-decoration: none;
	border-radius: 2px;
}

.am-breadcrumbs__link:hover {
	color: var(--oe-color-primary, #00addc);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Visible, high-contrast keyboard focus. */
.am-breadcrumbs__link:focus-visible,
.am-breadcrumbs__toggle:focus-visible {
	outline: 2px solid var(--oe-color-primary, #00addc);
	outline-offset: 2px;
}

.am-breadcrumbs__current {
	font-weight: normal;
	opacity: 0.75;
	/* Let a very long current title wrap instead of overflowing. */
	overflow-wrap: anywhere;
}

/* ── Mobile collapse (progressive enhancement) ────────────────────────── */
/* The ellipsis toggle is injected by breadcrumbs.view.js; hidden until then. */
.am-breadcrumbs__ellipsis { display: none; }

.am-breadcrumbs__list.is-collapsed .am-breadcrumbs__item.is-hidden {
	display: none;
}
.am-breadcrumbs__list.is-collapsed .am-breadcrumbs__ellipsis {
	display: inline-flex;
	align-items: center;
}

.am-breadcrumbs__toggle {
	appearance: none;
	background: none;
	border: 0;
	padding: 0 0.15em;
	margin: 0;
	font: inherit;
	line-height: 1;
	color: inherit;
	cursor: pointer;
	letter-spacing: 0.1em;
}
.am-breadcrumbs__toggle:hover { color: var(--oe-color-primary, #00addc); }

/* ── Yoast passthrough ────────────────────────────────────────────────── */
.am-breadcrumbs--yoast a { color: inherit; text-decoration: none; border-radius: 2px; }
.am-breadcrumbs--yoast a:hover { color: var(--oe-color-primary, #00addc); text-decoration: underline; text-underline-offset: 0.2em; }
.am-breadcrumbs--yoast a:focus-visible { outline: 2px solid var(--oe-color-primary, #00addc); outline-offset: 2px; }
.am-breadcrumbs--yoast .breadcrumb_last { font-weight: normal; opacity: 0.75; }

/* ── Print: always show the full trail ────────────────────────────────── */
@media print {
	.am-breadcrumbs__list.is-collapsed .am-breadcrumbs__item.is-hidden { display: inline-flex; }
	.am-breadcrumbs__list.is-collapsed .am-breadcrumbs__ellipsis { display: none; }
}