/* =======================================================
   header_menu-mobile-dark.css
   Только dark-оформление мобильного меню
   Строго по визуальной логике оригинального лендинга

   В этом файле:
   - цвет текста
   - dark-оформление логотипа
   - dark-оформление кнопки-гамбургера
   - dark-оформление выпадающей панели и ссылок

   В этом файле нет:
   - механики открытия / закрытия
   - геометрии верхней панели
   - логики раскрытия меню
   - JS-переключения иконки

   Важно:
   - вся механика живёт в header_menu-mobile.css и header_menu-mobile.js
   - здесь только визуальный dark-слой
======================================================= */

:root{
	--text:#e7ecff;
	--muted:#a8b2d6;
	--line:rgba(231,236,255,.12);
}


/* =======================================================
   [01] ОБЩИЙ ЦВЕТ ТЕКСТА

   Базовый цвет для ссылок и кнопок внутри мобильного меню.
======================================================= */

.menu-mobile a,
.menu-mobile button{
	color:var(--text);
}


/* =======================================================
   [02] ЛОГО В ВЕРХНЕЙ ПАНЕЛИ

   Сам контейнер логотипа центрируется в базовом
   header_menu-mobile.css.

   Здесь задаём только типографику и цвета двух строк.
======================================================= */

.menu-mobile_logo > a{
	color:var(--text);
	font-size:14px;
	font-weight:700;
	border:0;
	background:transparent;
	padding-left:0;
	padding-right:0;
}

.site-logo-mobile_top {
	font-size:10px;
	font-weight:600;
	letter-spacing:0.08em;
	text-transform:uppercase;
	color:var(--muted);
}

.site-logo-mobile_bottom {
	font-size:14px;
	font-weight:700;
	letter-spacing:0.01em;
	color:var(--text);
}


/* =======================================================
   [03] КНОПКА-ГАМБУРГЕР

   Визуально повторяет стиль оригинального лендинга:
   - тёмная поверхность
   - мягкая светлая граница
   - лёгкое приглушение SVG
======================================================= */

.menu-mobile_toggle{
	width:42px;
	height:42px;
	border-radius:14px;
	border:1px solid rgba(231,236,255,.14);
	background:rgba(16,27,54,.55);
	display:grid;
	place-items:center;
	cursor:pointer;
	user-select:none;
}

.menu-mobile_toggle svg{
	opacity:.9;
}


/* =======================================================
   [04] ВЫПАДАЮЩАЯ ПАНЕЛЬ

   ВАЖНО:
   У закрытой панели не должно быть нижнего padding,
   иначе из-под меню будет торчать хвост.

   Поэтому:
   - в закрытом состоянии padding = 0
   - нижний отступ даём только когда меню открыто
======================================================= */

.menu-mobile_panel{
	padding:0;
}

.menu-mobile.is-open .menu-mobile_panel{
	padding:0 0 14px 0;
}


/* =======================================================
   [05] СПИСОК ССЫЛОК

   Верхний внутренний отступ остаётся у списка,
   а не у самой закрытой панели.
======================================================= */

.menu-mobile_list{
	gap:8px;
	padding:8px 0 0 0;
}


/* =======================================================
   [06] ССЫЛКИ ВЫПАДАЮЩЕГО МЕНЮ

   Поверхности и hover — в стиле оригинального лендинга:
   - тёмный полупрозрачный фон
   - мягкая светлая граница
   - muted-текст
   - осветление на hover
======================================================= */

.menu-mobile_list > li > a{
	padding:12px 12px;
	border-radius:14px;
	border:1px solid rgba(231,236,255,.12);
	background:rgba(16,27,54,.40);
	color:var(--muted);
	font-size:14px;
	min-height:auto;
}

.menu-mobile_list > li > a:hover,
.menu-mobile_list > li > a:focus-visible{
	color:var(--text);
	background:rgba(16,27,54,.60);
	outline:0;
}