/*
 * Шапка лендинга — Figma 657:6207 (1280×80), меню открытое — 613:17967, 613:18043, 613:18111; Solutions —
 * 748:55082 (макет 30.09).
 * Размеры из снимка: ячейки по 80 в высоту, текст 14/20, линии 1px contrast-10.
 *
 * Линии ячеек — тень внутрь, а не border: в Figma обводка места не занимает, а border добавил бы
 * каждой ячейке по пикселю ширины (ревью front#819).
 *
 * Селекторы пунктов начинаются с `.site-header .wp-block-navigation`: у ядра свои размеры, поля и
 * отступы для пунктов и стрелки подменю (`.wp-block-navigation .wp-block-navigation__submenu-icon`
 * и соседние), на сайте и в редакторе сайта; тема должна быть специфичнее обоих.
 */

/*
 * Шапка и секции с линиями сетки — отдельные слои (isolation у .has-grid-lines), и секция ниже по
 * документу рисуется поверх шапки. Шапка поднимается над ними, иначе выпадающее меню уходит под
 * первую секцию.
 */
.wp-site-blocks > header {
	position: relative;
	z-index: 10;
}

.site-header .site-header__bar {
	align-items: stretch;
	height: var(--wp--preset--spacing--80);
	/* Нижняя линия рамки снаружи панели (strokeAlign OUTSIDE), на ширину колонки 1280. */
	box-shadow: 0 1px 0 var(--wp--preset--color--contrast-10);
}

.site-header .site-header__start,
.site-header .site-header__nav,
.site-header .site-header__account,
.site-header .wp-block-navigation__container {
	align-items: stretch;
	gap: 0;
}

/*
 * Логотип: знак 49×42 (657:6212) и надпись baserd 24/700, между ними 9px, поля ячейки по 48.
 * Название сайта — «Baserd» (оно же в <title>), в логотипе оно строчными, как в макете.
 * Ссылка на главную одна — название сайта; её ::after растянут на всю ячейку, поэтому по знаку
 * тоже можно кликнуть, а скринридер слышит одну ссылку «baserd», а не пустую картинку.
 */
.site-header .site-header__brand {
	position: relative;
	align-items: center;
	gap: 9px;
	padding: 0 var(--wp--preset--spacing--48);
}

.site-header .site-header__mark {
	flex: none;
	margin: 0;
}

.site-header .site-header__mark img {
	display: block;
}

.site-header .site-header__wordmark,
.site-header .site-header__window-brand {
	margin: 0;
	font-size: var(--wp--preset--font-size--size-24);
	font-weight: 700;
	/* Auto в Figma. */
	line-height: normal;
	text-transform: lowercase;
}

.site-header .site-header__wordmark a,
.site-header .site-header__window-brand a {
	color: inherit;
	text-decoration: none;
}

.site-header .site-header__wordmark a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Ячейка пункта: высота 80, поля 24, текст 14/20 500 по центру, линия слева. */
.site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item {
	box-shadow: inset 1px 0 0 var(--wp--preset--color--contrast-10);
}

/*
 * Последний пункт меню (Company, 657:6232) и Log in закрыты линией и справа. Последний — из тех, что
 * стоят в строке: пункты is-window-only видны только в окне меню (ниже).
 */
.site-header .site-header__nav .wp-block-navigation__container > .wp-block-navigation-item:nth-last-child(1 of :not(.is-window-only)),
.site-header .wp-block-navigation .wp-block-navigation__container > .is-login {
	box-shadow: inset 1px 0 0 var(--wp--preset--color--contrast-10), inset -1px 0 0 var(--wp--preset--color--contrast-10);
}

.site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--4);
	box-sizing: border-box;
	height: 100%;
	padding: 0 var(--wp--preset--spacing--24);
	font-size: var(--wp--preset--font-size--size-14);
	font-weight: 500;
	line-height: var(--wp--custom--line-height--size-14);
	color: var(--wp--preset--color--contrast);
}

/*
 * Подпись ячейки шапки в одну строку; узкие экраны — мобильная версия, front#808. Пункты выпадающих
 * меню переносятся: колонка у них фиксированной ширины, а перевод бывает длиннее английского.
 */
.site-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content .wp-block-navigation-item__label {
	white-space: nowrap;
}

