/*
 * Front-end styles for bsm-topnav (header chrome).
 *
 * Markup: ../template-parts/topnav.php
 * JS:     ../assets/js/mobile-menu-v29.js
 * Source: ../files/10_Projects/bsm_company/05_Brand/design/04-library.html (.topnav)
 *
 * BEM-нейминг: .bsm-topnav + __brand, __nav, __menu, __spacer,
 *   __contacts, __search, __burger, __contacts-list, __contact, __chevron.
 *
 * Sticky bar сверху, белый фон, hairline снизу. На мобильных — навигация
 * прячется, появляется бургер, который открывает выезжающую панель.
 *
 * ====================================================================
 * v29 (Олег 25.09.2026 — фикс после Олега по результату v28):
 *
 * Главное изменение — СТАБИЛЬНЫЙ DOM. Никаких JS-обёрток, никаких
 * <span class="row">. JS только добавляет <button.chevron> после parent <a>.
 *
 * Desktop:
 *   <li>
 *     <a>Аутсорсинг</a>           — прямой потомок, inline-block, h=topnav-h
 *     <button.chevron>            — display: none
 *     <ul.sub-menu>               — position: absolute, display: none
 *   </li>
 *   hover на <li> → sub-menu display: block (dropdown).
 *
 * Mobile:
 *   <li> block, min-height 52px, position: relative.
 *     <a> flex, min-height 52px, padding 14px 20px — кликабельная зона.
 *     <button.chevron> absolute, right:0, top:0, 52×52 — клик = toggle.
 *     <ul.sub-menu> position: static, display: none.
 *     <li>.is-open > .sub-menu display: block (в потоке колонки).
 *
 * Преимущества:
 * - Нет конфликта "row height vs a height vs li height".
 * - При resize mobile↔desktop DOM не меняется → CSS переключается через
 *   @media, никаких inline-style-хаков.
 * - При viewport > 900 (DevTools) поведение = desktop.
 *
 * ====================================================================
 */

.bsm-topnav {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--surface);
	border-bottom: var(--hairline);
	height: var(--topnav-h);
	display: flex;
	align-items: center;
	padding: 0 32px;
	gap: 28px;
	font-family: inherit;
}

.bsm-topnav__brand {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-shrink: 0;
	text-decoration: none;
	color: inherit;
}

.bsm-topnav__brand:hover {
	text-decoration: none;
}

.bsm-topnav__logo {
	font-weight: 700;
	font-size: 18px;
	letter-spacing: 0.06em;
	font-family: inherit;
}

.bsm-topnav__logo .b { color: var(--accent); }
.bsm-topnav__logo .m { color: var(--navy); }

.bsm-topnav__nav {
	display: flex;
	align-items: center;
}

.bsm-topnav__menu {
	display: table;
	border-collapse: collapse;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bsm-topnav__menu > li {
	display: table-cell;
	vertical-align: middle;
	position: relative;
}

.bsm-topnav__menu > li > a {
	display: inline-block;
	height: var(--topnav-h);
	line-height: var(--topnav-h);
	padding: 0 14px;
	color: var(--text);
	font-size: 14px;
	font-weight: 400;
	text-decoration: none !important;
	white-space: nowrap;
	box-sizing: border-box;
}

.bsm-topnav__menu > li > a:hover {
	color: var(--accent-strong);
	text-decoration: none !important;
}

.bsm-topnav__menu > li.current-menu-item > a,
.bsm-topnav__menu > li.current-menu-ancestor > a {
	color: var(--accent-strong);
}

/* На главной (home) WP помечает все menu-item с URL "/" как current. Скрываем. */
.home .bsm-topnav__menu > li.current-menu-item > a,
.home .bsm-topnav__menu > li.current-menu-ancestor > a {
	color: var(--text);
	font-weight: 400;
}
.home .bsm-topnav__menu > li.current-menu-item > a:hover,
.home .bsm-topnav__menu > li.current-menu-ancestor > a:hover {
	color: var(--accent-strong);
}

/* Dropdown submenu inside nav */
.bsm-topnav__menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 240px;
	background: var(--surface);
	border: var(--hairline);
	padding: 6px 0;
	margin: 0;
	list-style: none;
	display: none;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
	z-index: 10;
}

