/*
 * Н1. Навигация: мегаменю «Каталог» и плоское меню.
 *
 * Данные меню живут в штатных меню WordPress (Внешний вид → Меню), вид дропдауна
 * и ширина — в штатных полях Woodmart у пункта меню. Здесь только то, чего
 * в настройках темы нет:
 *
 *   .pt-mega-block  промо-блок колонкой внутри мегаменю, а не вложенным дропдауном;
 *   .pt-theme-grid  сетка квадратов с картинкой над подписью;
 *   .pt-see-all     акцентная ссылка «Смотреть все …»;
 *   мобильная строка плоского меню — горизонтальная прокрутка и лист на всю ширину.
 *
 * Классы задаются полем «Классы CSS» у пункта меню, поэтому владелец может
 * навесить или снять любой из них руками, не трогая код.
 *
 * Цвета, кегли и отступы — только токенами из tokens.css.
 */

/* ---------------------------------------------------------------------------
 * 1. Промо-блок колонкой мегаменю.
 *
 * Woodmart выводит HTML-блок пункта меню как его собственный дропдаун: на
 * десктопе он раскрывается по наведению поверх соседей. Нам нужна четвёртая
 * колонка, поэтому у пунктов с классом pt-mega-block гасим позиционирование
 * дропдауна и оставляем содержимое в потоке колонки.
 * ------------------------------------------------------------------------ */

.wd-nav li.pt-mega-block > .wd-dropdown-menu {
	position: static;
	z-index: auto;
	min-width: 0;
	min-height: 0;
	width: auto;
	max-width: none;
	margin: var(--printort-space-2) 0 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	transform: none !important;
	transition: none;
	pointer-events: auto;
}

.wd-nav li.pt-mega-block > .wd-dropdown-menu::after {
	content: none;
}

.wd-nav li.pt-mega-block > .wd-dropdown-menu > .container {
	width: auto;
	max-width: none;
	padding: 0;
}

/* Заголовок колонки-промо ведёт себя как заголовок, а не как ссылка-стрелка. */
.wd-nav li.pt-mega-block > a::after {
	content: none;
}

/* ---------------------------------------------------------------------------
 * 2. Сетка квадратов: пункт «Тема» плоского меню.
 *
 * Картинка берётся из штатного поля Woodmart «Category icon» у категории
 * товаров, поэтому меняется в админке без правки кода.
 * ------------------------------------------------------------------------ */

.wd-nav li.pt-theme-grid > .wd-dropdown-menu > .container > .wd-sub-menu {
	--wd-f-basis: 150px;

	gap: var(--printort-space-2);
}

.wd-nav li.pt-theme-grid .wd-sub-menu > .wd-col > a {
	flex-direction: column;
	align-items: center;
	gap: var(--printort-space-2);
	padding: var(--printort-space-2);
	border-radius: var(--printort-radius-md);
	text-align: center;
	font-size: var(--printort-fs-sm);
	line-height: var(--printort-lh-tight);
	transition: background-color var(--printort-transition);
}

.wd-nav li.pt-theme-grid .wd-sub-menu > .wd-col > a:hover {
	background-color: var(--printort-brand-tint);
}

.wd-nav li.pt-theme-grid .wd-sub-menu > .wd-col > a .wd-nav-img {
	--nav-img-width: 72px;
	--nav-img-height: 72px;

	max-width: 100%;
	max-height: none;
	margin: 0;
	border-radius: var(--printort-radius-sm);
	background-color: var(--printort-subtle);
}

.wd-nav li.pt-theme-grid .wd-sub-menu > .wd-col > a .wd-nav-img img {
	object-fit: cover;
	border-radius: inherit;
}

/* ---------------------------------------------------------------------------
 * 3. «Смотреть все …» — последняя строка колонки.
 * ------------------------------------------------------------------------ */

.wd-nav .wd-sub-menu li.pt-see-all > a {
	margin-top: var(--printort-space-1);
	color: var(--printort-brand);
	font-weight: var(--printort-fw-medium);
}

/* ---------------------------------------------------------------------------
 * 4. Мобильная строка плоского меню.
 *
 * Первый уровень — горизонтальная прокрутка: восемь входов не влезают в 390px,
 * а прятать их все в бургер — терять быстрый вход. Подменю раскрывается листом
 * на всю ширину экрана с собственной прокруткой.
 * ------------------------------------------------------------------------ */

@media (max-width: 1024.98px) {
	/* Ряд выравнивается по левому краю: Woodmart центрирует мобильные колонки,
	   из-за чего начало списка уезжает за левую границу и первые пункты
	   недоступны ни прокруткой, ни тапом. Три класса — чтобы перебить правило
	   темы без !important. */
	.whb-column.whb-col-mobile.whb-column_mobile5 {
		min-width: 0;
		max-width: 100%;
		justify-content: flex-start;
	}

	.whb-column_mobile5 .wd-nav {
		max-width: 100%;
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.whb-column_mobile5 .wd-nav::-webkit-scrollbar {
		display: none;
	}

	.whb-column_mobile5 .wd-nav > li {
		flex: 0 0 auto;
	}

	.whb-column_mobile5 .wd-nav > li > a {
		min-height: var(--printort-tap);
	}

	/* Лист подменю на всю ширину экрана.
	   top: auto обязателен: у Woodmart дропдаун абсолютный с top: 100%, а при
	   position: fixed эти 100% считаются от высоты экрана и лист уезжает
	   под сгиб. С top: auto фиксированный блок остаётся на своём месте в
	   потоке — сразу под строкой меню. */
	.whb-column_mobile5 .wd-nav > li > .wd-dropdown-menu {
		position: fixed;
		inset-inline: 0;
		top: auto;
		width: 100vw;
		max-width: 100vw;
		min-height: 0;
		max-height: 70vh;
		margin: 0;
		overflow-y: auto;
		border-radius: 0;
	}

	/* Раскрытое состояние. !important здесь по делу: скрытое состояние дропдауна
	   Woodmart задаёт с таким же весом, но ниже по каскаду, а показ на ширинах
	   до 1025px темой не предусмотрен вовсе — она прячет меню в бургер. */
	.whb-column_mobile5 .wd-nav > li.wd-opened > .wd-dropdown-menu {
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto;
	}

	.whb-column_mobile5 .wd-nav > li > .wd-dropdown-menu > .container {
		width: 100%;
		max-width: none;
		padding-inline: var(--printort-space-4);
	}

	/* Внутри листа колонки идут одна под другой. */
	.whb-column_mobile5 .wd-nav > li > .wd-dropdown-menu .wd-sub-menu {
		--wd-f-basis: 100%;
	}
}