/*
 * Подменю открывается наведением и кликом (ТЗ #783: submenuVisibility hover и стрелка). WordPress
 * выводит подпись ссылкой без адреса и рядом отдельную кнопку-стрелку с aria-expanded. Кнопка
 * лежит поверх подписи на всю ячейку — одна клетка сетки на двоих, без position: absolute, —
 * поэтому клик в любом месте ячейки закрепляет меню открытым (мышь уже открыла его наведением,
 * на планшете клик открывает), а с клавиатуры фокус попадает на неё. Адреса у такого пункта нет:
 * подпись под кнопкой мышью не нажать (README, «Шапка и меню»). Стрелку рисует ::after кнопки у
 * правого поля (поле 24 + стрелка 16 + зазор 4). Пункт мега-меню не позиционирован: панель
 * считается от полосы шапки.
 */
.site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu {
	display: grid;
	grid-template: 100% / auto;
}

.site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-item__content {
	grid-area: 1 / 1;
	padding-right: calc(var(--wp--preset--spacing--24) + 16px + var(--wp--preset--spacing--4));
}

.site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-submenu__toggle {
	grid-area: 1 / 1;
	position: relative;
	/* Поверх подписи: у неё z-index 1 от ядра, а у элемента сетки он действует и без position. */
	z-index: 1;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}

.site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-submenu__toggle::after {
	content: "";
	position: absolute;
	top: calc(50% - 8px);
	right: var(--wp--preset--spacing--24);
}

/*
 * В редакторе сайта кнопки нет: рядом с подписью WordPress ставит span со своей стрелкой. Он встаёт
 * в ту же клетку у правого поля и рисует стрелку темы, чтобы шапка в редакторе выглядела как на сайте.
 */
.site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > span.wp-block-navigation__submenu-icon {
	grid-area: 1 / 1;
	justify-self: end;
	align-self: center;
	position: relative;
	z-index: 1;
	width: 16px;
	height: 16px;
	margin: 0 var(--wp--preset--spacing--24) 0 0;
	padding: 0;
	background-color: currentColor;
	-webkit-mask: url("../icons/caret-down.svg") center / 16px 16px no-repeat;
	mask: url("../icons/caret-down.svg") center / 16px 16px no-repeat;
	pointer-events: none;
}

.site-header .wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-submenu__toggle:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: -2px;
}

/*
 * Открытое меню: ячейка подсвечена surface (613:17990, 613:18141). Отдельного состояния наведения
 * в макете нет, наведение и фокус с клавиатуры выглядят так же, как открытый пункт.
 */
.site-header .wp-block-navigation__container > .wp-block-navigation-item:hover,
.site-header .wp-block-navigation__container > .wp-block-navigation-item:focus-within,
.site-header .wp-block-navigation-submenu:has(> .wp-block-navigation-submenu__toggle[aria-expanded="true"]) {
	background-color: var(--wp--preset--color--surface);
}

/* Стрелка — Phosphor CaretDown 16×16 вместо штатного шеврона WordPress. */
.site-header .wp-block-navigation .wp-block-navigation__submenu-icon svg {
	display: none;
}

.site-header .wp-block-navigation-submenu__toggle::after {
	display: block;
	flex: none;
	width: 16px;
	height: 16px;
	padding: 0;
	background-color: currentColor;
	-webkit-mask: url("../icons/caret-down.svg") center / 16px 16px no-repeat;
	mask: url("../icons/caret-down.svg") center / 16px 16px no-repeat;
}

/* У открытого пункта стрелка смотрит вверх (рендер 613:17967): меню закреплено кликом или открыто наведением. */
.site-header .wp-block-navigation-submenu__toggle[aria-expanded="true"]::after {
	transform: rotate(180deg);
}

@media (hover: hover) {
	.site-header .wp-block-navigation-submenu:hover > .wp-block-navigation-submenu__toggle::after {
		transform: rotate(180deg);
	}
}

/*
 * Открыто одно меню. Клик закрепляет панель, и WordPress держит её, пока фокус на кнопке; наведение
 * на другой пункт с подменю открывает вторую панель поверх первой (панели Resources и Company стоят в
 * одной точке, Solutions левее на 86, панель языков заходит на них справа). Пока указатель над другим
 * пунктом, закреплённая панель прячется, её ячейка и стрелка гаснут; указатель ушёл — она снова на месте.
 * Прячется только панель, закреплённая мышью: фокус на её кнопке, но не с клавиатуры. Меню, открытое
 * с клавиатуры, и панель, в которую ушли Tab, остаются: скрытый элемент не принимает фокус, и Tab
 * выпал бы из меню на страницу. В редакторе кнопки нет, правило там не срабатывает.
 */