/* v29 (Олег 25.09.2026): hover-open sub-menu ВОЗВРАЩЁН для desktop.
 * В v28 убрал его полностью — сломал desktop ("Ховер на декомпозированный
 * пункт не вызывает его развертывания"). Теперь hover-open работает
 * ТОЛЬКО на desktop (>900px), на mobile его нет (touchscreen). */

.bsm-topnav__menu .sub-menu a {
	display: block;
	padding: 10px 18px;
	border-bottom: none;
	font-size: 13.5px;
	font-weight: 400;
	color: var(--text);
	text-decoration: none !important;
}

/* Submenu current item — never inherit bold from parent current-menu-item. */
.bsm-topnav__menu .sub-menu li.current-menu-item > a,
.bsm-topnav__menu .sub-menu li.current_page_item > a,
.bsm-topnav__menu li.current-menu-item .sub-menu a {
	font-weight: 400;
}

.bsm-topnav__menu .sub-menu a:hover {
	background: var(--bg-soft);
	color: var(--accent-strong);
	text-decoration: none !important;
}

/* Шеврон-кнопка: на desktop скрыта, на mobile видна (см. @media ниже). */
.bsm-topnav__chevron {
	display: none;
}

.bsm-topnav__empty {
	color: var(--gray);
	font-size: 13px;
	font-style: italic;
}

.bsm-topnav__spacer {
	flex: 1;
}

/* ----- Alignment of main menu (Customizer: topnav_menu_alignment) ----- */

.bsm-topnav--align-center .bsm-topnav__spacer { display: none; }
.bsm-topnav--align-center .bsm-topnav__nav   { margin-left: auto; margin-right: auto; }

.bsm-topnav--align-right .bsm-topnav__spacer { display: none; }
.bsm-topnav--align-right .bsm-topnav__nav   { margin-left: auto; }

/* ----- Contacts dropdown ----- */

.bsm-topnav__contacts {
	position: relative;
}

.bsm-topnav__contacts-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 14px;
	background: transparent;
	border: var(--hairline);
	color: var(--navy);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.bsm-topnav__contacts-btn:hover,
.bsm-topnav__contacts-btn[aria-expanded="true"] {
	border-color: var(--accent);
	color: var(--accent-strong);
	background: var(--accent-soft);
}

.bsm-topnav__contacts-btn svg {
	width: 16px;
	height: 16px;
}

.bsm-topnav__contacts-list {
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	min-width: 280px;
	background: var(--surface);
	border-top: var(--hairline);
	border-right: var(--hairline);
	border-bottom: var(--hairline);
	border-left: var(--accent-rule);
	padding: 6px 0;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
	z-index: 11;
}

.bsm-topnav__contacts-list[hidden] {
	display: none;
}

.bsm-topnav__contact {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	color: var(--text);
	text-decoration: none;
	transition: background 0.15s;
}

.bsm-topnav__contact:hover {
	background: var(--bg-soft);
	color: var(--accent-strong);
	text-decoration: none;
}

.bsm-topnav__contact-icon {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: var(--hairline);
	color: var(--navy);
}

.bsm-topnav__contact-icon svg {
	width: 16px;
	height: 16px;
}

.bsm-topnav__contact-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.bsm-topnav__contact-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--gray);
	font-weight: 600;
}

.bsm-topnav__contact-value {
	font-size: 14px;
	color: var(--text);
	font-weight: 500;
}

.bsm-topnav__contact:hover .bsm-topnav__contact-icon {
	border-color: var(--accent);
	color: var(--accent-strong);
}

@media (min-width: 901px) {
	.bsm-topnav__contact--phone {
		pointer-events: none;
		cursor: default;
	}
	.bsm-topnav__contact--phone:hover {
		background: transparent;
		color: inherit;
	}
	.bsm-topnav__contact--phone:hover .bsm-topnav__contact-icon {
		border-color: var(--line);
		color: var(--navy);
	}

	/* v29: hover-open sub-menu на desktop (восстановлено после v28).
	 * На mobile (<=900) hover не открывает sub-menu — только click. */
	.bsm-topnav__menu li:hover > .sub-menu,
	.bsm-topnav__menu li:focus-within > .sub-menu {
		display: block;
	}
}

