/**
 * OE Breadcrumbs (oe/breadcrumbs)
 * Bare <nav>, no background. Colours inherit from the parent section via
 * `currentColor`; force-light / force-dark modifiers override. Separators are
 * CSS ">" characters (matching the site's existing breadcrumb), hidden from
 * assistive tech. Trail wraps gracefully and
 * can collapse behind an ellipsis on small screens (see view.js).
 */

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

/* Forced colour contexts. */
.oe-block-breadcrumbs--light { color: var(--oe-color-primary-4, #ffffff); }
.oe-block-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 keeps its natural top position AND the breadcrumb
   stays left-aligned with that content. Anchor = the nearest positioned
   ancestor: add `oe-position-relative` to the content container this block
   sits in. `--oe-breadcrumbs-gap` is set per block in the editor. */
.oe-block-breadcrumbs--float {
	position: absolute;
	left: 0;
	right: auto;
	bottom: 100%;                       /* sit directly above the container top */
	margin-bottom: var(--oe-breadcrumbs-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: 767px) {
	.oe-block-breadcrumbs--float.oe-block-breadcrumbs--float-nomobile {
		position: static;
		top: auto;
		left: auto;
		z-index: auto;
	}
}

/* ── List ─────────────────────────────────────────────────────────────── */
/* Two classes so the theme's ol/li margins don't win. */
.oe-block-breadcrumbs .oe-block-breadcrumbs__list {
	list-style: none;
	margin: 0;
	padding: var(--oe-spacing-2xsmall) 0;
	display: flex;
	flex-wrap: wrap;              /* wrap elegantly on narrow screens */
	align-items: center;
}

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

/* ">" separator, matching the site's existing OE breadcrumb: a 14px text
   chevron in soft grey, 16px before and 20px after. Sits before every item
   except the first, so it always stays attached to the following label.
   The "/ ''" alt text hides it from screen readers (older browsers ignore
   that line and use the first). Opacity on currentColor gives the old #999
   on white and a soft white on navy, so it still inherits the section. */
.oe-block-breadcrumbs__item + .oe-block-breadcrumbs__item::before {
	content: ">";
	content: ">" / "";
	flex: none;
	font-size: 1.25em;           /* 14px on the 0.7rem trail, as before */
	line-height: 1;
	margin: 0 calc(var(--oe-spacing-base, 1rem) + var(--oe-spacing-2xsmall, 0.25rem)) 0 var(--oe-spacing-base, 1rem);
	opacity: 0.45;
}

/* ── Links & current page ─────────────────────────────────────────────── */
/* Hover keeps the inherited colour and adds an underline: sky blue fails
   text contrast on white, so a colour change can't be relied on. */
.oe-block-breadcrumbs .oe-block-breadcrumbs__link {
	color: inherit;
	text-decoration: none;
	border-radius: var(--oe-border-radius-small, 2px);
}

.oe-block-breadcrumbs .oe-block-breadcrumbs__link:hover {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Visible keyboard focus in the trail's own colour, so it contrasts with
   any section background. */
.oe-block-breadcrumbs .oe-block-breadcrumbs__link:focus-visible,
.oe-block-breadcrumbs .oe-block-breadcrumbs__toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.oe-block-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 view.js; hidden until collapsed.
   Two classes so it beats the `__item` display rule above (it is also an item). */
.oe-block-breadcrumbs .oe-block-breadcrumbs__ellipsis { display: none; }

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

/* Two classes + :hover/:focus so the theme's button fill doesn't win. */
.oe-block-breadcrumbs .oe-block-breadcrumbs__toggle,
.oe-block-breadcrumbs .oe-block-breadcrumbs__toggle:hover,
.oe-block-breadcrumbs .oe-block-breadcrumbs__toggle:focus {
	appearance: none;
	background: transparent;
	border: 0;
	padding: 0 0.15em;
	margin: 0;
	font: inherit;
	line-height: 1;
	color: inherit;
	cursor: pointer;
	letter-spacing: 0.1em;
}
.oe-block-breadcrumbs .oe-block-breadcrumbs__toggle:hover { text-decoration: underline; }

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

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