@media (hover: hover) {
	.site-header:has(.wp-block-navigation-submenu:hover) .wp-block-navigation-submenu:not(:hover):has(> .wp-block-navigation-submenu__toggle:focus:not(:focus-visible)) > .wp-block-navigation__submenu-container {
		visibility: hidden;
		opacity: 0;
	}

	.site-header:has(.wp-block-navigation-submenu:hover) .wp-block-navigation__container > .wp-block-navigation-submenu:not(:hover):has(> .wp-block-navigation-submenu__toggle:focus:not(:focus-visible)) {
		background-color: transparent;
	}

	.site-header:has(.wp-block-navigation-submenu:hover) .wp-block-navigation-submenu:not(:hover):has(> .wp-block-navigation-submenu__toggle:focus:not(:focus-visible)) > .wp-block-navigation-submenu__toggle::after {
		transform: none;
	}
}

/* Язык: поля 32, флаг 16×16, текст 400. */
.site-header .wp-block-navigation .wp-block-navigation__container > .is-language > .wp-block-navigation-item__content {
	padding: 0 calc(var(--wp--preset--spacing--32) + 16px + var(--wp--preset--spacing--4)) 0 var(--wp--preset--spacing--32);
	font-weight: 400;
}

.site-header .wp-block-navigation .wp-block-navigation__container > .is-language > .wp-block-navigation-submenu__toggle::after {
	right: var(--wp--preset--spacing--32);
}

.site-header .wp-block-navigation .wp-block-navigation__container > .is-language > span.wp-block-navigation__submenu-icon {
	margin-right: var(--wp--preset--spacing--32);
}

.site-header [class*="has-flag-"] > .wp-block-navigation-item__content::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background: center / contain no-repeat;
}

.site-header .has-flag-gb > .wp-block-navigation-item__content::before { background-image: url("../icons/flag-gb.svg"); }
/* Флаги DE, FR, PL — для языков из #804. */
.site-header .has-flag-de > .wp-block-navigation-item__content::before { background-image: url("../icons/flag-de.svg"); }
.site-header .has-flag-fr > .wp-block-navigation-item__content::before { background-image: url("../icons/flag-fr.svg"); }
.site-header .has-flag-pl > .wp-block-navigation-item__content::before { background-image: url("../icons/flag-pl.svg"); }

/* Log in: поля 48, линии слева и справа (выше); правая совпадает с линией сетки x = 1360. */
.site-header .wp-block-navigation .wp-block-navigation__container > .is-login > .wp-block-navigation-item__content {
	padding: 0 var(--wp--preset--spacing--48);
}

/*
 * Выпадающие панели — Figma 613:18011 (Resources), 613:18087 (Company), 613:18155 (языки),
 * 748:55126 (Solutions).
 * Фон surface, рамка 1px contrast-10 снаружи слева, справа и снизу: сверху панель примыкает к шапке.
 */
.site-header .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
	border: 0;
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	box-shadow:
		-1px 0 0 var(--wp--preset--color--contrast-10),
		1px 0 0 var(--wp--preset--color--contrast-10),
		0 1px 0 var(--wp--preset--color--contrast-10);
}

.site-header .wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-navigation-item {
	align-items: stretch;
	border-bottom: 1px solid var(--wp--preset--color--contrast-10);
}

/* Нижнюю линию последней строки рисует рамка панели; высота строки остаётся 52, 100 и 56. */
.site-header .wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-navigation-item:last-child {
	border-bottom-color: transparent;
}

.site-header .site-header__nav .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content,
.site-header .site-header__account .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: flex;
	box-sizing: border-box;
	width: 100%;
	/* Снизу 15: строка вместе с линией 1px выходит ровно 52, 100 и 56, как в макете. */
	padding: 16px 24px 15px;
	font-size: var(--wp--preset--font-size--size-16);
	font-weight: 500;
	line-height: var(--wp--custom--line-height--size-16);
	color: var(--wp--preset--color--contrast);
}

