/*
 * Шапка и подвал. Геометрия снята с макета Figma (артборд 1920).
 */

/* ---------- Шапка ---------- */

.site-header {
	/*
	 * Тот же предел, что у слайдера под ней. Правило работает и для
	 * компактной шапки: она fixed с inset: 0 0 auto, а у растянутого между
	 * left и right элемента автополя центрируют так же, как в потоке.
	 */
	max-width: var(--page-max);
	margin-inline: auto;
	background: var(--c-surface-dark);
	color: var(--c-text-invert);
}

/* ---------- Компактная шапка при прокрутке ---------- */

/*
 * Не морфинг, а подмена. Большая шапка стоит в потоке и уезжает вверх вместе
 * со страницей — её никто не фиксирует и не сжимает на ходу. Только когда она
 * прокручена целиком, сверху выезжает компактная и встаёт намертво.
 *
 * Раньше шапка была зафиксирована всегда и сжималась на первых же пикселях
 * прокрутки. Собранная шапка нужна затем, чтобы не занимать экран, — но пока
 * большая ещё видна, сжимать нечего, и превращение посреди первого экрана
 * читалось как дёрганье.
 *
 * Три блока внутри по-прежнему позиционированы абсолютно от контейнера: так
 * одна и та же разметка описывает оба состояния, меняются только числа.
 */

/* Фон тот же, что у шапки: слот держит её место, когда она уже зафиксирована. */
.site-header-slot {
	min-height: 0;
	background: var(--c-surface-dark);
}

/*
 * Десктопная шапка держится до 768 — до телефона.
 *
 * Сначала граница стояла на 1100: строка меню при макетном кегле 28 требует
 * около тысячи пикселей и ниже этого в контейнер не влезает. Но складывать
 * меню в две колонки уже на ноутбуке неправильно — клиент видит мобильную
 * шапку на обычном экране.
 *
 * Поэтому здесь работает та же модель, что у подвала и лент: шапка не
 * ужимается и не перестраивается, а строка меню уезжает за край экрана.
 * Пока она помещается — стоит по центру, как в макете; когда перестаёт —
 * прижимается к левому краю, и хвост можно домотать. Кегли при этом не
 * меняются: ничего не «резинится» и не прыгает.
 *
 * Вторая половина решения — в header.php: ступень масштаба 0.8 доведена до
 * той же границы 768, поэтому на ноутбуке шапка ещё и уменьшена целиком, как
 * от Ctrl-минуса, и меню помещается полностью почти до самого телефона.
 */
