/* =========================================================================
   SPIVMIR — шапка: полки (.topbar, .site-header__bar) и мегаменю (.mainnav)

   Раскладка (версия 0.2.1, перестроена по просьбе заказчика — см. README §6,
   точечное отступление от D8). Десктоп, контейнер 960 px с полями 20 px,
   то есть содержимое 920 px — по той же вертикали, что и текст страниц:

     полка 1  .topbar            88 px  логотип 72 + название | контакты | часы
     разделитель                  1 px  border-top второй полки
     полка 2  .site-header__bar  52 px  ряд меню слева | «Записаться» справа
     ─────────────────────────────────
     итого                      141 px  (было 265,6)

   При прокрутке .site-header липнет с top:-89px — первая полка уезжает,
   вторая остаётся: полоса 52 px с меню и кнопкой записи.

   Что было раньше: три колонки сетки Skeleton старого сайта (39,3333 % логотип
   + 56,6667 % контакты с отступом 4 %), логотип 150×150 с 15-пиксельным
   внутренним полем и отдельный центрированный ряд меню в 70 px. Высоту диктовала
   колонка логотипа (10 + 150 + 10 + 25,6), под контактами висело 91,6 px пустоты,
   а по ширине внутри 960 px пустовал 401 px в пяти разрывах.

   УСТРОЙСТВО ФАЙЛА. Правила разложены не по «десктопным» и «мобильным» блокам,
   а по СВОЙСТВАМ: в базовом блоке — косметика, общая для всех ширин (цвета,
   шрифты, кружки иконок, градиент панелей, бургер); вся геометрия десктопа —
   в @media (min-width: 1024px), вся геометрия узких экранов — в @media
   (max-width: 1023px). Так мобильная версия не зависит от десктопных правил
   и наоборот. Переносить объявления между блоками без проверки нельзя:
   мобильный блок молча опирается на базовые display/align-items/цвета.

   Брейкпоинты: 1199 / 1023 / 767 / 479.
   ========================================================================= */

/* --- 1. Обёртка шапки ---------------------------------------------------- */

.site-header {
	position: relative;
	z-index: 300;
	background: var(--c-bg);
}

/*
 * Боковые поля контейнера НЕ обнуляются (до 0.2.1 обнулялись, чтобы повторить
 * старый сайт, где содержимое шапки лежало ровно в 960 px и упиралось в края
 * белой плашки). Теперь шапка живёт по тем же полям, что и остальные страницы,
 * поэтому логотип встаёт по одной вертикали с текстом контента, а не левее его.
 */
.site-header__inner {
	background: var(--c-white);
}

/*
 * Метка для наблюдателя: её создаёт assets/js/menu.js и кладёт перед шапкой.
 * Высотой она ровно в первую полку, поэтому «метка ушла за верх окна» и есть
 * «полка меню прилипла» — IntersectionObserver срабатывает один раз на границе,
 * в отличие от обработчика прокрутки, который дёргался бы на каждый пиксель.
 * Размера не занимает и мышь не ловит.
 */
.site-header__sentinel {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	/* Ровно первая полка с разделителем. Переменная объявлена только
	   на десктопе — ниже 1024 px берётся запасное значение, и это неважно:
	   там нет ни липкости, ни тени. */
	height: var(--spivmir-shelf1-h, 89px);
	pointer-events: none;
}

/* Панель админки перекрывает верх окна, поэтому полка прилипает на 32 px
   раньше — метка должна кончаться там же, иначе тень опаздывала бы. */
.admin-bar .site-header__sentinel {
	height: calc(var(--spivmir-shelf1-h, 89px) - 32px);
}

/* --- 2. Плашка: косметика, общая для всех ширин --------------------------- */

.topbar__logo-link,
.topbar__logo-link:hover,
.topbar__logo-link:focus {
	color: #000;
	text-decoration: none;
}

/*
 * Логотип — вектор (assets/img/logo.svg), круг нарисован «в обрез».
 * В старом logo.jpg вокруг круга было ~10,3 % белого поля, вшитого в картинку.
 * На десктопе это поле снято (бокс 72 px = видимый круг 72 px), на узких
 * экранах сохранено как было — там padding задаётся явно.
 */
.topbar__logo-img {
	display: block;
}

.topbar__name {
	display: block;
	font-weight: 700;
	color: #000;
}

.topbar__info {
	display: flex;
}

/* Строка контакта: круглая иконка + ссылка. */
.topbar__contact {
	display: flex;
	align-items: center;
	font-weight: 700;
}

/*
 * Все три иконки шапки (телефон, почта, часы) — один класс и один вид:
 * контурный штрих 20 px без подложки. Раньше их было три разных: телефон
 * в кружке с рамкой, почта в кружке без рамки, часы вообще без кружка.
 * Отступ до текста задаёт gap родителя, а не margin иконки, — иначе на
 * телефоне, где текст скрыт, оставался бы висячий отступ справа.
 */