/* Наведённый пункт (613:18019, 613:18095): фон primary 8%, заголовок и описание primary. */
.site-header .wp-block-navigation__submenu-container > .wp-block-navigation-item:not(.is-column-title):is(:hover, :focus-within) {
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) 8%, transparent);
}

.site-header .site-header__nav .wp-block-navigation__submenu-container > .wp-block-navigation-item:not(.is-column-title):is(:hover, :focus-within) > .wp-block-navigation-item__content,
.site-header .site-header__account .wp-block-navigation__submenu-container > .wp-block-navigation-item:not(.is-column-title):is(:hover, :focus-within) > .wp-block-navigation-item__content,
.site-header .wp-block-navigation__submenu-container > .wp-block-navigation-item:is(:hover, :focus-within) .wp-block-navigation-item__description {
	color: var(--wp--preset--color--primary);
}

/*
 * Мега-меню: панель 640 по центру шапки (x 320 от её края), две колонки по 320. Строки — заголовок
 * 52 и пункты по 100. Колонку открывает пункт-заголовок (is-column-title), вторую — заголовок с
 * классом is-column-break: всё до него встаёт в первую колонку, всё после — во вторую, строки
 * заполняются сверху (dense). Сколько пунктов в колонке, не важно: неравные колонки дают пустые
 * клетки, а не третью колонку за краем панели. Панель позиционируется от полосы шапки, поэтому
 * пункт и навигация не создают своего контекста.
 */
.site-header .site-header__bar {
	position: relative;
}

.site-header .site-header__nav,
.site-header .site-header__nav li.is-mega {
	position: static;
}

.site-header .site-header__nav li.is-mega > .wp-block-navigation__submenu-container {
	display: grid;
	grid-auto-flow: row dense;
	grid-template-columns: repeat(2, 320px);
	grid-template-rows: 52px;
	grid-auto-rows: minmax(100px, auto);
	top: calc(100% + 1px);
	left: calc(50% - 320px);
}

/*
 * Разделитель колонок на всю высоту панели (Resources, 613:18012) — отдельным слоем поверх строк:
 * у пунктов свой фон (ядро наследует его от панели), и линия в фоне панели под ними не видна.
 */
.site-header .site-header__nav li.is-mega > .wp-block-navigation__submenu-container::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 319px;
	width: 1px;
	background-color: var(--wp--preset--color--contrast-10);
	pointer-events: none;
}

.site-header .site-header__nav li.is-mega:is(:hover, :has(> .wp-block-navigation-submenu__toggle[aria-expanded="true"])) > .wp-block-navigation__submenu-container {
	width: 640px;
}

/*
 * Solutions и Resources (#1128) потеряли вторую колонку: у Solutions осталась одна HOSTING, у Resources —
 * одна TOOLS & SUPPORT, пункта с is-column-break в них больше нет. Без этого правила панель всё равно
 * рисовалась бы на 640 с разделителем посередине и пустой правой половиной. Правило — только для панели
 * без .is-column-break (Company его не теряет, не трогаем), только на полосе от 1280 и явно не на окне
 * меню (.is-menu-open): у окна своя раскладка этих же свойств (правила .is-menu-open ниже) и ширина экрана не
 * гарантирует, что оно не может быть открыто и на широком экране.
 */
@media (min-width: 1280px) {
	.site-header .site-header__nav li.is-mega:not(.is-menu-open *):not(:has(> .wp-block-navigation__submenu-container > .is-column-break)) > .wp-block-navigation__submenu-container {
		grid-template-columns: 320px;
	}

	.site-header .site-header__nav li.is-mega:not(.is-menu-open *):not(:has(> .wp-block-navigation__submenu-container > .is-column-break)) > .wp-block-navigation__submenu-container::after {
		content: none;
	}

	.site-header .site-header__nav li.is-mega:not(.is-menu-open *):not(.is-panel-at-item):not(:has(> .wp-block-navigation__submenu-container > .is-column-break)) > .wp-block-navigation__submenu-container {
		left: calc(50% - 160px);
	}

	.site-header .site-header__nav li.is-mega:not(.is-menu-open *):not(:has(> .wp-block-navigation__submenu-container > .is-column-break)):is(:hover, :has(> .wp-block-navigation-submenu__toggle[aria-expanded="true"])) > .wp-block-navigation__submenu-container {
		width: 320px;
	}
}

