/* Главное меню — тонкая капитель с «иглой».
 * Inter 12.5px, заглавные с широкой разрядкой. При наведении под словом слева направо
 * прочерчивается волосяная линия, а по ней к концу слова едет капля-точка из логотипа. Всё белое — в тон пункту при наведении.
 * Селектор совпадает с правилом Colibri в page-inline.css — menu.css подключается позже и переопределяет его.
 */

#colibri .style-9 > div > .colibri-menu-container > ul.colibri-menu > li > a {
	position: relative;
	font-family: var(--yb-font-body);
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: var(--yb-track-caps);
	/* Разрядка добавляет пробел после последней буквы — компенсируем, чтобы линия и центровка были точными. */
	margin-right: -0.2em;
	text-transform: uppercase;
	color: var(--yb-on-dark-soft);
	padding-top: 12px;
	padding-bottom: 12px;
	transition: color var(--yb-duration) ease;
}

#colibri .style-9 > div > .colibri-menu-container > ul.colibri-menu > li:hover > a,
#colibri .style-9 > div > .colibri-menu-container > ul.colibri-menu > li > a:focus-visible {
	color: var(--yb-white);
}

/* Волосяная линия: растворяется к началу слова, растёт слева направо. */
#colibri .style-9 > div > .colibri-menu-container > ul.colibri-menu > li > a::after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	right: 0.2em;
	bottom: 4px;
	height: 1px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.5s var(--yb-ease);
	pointer-events: none;
}

/* «Игла» — капля-точка из логотипа (точка над «B», без дужки), едет по линии к концу слова. */
#colibri .style-9 > div > .colibri-menu-container > ul.colibri-menu > li > a::before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	bottom: 1px;
	width: 6px;
	height: 8px;
	background: var(--yb-white);
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%22216%20127%2080%20159%22%3E%3Cpath%20d%3D%22M275.74%20127.38C253.18%20147.12%20216.52%20189.42%20216.52%20245.82C216.52%20267.534%20234.286%20285.3%20256%20285.3C277.714%20285.3%20295.48%20267.534%20295.48%20245.82C295.48%20220.44%20271.51%20207.75%20271.51%20180.96C271.51%20158.4%20287.02%20144.3%20275.74%20127.38Z%22/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%22216%20127%2080%20159%22%3E%3Cpath%20d%3D%22M275.74%20127.38C253.18%20147.12%20216.52%20189.42%20216.52%20245.82C216.52%20267.534%20234.286%20285.3%20256%20285.3C277.714%20285.3%20295.48%20267.534%20295.48%20245.82C295.48%20220.44%20271.51%20207.75%20271.51%20180.96C271.51%20158.4%20287.02%20144.3%20275.74%20127.38Z%22/%3E%3C/svg%3E") center / contain no-repeat;
	opacity: 0;
	transition: left 0.5s var(--yb-ease), opacity 0.2s ease;
	pointer-events: none;
}

#colibri .style-9 > div > .colibri-menu-container > ul.colibri-menu > li:hover > a::after,
#colibri .style-9 > div > .colibri-menu-container > ul.colibri-menu > li > a:focus-visible::after {
	transform: scaleX(1);
}

#colibri .style-9 > div > .colibri-menu-container > ul.colibri-menu > li:hover > a::before,
#colibri .style-9 > div > .colibri-menu-container > ul.colibri-menu > li > a:focus-visible::before {
	left: calc(100% - 0.2em - 3px);
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	#colibri .style-9 > div > .colibri-menu-container > ul.colibri-menu > li > a::after,
	#colibri .style-9 > div > .colibri-menu-container > ul.colibri-menu > li > a::before {
		transition: opacity 0.2s ease;
	}
}

/* -------- шесть пунктов + поиск + телефон в одну строку --------
 * С «Portfólio» в меню шапка не помещалась, и телефон уезжал на вторую строку.
 * Промежутки и разрядка сжимаются по ширине экрана; размер шрифта не трогаем. */

#colibri #menu-primary-menu > li {
	margin-left: 28px;
}

#colibri #menu-primary-menu > li:first-child {
	margin-left: 0;
}

/* Пустая колонка-распорка Colibri между логотипом и меню уступает место первой. */
#colibri [data-placeholder-provider="navigation-spacing"] {
	min-width: 0;
}

#colibri .h-column.style-6-outer {
	flex-shrink: 1;
	min-width: 0;
}

@media (max-width: 1280px) {
	#colibri #menu-primary-menu > li {
		margin-left: 20px;
	}

	#colibri #menu-primary-menu > li > a {
		letter-spacing: 0.12em;
	}

	.h-column.yb-header-phone {
		margin-left: 20px;
		padding-left: 20px;
	}

	.yb-phone-wrap .yb-callnote {
		max-width: 140px;
		white-space: normal;
	}
}

@media (max-width: 1200px) {
	#colibri #menu-primary-menu > li > a {
		letter-spacing: 0.08em;
	}

	#colibri #menu-primary-menu > li {
		margin-left: 12px;
	}

	.h-column.yb-header-search {
		margin-left: 4px;
	}

	/* Логотип чуть меньше — только на узких ноутбуках, где иначе не помещается телефон. */
	#colibri [data-placeholder-provider="navigation-logo"] img {
		max-width: 180px;
	}
}