/**
 * HedgeTrade Menu — выпадающие меню хедера.
 * ------------------------------------------------------------------
 * Два уровня оформления:
 *   1) Обычный dropdown (любой пункт с детьми) — белая карточка
 *      вместо серого блока Blocksy по умолчанию.
 *   2) Мега-панель — пункт с классом `ht-mega` (класс ставится в
 *      «Внешний вид → Меню», см. docs/MENU-SETUP.md, раздел
 *      «Мега-меню»). Дети пункта = заголовки колонок, внуки = ссылки.
 *
 * Селекторная политика: ТОЛЬКО классы ядра WordPress (.menu-item,
 * .sub-menu, .menu-item-has-children) и собственные ht-* классы.
 * Внутренние .ct-* селекторы Blocksy не используются намеренно —
 * они вне публичного API и меняются между версиями (та же норма,
 * что в ht-header.css). Точечные !important осознанны: наши файлы
 * грузятся с приоритетом 5, РАНЬШЕ стилей Blocksy, и на свойствах,
 * которые Blocksy задаёт своему dropdown (фон, позиция, раскладка),
 * без !important каскад проигрывается по порядку загрузки.
 *
 * Кроссбраузерность: только evergreen-свойства (grid, logical
 * properties, :focus-within — поддержка во всех актуальных
 * браузерах); анимация отключается по prefers-reduced-motion;
 * клавиатурный обход — через :focus-within, панель доступна с Tab.
 *
 * @package HedgeTrade_Child
 * @since   1.13.0
 */

/* ==================================================================
   1. Обычный dropdown — белая карточка.
   Применяется к любому подменю хедера, кроме мега-панелей.
   ================================================================== */

.menu-item-has-children:not(.ht-mega) > .sub-menu {
	padding: var(--ht-space-2) !important;
	border: 1px solid var(--ht-color-border);
	border-radius: var(--ht-radius-sm);
	background: var(--ht-color-surface) !important;
	box-shadow: var(--ht-shadow-hover);
}

.menu-item-has-children:not(.ht-mega) > .sub-menu .menu-item > a {
	border-radius: calc(var(--ht-radius-sm) - var(--ht-space-1));
	color: var(--ht-color-heading) !important;
	font-weight: var(--ht-fw-semibold);
	transition: background var(--ht-transition), color var(--ht-transition);
}

.menu-item-has-children:not(.ht-mega) > .sub-menu .menu-item > a:hover,
.menu-item-has-children:not(.ht-mega) > .sub-menu .menu-item > a:focus-visible {
	background: var(--ht-color-primary-soft);
	color: var(--ht-color-primary) !important;
}

/* ==================================================================
   2. Мега-панель (пункт .ht-mega). Только десктоп: на мобиле
   меню живёт в offcanvas Blocksy и раскрывается аккордеоном —
   там колонки не нужны, стили ниже не применяются вовсе.
   ================================================================== */