@media (min-width: 430px) {
	/*
	 * Слот держит место в потоке. Пока шапка в потоке, он просто обнимает её;
	 * когда она переходит в фиксированную компактную, слот остаётся на её
	 * месте и содержимое не подпрыгивает на высоту шапки.
	 */
	.site-header-slot {
		min-height: var(--header-h);
	}

	.site-header {
		position: relative;
		z-index: 200;
		height: var(--header-h);
	}

	/*
	 * Компактная выезжает сверху. Анимация, а не переход: класс появляется
	 * одновременно со сменой position, а смена position не интерполируется —
	 * переход было бы не от чего считать.
	 */
	.site-header.is-compact {
		position: fixed;
		inset: 0 0 auto;
		height: var(--header-compact-h);
		border-bottom: 1px solid var(--c-grey-900);
		animation: mirovich-header-drop var(--header-morph) var(--header-ease);
	}

	.admin-bar .site-header.is-compact {
		top: 32px;
	}

	@keyframes mirovich-header-drop {
		from {
			transform: translateY(-100%);
		}

		to {
			transform: translateY(0);
		}
	}

	.site-header__inner {
		position: relative;
		width: min(100% - var(--container-pad) * 2, var(--container-content));
		height: 100%;
		max-width: none;
		display: block;
		padding-block: 0;
	}

	/*
	 * Все три блока — абсолютные, привязаны к центру контейнера. Переезд в
	 * край делается сменой left с 50% на 0 или 100% с соответствующим
	 * translateX: обе пары значений интерполируются.
	 */
	.site-header .site-header__socials,
	.site-header .site-header__brand,
	.site-header .site-nav {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		margin-top: 0;
	}

	.site-header .site-header__socials {
		top: var(--header-social-top);
	}

	/*
	 * Координаты считаем от токенов, а не числами: раньше здесь стояли 86 и
	 * 220, посчитанные под шапку 280, и при возврате к макетным 372 логотип
	 * с меню остались на старых местах. Теперь любое изменение размеров
	 * шапки пересчитывается само.
	 */
	.site-header .site-header__brand {
		top: calc(
			var(--header-social-top) + var(--header-social-size) +
			var(--header-brand-gap)
		);
		width: var(--header-brand-w);
		height: var(--header-avatar-size);
	}

	.site-header .site-nav {
		top: calc(
			var(--header-social-top) + var(--header-social-size) +
			var(--header-brand-gap) + var(--header-avatar-size) +
			var(--header-nav-gap-top)
		);
		/*
		 * Меню занимает всю ширину шапки и прокручивается внутри себя.
		 * Центрирование делает не transform, а margin-inline: auto у списка:
		 * пока строка помещается, поля с обеих сторон равны и меню стоит по
		 * центру, как в макете; когда перестаёт — поля обнуляются, меню
		 * прижимается к левому краю и уезжает вправо за экран.
		 */
		left: 0;
		width: 100%;
		transform: none;
		overflow-x: auto;
		overflow-y: hidden;
		/* Полоса прокрутки не нужна: она бы легла поперёк шапки. */
		scrollbar-width: none;
	}

	.site-header .site-nav::-webkit-scrollbar {
		display: none;
	}

	.site-header .site-nav__list {
		width: max-content;
		margin-inline: auto;
	}

	/*
	 * В собранной шапке логотип и соцсети стоят по краям той же строки, что и
	 * меню, поэтому лента меню сужается и не доходит до них. Именно left/right,
	 * а не внутренние поля: у прокручиваемого блока содержимое видно и поверх
	 * полей, так что полем соцсети от наезжающего хвоста меню не закрыть.
	 */
	.site-header.is-compact .site-nav {
		/*
		 * Поля по краям равны тому, что реально занимают логотип слева и
		 * четыре кружка соцсетей справа, плюс просвет 20. Раньше с обеих
		 * сторон резервировалось по ширине логотипа с запасом, и после
		 * сужения контейнера до 950 строка меню перестала помещаться —
		 * «Книжная полка» обрезалась.
		 */
		left: calc(var(--header-compact-brand-w) + 20px);
		right: var(--header-compact-social-w);
		width: auto;
	}

	/*
	 * Блоки внутри не анимируются: компактная шапка не вырастает из большой,
	 * а въезжает сверху уже собранной. Если оставить им переходы, логотип и
	 * меню поедут по своим местам одновременно с въездом самой шапки — два
	 * движения разом читаются как рябь.
	 */

	/* ----- собранное состояние ----- */

	.site-header.is-compact .site-header__brand {
		top: var(--header-compact-brand-top);
		left: 0;
		transform: translateX(0);
		width: var(--header-compact-brand-w);
		height: var(--header-compact-brand-h);
	}

	.site-header.is-compact .site-nav {
		top: var(--header-compact-nav-top);
	}

	.site-header.is-compact .site-nav__list {
		/* 32 вместо 40: в собранной шапке строка обязана помещаться целиком. */
		gap: var(--header-compact-nav-gap);
	}

	/*
	 * Точки подчёркивания в собранной шапке.
	 *
	 * Пропадали они не из-за стиля, а из-за обрезки. Меню — прокручиваемый
	 * блок с overflow: hidden по вертикали, и его высота равна высоте строки
	 * ровно. В большой шапке интерлиньяж 34.4 при кегле 22.4 оставляет под
	 * базовой линией шесть пикселей, и подчёркивание туда помещается. В
	 * собранной интерлиньяж 19.2 при кегле 14.4 оставляет два — и линия,
	 * отведённая на 4 пикселя вниз, оказывалась за границей блока и
	 * срезалась. Отсюда нижнее поле: оно входит в область прокрутки, и точки
	 * снова видны. Толщина уменьшена в долю кегля, чтобы точки читались
	 * точками, а не сплошной линией.
	 */
	.site-header.is-compact .site-nav {
		padding-bottom: 6px;
	}

	.site-header.is-compact .site-nav__list > li > a {
		font-size: var(--header-compact-nav-fs);
		line-height: var(--header-compact-nav-lh);
		text-decoration-thickness: 1.2px;
		text-underline-offset: 4px;
	}

	.site-header.is-compact .site-header__socials {
		top: var(--header-compact-social-top);
		left: 100%;
		transform: translateX(-100%);
		gap: var(--header-compact-social-gap);
	}

	.site-header.is-compact .site-header__socials a {
		width: var(--header-compact-social);
		height: var(--header-compact-social);
	}

	.site-header.is-compact .site-header__socials img,
	.site-header.is-compact .site-header__socials svg {
		height: var(--header-compact-social-icon);
	}

	.site-header.is-compact .site-header__socials .social-icon--youtube {
		height: var(--header-compact-social-icon-youtube);
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-header,
	.site-header__socials,
	.site-header__brand,
	.site-nav,
	.site-header__socials a,
	.site-nav__list,
	.site-nav__list > li > a {
		transition-duration: 0.01ms;
	}

	.site-header.is-compact {
		animation-duration: 0.01ms;
	}
}

.site-header__inner {
	max-width: 1920px;
	margin-inline: auto;
	padding-block: var(--header-social-top) var(--header-pad-bottom);
	display: flex;
	flex-direction: column;
	align-items: center;
}

.site-header__socials {
	display: flex;
	gap: var(--header-social-gap);
}

/*
 * Кружок с обводкой — как в подвале. Раньше иконки в шапке висели без рамок,
 * и разные пропорции глифов читались как разнобой: facebook 10x18 казался
 * сдвинутым вправо, потому что оптический центр буквы «f» не совпадает с
 * центром её бокса, а опереться взгляду было не на что. Кружок задаёт общую
 * сетку, и все четыре иконки встают в один ряд.
 */
.site-header__socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--header-social-size);
	height: var(--header-social-size);
	border: var(--header-social-border) solid var(--c-border-dark);
	border-radius: 50%;
	transition: opacity var(--hover-t), border-color var(--hover-t);
}

