/*
 * WonderBaby Mega Menu — широкое меню в духе крупных fashion-брендов
 * (Crockid/Zara Kids). Затрагивает только .mega-menu (Мальчики/Девочки),
 * обычные пункты меню (Новинки, Распродажа и т.п.) не тронуты — они
 * теперь простые ссылки без выпадения, стандартный Storefront-дропдаун
 * их не касается вообще.
 *
 * ПЕРЕСОБРАНО 2026-08-07 (fix round 2): предыдущая версия открывалась
 * криво из-за конфликта с родительской темой Storefront — она уже
 * показывает вложенные <ul> через чистый CSS `:hover`/`.focus` →
 * display:block (см. main-navigation ul li:hover>ul в style.css темы
 * Storefront), независимо от нашего класса .wbmm-open, который
 * управляется через JS с задержкой. Это гонка специфичности:
 * при наведении подменю показывалось как display:block (не grid),
 * без наших сеточных стилей, плюс Storefront принудительно давал
 * ссылкам width:200px и float:left — отсюда «съезжающие» пункты,
 * вторая строка и наползающий баннер. Ниже — явное, осознанное
 * подавление этих правил родительской темы именно в рамках .mega-menu
 * (через !important, точечно, только для этого компонента).
 */

/* ===== Trust-бар над шапкой ===== */
.wbmm-trust-bar {
	background: var(--wb-text-primary, #191919);
	color: #fff;
	font-size: 13px;
	overflow: hidden;
}
.wbmm-trust-bar__inner {
	display: flex;
	justify-content: center;
	gap: 32px;
	padding: 8px 16px;
	max-width: 1200px;
	margin: 0 auto;
	flex-wrap: wrap;
}
.wbmm-trust-bar__item {
	white-space: nowrap;
}

/* ===== Desktop mega-menu ===== */
@media (min-width: 900px) {
	/* --- 1. Подавляем встроенный CSS-дропдаун Storefront для .mega-menu ---
	 * Без этого блока Storefront открывает <ul class="sub-menu"> по чистому
	 * :hover/.focus независимо от нашего JS/.wbmm-open — и делает это с
	 * display:block, а не display:grid, ломая раскладку. */
	.main-navigation ul li.mega-menu:hover > ul.sub-menu,
	.main-navigation ul li.mega-menu.focus > ul.sub-menu {
		display: none !important;
	}
	.main-navigation ul li.mega-menu.wbmm-open > ul.sub-menu {
		display: grid !important;
	}
	/* --- 2. Снимаем float/ширину, которые Storefront навязывает всем
	 * ссылкам второго уровня (.main-navigation ul ul li a{width:200px}) --- */
	.main-navigation ul li.mega-menu ul.sub-menu {
		float: none !important;
	}
	.main-navigation ul li.mega-menu ul.sub-menu li {
		float: none !important;
	}
	.main-navigation ul li.mega-menu ul.sub-menu li a {
		width: auto !important;
	}

	/* --- 3. Позиционирование: .mega-menu (<li>) должен быть static —
	 * тогда ближайший спозиционированный предок это #masthead.site-header
	 * (position:relative в самой теме Storefront), и top/left/width в
	 * процентах считаются от шапки целиком, а не от узкого пункта меню —
	 * это даёт «открывается прямо под шапкой на всю ширину», независимо
	 * от ширины слова «Мальчики»/«Девочки».
	 *
	 * НАЙДЕНО РЕАЛЬНЫМ ТЕСТИРОВАНИЕМ (Playwright, 2026-08-07, fix round 3):
	 * Storefront даёт position:relative ВСЕМ <li> внутри .main-navigation —
	 * `.main-navigation ul li,.secondary-navigation ul li{position:relative;...}`
	 * — специфичность (0,1,2) выше, чем у прежнего `.mega-menu{position:static}`
	 * (0,1,0), поэтому Storefront побеждал: <li> сам становился containing
	 * block для абсолютно спозиционированного .sub-menu, и панель сжималась
	 * до ширины самого пункта меню (~134px) — отсюда «влезание» текста
	 * страницы (шапка героя, «Распродажа» из соседнего пункта меню) в область
	 * панели. Подтверждено через getBoundingClientRect()/offsetParent в
	 * реальном headless-браузере, не только чтением исходников CSS. */
	.main-navigation ul li.mega-menu {
		position: static !important;
	}
	.mega-menu > .sub-menu {
		display: none;
		position: absolute;
		/* Центрирование через left:50% + transform:translateX(-50%), а НЕ
		 * left:0;right:0;margin:auto — найдено реальным тестированием
		 * (Playwright, fix round 3): при одновременном left+right+width
		 * браузер над-ограничен (over-constrained) и не центрирует, панель
		 * прижималась к x:0, из-за чего справа сквозь незакрашенный отступ
		 * было видно поле поиска в шапке. left:50%+transform — надёжный,
		 * независимый от этой неоднозначности спецификации способ. */
		/* !important обязателен: Storefront даёт left:0 через
		 * .main-navigation ul li:hover>ul (специфичность 0,2,3 — выше
		 * нашего базового 0,2,0 из-за :hover) и тихо перебивал 50%,
		 * из-за чего центрирование transform:translateX(-50%) съезжало —
		 * найдено реальным тестированием (Playwright, fix round 4). */
		left: 50% !important;
		top: 100%;
		width: 100%;
		max-width: 1200px;
		background: #fff !important;
		border-top: 3px solid var(--wb-accent-warm, #e2a330);
		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
		padding: 32px 40px;
		grid-template-columns: repeat(3, 1fr) 300px;
		grid-template-rows: repeat(5, auto);
		column-gap: 32px;
		row-gap: 0;
		z-index: 999;
		opacity: 0;
		transform: translateX(-50%) translateY(8px);
		transition: opacity 0.25s ease, transform 0.25s ease;
	}
	.mega-menu.wbmm-open > .sub-menu {
		display: grid;
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}

	/* --- 4. Явная раскладка по колонкам/строкам. Каждая колонка = 5 слотов
	 * (заголовок + до 4 пунктов); у пунктов "Мальчики"/"Девочки" сейчас по
	 * 14 дочерних пунктов в строго заданном порядке (задаётся через
	 * "Порядок" в Внешний вид → Меню). Если админ добавит/уберёт пункт —
	 * нужно сохранить кратность 5 на колонку, иначе раскладка съедет
	 * (задокументировано в WONDERBABY_MENU_CHANGELOG.md). --- */
	.mega-menu > .sub-menu > li:nth-child(1)  { grid-column: 1; grid-row: 1; }
	.mega-menu > .sub-menu > li:nth-child(2)  { grid-column: 1; grid-row: 2; }
	.mega-menu > .sub-menu > li:nth-child(3)  { grid-column: 1; grid-row: 3; }
	.mega-menu > .sub-menu > li:nth-child(4)  { grid-column: 1; grid-row: 4; }
	.mega-menu > .sub-menu > li:nth-child(5)  { grid-column: 1; grid-row: 5; }
	.mega-menu > .sub-menu > li:nth-child(6)  { grid-column: 2; grid-row: 1; }
	.mega-menu > .sub-menu > li:nth-child(7)  { grid-column: 2; grid-row: 2; }
	.mega-menu > .sub-menu > li:nth-child(8)  { grid-column: 2; grid-row: 3; }
	.mega-menu > .sub-menu > li:nth-child(9)  { grid-column: 2; grid-row: 4; }
	.mega-menu > .sub-menu > li:nth-child(10) { grid-column: 3; grid-row: 1; }
	.mega-menu > .sub-menu > li:nth-child(11) { grid-column: 3; grid-row: 2; }
	.mega-menu > .sub-menu > li:nth-child(12) { grid-column: 3; grid-row: 3; }
	.mega-menu > .sub-menu > li:nth-child(13) { grid-column: 3; grid-row: 4; }
	.mega-menu > .sub-menu > li:nth-child(14) { grid-column: 3; grid-row: 5; }

	.mega-menu > .sub-menu > li {
		list-style: none;
		margin: 0;
	}
	.mega-menu > .sub-menu > li > a {
		display: block;
		padding: 8px 4px;
		font-size: 15px;
		color: var(--wb-text-primary, #191919);
		border-radius: 6px;
		transition: background-color 0.15s ease, color 0.15s ease;
	}
	.mega-menu > .sub-menu > li > a:hover {
		background: var(--wb-accent-warm-soft, #fcefd9);
		color: var(--wb-accent-warm, #e2a330);
	}

	/* Заголовок колонки — не ссылка по смыслу, кликать некуда */
	.mega-menu > .sub-menu > li.wbmm-col-header {
		align-self: start;
	}
	.mega-menu > .sub-menu > li.wbmm-col-header > a {
		font-weight: 700;
		font-size: 12px;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		color: var(--wb-text-secondary, #6c6c6c);
		padding: 0 4px 8px;
		margin-bottom: 6px;
		border-bottom: 1px solid var(--wb-border, #e3e3e4);
		border-radius: 0;
		pointer-events: none;
		cursor: default;
	}
	.mega-menu > .sub-menu > li.wbmm-col-header > a:hover {
		background: none;
		color: var(--wb-text-secondary, #6c6c6c);
	}

	/* Баннер — всегда 4-я колонка, растянут по всей высоте меню.
	 * Ширина 300px укладывается в требуемые 280–320px. */
	.wbmm-menu-banner {
		grid-column: 4;
		grid-row: 1 / -1;
		border-radius: 10px;
		overflow: hidden;
		position: relative;
		min-height: 260px;
		background-size: cover;
		background-position: center;
		display: flex;
		align-items: flex-end;
	}
	.wbmm-menu-banner__content {
		background: linear-gradient(0deg, rgba(25, 25, 25, 0.8), transparent 65%);
		color: #fff;
		padding: 18px;
		width: 100%;
	}
	.wbmm-menu-banner__title {
		font-weight: 700;
		font-size: 17px;
		margin: 0 0 6px;
	}
	.wbmm-menu-banner__cta {
		font-size: 13px;
		text-decoration: underline;
		color: #fff !important;
	}
}

/* ===== Mobile accordion (клик, не hover) ===== */
@media (max-width: 899px) {
	/* Всё ниже намеренно скопировано на .primary-navigation .mega-menu,
	 * а НЕ на голый .mega-menu. Найдено реальным тестированием на
	 * мобильном вьюпорте (fix round 4): Storefront рендерит ОТДЕЛЬНУЮ
	 * копию меню в .handheld-navigation с собственной рабочей accordion-
	 * логикой (кнопка .dropdown-toggle, класс .toggled-on, visibility/
	 * max-height) — те же классы .mega-menu/.sub-menu, но другой DOM-узел.
	 * Без этого ограничения display:none здесь перебивал бы Storefront'овский
	 * visibility:visible в .handheld-navigation (display:none всегда
	 * скрывает элемент независимо от visibility) и ломал её рабочую
	 * аккордеон-логику. .primary-navigation на этой ширине сама скрыта
	 * Storefront'ом (display:none), так что здесь можно писать свободно —
	 * это не сработает нигде, кроме .primary-navigation. */
	.primary-navigation .mega-menu > .sub-menu {
		display: none;
		position: static;
		box-shadow: none;
		padding: 0 0 4px 16px;
		float: none;
	}
	.primary-navigation .mega-menu.wbmm-open > .sub-menu {
		display: block;
	}
	.primary-navigation .mega-menu > .sub-menu > li {
		float: none;
		display: block;
	}
	.primary-navigation .mega-menu > .sub-menu > li > a {
		width: auto;
		display: block;
		padding: 10px 4px;
		min-height: 24px;
	}
	.primary-navigation .mega-menu > .sub-menu > li.wbmm-col-header > a {
		font-weight: 700;
		font-size: 12px;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		color: var(--wb-text-secondary, #6c6c6c);
		pointer-events: none;
		padding-top: 14px;
	}
	.primary-navigation .mega-menu > a {
		display: flex;
		justify-content: space-between;
		align-items: center;
		min-height: 44px;
	}
	.primary-navigation .mega-menu > a::after {
		content: "\2304";
		font-size: 18px;
		margin-left: 8px;
		transition: transform 0.15s ease;
	}
	.primary-navigation .mega-menu.wbmm-open > a::after {
		transform: rotate(180deg);
	}
	.wbmm-menu-banner {
		display: none; /* на мобильном баннер в меню не нужен — экономим место и вес страницы; в .handheld-navigation баннер и так никогда не выводится (PHP-фильтр ограничен theme_location=primary) */
	}

	/* Заголовки колонок (Одежда/Низ/Популярное) в родной accordion-разметке
	 * Storefront (.handheld-navigation) — трогаем ТОЛЬКО шрифт/цвет/pointer-
	 * events, никогда display/visibility/max-height, чтобы не задеть
	 * встроенный toggle-механизм Storefront. */
	.handheld-navigation .wbmm-col-header > a {
		font-weight: 700;
		font-size: 12px;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		color: var(--wb-text-secondary, #6c6c6c);
		pointer-events: none;
	}

	/* Плавающая кнопка "Каталог" внизу экрана */
	.wbmm-mobile-catalog-btn {
		position: fixed;
		left: 12px;
		right: 12px;
		/* + отступ под фиксированную нижнюю панель Storefront (аккаунт/
		 * поиск/корзина, z-index:9999) — без этого кнопка пряталась под
		 * ней (найдено реальным тестированием, fix round 4). Переменная
		 * выставляется в functions.php (wp_footer). */
		bottom: calc(var(--wbcro-handheld-offset, 0px) + 12px);
		z-index: 9500;
		background: var(--wb-text-primary, #191919);
		color: #fff;
		text-align: center;
		padding: 14px;
		border-radius: 10px;
		font-weight: 700;
		text-decoration: none;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
	}
}
@media (min-width: 900px) {
	.wbmm-mobile-catalog-btn {
		display: none;
	}
}