.topbar__icon {
	display: flex;
	width: 20px;
	height: 20px;
	flex: none;
	align-items: center;
	justify-content: center;
	color: var(--c-text-soft);
	transition: color var(--t-fast);
}

.topbar__icon svg {
	width: 20px;
	height: 20px;
}

.topbar__contact-link {
	display: flex;
	align-items: center;
	gap: 10px;
	white-space: nowrap;
}

/*
 * Телефон — самый важный элемент шапки, поэтому взят самый тёмный зелёный
 * бренда: #568d0d давал 4,03:1 (ниже AA для 16 px), #416705 даёт 6,6:1.
 * Новых цветов не заводим — переменная уже была в палитре.
 */
.topbar__contact--phone .topbar__contact-link {
	color: var(--c-green-darker);
}

.topbar__contact--email .topbar__contact-link {
	color: var(--c-green);
}

/*
 * Наведение на телефон и почту — тот же отклик, что у пунктов меню:
 * --c-orange-hover и без подчёркивания. По умолчанию контакты забирали
 * глобальное a:hover из base.css (зелёный + underline), и шапка отвечала
 * на курсор двумя разными способами в двух полках.
 *
 * Селектор нарочно длиннее необходимого (.topbar__contact + ссылка = 0,3,0):
 * цвет самих ссылок задан парами классов 0,2,0, причём почта переопределяется
 * ещё раз внутри @media (min-width: 1024px) — правило той же специфичности,
 * стоящее ниже, перебило бы наведение на десктопе.
 *
 * Иконка меняет цвет вместе со ссылкой — как шеврон у пункта меню
 * (.mainnav__item:hover > .mainnav__expand): ссылка отзывается целиком,
 * а не наполовину.
 */
.topbar__contact .topbar__contact-link:hover,
.topbar__contact .topbar__contact-link:focus {
	color: var(--c-orange-hover);
	text-decoration: none;
}

.topbar__contact .topbar__contact-link:hover .topbar__icon,
.topbar__contact .topbar__contact-link:focus .topbar__icon {
	color: var(--c-orange-hover);
}

/* Оформления у .topbar__hours-head нет намеренно: надпись «Часы приема:»
   всегда несёт .screen-reader-text — на экране её заменяет иконка часов. */

/* --- 3. Мегаменю: косметика, общая для всех ширин ------------------------- */

.mainnav__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* margin обнуляется здесь, а не в медиазапросах: base.css задаёт li отступ
   снизу для списков контента, и без сброса он добавлял 5 px к высоте полки. */
.mainnav__item,
.mainnav__subitem {
	margin: 0;
	list-style: none;
}

.mainnav__link {
	color: var(--c-text-muted);
	font-family: var(--font-body);
	font-weight: 700;
	text-decoration: none;
}

.mainnav__link:hover,
.mainnav__link:focus,
.mainnav__item:hover > .mainnav__link,
.mainnav__item.is-active > .mainnav__link {
	color: var(--c-orange-hover);
	text-decoration: none;
}

/* Оранжевый пункт («Прайс лист») — пилюля rgb(255,97,0). */
.mainnav__item.is-orange > .mainnav__link {
	border-color: var(--c-orange);
	color: var(--c-orange);
}

.mainnav__item.is-orange > .mainnav__link:hover,
.mainnav__item.is-orange > .mainnav__link:focus {
	background-color: var(--c-orange);
	color: var(--c-white);
}

/*
 * Фон панелей задан в базовом правиле, а не в правиле раскрытия: иначе между
 * появлением панели и наведением успевал мелькнуть тёмно-синий --c-sub-bg.
 * Градиент затемнён с rgb(124,175,34)→rgb(65,118,5) до --c-green-dark →
 * --c-green-darker: белый текст 14 px получает 4,89:1 сверху и 6,6:1 снизу
 * вместо прежних 2,62:1, то есть AA выполняется по всей высоте панели.
 */
.mainnav__sub {
	background: linear-gradient(to bottom, var(--c-green-dark) 0%, var(--c-green-darker) 100%);
}

.mainnav__sublink {
	color: var(--c-white);
	text-decoration: none;
}

.mainnav__sublink:hover,
.mainnav__subitem.is-active > .mainnav__sublink {
	color: var(--c-white);
	text-decoration: none;
}

/* Кнопка раскрытия подменю: на десктопе — шеврон в ряду, на узких — в аккордеоне. */
.mainnav__expand {
	display: none;
	border: 0;
	background: none;
	color: var(--c-text-muted);
	cursor: pointer;
}

.mainnav__expand-icon {
	transition: transform var(--t-fast);
}

.mainnav__expand[aria-expanded="true"] .mainnav__expand-icon {
	transform: rotate(180deg);
}

/* Кнопка-бургер (видна на 1023 px и ниже). */
.mainnav__toggle {
	display: none;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid var(--c-border-light);
	border-radius: var(--radius);
	background: var(--c-white);
	color: var(--c-green);
	font-family: var(--font-body);
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1;
}