/*
 * Solutions (748:55126): панель не по центру шапки, как у Resources и Company, а от левого края своего
 * пункта — в макете 30.09 пункт и панель начинаются с одного x (314 кадра 748:55082). Отсчёт от пункта,
 * поэтому у него свой контекст; высота пункта — высота полосы, так что панель встаёт под линию шапки.
 */
.site-header .site-header__nav li.is-mega.is-panel-at-item {
	position: relative;
}

.site-header .site-header__nav li.is-mega.is-panel-at-item > .wp-block-navigation__submenu-container {
	left: 0;
}

/*
 * Панель начинается на 1 px ниже ячейки, под линией шапки. Невидимая полоска над ней не даёт
 * наведению сорваться, пока указатель переходит с пункта на панель.
 */
.site-header .site-header__nav li.is-mega > .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 100%;
	left: 0;
	height: 1px;
}

.site-header li.is-mega > .wp-block-navigation__submenu-container > li {
	grid-column: 1;
}

.site-header li.is-mega > .wp-block-navigation__submenu-container > .is-column-break,
.site-header li.is-mega > .wp-block-navigation__submenu-container > .is-column-break ~ li {
	grid-column: 2;
}

/* Последняя строка первой колонки без нижней линии, как и последняя строка панели. */
.site-header li.is-mega > .wp-block-navigation__submenu-container > li:has(+ .is-column-break) {
	border-bottom-color: transparent;
}

/*
 * Заголовок второй колонки Company (613:18101, «ABOUT BASERD») в макете прозрачный: строка 52
 * остаётся, текст виден только скринридеру, разделитель колонок начинается со второй строки
 * (613:18091, 613:18095). Решение агента Романа по ревью #820; вопрос дизайнерам — в #783.
 * Прячется только заголовок без адреса (span после baserd_menu_column_title): невидимая ссылка
 * забирала бы фокус с клавиатуры. В редакторе заголовок виден, чтобы его можно было править.
 */
.site-header li.is-mega > .wp-block-navigation__submenu-container > .is-title-hidden > span.wp-block-navigation-item__content {
	opacity: 0;
}

.site-header .site-header__nav li.is-mega:has(> .wp-block-navigation__submenu-container > .is-title-hidden) > .wp-block-navigation__submenu-container::after {
	top: 52px;
}

/* Пункт: заголовок 16/24 500, под ним через 4 описание 14/20 400 muted (613:18016). */
.site-header .site-header__nav li.is-mega > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

.site-header li.is-mega .wp-block-navigation-item__description {
	display: block;
	font-size: var(--wp--preset--font-size--size-14);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--size-14);
	color: var(--wp--preset--color--muted);
}

/* Заголовок колонки: 14/20 500 muted, текст в макете набран капсом (613:18014). */
.site-header .site-header__nav li.is-mega > .wp-block-navigation__submenu-container > .is-column-title > .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--size-14);
	line-height: var(--wp--custom--line-height--size-14);
	color: var(--wp--preset--color--muted);
}

/* Языки: панель 240 вровень с правым краем пункта EN, строки 56, флаг 24, зазор 12 (613:18157). */
.site-header .site-header__account li.is-language > .wp-block-navigation__submenu-container {
	top: 100%;
	right: 0;
	left: auto;
}

.site-header .site-header__account li.is-language:is(:hover, :has(> .wp-block-navigation-submenu__toggle[aria-expanded="true"])) > .wp-block-navigation__submenu-container {
	width: 240px;
}

.site-header .site-header__account li.is-language > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	align-items: center;
	gap: 12px;
}

.site-header li.is-language > .wp-block-navigation__submenu-container [class*="has-flag-"] > .wp-block-navigation-item__content::before {
	width: 24px;
	height: 24px;
}

/*
 * Телефон и планшет — front#808, по кадрам 768 и 375 — front#1044 (ниже): шапка собрана из тех же
 * ячеек, линий и цветов, что на 1440. Строка меню занимает до 1166 px (немецкий), поэтому она
 * целиком только от 1280; уже неё главное меню уходит в кнопку «меню» справа, а язык и Log in
 * остаются в полосе — до 1024, уже Log in только в окне меню.
 *
 * У главного меню overlayMenu «always»: WordPress выводит кнопку и окно меню при любой ширине, а
 * от 1280 окно раскладывается обратно в строку — обёртки ядра не дают своей коробки (display:
 * contents), кнопки прячутся. Окно, открытое на узком экране, остаётся окном и после поворота
 * планшета, пока его не закроют.
 */