@media (hover: hover) and (pointer: fine) {
	.site-header__socials a:hover {
		opacity: 0.75;
		border-color: var(--c-accent);
	}
}

/*
 * Каждая иконка рисуется в своём натуральном размере, а не растягивается на
 * всю рамку. Пропорции у глифов разные — телеграм 20x16, X 16x16, ютуб 21x15,
 * фейсбук 10x18, — и при вписывании в общий квадрат фейсбук вытягивался на всю
 * высоту, а ютуб занимал две трети: отсюда разнобой и ощущение, что иконки
 * крупные. Эти размеры и есть размеры глифов в макете, они так и выгружены.
 */
.site-header__socials img,
.site-header__socials svg {
	width: auto;
	height: var(--header-social-icon);
}

.site-header__socials .social-icon--youtube {
	height: var(--header-social-icon-youtube);
}

/*
 * Оптическая правка: у глифа facebook перекладина уходит вправо, поэтому по
 * геометрическому центру буква читается смещённой. Сдвигаем на полпикселя
 * влево — ровно настолько, насколько её «утяжеляет» перекладина.
 */
.site-header__socials .social-icon--facebook {
	margin-left: -0.5px;
}

.site-header__brand {
	display: block;
	width: var(--header-brand-w);
	height: var(--header-avatar-size);
	margin-top: var(--header-brand-gap);
}

.site-header__brand img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.site-header__avatar {
	flex: none;
	width: var(--header-avatar-size);
	height: var(--header-avatar-size);
	overflow: hidden;
	border-radius: 50%;
}

.site-header__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.site-header__wordmark {
	flex: none;
	width: var(--header-wordmark-w);
	height: var(--header-wordmark-h);
	display: flex;
	align-items: center;
}

.site-header__wordmark img,
.site-header__wordmark svg {
	width: 100%;
	height: auto;
}

/* Текстовый запасной вариант, пока не подложен логотип */
.site-header__wordmark-text {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 44px;
	line-height: 1.05;
	letter-spacing: 0.02em;
	color: var(--c-text-invert);
}

.site-header__wordmark-text small {
	display: block;
	font-weight: 400;
	font-size: 30px;
}

/* ---------- Навигация ---------- */

.site-nav {
	margin-top: var(--header-nav-gap-top);
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: var(--header-nav-item-gap);
}

.site-nav__list > li {
	position: relative;
}

