/**
 * Компонент: Navigation.
 *
 * Разметку строит Triada_Nav_Walker (inc/class-triada-nav-walker.php):
 * у пункта с подменю всегда есть <a href> (краулится) И отдельная
 * <button aria-expanded aria-controls> для раскрытия — не <div onclick>.
 *
 * Значения из макетов:
 *   основное меню   gap:26px; ссылка 15px w600 #16181D
 *   направления     gap:30px; ссылка 13.5px w600 #5A6270
 *   мегаменю        пункт 14.5px w600; подпункт 14px w600 #3A3F49; padding:9px 0
 *   подвал          заголовок 13px w800 ls0.06em; ссылка 14px w500 #9AA1AE; gap:10px
 *   юр. ссылки      12.5px w500 #9AA1AE; gap:24px
 *
 * Вертикального аккордеона на узких экранах в макетах нет —
 * см. docs/DESIGN-DEVIATIONS.md.
 */

.tri-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--tri-space-2);
}

.tri-menu__item {
	position: relative;
}

.tri-menu__row {
	display: flex;
	align-items: center;
	gap: var(--tri-space-8);
}

.tri-menu__link {
	flex: 1 1 auto;
	display: block;
	padding: var(--tri-space-10) 0;
	font-size: var(--tri-fs-15);
	font-weight: var(--tri-fw-600);
	line-height: var(--tri-lh-1-35);
	color: var(--tri-color-ink);
	text-decoration: none;
}

.tri-menu__link:hover,
.tri-menu__link:focus-visible {
	color: var(--tri-color-navy);
}

.tri-menu__item.current-menu-item > .tri-menu__row > .tri-menu__link,
.tri-menu__item.current-menu-ancestor > .tri-menu__row > .tri-menu__link {
	color: var(--tri-color-navy);
}

/* Кнопка раскрытия подменю. Отдельный элемент, чтобы ссылка осталась ссылкой. */
.tri-menu__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: var(--tri-radius-6);
	color: var(--tri-color-muted);
}

.tri-menu__toggle:hover {
	background-color: var(--tri-color-surface-f5f8ff);
	color: var(--tri-color-navy);
}

.tri-menu__chevron {
	width: 12px;
	height: 12px;
	/* reference: transition:transform .32s cubic-bezier(.22,.61,.36,1) */
	transition: transform var(--tri-duration-32) var(--tri-ease);
}

.tri-menu__toggle[aria-expanded="true"] .tri-menu__chevron {
	transform: rotate(180deg); /* reference: transform:rotate(180deg) */
}

/* --- Подменю: аккордеон на узких экранах ----------------------------- */

.tri-submenu {
	list-style: none;
	margin: 0;
	padding: 0 0 var(--tri-space-8) var(--tri-space-16);
	display: none;
	flex-direction: column;
	gap: var(--tri-space-2);
	border-left: 2px solid var(--tri-color-divider);
}

.tri-submenu[data-open="true"] {
	display: flex;
}

/* reference: подпункт мегаменю — 14px w600 #3A3F49; padding:9px 0 */
.tri-submenu .tri-menu__link {
	padding: var(--tri-space-9) 0;
	font-size: var(--tri-fs-14);
	font-weight: var(--tri-fw-600);
	color: var(--tri-color-ink-secondary);
}

/* --- Десктоп --------------------------------------------------------- */

@media (min-width: 1280px) {
	/* reference: nav{display:flex;align-items:center;gap:26px} */
	.tri-menu--primary {
		flex-direction: row;
		align-items: center;
		gap: var(--tri-space-26);
	}

	.tri-menu--primary > .tri-menu__item > .tri-menu__row > .tri-menu__link {
		padding: 0;
		white-space: nowrap;
	}

	.tri-menu--primary .tri-menu__toggle {
		width: 20px;
		height: 20px;
	}

	/* Выпадающее подменю.
	   reference: box-shadow:0 24px 56px rgba(4,34,92,0.18) */
	.tri-menu--primary .tri-submenu {
		position: absolute;
		top: calc(100% + var(--tri-space-14));
		left: 0;
		z-index: var(--tri-z-dropdown);
		display: flex;
		visibility: hidden;
		opacity: 0;
		min-width: 280px;
		max-width: min(360px, 90vw);
		padding: var(--tri-space-12);
		background-color: var(--tri-color-white);
		border: var(--tri-border-width) solid var(--tri-color-border);
		border-radius: var(--tri-radius-14);
		box-shadow: var(--tri-shadow-navy-56-18);
		transition:
			opacity var(--tri-duration-28) var(--tri-ease),
			visibility var(--tri-duration-28) var(--tri-ease);
	}

	.tri-menu--primary .tri-menu__item:hover > .tri-submenu,
	.tri-menu--primary .tri-menu__item:focus-within > .tri-submenu,
	.tri-menu--primary .tri-submenu[data-open="true"] {
		visibility: visible;
		opacity: 1;
	}

	/* reference: подсветка пункта мегаменю — background:#F5F8FF */
	.tri-menu--primary .tri-submenu .tri-menu__link {
		padding: var(--tri-space-9) var(--tri-space-12);
		border-radius: var(--tri-radius-6);
	}

	.tri-menu--primary .tri-submenu .tri-menu__link:hover {
		background-color: var(--tri-color-surface-f5f8ff);
		color: var(--tri-color-ink);
	}

	/* Подменю у правого края не должно вылезать за окно. */
	.tri-menu--primary > .tri-menu__item:nth-last-child(-n + 2) .tri-submenu {
		left: auto;
		right: 0;
	}
}

/* --- Меню подвала ----------------------------------------------------
 * Одно меню, а не четыре области виджетов: пункт верхнего уровня —
 * заголовок колонки, его подменю — ссылки внутри колонки.
 * ------------------------------------------------------------------- */

/* На узких экранах колонки идут стопкой; на ≥768px раскладку задаёт
   сетка подвала, а список растворяется (см. footer.css). */
.tri-menu--footer {
	display: flex;
	flex-direction: column;
	gap: var(--tri-space-40);
}

.tri-menu--footer > .tri-menu__item > .tri-menu__row > .tri-menu__link {
	padding: 0;
	font-size: var(--tri-fs-13);
	font-weight: var(--tri-fw-800);
	letter-spacing: var(--tri-ls-p0-06);
	text-transform: uppercase;
	color: var(--tri-color-white);
}

.tri-menu--footer .tri-submenu {
	display: flex;
	padding: 0;
	margin-block-start: var(--tri-space-16);
	border-left: 0;
	gap: var(--tri-space-10);
}

.tri-menu--footer .tri-submenu .tri-menu__link {
	padding: 0;
	font-size: var(--tri-fs-14);
	font-weight: var(--tri-fw-500);
	color: var(--tri-color-on-dark-9aa1ae);
}

.tri-menu--footer .tri-submenu .tri-menu__link:hover {
	color: var(--tri-color-white);
}

.tri-menu--footer .tri-menu__toggle {
	display: none;
}

/* --- Меню юридических ссылок ----------------------------------------- */

.tri-menu--legal {
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--tri-space-24);
}

.tri-menu--legal .tri-menu__link {
	padding: 0;
	font-size: var(--tri-fs-12-5);
	font-weight: var(--tri-fw-500);
	color: var(--tri-color-on-dark-9aa1ae);
}

.tri-menu--legal .tri-menu__link:hover {
	color: var(--tri-color-white);
}

.tri-menu--legal .tri-menu__toggle,
.tri-menu--legal .tri-submenu {
	display: none;
}