@media (min-width: 1000px) {

	/* Родительский пункт — якорь позиционирования панели. */
	.menu-item.ht-mega {
		position: relative;
	}

	/* --- Панель --------------------------------------------------- */

	.menu-item.ht-mega > .sub-menu {
		position: absolute !important;
		inset-block-start: 100% !important;
		/* Прижата к правому краю пункта: «Обучение» стоит у правого
		   края хедера, панель растёт влево и не уходит за экран. */
		inset-inline-start: auto !important;
		inset-inline-end: 0 !important;
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0 var(--ht-space-8);
		inline-size: min(64rem, calc(100vw - var(--ht-space-10)));
		padding: var(--ht-space-8) !important;
		border: 1px solid var(--ht-color-border);
		border-radius: var(--ht-radius-md);
		background: var(--ht-color-surface) !important;
		box-shadow: var(--ht-shadow-hover);
	}

	/* Показ/скрытие. Управляем сами, поэтому transform/opacity —
	   с !important поверх анимаций dropdown Blocksy. */
	.menu-item.ht-mega > .sub-menu {
		visibility: hidden;
		opacity: 0;
		transform: translateY(var(--ht-space-2));
		pointer-events: none;
		transition:
			opacity var(--ht-transition),
			transform var(--ht-transition),
			visibility 0s linear var(--ht-duration);
	}

	.menu-item.ht-mega:hover > .sub-menu,
	.menu-item.ht-mega:focus-within > .sub-menu {
		visibility: visible;
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
		transition-delay: 0s;
	}

	/* --- Заголовки колонок (дети .ht-mega) ------------------------ */

	.menu-item.ht-mega > .sub-menu > .menu-item > a {
		display: block;
		margin-block-end: var(--ht-space-2);
		padding: 0 0 var(--ht-space-3) !important;
		border-block-end: 1px solid var(--ht-color-border);
		color: var(--ht-color-heading) !important;
		font-size: var(--ht-fs-caption);
		font-weight: var(--ht-fw-bold);
		letter-spacing: 0.08em;
		text-transform: uppercase;
		/* Заголовок колонки — рубрикатор, не ссылка по смыслу:
		   курсор и hover нейтральные, клик ведёт на рубрику как бонус. */
		background: none !important;
	}

	/* --- Вложенный список колонки (внуки) ------------------------- */

	/* Второй уровень раскрыт статически: это содержимое колонки,
	   а не ещё один dropdown. */
	.menu-item.ht-mega > .sub-menu .sub-menu {
		position: static !important;
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		transform: none !important;
		min-inline-size: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		background: none !important;
		box-shadow: none !important;
		pointer-events: auto;
	}

	/* --- Ссылки колонки ------------------------------------------- */

	.menu-item.ht-mega > .sub-menu .sub-menu .menu-item > a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--ht-space-3);
		padding: var(--ht-space-3) var(--ht-space-1) !important;
		border-block-end: 1px solid var(--ht-color-border);
		color: var(--ht-color-heading) !important;
		font-weight: var(--ht-fw-semibold);
		transition: color var(--ht-transition);
	}

	.menu-item.ht-mega > .sub-menu .sub-menu .menu-item:last-child > a {
		border-block-end: 0;
	}

	/* Шеврон «>» — чистый CSS, без иконочных шрифтов и картинок:
	   квадрат 7px с двумя границами, повёрнутый на 45°. */
	.menu-item.ht-mega > .sub-menu .sub-menu .menu-item > a::after {
		content: "";
		flex-shrink: 0;
		inline-size: 7px;
		block-size: 7px;
		border-block-start: 2px solid var(--ht-color-border-strong, var(--ht-color-border));
		border-inline-end: 2px solid var(--ht-color-border-strong, var(--ht-color-border));
		transform: rotate(45deg);
		transition: border-color var(--ht-transition), transform var(--ht-transition);
	}

	.menu-item.ht-mega > .sub-menu .sub-menu .menu-item > a:hover,
	.menu-item.ht-mega > .sub-menu .sub-menu .menu-item > a:focus-visible {
		color: var(--ht-color-primary) !important;
	}

	.menu-item.ht-mega > .sub-menu .sub-menu .menu-item > a:hover::after,
	.menu-item.ht-mega > .sub-menu .sub-menu .menu-item > a:focus-visible::after {
		border-color: var(--ht-color-primary);
		transform: rotate(45deg) translate(2px, -2px);
	}

	/* --- Нижняя полоса преимуществ (опционально) ------------------ */

	/* Четвёртый ребёнок .ht-mega с классом `ht-mega-strip`:
	   растягивается на все колонки, его дети — горизонтальный ряд. */
	.menu-item.ht-mega > .sub-menu > .ht-mega-strip {
		grid-column: 1 / -1;
		margin-block-start: var(--ht-space-6);
		padding-block-start: var(--ht-space-6);
		border-block-start: 1px solid var(--ht-color-border);
	}

	.menu-item.ht-mega > .sub-menu > .ht-mega-strip > a {
		display: none; /* сам заголовок полосы не выводится */
	}

	.menu-item.ht-mega > .sub-menu > .ht-mega-strip > .sub-menu {
		display: grid !important;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--ht-space-5);
	}

	.menu-item.ht-mega > .sub-menu > .ht-mega-strip .menu-item > a {
		justify-content: flex-start;
		border-block-end: 0;
		font-size: var(--ht-fs-caption);
	}

	.menu-item.ht-mega > .sub-menu > .ht-mega-strip .menu-item > a::after {
		display: none; /* в полосе преимуществ шевроны не нужны */
	}
}

/* Анимация панели отключается для пользователей с настройкой
   сниженного движения — панель появляется мгновенно. */
@media (prefers-reduced-motion: reduce) {

	.menu-item.ht-mega > .sub-menu {
		transition: none;
		transform: none;
	}
}