.site-nav__list > li > a {
	display: block;
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: var(--header-nav-fs);
	line-height: var(--header-nav-lh);
	color: var(--c-text-invert);
	/*
	 * Точечное подчёркивание пунктов меню.
	 *
	 * Префиксная сокращённая запись идёт первой ради Safari: версии до 12.1
	 * не знают ни отдельного text-decoration-style, ни offset и thickness,
	 * но понимают -webkit-text-decoration. Там подчёркивание останется
	 * точечным, только встанет ближе к тексту и обычной толщины. Современные
	 * браузеры перекрывают её тремя строками ниже.
	 */
	-webkit-text-decoration: underline dotted;
	text-decoration: underline dotted;
	text-decoration-thickness: 1.8px;
	text-underline-offset: 6px;
	white-space: nowrap;
	transition: color var(--hover-t);
}

/* Текущий пункт в макете идёт без подчёркивания */
.site-nav__list > li.current-menu-item > a,
.site-nav__list > li.current-menu-ancestor > a,
.site-nav__list > li.current-menu-parent > a {
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
	.site-nav__list > li > a:hover {
		color: var(--c-accent);
	}
}

/* Треугольник у пункта с подменю */
.site-nav__list > li.menu-item-has-children > a {
	padding-right: 21.6px;
}

.site-nav__list > li.menu-item-has-children > a::after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	margin-top: -2.4px;
	border-left: 6.8px solid transparent;
	border-right: 6.8px solid transparent;
	border-top: 11.8px solid currentColor;
}

.site-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	min-width: 260px;
	padding: 12px 0;
	background: var(--c-surface-dark);
	border: 1px solid var(--c-border-dark);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--hover-t), visibility var(--hover-t);
}

.site-nav__list > li:focus-within .sub-menu {
	opacity: 1;
	visibility: visible;
}

@media (hover: hover) and (pointer: fine) {
	.site-nav__list > li:hover .sub-menu {
		opacity: 1;
		visibility: visible;
	}
}

.site-nav__list .sub-menu a {
	display: block;
	padding: 8px 24px;
	font-family: var(--font-serif);
	font-size: 20px;
	line-height: 32px;
	color: var(--c-text-muted-invert);
	white-space: nowrap;
	transition: color var(--hover-t);
}

@media (hover: hover) and (pointer: fine) {
	.site-nav__list .sub-menu a:hover {
		color: var(--c-accent);
	}
}

/* ---------- Подвал ---------- */

/*
 * Подвал шире общего контейнера и живёт по своим правилам: 1450 на широком
 * экране, дальше сужается вместе с окном, но не уже 1200. Ниже он не ломается
 * в узкую колонку, а уходит за правый край — и листается по горизонтали.
 *
 * Прокрутка своя, у самого подвала, а не у страницы: вбок ездит только он.
 * Полосу прячем — о том, что подвал листается, говорит обрезанная колонка у
 * края, как и в лентах карточек.
 */
.site-footer {
	/* Тот же предел, что у шапки и слайдера. */
	max-width: var(--page-max);
	margin-inline: auto;
	background: var(--c-surface-dark);
	color: var(--c-text-invert);
	padding-bottom: 62px;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
}

.site-footer::-webkit-scrollbar {
	display: none;
}

/*
 * Автополя, а не сдвиг: пока подвал помещается, они центрируют его, а как
 * только он шире окна — обнуляются сами, и видна левая часть, а прячется
 * правая. Это ровно то поведение, которое нужно.
 */
@media (min-width: 430px) {
	.site-footer__cols,
	.site-footer__bottom {
		/*
		 * Ширина постоянная, а не clamp. Раньше здесь стояло
		 * clamp(1200px, 100%, 1450px): подвал плавно ужимался в полосе между
		 * этими числами — то самое «резинится», которое клиент не принимает.
		 * Теперь ширина одна на всех экранах, а в узкое окно подвал уезжает
		 * вбок: автополя центрируют его, пока он помещается, и обнуляются,
		 * когда нет. Прокрутка у .site-footer, полоса скрыта.
		 */
		width: var(--container-wide);
		margin-inline: auto;
	}
}

/*
 * Подвал живёт в общем контейнере, как и всё остальное. Раньше он был
 * единственным блоком шириной во весь кадр (1920 с макетными полями 103 и
 * 32.126) — из-за этого строка ссылок в подвале уходила заметно шире, чем
 * содержимое страницы над ней.
 *
 * Пропорции дорожек макетные (393 / 424.125 / 483.871 / 483.873), но заданы
 * долями: в контейнере поуже они сжимаются вместе, а не ломают ряд.
 */