.site-header {
	--baserd-header-height: var(--wp--preset--spacing--80);
	--baserd-header-cell: var(--wp--preset--spacing--24);
}

.site-header .site-header__bar {
	height: var(--baserd-header-height);
}

@media (min-width: 1280px) {
	.site-header .site-header__nav .wp-block-navigation__responsive-container-open,
	.site-header .site-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-close {
		display: none;
	}

	.site-header .site-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open),
	.site-header .site-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) :is(.wp-block-navigation__responsive-close, .wp-block-navigation__responsive-dialog, .wp-block-navigation__responsive-container-content) {
		display: contents;
	}

	/*
	 * Логотип, Log in и языки в навигации Main — для окна: в строке они уже есть в полосе. Обёртку li
	 * названию сайта ставит только сервер, в редакторе абзац лежит в списке сам.
	 */
	.site-header .site-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > :is(.is-window-only, .site-header__window-brand, li:has(> .site-header__window-brand)) {
		display: none;
	}
}

/*
 * Уже 1280: знак слева, справа язык, Log in и кнопка меню. Группа знака и меню не даёт своей
 * коробки, поэтому все ячейки стоят в одном ряду полосы и порядок задаётся здесь.
 */
@media (max-width: 1279px) {
	.site-header .site-header__start {
		display: contents;
	}

	.site-header .site-header__brand {
		margin-right: auto;
	}

	.site-header .site-header__nav {
		order: 1;
	}
}

/* Кнопки «меню» и «закрыть»: ячейка во всю высоту полосы, знак 24 (Phosphor List и X). */
.site-header .site-header__nav .wp-block-navigation__responsive-container-open,
.site-header .site-header__nav .wp-block-navigation__responsive-container-close {
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--baserd-header-button, var(--baserd-header-height));
	height: var(--baserd-header-height);
	color: var(--wp--preset--color--contrast);
}

.site-header .site-header__nav .wp-block-navigation__responsive-container-open {
	box-shadow: inset -1px 0 0 var(--wp--preset--color--contrast-10);
}

/* Линию слева рисует Log in рядом, как у кнопки «меню» в полосе. */
.site-header .site-header__nav .wp-block-navigation__responsive-container-close {
	display: flex;
	box-shadow: inset -1px 0 0 var(--wp--preset--color--contrast-10);
}

.site-header .site-header__nav :is(.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close) svg {
	display: none;
}

.site-header .site-header__nav :is(.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close)::before {
	content: "";
	width: 24px;
	height: 24px;
	background-color: currentColor;
	-webkit-mask: url("../icons/list.svg") center / 24px 24px no-repeat;
	mask: url("../icons/list.svg") center / 24px 24px no-repeat;
}

.site-header .site-header__nav .wp-block-navigation__responsive-container-close::before {
	-webkit-mask-image: url("../icons/x.svg");
	mask-image: url("../icons/x.svg");
}

.site-header .site-header__nav :is(.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close):focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: -2px;
}

/*
 * Окно меню: во весь экран, фон страницы. Сверху строка высотой с полосу шапки и с теми же ячейками
 * на тех же местах: логотип, Log in и «закрыть» на месте кнопки «меню» (front#847: пустая строка с
 * одним крестиком выглядела недогруженной, а вход пропадал вместе с полосой под окном). Логотип и
 * Log in — пункты навигации Main, а не ссылки полосы: окно закрывает полосу, Tab ходит по кругу внутри
 * окна, а aria-modal прячет полосу от скринридера. Ниже пункты столбцом по линиям, как строки выпадающих панелей, в конце — языки. Резервные белый
 * фон и чёрный текст ядра здесь не нужны.
 */
.site-header .site-header__nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	padding: 0 var(--wp--style--root--padding-right) 0 var(--wp--style--root--padding-left);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.site-header .site-header__nav .is-menu-open .wp-block-navigation__responsive-close {
	max-width: none;
}

.site-header .site-header__nav .is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch;
	padding: 0 0 var(--wp--preset--spacing--48);
	box-shadow: inset 0 calc(var(--baserd-header-height) + 1px) 0 -1px var(--wp--preset--color--base), inset 0 calc(var(--baserd-header-height) + 1px) 0 0 var(--wp--preset--color--contrast-10);
}

