/**
 * Breadcrumbs — Home > Category > Current page.
 *
 * Layout: flex row, gap 9px (Figma node 509:8828).
 * RTL: first DOM child = rightmost visually, separators are left-pointing
 * chevrons that flow with the reading direction.
 *
 * @package Hamechadesh
 */

.hm-breadcrumbs {
	margin: 0;
}

.hm-breadcrumbs__list {
	display: flex;
	flex-wrap: nowrap; /* the row never breaks; long items clamp internally instead */
	gap: 9px;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--hm-color-text);
	font-family: var(--hm-font-primary);
	font-weight: 300;
	font-size: 14px;
	line-height: 21px;
}

.hm-breadcrumbs__item {
	display: inline-flex;
	align-items: start;
	flex-shrink: 0; /* short items (home, category) keep their natural width */
}

/* The current page is the last item and is the one that varies in length
   (post titles can be long). Allow only THIS item to shrink and wrap so
   the other items keep their natural single-line layout. */
.hm-breadcrumbs__item:last-child {
	flex-shrink: 1;
	min-width: 0;
}

.hm-breadcrumbs__link {
	color: inherit;
	text-decoration: none;
	transition: color var(--hm-transition-fast);
}

.hm-breadcrumbs__link:hover,
.hm-breadcrumbs__link:focus-visible {
	color: var(--hm-color-accent);
	text-decoration: underline;
	outline: none;
}

/* If the current page's title is too long for one line, it clamps to (max)
   2 lines inside the same item — the surrounding row stays on one logical
   line and the chevrons sit centred against the taller item. */
.hm-breadcrumbs__current {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	overflow-wrap: anywhere;
	color: inherit;
	max-width: 100%;
}

.hm-breadcrumbs__sep {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	color: inherit;
	width: 9px;
	height: 13px;
	margin-top: 4px;
}

.hm-breadcrumbs__sep svg {
	display: block;
	width: 100%;
	height: 100%;
}

@media (max-width: 767px) {
	.hm-breadcrumbs__list {
		font-size: 13px;
		gap: 7px;
	}
}