.site-footer__cols {
	display: grid;
	grid-template-columns: 393fr 424.125fr 483.871fr 483.873fr;
	padding-top: var(--footer-pad-top);
}

/* Вертикальные разделители между колонками */
.site-footer__col + .site-footer__col,
.site-footer__brand-col + .site-footer__col {
	border-left: 1px solid var(--c-grey-900);
}

.site-footer__col {
	height: var(--footer-divider-h);
	text-align: center;
}

.site-footer__brand-col {
	padding-top: 0.67px;
}

.site-footer__logo {
	display: block;
	width: calc(126.5px * var(--k-wide));
	height: calc(74.3px * var(--k-wide));
}

.site-footer__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.site-footer__logo img,
.site-footer__logo svg {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.site-footer__logo-text {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: calc(26px * var(--k-wide));
	line-height: 1.05;
	color: var(--c-text-invert);
}

.site-footer__logo-text small {
	display: block;
	font-weight: 400;
	font-size: calc(17px * var(--k-wide));
}

.site-footer__social-title {
	margin-top: calc(112.557px * var(--k-wide));
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: var(--footer-link-fs);
	line-height: var(--footer-link-fs);
	color: var(--c-text-invert);
}

/*
 * 10.5, а не 38 из макета: там 38 отмерены от верха капители подписи
 * «Social», а здесь отступ считается от низа строки. Разница — нижняя
 * половина строчного бокса.
 */
.site-footer__socials {
	display: flex;
	gap: var(--footer-social-gap);
	margin-top: 10.5px;
}

/*
 * Кружок с обводкой, как в макете: сама ссылка — рамка, иконка внутри мельче
 * её. Раньше иконка занимала весь бокс целиком и читалась крупным пятном.
 */
.site-footer__socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--footer-social-size);
	height: var(--footer-social-size);
	border: var(--footer-social-border) solid var(--c-border-dark);
	border-radius: 50%;
	transition: opacity var(--hover-t), border-color var(--hover-t);
}

@media (hover: hover) and (pointer: fine) {
	.site-footer__socials a:hover {
		opacity: 0.75;
		border-color: var(--c-accent);
	}
}

/*
 * Задаём только высоту: ширина считается из viewBox самой иконки. Если
 * прибить оба размера, несквадратные глифы (телеграм 20×16, ютуб 21×15,
 * facebook 10×18) сплющиваются в квадрат.
 */
.site-footer__socials img,
.site-footer__socials svg {
	width: auto;
	height: var(--footer-social-icon);
}

.site-footer__socials .social-icon--youtube {
	height: var(--footer-social-icon-youtube);
}

/*
 * Внутренний отступ колонки — доля её ширины, а не макетные 56. В макете
 * текстовый блок был уже дорожки ровно на 112 при дорожке 424–484, то есть
 * примерно на четверть; в контейнере 1220 дорожка вдвое уже, и прежние 56
 * съедали почти всё место под текст — «Наши спецпроекты» переносились на
 * две строки, а соседние заголовки оставались в одну.
 */
.site-footer__col {
	padding-inline: 3%;
}

.site-footer__col-title {
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: var(--footer-col-title-fs);
	line-height: var(--footer-col-title-lh);
	color: var(--c-text-invert);
}

.site-footer__col ul {
	margin-top: 24px;
}

.site-footer__col a {
	display: block;
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: var(--footer-link-fs);
	line-height: var(--footer-link-lh);
	color: var(--c-text-muted);
	text-decoration: underline;
	text-decoration-style: dotted;
	text-decoration-thickness: 1.96px;
	text-underline-offset: 7px;
	transition: color var(--hover-t);
}

@media (hover: hover) and (pointer: fine) {
	.site-footer__col a:hover {
		color: var(--c-text-invert);
	}
}

/* ---------- Нижняя строка подвала ---------- */

/*
 * Нижняя строка по макету: блок с адресом начинается на 5981, копирайт и
 * адрес — на 6015, пилюля с правовыми ссылками стоит на 6002 и кончается
 * на 6058 вместе со всей строкой. То есть пилюля прижата к низу строки, а
 * не отцентрована по ней — при центрировании она уезжала на 20 вверх.
 */
