/* ==========================================================================
   Breadcrumbs

   Defaults only. Everything here is either a colour that inherits, or a
   value the widget's Style tab overrides — so the trail looks right with
   nothing configured and gets out of the way the moment anything is.
   ========================================================================== */

.arena .arena-breadcrumb {
	--arena-crumb-speed: .18s;
	color: var(--arena-ink-soft);
	font-size: 13px;
}

.arena .arena-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.arena .arena-breadcrumb__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.arena .arena-breadcrumb__link,
.arena .arena-breadcrumb a {
	color: inherit;
	text-decoration: none;
	transition:
		color var(--arena-crumb-speed) ease,
		background-color var(--arena-crumb-speed) ease;
}

.arena .arena-breadcrumb__link:hover,
.arena .arena-breadcrumb a:hover {
	color: var(--arena-accent);
}

.arena .arena-breadcrumb__current {
	color: var(--arena-ink);
	/* The one item that cannot be clicked, so it carries the weight instead
	   of a colour a visitor might read as "link". */
	font-weight: 600;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.arena .arena-breadcrumb__sep {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	/* Lighter than the words it sits between: a separator is punctuation,
	   not a third piece of information. */
	color: var(--arena-line);
	line-height: 1;
	/* aria-hidden in the markup, and unselectable here, so copying the
	   trail gives the words without the slashes. */
	user-select: none;
}

.arena .arena-breadcrumb__sep svg {
	width: 1em;
	height: 1em;
	display: block;
	fill: currentColor;
}

/* An SEO plugin writes its own markup inside our wrapper, and Yoast's last
   crumb is a <span class="breadcrumb_last"> rather than ours. */
.arena .arena-breadcrumb--plugin .breadcrumb_last {
	color: var(--arena-ink);
	font-weight: 600;
}

@media (max-width: 480px) {
	.arena .arena-breadcrumb__current {
		/* On a phone the last crumb is usually a headline, and a headline
		   that wraps to four lines is no longer a breadcrumb. */
		max-width: 18ch;
	}
}