/* ----- Search button ----- */

.bsm-topnav__search {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border: var(--hairline);
	background: var(--surface);
	color: var(--navy);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.bsm-topnav__search:hover {
	border-color: var(--accent);
	background: var(--accent-soft);
	color: var(--accent-strong);
}

.bsm-topnav__search svg {
	width: 18px;
	height: 18px;
}

/* ----- Burger (hidden on desktop) ----- */

.bsm-topnav__burger {
	display: none;
	background: transparent;
	border: var(--hairline);
	cursor: pointer;
	width: 40px;
	height: 40px;
	padding: 0;
	align-items: center;
	justify-content: center;
	position: relative;
}

.bsm-topnav__burger span {
	display: block;
	width: 18px;
	height: 2px;
	background: var(--navy);
	position: relative;
	transition: transform 0.2s ease, top 0.2s ease, background-color 0.2s ease;
}

.bsm-topnav__burger span::before,
.bsm-topnav__burger span::after {
	content: "";
	position: absolute;
	left: 0;
	width: 18px;
	height: 2px;
	background: var(--navy);
	transition: transform 0.2s ease, top 0.2s ease, background-color 0.2s ease;
}

.bsm-topnav__burger span::before { top: -6px; }
.bsm-topnav__burger span::after  { top:  6px; }

.bsm-topnav__burger[aria-expanded="true"] span { background: transparent; }
.bsm-topnav__burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.bsm-topnav__burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* ============================================================
 * Mobile (Олег 25.09.2026 v28 — split-area + click delegation)
 * ============================================================ */

@media (max-width: 900px) {
	.bsm-topnav {
		padding: 0 16px;
		gap: 12px;
	}

	.bsm-topnav__nav {
		display: none;
	}

	.bsm-topnav__contacts-label {
		display: none;
	}

	.bsm-topnav__burger {
		display: flex;
	}

	/* === Открытое меню: full-width panel под topnav === */

	.bsm-topnav__nav.is-open {
		display: flex;
		position: absolute;
		top: var(--topnav-h);
		left: 0;
		right: 0;
		flex-direction: column;
		background: var(--surface);
		border-bottom: var(--hairline);
		padding: 0;
		gap: 0;
		align-items: stretch;
		z-index: 49;
	}

	.bsm-topnav__nav.is-open .bsm-topnav__menu {
		display: block;
		margin: 0;
		padding: 0;
		border-collapse: separate;
	}

	.bsm-topnav__nav.is-open .bsm-topnav__menu > li {
		display: block;
		position: relative;
		margin: 0;
		padding: 0;
		border-bottom: 1px solid var(--line);
		min-height: 52px;
	}

	.bsm-topnav__nav.is-open .bsm-topnav__menu > li:last-child {
		border-bottom: none;
	}

	/* v34: CLEAN RESET. Мёртвые правила v29/v30 (display:flex) удалены. */
	/* v33: parent <li> — display:block (НЕ flex). Sub-menu <ul> в normal flow
	 * НИЖЕ <a> в столбик, а не справа от <a> (как flex-item в v28-v32).
	 * На скриншоте Олега v32: rectangle «Аутсорсинг» был 52px слева, но
	 * sub-menu шла ГОРИЗОНТАЛЬНО справа — "уродство". Олег ожидает column
	 * layout: parent 52px сверху, sub-menu ниже в столбик (как обычные
	 * мобильные меню).
	 *
	 * Layout v33:
	 *   <li> block, position:relative, min-height:52px.
	 *     <a> inline-flex, width:max-content, padding-right:16px.
	 *     <button.chevron> absolute, right:0, top:0, 52×52.
	 *     <ul.sub-menu> position:static, normal flow — НИЖЕ <a> в столбик.
	 *   <li> height = max(52, sub-menu height) → sub-menu сдвигает обычные
	 *   пункты вниз, не наезжает на них.
	 *
	 * Click handler на <li> через delegation продолжает работать:
	 * - click по <a> (текст) → default navigation.
	 * - click по <button.chevron> или в зазоре между <a> и chevron → toggle.
	 */
	.bsm-topnav__nav.is-open .bsm-topnav__menu > .menu-item-has-children {
		display: block;
		position: relative;
		min-height: 52px;
	}

	/* v36: hover-фон на <li> (вся строка 52px), q3.
	 * Leaf <li> = 52px (min-height) → фон на 52px.
	 * Parent <li> = 52px (min-height) → фон на 52px заголовка (sub-menu не заливается). */
	.bsm-topnav__nav.is-open .bsm-topnav__menu > li:hover,
	.bsm-topnav__nav.is-open .bsm-topnav__menu > .menu-item-has-children.is-open {
		background: var(--bg-soft);
	}

	/* v40: height:52px + box-sizing:border-box (НЕ min-height) — принудительно
	 * одинаковая высота для всех <a>. min-height позволял <a> быть выше
	 * если контент+padding > 52px → пункты получались разной высоты.
	 * box-sizing:border-box — padding входит в height. */
	.bsm-topnav__nav.is-open .bsm-topnav__menu > li > a {
		display: flex;
		align-items: center;
		width: 100%;
		height: 52px;
		padding: 14px 20px;
		box-sizing: border-box;
		color: var(--text);
		text-decoration: none !important;
		font-size: 15px;
		font-weight: 400;
		line-height: var(--line-height-base);
	}

	/* v36: финальная архитектура (по ответам Олега 25.09.2026 21:49).
	 *
	 * q1: кликабельная зона parent для перехода = ТОЛЬКО буквы текста.
	 *     → display:inline-block, width:max-content, padding:0, без height.
	 *     → высота <a> = bbox текста (~24px), НЕ 52px.
	 *
	 * q2: визуальный отступ 20px от левого края.
	 *     → padding-left:20px у <li> (НЕ у <a>, иначе клик в padding = переход).
	 *
	 * q3: hover-фон на parent = вся строка 52px (только заголовок).
	 *     → background на <li> (НЕ на <a>).
	 *
	 * q4: цвет не трогаю (Олег подтвердил, что он правильный).
	 */
	/* v38: центрирование через line-height + vertical-align, БЕЗ padding-top/bottom.
	 * Padding-top/bottom в v37 создавал:
	 * - пустое пространство под sub-menu (серая заливка выглядывала)
	 * - <a> прижимался к верху, а не центрировался (vertical-align:baseline default)
	 *
	 * Новая схема:
	 * - <li> line-height: 52px → line-box 52px.
	 * - <a> inline-flex 52px высота + vertical-align: middle → центрируется в line-box.
	 * - <li> padding: только 20px слева (визуальный отступ).
	 * - <li> НЕТ padding-top/bottom → sub-menu прижат к bottom <a>, нет пустого пространства.
	 */
	.bsm-topnav__nav.is-open .bsm-topnav__menu > .menu-item-has-children {
		display: block;
		position: relative;
		min-height: 52px;
		padding-left: 20px;
		line-height: 52px;  /* v38: line-box 52px для центрирования <a> */
		box-sizing: border-box;
	}

	/* v38: parent <a> — height:52px + inline-flex + vertical-align:middle.
	 * Раньше <a> = bbox текста (~24px), прижимался к верху из-за vertical-align:baseline.
	 * Теперь <a> = 52px высота (как у chevron), центрируется через vertical-align:middle
	 * в line-box 52px <li>. Текст внутри <a> центрируется через align-items:center.
	 *
	 * width:max-content — ширина только текста.
	 * padding:0 — клик в padding НЕ = переход.
	 * max-width:calc(100% - 72px) — 52px chevron + 20px padding-left <li>. */
	.bsm-topnav__nav.is-open .bsm-topnav__menu > .menu-item-has-children > a {
		display: inline-flex;
		align-items: center;
		vertical-align: middle;
		width: max-content;
		max-width: calc(100% - 72px);
		height: 52px;
		padding: 0;
		line-height: normal;  /* сбросить line-height <li> чтобы align-items:center работал */
	}

	.bsm-topnav__nav.is-open .bsm-topnav__menu > li > a:hover {
		color: var(--accent-strong);
		text-decoration: none !important;
	}

	.bsm-topnav__nav.is-open .bsm-topnav__menu > li.current-menu-item > a {
		color: var(--navy);
	}

	/* v37: на главной (home) WP помечает ВСЕ пункты с URL "/" как current.
	 * Без этого reset все пункты верхнего уровня получают var(--navy) (синий)
	 * вместо var(--text) (чёрный). Аналог desktop-правила .home (см. выше). */
	.home .bsm-topnav__nav.is-open .bsm-topnav__menu > li.current-menu-item > a,
	.home .bsm-topnav__nav.is-open .bsm-topnav__menu > li.current-menu-ancestor > a {
		color: var(--text);
		font-weight: 400;
	}

	/* === Шеврон: в flex-flow <li>, занимает всё пространство справа от текста.
	 * v28: убран position:absolute + width:52px — теперь flex:1 1 auto,
	 * растягивается до правого края <li>. Клик в зоне шеврона = toggle. */

	.bsm-topnav__nav.is-open .bsm-topnav__chevron {
		display: block;
		background: transparent;
		border: none;
		cursor: pointer;
		padding: 0;
		margin: 0;
		font-size: 22px;
		line-height: 52px;
		text-align: center;
		color: var(--gray);
		font-family: inherit;
		transition: color 0.15s;
	}

	/* v33: chevron — абсолютно справа в <li>, 52×52. Не в flex flow,
	 * не растягивается на всё пространство (как в v28-v32 с flex 1 1 auto).
	 * Теперь <li> block, sub-menu в normal flow ниже, chevron справа от <a>. */
	.bsm-topnav__nav.is-open .bsm-topnav__menu > .menu-item-has-children > .bsm-topnav__chevron {
		position: absolute;
		top: 0;
		right: 0;
		width: 52px;
		height: 52px;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 1;
	}

	.bsm-topnav__nav.is-open .bsm-topnav__chevron::before {
		content: "›";
		display: inline-block;
		transition: transform 0.2s ease;
	}

	.bsm-topnav__nav.is-open .bsm-topnav__menu > .menu-item-has-children:hover > .bsm-topnav__chevron,
	.bsm-topnav__nav.is-open .bsm-topnav__menu > .menu-item-has-children.is-open > .bsm-topnav__chevron {
		color: var(--accent-strong);
	}

	.bsm-topnav__nav.is-open .bsm-topnav__menu > .menu-item-has-children.is-open > .bsm-topnav__chevron::before {
		transform: rotate(90deg);
	}

	/* === Подменю === */

	.bsm-topnav__nav.is-open .sub-menu {
		position: static;
		display: none;
		background: var(--surface);
		box-shadow: none;
		padding: 0;
		margin: 0;
		border: none;
		min-width: 0;
		list-style: none;
	}

	.bsm-topnav__nav.is-open .bsm-topnav__menu > .menu-item-has-children.is-open > .sub-menu {
		display: block;
		margin-left: -20px;  /* v37: расширяем влево, чтобы покрыть padding-left <li> (20px). Без этого серая заливка parent видна слева от sub-menu. */
	}

	/* v39: sub-menu <li> = 52px (как у leaf). min-height на <li> учитывает
	 * border-top 1px внутри 52px. Без этого <li> = content (~46px) и был
	 * меньше обычных пунктов (52px). */
	.bsm-topnav__nav.is-open .sub-menu li {
		min-height: 52px;
		border-top: 1px solid var(--line);
		border-bottom: none;
		list-style: none;
	}

	/* v40: height:52px + box-sizing:border-box (НЕ min-height) — принудительно
	 * одинаковая высота для всех sub-menu <a>. */
	.bsm-topnav__nav.is-open .sub-menu a {
		display: flex;
		align-items: center;
		height: 52px;
		padding: 14px 20px 14px 36px;
		box-sizing: border-box;
		color: var(--text);
		text-decoration: none !important;
		font-size: 14px;
		font-weight: 400;
		line-height: var(--line-height-base);
	}

	.bsm-topnav__nav.is-open .sub-menu a:hover {
		background: var(--bg-soft);
		color: var(--accent-strong);
		text-decoration: none !important;
	}
}