.site-footer__bottom {
	/*
	 * Высота строки 77: адрес начинается на 5981 сверху, пилюля кончается на
	 * 6058 снизу. Поэтому адрес прижат к верху, пилюля — к низу, а строка
	 * держит высоту сама, иначе пилюля поднималась на 20 вверх.
	 */
	padding: 119px 0 0;
	display: flex;
	/*
	 * Все три блока строки — адрес, копирайт и правовые ссылки — выровнены по
	 * нижнему краю. Раньше каждый стоял по-своему: адрес прижимался к верху,
	 * копирайт опускался на 34 своим отступом, пилюля со ссылками уходила
	 * вниз через align-self. Низы получались на 166.4, 171 и 196 — строка
	 * читалась рваной.
	 */
	align-items: flex-end;
	justify-content: space-between;
	/*
	 * 119 верхнего отступа плюс 77 самой строки: при box-sizing: border-box
	 * min-height считается вместе с падингом, и голые 77 не давали ничего.
	 */
	min-height: calc(119px + 77px);
}

/*
 * Ни собственного отступа у копирайта, ни align-self у правовых ссылок
 * больше не нужно: выравнивание по низу задано всей строке.
 */

.site-footer__address-title {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: calc(20px * var(--k-wide));
	line-height: calc(24px * var(--k-wide));
	color: var(--c-text-invert);
}

.site-footer__address {
	margin-top: 11px;
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: var(--footer-small-fs);
	line-height: var(--footer-small-lh);
	color: var(--c-text-muted-invert);
}

.site-footer__copy {
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: var(--footer-small-fs);
	line-height: var(--footer-small-lh);
	color: var(--c-text-muted-invert);
	white-space: nowrap;
}

.site-footer__legal {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	width: var(--footer-pill-w);
	height: var(--footer-pill-h);
	background: var(--c-black);
	border: 1px solid var(--c-border-dark);
	border-radius: calc(var(--footer-pill-h) / 2);
}

.site-footer__legal a {
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: var(--footer-small-fs);
	line-height: var(--footer-small-lh);
	color: var(--c-text-muted-invert);
	white-space: nowrap;
	transition: color var(--hover-t);
}

@media (hover: hover) and (pointer: fine) {
	.site-footer__legal a:hover {
		color: var(--c-text-invert);
	}
}

.site-footer__legal-sep {
	width: 1px;
	height: 14px;
	background: var(--c-grey-900);
}

/* ---------- Адаптив ---------- */
/* Мобильный макет отрисован только для главной (393px); правила выведены из него. */

/*
 * Кегли здесь больше не уменьшаются.
 *
 * Раньше в этой полосе шапка и подвал переходили на мелкий шрифт, а ниже 768
 * мобильные правила ставили кегль крупнее — и текст при сужении окна не
 * уменьшался, а рос. Теперь размер меняется один раз, на границе с мобильной
 * раскладкой, и только в меньшую сторону: подвал в узкое окно не ужимается, а
 * уезжает вбок, ужимать его кегли незачем.
 */
@media (max-width: 429.98px) {
	.site-footer__col {
		height: auto;
		padding-bottom: 24px;
	}
}

/*
 * Сложенная шапка — только на узком телефоне (ниже 500). Раньше она включалась
 * с 1099, то есть на любом ноутбуке; клиент справедливо считает это мобильной
 * вёрсткой не на своём месте. Между 500 и 768 работает макетная шапка, у
 * которой строка меню уезжает за край.
 */