.mainnav__toggle-icon {
	display: block;
	font-size: 24px;
	line-height: 0;
}

.mainnav__toggle-close,
.mainnav__toggle[aria-expanded="true"] .mainnav__toggle-burger {
	display: none;
}

.mainnav__toggle[aria-expanded="true"] .mainnav__toggle-close {
	display: inline-block;
}

/* =========================================================================
   4. ДЕСКТОП: 1024 px и выше — вся геометрия двух полок
   ========================================================================= */

@media (min-width: 1024px) {

	/*
	 * Высота первой полки с разделителем. На неё завязан отрицательный top
	 * липкости, поэтому она объявлена числом один раз: разъехавшись,
	 * полка и офсет дали бы щель или срез, которые видно только глазами.
	 * Парная величина — высота липкой полосы --spivmir-sticky-h (base.css),
	 * её читают якоря и шапка таблицы прайса.
	 */
	:root {
		--spivmir-shelf1-h: 89px;
	}

	/* --- 4.1. Полка 1: логотип, контакты, часы — 88 px -------------------- */

	/*
	 * flex-wrap нужен не для обычного просмотра (запаса 240–292 px хватает
	 * с избытком), а для WCAG 1.4.4: при 200 % размера текста кластер
	 * контактов перестаёт помещаться рядом с логотипом, и без переноса
	 * появлялась бы горизонтальная прокрутка всей страницы.
	 */
	.topbar {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 0 32px;
		padding: 8px 0;
	}

	.topbar__logo {
		flex: none;
	}

	/* Лока́п: круг 72 + зазор 12 + название в одну строку ≈ 250 px. */
	.topbar__logo-link {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.topbar__logo-img {
		width: 72px;
		height: 72px;
		padding: 0;
		margin: 0;
		flex: none;
	}

	.topbar__name {
		font-size: 1.5rem;
		line-height: 1.25;
	}

	/* Контакты и часы — одним кластером у правого края. */
	.topbar__info {
		margin-left: auto;
		align-items: center;
		gap: 32px;
	}

	.topbar__contacts {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.topbar__contact--phone {
		font-size: 1.7rem;
	}

	.topbar__contact--email {
		font-size: 1.4rem;
		font-weight: 400;
	}

	.topbar__contact--email .topbar__contact-link {
		color: var(--c-text-muted);
	}

	/*
	 * Часы: видимую надпись «Часы приема:» заменяет иконка (сам текст остаётся
	 * в дереве доступности — .screen-reader-text в разметке). Две строки вместо
	 * прежних трёх с заголовком: расписание и примечание.
	 */
	.topbar__hours {
		display: flex;
		align-items: center;
		gap: 10px;
		color: var(--c-text);
	}

	.topbar__hours-time {
		display: block;
		white-space: nowrap;
	}

	/* Примечание переносить можно: при 200 % текста nowrap выпирал за контейнер. */
	.topbar__hours-note {
		display: block;
	}

	.topbar__hours-time {
		font-size: 1.4rem;
		line-height: 19px;
	}

	.topbar__hours-note {
		font-size: 1.3rem;
		line-height: 17px;
		color: var(--c-text-muted);
	}

	/* --- 4.2. Полка 2: ряд меню и кнопка — 1 + 52 px ---------------------- */

	/*
	 * Постоянной линии под меню нет: край шапки показывает тень, и только
	 * когда шапка прилипла (.is-stuck, см. §4.5). Пока страница не прокручена,
	 * шапка ничем не отделена от контента — отделять нечего, она стоит на месте.
	 * border-top остаётся: это разделитель между двумя полками, а не край шапки.
	 */
	.site-header__bar {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		/* 2 + 48 + 2: пункт 48 px с пилюлей 44 px внутри — ряд стоит ровно
		   по центру полосы. При 4/0 сверху оставалось 6 px, снизу 2. */
		padding: 2px 0;
		border-top: 1px solid var(--c-border-light);
	}

	.mainnav {
		flex: 0 1 auto;
		min-width: 0;
		padding: 0;
		text-align: left;
		line-height: 1;
	}

	.mainnav__list {
		display: flex;
		flex-wrap: wrap;
		gap: 2px;
	}

	/*
	 * Пункт растянут на всю высоту полки: зона наведения 48 px вместо 40,
	 * а панель на top:100% примыкает к нижней кромке шапки без мёртвого зазора,
	 * в котором раньше терялась мышь.
	 */
	.mainnav__item {
		position: relative;
		display: flex;
		align-items: center;
		min-height: 48px;
	}

	/*
	 * Прозрачная рамка у ВСЕХ пунктов: раньше 2-пиксельная рамка была только
	 * у оранжевой пилюли «Прайс лист», и она одна поднимала весь ряд с 40 до
	 * 44 px. Теперь все четыре пункта — одинаковая цель 44 px.
	 */
	.mainnav__link {
		display: flex;
		align-items: center;
		padding: 8px 14px;
		border: 2px solid transparent;
		border-radius: var(--radius-pill);
		font-size: 1.5rem;
		line-height: 24px;
		white-space: nowrap;
	}

	.mainnav__item.has-children > .mainnav__link {
		padding-right: 4px;
	}

	/*
	 * «Прайс лист» — не подсвеченный пункт меню, а вторая кнопка полки, и рядом
	 * с «Записаться на приём» она обязана совпадать с ней до пикселя. Метрика
	 * взята оттуда же (.topbar__cta .btn): паддинги 6/20 и кегль 1.4rem при
	 * общей рамке 2 px дают те же 39,34 px высоты (2 + 6 + 23,34 + 6 + 2).
	 * line-height задан множителем, а не 24 px, — у .btn он 1.667, и при
	 * фиксированном значении высоты разошлись бы на 0,66 px.
	 *
	 * Остальные пункты остаются 44 px: их рамка прозрачная, разницы не видно,
	 * а трогать их кегль значит менять читаемость всего меню ради двух кнопок.
	 */
	.mainnav__item.is-orange > .mainnav__link {
		padding: 6px 20px;
		font-size: 1.4rem;
		line-height: 1.667;
	}

	/* Шеврон — настоящая кнопка, а не треугольник ::after: без неё мегаменю
	   было недостижимо на сенсорных устройствах шириной 1024 px и выше. */
	.mainnav__expand {
		display: flex;
		position: static;
		width: 28px;
		height: 28px;
		padding: 0;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
	}

	.mainnav__expand-icon {
		width: 14px;
		height: 14px;
	}

	.mainnav__item:hover > .mainnav__expand,
	.mainnav__item:focus-within > .mainnav__expand {
		color: var(--c-orange-hover);
	}

	/* Кнопка «Записаться на приём» — правый конец полки. Именно она остаётся
	   на экране при прокрутке вместе с рядом меню. */
	.topbar__cta {
		margin-left: auto;
		padding-left: 24px;
		flex: none;
	}

	.topbar__cta .btn {
		padding: 6px 20px;
		font-size: 1.4rem;
	}

	/* --- 4.3. Панель второго уровня -------------------------------------- */

	/*
	 * Закрытое состояние — visibility:hidden, а не left:-9999px: иначе 33 ссылки
	 * подменю навсегда остаются в порядке обхода Tab и в дереве доступности.
	 * Панель привязана к своему пункту (top:100%; left:0), магическое top:40px
	 * и хак margin-left:-101px убраны — из-за них панель 420 px уезжала на 109 px
	 * вправо и ложилась под «Прайс лист» и «Контакты».
	 */
	.mainnav__sub {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 200;
		width: 220px;
		margin: 0;
		padding: 16px;
		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.22);
		text-align: left;
		font-size: 1.4rem;
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
		/*
		 * Задержка закрытия: панель не схлопывается при диагональном броске
		 * мыши к дальней колонке. Чистый CSS, таймер в JS не нужен.
		 * pointer-events возвращается через 0,25 с — раньше, чем панель
		 * догаснет: иначе полупрозрачная панель 504×314 ещё 150 мс ловила бы
		 * клик по странице под ней и уводила пользователя не туда.
		 * Здесь это безопасно (в отличие от колонки L3): панель — потомок
		 * своего <li>, поэтому путь мыши внутрь неё не выводит указатель
		 * из пункта, и даже мгновенное гашение указателя ничего не сломает.
		 */
		transition: opacity var(--t-fast) 0.25s, visibility 0s linear 0.4s,
			pointer-events 0s linear 0.25s;
	}

	/* Страховка на будущее: подменю у последнего пункта открывается влево. */
	.mainnav__item:last-child > .mainnav__sub {
		left: auto;
		right: 0;
	}

	.mainnav__sub--big {
		width: 504px;
		column-count: 2;
		column-gap: 32px;
		/* Линейка между колонками была и на старом сайте (column-rule groove
		   по белому); на затемнённом градиенте белый в упор слепит — берём
		   ту же линию, что отделяет колонку L3. */
		column-rule: 1px solid rgba(255, 255, 255, 0.18);
	}

	/*
	 * Открытие мгновенное (transition: none), плавное — только закрытие.
	 * Так панель не может оказаться прозрачной, но фокусируемой: если переход
	 * почему-либо не проигрывается (свёрнутая вкладка, троттлинг, отключённая
	 * анимация), opacity сразу равен 1, а не «едет» из нуля. Плавность нужна
	 * именно на закрытии — чтобы панель не схлопывалась под курсором.
	 */
	.mainnav__item:hover > .mainnav__sub,
	.mainnav__item:focus-within > .mainnav__sub,
	.mainnav__item.is-expanded > .mainnav__sub {
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
		transition: none;
	}

	.mainnav__subitem {
		display: block;
		margin: 0;
		/* Контейнер для колонки L3 — сама панель, она позиционирована. */
		position: static;
		break-inside: avoid;
	}

	/* Пункт с подуровнем — строка «ссылка + шеврон»: иначе кнопка раскрытия
	   встаёт под ссылкой отдельной строкой и растягивает пункт на 28 px. */
	.mainnav__subitem.has-children {
		display: flex;
		align-items: center;
		gap: 2px;
	}

	.mainnav__subitem.has-children > .mainnav__sublink {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* 28 px, как у шеврона L1: 24 — ровно минимум WCAG 2.5.8, без запаса. */
	.mainnav__sub .mainnav__expand {
		width: 28px;
		height: 28px;
		flex: none;
		color: rgba(255, 255, 255, 0.85);
	}

	.mainnav__subitem:hover > .mainnav__expand,
	.mainnav__subitem:focus-within > .mainnav__expand {
		color: var(--c-white);
	}

	/* Глобальный оранжевый ринг (#da4d08) на зелёном фоне панели даёт 1,17:1
	   при норме 3:1 — кнопке нужен тот же двойной ринг, что и ссылкам. */
	.mainnav__sub .mainnav__expand:focus-visible {
		outline: 2px solid var(--c-white);
		outline-offset: 0;
		box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.55);
	}

	/*
	 * Шеврон L2 смотрит вбок, а не вниз: подуровень открывается соседней
	 * колонкой справа, и стрелка вниз обещала бы раскрытие в поток.
	 * Правило перекрывает базовый поворот на 180° для раскрытого состояния.
	 */
	.mainnav__sub .mainnav__expand-icon,
	.mainnav__sub .mainnav__expand[aria-expanded="true"] .mainnav__expand-icon {
		width: 12px;
		height: 12px;
		transform: rotate(-90deg);
	}

	/*
	 * Пункт становится блочным: кликается вся строка 220×29, а не глиф-бокс
	 * слова («Терапия» — 55 px из 220). 29 px перекрывает порог WCAG 2.5.8.
	 */
	.mainnav__sublink {
		display: block;
		padding: 4px 8px;
		border-radius: 3px;
		line-height: 1.5;
	}

	.mainnav__sublink:hover,
	.mainnav__sublink:focus {
		background: rgba(255, 255, 255, 0.14);
	}

	/* Двойной ринг: белый контур читается на тёмном низе градиента,
	   тёмная тень — на светлом верхе. */
	.mainnav__sublink:focus-visible {
		outline: 2px solid var(--c-white);
		outline-offset: 0;
		box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.55);
	}

	/* --- 4.4. Третий уровень — соседняя колонка, а не flyout поверх ------- */

	/*
	 * Раньше ul.sub2 (200×521) выезжал ПОВЕРХ панели (420×329): закрывал 38 %
	 * её площади и резал по слову 14 ссылок из 17. Теперь это отдельная колонка,
	 * примыкающая к правому краю панели (left:100%), — списки L2 и L3 больше
	 * нигде не пересекаются.
	 *
	 * Почему колонка со своим фоном, а не вырезанное место внутри панели:
	 * абсолютно позиционированный элемент не растит родителя, а список
	 * «Гинекологии» (13 пунктов) выше панели услуг — 507 px против 293.
	 * Внутри панели пришлось бы резервировать высоту магическим min-height,
	 * который ломается от любой правки меню в админке. Своя подложка позволяет
	 * колонке быть любой высоты, и панель услуг при этом не «дышит».
	 */
	.mainnav__sub2 {
		position: absolute;
		top: 0;
		left: 100%;
		z-index: 210;
		width: 264px;
		max-height: calc(100vh - 160px);
		margin: 0;
		padding: 16px;
		overflow-y: auto;
		overscroll-behavior: contain;
		border-left: 1px solid rgba(255, 255, 255, 0.22);
		/* Тот же тёмный тон второго уровня, что был на старом сайте, но без
		   opacity:.9 — прозрачность накладывала два слоя белого текста. */
		background: linear-gradient(to bottom, var(--g-sub2-from) 0%, var(--g-sub2-to) 100%);
		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.22);
		text-align: left;
		font-size: 1.3rem;
		visibility: hidden;
		opacity: 0;
		/*
		 * Задержка закрытия обязательна, а не для красоты: колонка стоит
		 * в 268 px справа от своей строки, и путь к ней указатель проходит
		 * ПО ЧУЖИМ пунктам панели — без задержки она гасла бы на первом же
		 * пикселе пути и была бы недостижима мышью в принципе.
		 *
		 * pointer-events здесь сознательно НЕ используется, в отличие от
		 * панели L2. Гашение указателя пришлось бы откладывать переходом
		 * дискретного свойства, а если браузер его не поддержит, свойство
		 * применится сразу — и колонка перестанет ловить наведение ровно
		 * в тот момент, когда к ней ведут мышь. Ценой 0,4 с, в течение
		 * которых гаснущая колонка 264 px ещё перехватывает клик, берём
		 * гарантию, что до неё вообще можно доехать.
		 */
		transition: opacity var(--t-fast) 0.25s, visibility 0s linear 0.4s;
	}

	/* Панель услуг у последнего пункта открывается влево — тогда и колонка L3
	   должна уходить влево, иначе она вылезет за правый край окна. */
	.mainnav__item:last-child .mainnav__sub2 {
		left: auto;
		right: 100%;
		border-left: 0;
		border-right: 1px solid rgba(255, 255, 255, 0.22);
	}

	/*
	 * visibility: inherit, а не visible. Видимость наследуется и потомок
	 * ПЕРЕБИВАЕТ родителя, а opacity — нет. С visible колонка пережила бы
	 * закрытие своей панели: та гаснет через opacity:0, а колонка осталась бы
	 * visibility:visible — прозрачной, но кликабельной и в порядке обхода Tab.
	 * С inherit колонка гаснет вместе с панелью и живёт только внутри открытой.
	 */
	.mainnav__subitem:hover > .mainnav__sub2,
	.mainnav__subitem:focus-within > .mainnav__sub2,
	.mainnav__subitem.is-expanded > .mainnav__sub2 {
		visibility: inherit;
		opacity: 1;
		transition: none;
	}

	/* Панель админки занимает 32 px сверху и на столько же опускает колонку. */
	.admin-bar .mainnav__sub2 {
		max-height: calc(100vh - 192px);
	}

	.mainnav__sub2 .mainnav__sublink {
		padding: 3px 6px;
	}

	/*
	 * Esc гасит панель, хотя фокус по правилам доступности остаётся внутри
	 * пункта — на кнопке, которая её открыла. Без этого класса :focus-within
	 * открывал бы панель обратно в тот же кадр, и Esc визуально не делал
	 * ничего. Класс снимается, как только фокус уходит из меню или в меню
	 * заходит указатель (assets/js/menu.js). Правило стоит ПОСЛЕ правила
	 * раскрытия ОБОИХ уровней: специфичность одинаковая, решает порядок.
	 */
	.mainnav__item.is-collapsed > .mainnav__sub,
	.mainnav__subitem.is-collapsed > .mainnav__sub2 {
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
	}

	/* --- 4.5. Липкая полка меню ------------------------------------------ */

	/*
	 * Отрицательный top равен высоте первой полки с разделителем (88 + 1):
	 * при прокрутке первая полка уезжает, а полка меню с кнопкой «Записаться»
	 * прилипает к верху окна — полоса 52 px. Ни JS, ни смены классов,
	 * ни сжатия, ни горизонтального рывка.
	 *
	 * Guard по высоте: на низких экранах и при сильном зуме липкость выключается
	 * сама, чтобы не съедать и без того короткий вьюпорт (WCAG 1.4.10).
	 */
	@media (min-height: 600px) {

		.site-header {
			position: sticky;
			top: calc(-1 * var(--spivmir-shelf1-h));
		}

		/* Панель админки WordPress занимает 32 px сверху. */
		.admin-bar .site-header {
			top: calc(32px - var(--spivmir-shelf1-h));
		}

		/*
		 * Тень появляется только когда полка действительно прилипла: это
		 * единственный момент, когда под шапкой что-то проезжает и её край
		 * нужно обозначить. Класс ставит assets/js/menu.js по наблюдателю
		 * за меткой-сентинелом — без обработчика прокрутки.
		 *
		 * Тень на .site-header__inner, а не на .site-header: у второй фон
		 * во всю ширину окна, и тень тянулась бы по серым полям. Плывёт
		 * именно белая полоса контейнера — она её и отбрасывает.
		 *
		 * Правило живёт внутри того же медиазапроса, что и липкость: если
		 * класс окажется на шапке там, где липкости нет, тени не будет.
		 */
		.site-header__inner {
			transition: box-shadow var(--t);
		}

		.site-header.is-stuck .site-header__inner {
			box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
		}
	}

	/* --- 4.6. Ноутбуки 1024–1199 px: контейнер 880 px --------------------- */

	@media (max-width: 1199px) {

		.topbar {
			gap: 0 24px;
		}

		.topbar__info {
			gap: 24px;
		}

		.topbar__name {
			font-size: 1.4rem;
		}

		.topbar__contact--phone {
			font-size: 1.6rem;
		}

		.topbar__hours-time {
			font-size: 1.3rem;
		}

		.mainnav__link {
			padding: 8px 10px;
		}

		.mainnav__item.has-children > .mainnav__link {
			padding-right: 2px;
		}

		.topbar__cta {
			padding-left: 16px;
		}

		/* Панель услуг (504) + колонка L3 (232) должны уместиться в 880 px:
		   от левого края «Наших услуг» это 88 + 504 + 232 = 824. */
		.mainnav__sub2 {
			width: 232px;
		}
	}
}