.site-header .site-header__nav .is-menu-open .wp-block-navigation__container {
	align-items: stretch;
	width: 100%;
}

/* Ячейки верхней строки: логотип, Log in, место кнопки «закрыть» (она лежит поверх, у правого края). */
.site-header .site-header__nav .is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto var(--baserd-header-button, var(--baserd-header-height));
	grid-template-rows: var(--baserd-header-height);
	gap: 0;
}

.site-header .site-header__nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	grid-column: 1 / -1;
}

.site-header .site-header__nav .is-menu-open .wp-block-navigation__container > li:has(> .site-header__window-brand) {
	grid-area: 1 / 1;
	justify-self: start;
	box-shadow: none;
}

.site-header .site-header__nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item.is-login {
	grid-area: 1 / 2;
}

.site-header .site-header__window-brand a {
	display: flex;
	align-items: center;
	gap: 9px;
	box-sizing: border-box;
	height: var(--baserd-header-height);
	padding: 0 var(--wp--preset--spacing--48);
}

/* Знак — файл знака полосы (паттерн baserd/header-mark), здесь фоном: ссылка на главную одна. */
.site-header .site-header__window-brand a::before {
	content: "";
	flex: none;
	width: 49px;
	height: 42px;
	background: url("../images/logo-mark.svg") center / contain no-repeat;
}

/*
 * Строки списка. Log in оформлен как в полосе, логотип — как логотип полосы. Правую линию последнего
 * пункта строки (выше, та же специфичность) у Company в окне это правило перебивает порядком.
 */
.site-header .site-header__nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not(.is-login, :has(> .site-header__window-brand)) {
	align-items: stretch;
	box-shadow: inset 0 -1px 0 var(--wp--preset--color--contrast-10);
}

.site-header .site-header__nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not(.is-login) > .wp-block-navigation-item__content {
	height: 56px;
	padding: 0 var(--baserd-header-cell);
	font-size: var(--wp--preset--font-size--size-16);
	line-height: var(--wp--custom--line-height--size-16);
}

.site-header .site-header__nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:is(:hover, :focus-within) {
	background-color: transparent;
}

/*
 * Solutions, Resources, Company и языки в окне — заголовки групп: WordPress держит подменю в окне
 * открытыми и прячет их кнопки, поэтому пункты стоят под заголовком списком. Выпадающий список языков, как в
 * полосе, в окне не выйдет: aria-expanded кнопки подменю ядро держит «true», пока окно открыто.
 * Иерархия та же, что у панелей полосы (front#937): Solutions, Resources и Company написаны как
 * пункты полосы, под ними заголовки колонок капсом и пункты с описаниями; с 744 колонки стоят рядом,
 * как в панели. Описание — половина смысла пункта: «Penetration Testing» без него не объясняет,
 * что купят.
 */
.site-header .site-header__nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-submenu {
	grid-template: auto auto / 100%;
}

.site-header .site-header__nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-item__content {
	height: 52px;
	padding: 16px var(--baserd-header-cell) 0;
	font-size: var(--wp--preset--font-size--size-14);
	/* У пункта языка в полосе 400, заголовок группы — как у Resources и Company. */
	font-weight: 500;
	line-height: var(--wp--custom--line-height--size-14);
	color: var(--wp--preset--color--muted);
	text-transform: uppercase;
	cursor: default;
}

.site-header .site-header__nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-submenu.is-mega > .wp-block-navigation-item__content {
	height: 56px;
	padding-top: 16px;
	font-size: var(--wp--preset--font-size--size-16);
	line-height: var(--wp--custom--line-height--size-16);
	color: var(--wp--preset--color--contrast);
	text-transform: none;
}

.site-header .site-header__nav .is-menu-open li:is(.is-mega, .is-language) > .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
	display: block;
	grid-area: 2 / 1;
	position: static;
	width: auto;
	min-width: 0;
	padding: 0;
	box-shadow: none;
}

.site-header .site-header__nav .is-menu-open li:is(.is-mega, .is-language) > .wp-block-navigation__submenu-container::before,
.site-header .site-header__nav .is-menu-open li:is(.is-mega, .is-language) > .wp-block-navigation__submenu-container::after {
	display: none;
}