@media (max-width: 429.98px) {
	.site-header__inner {
		position: relative;
		padding-block: 24px 20px;
		padding-inline: 16px;
	}

	.site-header__socials {
		gap: 24px;
	}

	.site-header__socials a {
		width: 26px;
		height: 26px;
	}

	.site-header__brand {
		width: 208px;
		height: 72px;
		margin-top: 20px;
	}

	.site-header__wordmark-text {
		font-size: 26px;
	}

	.site-header__wordmark-text small {
		font-size: 18px;
	}

	.site-nav {
		width: 100%;
		margin-top: 20px;
	}

	/*
	 * Меню в две колонки, как в мобильном макете: четыре пункта столбиком
	 * растягивали шапку на пол-экрана, а в два ряда по два она остаётся
	 * компактной. Пункт с подменю показывает стрелку и раскрывается вниз
	 * прямо в своей ячейке.
	 */
	.site-nav__list {
		display: grid;
		/* minmax(0, …), иначе длинный пункт растягивает свою колонку. */
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 4px 16px;
	}

	.site-nav__list > li {
		width: auto;
		text-align: center;
	}

	.site-nav__list > li > a {
		font-size: 20px;
		line-height: 48px;
	}

	.site-nav__list > li.menu-item-has-children > a {
		padding-right: 0;
	}

	.site-nav__list > li.menu-item-has-children > a::after {
		position: static;
		display: inline-block;
		margin: 0 0 3px 8px;
		border-left-width: 5px;
		border-right-width: 5px;
		border-top-width: 8px;
	}

	.site-nav__list .sub-menu {
		position: static;
		min-width: 0;
		padding: 0 0 8px;
		border: 0;
		opacity: 1;
		visibility: visible;
	}

	.site-nav__list .sub-menu a {
		padding: 4px 0;
		font-size: 17px;
		line-height: 28px;
		text-align: center;
	}
}

/*
 * Подвал перестраивается позже шапки — только на телефоне. До этого он не
 * ужимается, а уезжает вбок, и ломать ему раскладку незачем.
 */
@media (max-width: 429.98px) {
	.site-footer {
		padding-bottom: 32px;
	}

	/*
	 * Поле подвала шире, чем у остальных блоков страницы: по мобильному
	 * макету содержимое и разделительные полосы отступают от края примерно
	 * на десятую часть экрана, а не на базовые 16.
	 */
	.site-footer__cols {
		grid-template-columns: 1fr;
		gap: 32px;
		/*
		 * 42, а не 32: логотип, разделы и разделительные полосы отступают от
		 * края на десять пикселей больше, чем нижний блок с адресом. Это те
		 * самые «ещё десять» — отдельной обёртки для них не нужно, padding
		 * контейнера колонок даёт ровно тот же отступ всем блокам разом.
		 */
		padding: 40px 42px 0;
	}

	/*
	 * Разделители только горизонтальные и по ширине содержимого. Вертикальные
	 * гасим тем же селектором, каким они заданы на десктопе: правило с
	 * соседним комбинатором весит больше одиночного класса, и обнуление по
	 * `.site-footer__col` до него не доставало — от колонок оставались
	 * вертикальные хвостики слева.
	 */
	.site-footer__col + .site-footer__col,
	.site-footer__brand-col + .site-footer__col {
		border-left: 0;
	}

	.site-footer__col {
		border-top: 1px solid var(--c-grey-900);
		/*
		 * Боковые поля колонки на телефоне не нужны: она и так одна на всю
		 * ширину, а с ними на заголовок оставалось 243 пикселя — «Популярные
		 * темы» при кегле 32 переносились на две строки.
		 */
		padding-inline: 0;
		padding-top: 28px;
		padding-bottom: 0;
	}

	/* Первый блок выровнен по левому краю поля, как и всё остальное в подвале. */
	.site-footer__brand-col {
		text-align: left;
	}

	.site-footer__logo {
		margin-inline: 0;
	}

	.site-footer__social-title {
		margin-top: 80px;
	}

	.site-footer__socials {
		justify-content: flex-start;
		margin-top: 16px;
	}

	.site-footer__socials a {
		width: 34px;
		height: 34px;
	}

	/*
	 * 30, а не 32: «Наши спецпроекты» — самый длинный заголовок из трёх, и на
	 * 32 он переносился на две строки, а соседние оставались в одну. Ряд из
	 * заголовков разной высоты читается как сбой, поэтому кегль подобран по
	 * самому длинному.
	 */
	.site-footer__col-title {
		font-size: 30px;
		line-height: 40px;
	}

	.site-footer__col ul {
		margin-top: 12px;
	}

	.site-footer__col a {
		font-size: 18px;
		line-height: 36px;
	}

	.site-footer__bottom {
		flex-direction: column;
		flex-wrap: wrap;
		gap: 20px;
		padding: 40px 32px 0;
		text-align: left;
	}

	/* Копирайт идёт сразу за адресом, кнопки — последними и по центру. */
	.site-footer__copy {
		order: 2;
		white-space: normal;
	}

	.site-footer__legal {
		order: 3;
		width: 100%;
		max-width: 331px;
		margin-inline: auto;
	}
}