/**
 * PropOffice Designs — Property Breadcrumb.
 *
 * ONE stylesheet for every surface: the native PropOffice screen, the
 * [propoffice_property_breadcrumb] shortcode, and the Elementor widget.
 * Hand-authored, no build step, enqueued with filemtime cache-busting
 * (see PropOffice\Designs\PropertyBreadcrumb\PropertyBreadcrumbAssets).
 *
 * PALETTE. Every colour reads a PropOffice design token with the token's own
 * value as the fallback: `var(--po-ds-color-text)`. Inside the workspace the
 * component inherits the live design system; on a public theme page — where
 * those tokens are not defined — it renders in the identical palette. No brand
 * colour is hard-coded anywhere in this file.
 *
 * ISOLATION. Every selector is namespaced under `.po-breadcrumb`, and the list
 * resets the bullets, margins and padding themes impose on `ol`.
 *
 * LAYOUT. Intrinsic and container-relative, never viewport-keyed. A breadcrumb
 * is placed above a full-width hero and inside a one-third sidebar, and there
 * is no viewport width at which the right answer is knowable — so there is not
 * a single media query in this file except the reduced-motion one.
 *
 * NO SCRIPT. Nothing here depends on JavaScript. The overflow behaviour is the
 * browser's own scrolling, which keeps keyboard focus reachable for free: a
 * focused link that is off-screen is scrolled into view by the browser without
 * anything being written to make that happen.
 */

.po-breadcrumb {
	font-family: var(--po-ds-font-family);
	--po-breadcrumb-ink: var(--po-ds-color-text);
	--po-breadcrumb-muted: var(--po-ds-color-muted);
	--po-breadcrumb-link: var(--po-ds-color-muted);
	--po-breadcrumb-link-hover: var(--po-ds-color-text);
	--po-breadcrumb-separator: var(--po-ds-color-border);
	--po-breadcrumb-focus: var(--po-ds-color-primary);
	--po-breadcrumb-gap: 6px;

	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 16px;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--po-breadcrumb-ink);
}

.po-breadcrumb *,
.po-breadcrumb *::before,
.po-breadcrumb *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------- back ---- */

/* The action, not a hierarchy step. It reads slightly stronger than the trail
   because it is the one thing on the line a visitor is likely to want. */
.po-breadcrumb__back {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex: none;
	color: var(--po-breadcrumb-ink);
	font-weight: 500;
	text-decoration: none;
	border-radius: 4px;
}

.po-breadcrumb__back:hover,
.po-breadcrumb__back:focus-visible {
	text-decoration: underline;
}

.po-breadcrumb__back-icon {
	display: inline-flex;
	/* The same chevron the separators use, turned to point back. One drawing,
	   two meanings, guaranteed identical weight. */
	transform: rotate(180deg);
}

/* ----------------------------------------------------------------- trail --- */

.po-breadcrumb__nav {
	min-width: 0;
	/* Take the remaining width but never force the row wider than its
	   container: `min-width: 0` is what actually permits a flex child to be
	   narrower than its content, and without it the trail pushes the page into
	   horizontal overflow instead of scrolling inside itself. */
	flex: 1 1 auto;
}

.po-breadcrumb__list {
	display: flex;
	align-items: center;
	gap: 0 var(--po-breadcrumb-gap);
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Scroll: the trail stays one line and slides. The default, because a path
   that wraps to three lines in a sidebar stops reading as one path. */
.po-breadcrumb--scroll .po-breadcrumb__list {
	flex-wrap: nowrap;
	overflow-x: auto;
	/* Momentum on touch, and no vertical scrollbar appearing for a one-line
	   box on platforms that reserve space for one. */
	overflow-y: hidden;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.po-breadcrumb--wrap .po-breadcrumb__list {
	flex-wrap: wrap;
}

.po-breadcrumb__item {
	display: inline-flex;
	align-items: center;
	gap: var(--po-breadcrumb-gap);
	min-width: 0;
}

/* An intermediate step may shorten; the property may not. Steps are places,
   and a place abbreviated to "Kny…" is unrecognisable, so they hold their
   width and the row scrolls instead. */
.po-breadcrumb--scroll .po-breadcrumb__item {
	flex: none;
	white-space: nowrap;
}

.po-breadcrumb__link,
.po-breadcrumb__text,
.po-breadcrumb__current {
	min-width: 0;
}

.po-breadcrumb__link {
	color: var(--po-breadcrumb-link);
	text-decoration: none;
	border-radius: 4px;
}

.po-breadcrumb__link:hover,
.po-breadcrumb__link:focus-visible {
	color: var(--po-breadcrumb-link-hover);
	text-decoration: underline;
}

/* A classification the store holds as a plain string. It is context, not
   navigation, so it looks like the trail without inviting a click. */
.po-breadcrumb__text {
	color: var(--po-breadcrumb-muted);
}

/* Where you are. The only step drawn in full ink. */
.po-breadcrumb__current {
	color: var(--po-breadcrumb-ink);
	font-weight: 500;
	/* The property title is the one step that can be genuinely long, so in the
	   wrapping mode it is allowed to break rather than forcing a wide row. */
	overflow-wrap: anywhere;
}

.po-breadcrumb--scroll .po-breadcrumb__current {
	white-space: nowrap;
}

/* ------------------------------------------------------------ separator --- */

.po-breadcrumb__separator {
	display: inline-flex;
	flex: none;
	color: var(--po-breadcrumb-separator);
}

.po-breadcrumb__chevron {
	display: block;
	width: 14px;
	height: 14px;
}

/* --------------------------------------------------------------- focus ---- */

/* Never `outline: none`. A keyboard visitor navigating a breadcrumb has to be
   able to see which step they are on, and the ring is drawn with an offset so
   it is legible against both the page and a hover underline. */
.po-breadcrumb a:focus-visible {
	outline: 2px solid var(--po-breadcrumb-focus);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.po-breadcrumb * {
		transition: none !important;
	}
}