/* =========================================================================
   5. ПЛАНШЕТЫ И ТЕЛЕФОНЫ: 1023 px и ниже
   Заказчика мобильная шапка устраивает — здесь всё как было, кроме двух
   правил для новых узлов разметки (.site-header__bar и .topbar__cta).
   ========================================================================= */

@media (max-width: 1023px) {

	.site-header__inner {
		padding-left: 24px;
		padding-right: 24px;
	}

	/*
	 * Вторая полка на узких экранах — не полка: это обычный блок, внутри
	 * которого меню раскрывается бургером. Рамку и отступы десктопной полки
	 * снимаем, иначе над свёрнутым меню появится лишняя линия.
	 */
	.site-header__bar {
		display: block;
		padding: 0;
		border-top: 0;
	}

	/*
	 * Кнопка «Записаться» раньше лежала внутри .topbar__hours и пряталась
	 * вместе с ним. Теперь она отдельный узел во второй полке — прячем явно.
	 * Запись на узких экранах доступна по tel: в плашке, в подвале
	 * и на странице «Контакты».
	 */
	.topbar__cta {
		display: none;
	}

	/* Плашка в одну строку: логотип — контакты — бургер. */
	.topbar {
		display: flex;
		align-items: center;
		gap: 16px;
		padding: 10px 0;
		flex-wrap: wrap;
	}

	.topbar__logo {
		width: auto;
		padding-top: 0;
		flex: 1 1 auto;
		min-width: 0;
		text-align: left;
	}

	.topbar__logo-link {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.topbar__logo-img {
		width: 64px;
		height: 64px;
		padding: 6.5px;
		margin: 0;
		flex: none;
	}

	.topbar__name {
		font-size: 1.5rem;
		line-height: 1.3;
		text-align: left;
		white-space: normal;
	}

	.topbar__info {
		width: auto;
		margin-left: 0;
		flex: 0 1 auto;
		align-items: center;
		gap: 20px;
	}

	.topbar__contacts {
		width: auto;
		margin: 0;
		padding: 0;
	}

	.topbar__contact {
		height: auto;
		min-height: 28px;
		font-size: 1.5rem;
	}

	/* Часы и кнопка «Записаться» уходят в подвал и на «Контакты»:
	   в узкой плашке остаются логотип, телефон (и e-mail) и бургер. */
	.topbar__hours {
		display: none;
	}

	.mainnav__toggle {
		display: flex;
		order: 3;
		flex: none;
	}

	/* Меню — раскрывающаяся панель под плашкой. */
	.mainnav {
		padding: 0;
		text-align: left;
	}

	.mainnav__panel {
		display: none;
		border-top: 1px solid var(--c-border-light);
	}

	.mainnav.is-open .mainnav__panel {
		display: block;
		max-height: calc(100vh - 90px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}

	.mainnav__list {
		display: block;
		width: 100%;
		padding: 8px 0 16px;
	}

	.mainnav__item,
	.mainnav__subitem {
		position: relative;
		display: block;
		float: none;
		margin: 0;
		padding: 0;
		border-bottom: 1px solid #ececec;
	}

	.mainnav__subitem:last-child {
		border-bottom: 0;
	}

	.mainnav__link,
	.mainnav__sublink {
		display: block;
		padding: 12px 52px 12px 0;
		font-size: 1.6rem;
		line-height: 1.35;
		white-space: normal;
	}

	.mainnav__link {
		border: 0;
		border-radius: 0;
		color: var(--c-text);
	}

	.mainnav__sublink {
		padding-left: 16px;
		color: var(--c-green);
		font-size: 1.5rem;
	}

	/* В аккордеоне фон белый: белый текст «активного» пункта из десктопных
	   правил здесь неразличим — текущий пункт помечаем цветом и насыщенностью. */
	.mainnav__sublink:hover,
	.mainnav__sublink:focus,
	.mainnav__sublink:focus-visible {
		color: var(--c-orange-hover);
		background: none;
		text-decoration: none;
	}

	.mainnav__item.is-current > .mainnav__link,
	.mainnav__item.is-active > .mainnav__link,
	.mainnav__subitem.is-current > .mainnav__sublink,
	.mainnav__subitem.is-active > .mainnav__sublink {
		color: var(--c-orange-hover);
		font-weight: 700;
	}

	.mainnav__sub2 .mainnav__sublink {
		padding-left: 32px;
		font-size: 1.5rem;
	}

	.mainnav__item.is-orange > .mainnav__link {
		display: block;
		border: 0;
		border-radius: 0;
		color: var(--c-orange);
	}

	.mainnav__item.is-orange > .mainnav__link:hover,
	.mainnav__item.is-orange > .mainnav__link:focus {
		background: none;
		color: var(--c-orange-hover);
	}

	/* Аккордеон: панели в потоке, раскрываются кнопкой .mainnav__expand. */
	.mainnav__sub,
	.mainnav__sub2 {
		position: static;
		font-size: 1.5rem;
		display: none;
		width: auto;
		max-height: none;
		min-height: 0;
		margin: 0;
		padding: 0 0 8px;
		overflow: visible;
		column-count: 1;
		border-left: 0;
		background: none;
		box-shadow: none;
		visibility: visible;
		opacity: 1;
	}

	.mainnav__item.is-expanded > .mainnav__sub,
	.mainnav__subitem.is-expanded > .mainnav__sub2 {
		display: block;
	}

	/* На узких экранах наведение не должно открывать панели. */
	.mainnav__item:hover > .mainnav__sub,
	.mainnav__item:focus-within > .mainnav__sub,
	.mainnav__subitem:hover > .mainnav__sub2,
	.mainnav__subitem:focus-within > .mainnav__sub2 {
		background: none;
		opacity: 1;
	}

	.mainnav__expand {
		position: absolute;
		top: 0;
		right: 0;
		display: flex;
		width: 48px;
		height: 44px;
		align-items: center;
		justify-content: center;
		font-size: 18px;
	}
}

/* --- 6. Телефоны: 767 px и ниже ------------------------------------------ */

@media (max-width: 767px) {

	.site-header__inner {
		padding-left: 16px;
		padding-right: 16px;
	}

	.topbar {
		gap: 10px;
	}

	.topbar__logo-img {
		width: 48px;
		height: 48px;
		padding: 5px;
	}

	.topbar__name {
		font-size: 1.3rem;
	}

	/* Оставляем только телефон: e-mail, часы и кнопка есть в подвале и на «Контактах». */
	.topbar__info {
		gap: 0;
	}

	.topbar__contact--email {
		display: none;
	}

	.topbar__contact {
		min-height: 44px;
	}

	/*
	 * Телефон — одной иконкой, без номера: строка «+7 (911) 228-80-71» съедала
	 * ~120 px из 288 доступных на 320-пиксельном экране, и на них не оставалось
	 * названия клиники рядом с логотипом. Номер скрыт ВИЗУАЛЬНО, но остаётся
	 * доступным именем ссылки — скринридер по-прежнему читает его целиком,
	 * поэтому display:none здесь не годится.
	 */
	.topbar__contact--phone .topbar__contact-text {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	/* Тап-цель — вся ссылка целиком, не меньше 44×44. */
	.topbar__contact-link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0;
		min-width: 44px;
		min-height: 44px;
	}

	/* Иконка берёт цвет телефона: одна на всю плашку, она и есть действие. */
	.topbar__contact--phone .topbar__icon {
		width: 26px;
		height: 26px;
		color: var(--c-green-darker);
	}

	.topbar__contact--phone .topbar__icon svg {
		width: 26px;
		height: 26px;
	}

	.mainnav__toggle {
		padding: 8px;
		min-width: 44px;
		justify-content: center;
	}

	.mainnav__toggle-label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

@media (max-width: 479px) {

	/*
	 * Название клиники остаётся рядом с логотипом даже на 320 px: место под него
	 * освободилось, когда телефон свернулся в иконку. Но впритык: 48 логотип
	 * + 44 телефон + 44 бургер + зазоры = 166 из 288 доступных, названию
	 * остаётся 122 px, а в одну строку ему нужно ~124. Поэтому колонка логотипа
	 * получает flex-basis: 0 — тогда она забирает ровно остаток и заставляет
	 * название переноситься в две строки (white-space: normal задан в блоке
	 * 1023 px). Без этого при flex-basis: auto не сжималось название,
	 * а переносился бургер, и плашка вырастала с 68 до 122 px.
	 */
	.topbar__logo {
		flex: 1 1 0;
	}

	.topbar__name {
		font-size: 1.2rem;
		line-height: 1.2;
	}
}

/* --- 7. Уважение к настройкам движения ----------------------------------- */

@media (prefers-reduced-motion: reduce) {

	/*
	 * Убираем плавность, но НЕ задержку. transition: none здесь означал бы,
	 * что панель и колонка гаснут в тот же кадр, когда указатель ушёл, —
	 * а до колонки L3 тогда физически не доехать (см. §4.4). Поэтому
	 * длительности обнуляются, а отсрочки остаются: движения нет, прощение
	 * пути есть. Порядок важен: opacity гаснет раньше, чем снимается
	 * visibility, иначе панель осталась бы невидимой, но кликабельной.
	 */
	.mainnav__sub {
		transition: opacity 0s linear 0.25s, visibility 0s linear 0.4s,
			pointer-events 0s linear 0.25s;
	}

	.mainnav__sub2 {
		transition: opacity 0s linear 0.25s, visibility 0s linear 0.4s;
	}

	.mainnav__expand-icon,
	.site-header__inner {
		transition: none;
	}
}

/* --- 8. Печать ----------------------------------------------------------- */

@media print {

	.site-header {
		position: static;
		background: none;
		box-shadow: none;
	}

	.site-header__inner,
	.site-header__bar {
		background: none;
		border: 0;
	}

	.site-header__bar {
		display: none;
	}
}