/*
 * Хлебные крошки.
 *
 * Значения берутся из переменных дизайн-системы. Если плагин окажется
 * на площадке без них, запасные значения в var() не дадут вёрстке
 * рассыпаться.
 */

.nn-breadcrumbs {
	margin-bottom: var(--nn-space-4, 1rem);
	color: var(--nn-color-text-muted, #8f99a3);
	font-size: var(--nn-fs-sm, 0.875rem);
}

.nn-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--nn-space-2, 0.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nn-breadcrumbs li {
	display: flex;
	align-items: center;
	gap: var(--nn-space-2, 0.5rem);
	margin: 0;
}

.nn-breadcrumbs li + li::before {
	content: "/";
	color: var(--nn-color-border-strong, #4f5366);
}

.nn-breadcrumbs a {
	color: var(--nn-color-accent, #04e2ff);
	text-decoration: none;
}

.nn-breadcrumbs a:hover {
	text-decoration: underline;
}

.nn-breadcrumbs [aria-current="page"] {
	color: var(--nn-color-text, #cfd8dd);
}

/*
 * Кнопка раскрытия нужна только на узком экране.
 *
 * `li` в селекторе обязателен. Правило `.nn-breadcrumbs li` выше задаёт
 * display: flex и по специфичности (0,1,1) перебивает одиночный класс
 * (0,1,0) независимо от порядка. Без `li` кнопка показывалась на всех
 * экранах — проверено вычисленным стилем на master 1 сентября 2026.
 */
.nn-breadcrumbs li.nn-breadcrumbs__toggle {
	display: none;
}

.nn-breadcrumbs__toggle-button {
	min-width: 32px;
	min-height: 32px;
	padding: 0 var(--nn-space-2, 0.5rem);
	border: 1px solid var(--nn-color-border, #3a3d4d);
	border-radius: var(--nn-radius-sm, 4px);
	background: none;
	color: var(--nn-color-text-muted, #8f99a3);
	cursor: pointer;
}

.nn-breadcrumbs__toggle-button:hover {
	color: var(--nn-color-accent, #04e2ff);
}

/*
 * Телефон: длинная цепочка схлопывается до «первый … последний».
 * Разметка остаётся полной — скрываются только визуально, поэтому
 * поисковые системы и программы чтения с экрана видят всё.
 */
@media (max-width: 599px) {

	.nn-breadcrumbs--collapsible li.nn-breadcrumbs__toggle {
		display: flex;
	}

	.nn-breadcrumbs--collapsible:not(.is-expanded) .nn-breadcrumbs__item--middle {
		display: none;
	}
}