/* Невидимый заголовок второй колонки Company держит строку только рядом с первой колонкой. */
.site-header .site-header__nav .is-menu-open li.is-mega > .wp-block-navigation__submenu-container > .is-title-hidden {
	display: none;
}

@media (min-width: 744px) {
	.site-header .site-header__nav .is-menu-open li.is-mega > .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
		display: grid;
		grid-auto-flow: row dense;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--24);
	}

	.site-header .site-header__nav .is-menu-open li.is-mega > .wp-block-navigation__submenu-container > .is-title-hidden {
		display: block;
	}
}

.site-header .site-header__nav .is-menu-open li:is(.is-mega, .is-language) > .wp-block-navigation__submenu-container > .wp-block-navigation-item {
	border-bottom: 0;
}

.site-header .site-header__nav .is-menu-open li:is(.is-mega, .is-language) > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	padding: 14px var(--baserd-header-cell);
}

/* Языки: флаг 24 у каждой строки, как в списке полосы; у заголовка группы — только код текущего. */
.site-header .site-header__nav .is-menu-open li.is-language > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	align-items: center;
	gap: 12px;
}

.site-header .site-header__nav .is-menu-open .wp-block-navigation__container > .is-language > .wp-block-navigation-item__content::before {
	content: none;
}

/*
 * Планшет — кадр 846:23380 (768×80), front#1044: полоса во всю ширину экрана, а не колонки —
 * логотип с полями 48 от края, язык с полями 32 (ячейка 122), кнопка меню 120 у правого края.
 * Log in в полосе нет: он в окне меню. Линии: слева у языка, слева и справа у кнопки меню.
 */
@media (max-width: 1023px) {
	.site-header {
		--baserd-header-button: 120px;
	}

	/* Поля ядро ставит auto с !important, поэтому полоса сдвигается left, а не отрицательными полями. */
	.site-header .site-header__bar {
		position: relative;
		left: calc(var(--wp--style--root--padding-left) * -1);
		box-sizing: border-box;
		width: calc(100% + var(--wp--style--root--padding-left) + var(--wp--style--root--padding-right));
		max-width: none;
	}

	.site-header .site-header__account .is-login {
		display: none;
	}

	/* Линии сетки в кадре начинаются под полосой: через ячейки шапки они не идут. */
	.wp-site-blocks > header.has-grid-lines::before {
		content: none;
	}

	.site-header .site-header__nav .wp-block-navigation__responsive-container-open {
		box-shadow: inset 1px 0 0 var(--wp--preset--color--contrast-10), inset -1px 0 0 var(--wp--preset--color--contrast-10);
	}

	/*
	 * Окно меню — тоже во всю ширину, чтобы «закрыть» встала на место кнопки «меню». Строки списка
	 * начинаются там же, где логотип.
	 */
	.site-header .site-header__nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
		--baserd-header-cell: var(--wp--preset--spacing--48);
		padding: 0;
	}
}

/*
 * Телефон — кадр 851:29550 (375×68): полоса 68, логотип и язык с полями 16, язык с флагом (ячейка
 * 90), кнопка меню 56.
 */
@media (max-width: 767px) {
	.site-header {
		--baserd-header-height: 68px;
		--baserd-header-button: 56px;
		--baserd-header-cell: var(--wp--preset--spacing--16);
	}

	.site-header .site-header__brand,
	.site-header .site-header__window-brand a {
		padding: 0 var(--wp--preset--spacing--16);
	}

	.site-header .wp-block-navigation .wp-block-navigation__container > .is-language > .wp-block-navigation-item__content {
		padding: 0 calc(var(--wp--preset--spacing--16) + 16px + var(--wp--preset--spacing--4)) 0 var(--wp--preset--spacing--16);
	}

	.site-header .wp-block-navigation .wp-block-navigation__container > .is-language > .wp-block-navigation-submenu__toggle::after {
		right: var(--wp--preset--spacing--16);
	}

	.site-header .site-header__nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
		--baserd-header-cell: var(--wp--preset--spacing--16);
	}

	/* Log in в окне меню, рядом с логотипом. */
	.site-header .wp-block-navigation .wp-block-navigation__container > .is-login > .wp-block-navigation-item__content {
		padding: 0 var(--wp--preset--spacing--16);
	}
}