/*
 * Matland — базовый слой: типографика, кнопки, шапка, подвал, контакты.
 * Секции и карточки живут в blocks.css.
 *
 * Цвета, отступы и шрифты приходят из theme.json как --wp--preset--*.
 * Здесь только то, что пресетами не выражается.
 */

/* ---------------------------------------------------------------- База --- */

:root {
	--matland-header-height: 68px;
	--matland-tap: 44px; /* минимальный тап-таргет, WCAG 2.5.8 */
}

/* Ядро задаёт border-box только блокам. Без глобального правила элемент
   с width:100% и своим padding (кнопка «во всю ширину» в карточке) вылезает
   за контейнер и рождает горизонтальную прокрутку. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden; /* никакой горизонтальной прокрутки на узких экранах */
}

img {
	max-width: 100%;
	height: auto;
}

/* Плавная прокрутка к якорям, но с уважением к системной настройке. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Липкая шапка не должна накрывать заголовок секции при переходе по якорю. */
[id] {
	scroll-margin-top: calc(var(--matland-header-height) + 16px);
}

/* ------------------------------------------------------- Доступность --- */

:where(a, button, summary, input, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--teal);
	outline-offset: 2px;
	border-radius: 4px;
}

.matland-skip-link {
	position: absolute;
	left: -9999px;
	z-index: 100;
	padding: 12px 20px;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--base);
	border-radius: 0 0 var(--wp--custom--radius--sm) 0;
}

.matland-skip-link:focus {
	left: 0;
	top: 0;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ------------------------------------------------------------ Кнопки --- */

.matland-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--matland-tap);
	padding: 13px 26px;
	border: 1.5px solid transparent;
	border-radius: var(--wp--custom--radius--pill);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

/* Кнопки ядра (core/button) получают ту же отдачу, что и кнопки темы:
   в theme.json задаётся только цвет наведения, без перехода и смещения. */
.wp-element-button,
.wp-block-button__link {
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease,
		box-shadow 0.15s ease;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.matland-btn:hover,
	.wp-block-button__link:hover {
		transform: translateY(-2px);
	}

	.matland-btn:active,
	.wp-block-button__link:active {
		transform: translateY(0);
	}
}

/* Заливные кнопки на наведении получают мягкую тень своего цвета —
   контурные остаются плоскими, у них меняется заливка. */
@media (hover: hover) {
	.matland-btn--trial:hover,
	.matland-btn--gold:hover {
		box-shadow: 0 8px 20px rgba(200, 154, 6, 0.35);
	}

	.matland-btn--navy:hover {
		box-shadow: 0 8px 20px rgba(2, 43, 54, 0.3);
	}
}

.matland-btn--trial {
	background: #d4af37;
	color: var(--wp--preset--color--navy);
}

.matland-btn--trial:hover,
.matland-btn--trial:focus {
	background: #bf9c2e;
	color: var(--wp--preset--color--navy);
}

.matland-btn--gold {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--base);
}

.matland-btn--gold:hover,
.matland-btn--gold:focus {
	background: var(--wp--preset--color--gold-dark);
	color: var(--wp--preset--color--base);
}

.matland-btn--navy {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--base);
}

.matland-btn--navy:hover,
.matland-btn--navy:focus {
	background: var(--wp--preset--color--navy-soft);
	color: var(--wp--preset--color--base);
}

.matland-btn--outline {
	background: transparent;
	border-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--navy);
}

.matland-btn--outline:hover,
.matland-btn--outline:focus {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--base);
}

.matland-btn--outline-light {
	background: transparent;
	border-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--base);
}

.matland-btn--outline-light:hover,
.matland-btn--outline-light:focus {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--navy);
}

.matland-btn--full {
	display: flex;
	width: 100%;
}

/* Блок «Контакт» с классом кнопки: правила .matland-contact идут ниже по
   файлу и перебивали бы отступы кнопки, из-за чего Telegram рядом с
   «Пробным занятием» выходил заметно мельче. Возвращаем размеры кнопки. */
.matland-contact.matland-btn {
	min-height: 44px;
	padding: 13px 26px;
	gap: 10px;
}

/* ------------------------------------------------------------ Логотип --- */

.matland-logo {
	display: inline-flex;
	flex: none;
	line-height: 0;
	border-radius: 14px;
}

.matland-logo__mark {
	width: var(--matland-logo-size, 48px);
	height: var(--matland-logo-size, 48px);
}

.matland-logo__plate,
.matland-logo__letter {
	transition: fill 0.2s ease, stroke 0.2s ease;
}

/* На наведении знак «переворачивается» цветами: плашка золотая, буква тёмная. */
.matland-logo--dark:hover .matland-logo__plate {
	fill: var(--wp--preset--color--gold);
}

.matland-logo--dark:hover .matland-logo__letter {
	stroke: var(--wp--preset--color--navy);
}

.matland-logo--light:hover .matland-logo__plate {
	fill: var(--wp--preset--color--base);
}

/* ------------------------------------------------ Контакты и иконки --- */

.matland-icon {
	width: var(--matland-icon-size, 18px);
	height: var(--matland-icon-size, 18px);
	flex: none;
}

.matland-contact {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	/* Строка текста даёт всего 20px по высоте — мимо минимума 24×24 (WCAG
	   2.5.8). Добираем отступами, на узких экранах до полного тап-таргета. */
	min-height: 32px;
	padding-block: 6px;
	text-decoration: none;
	transition: color 0.15s ease;
}

@media (max-width: 781px) {
	.matland-contact {
		min-height: var(--matland-tap);
	}
}

.matland-social {
	display: flex;
	align-items: center;
	gap: 4px;
}

.matland-social__link {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Значок 18px в боксе 30px: цель нажатия проходит минимум 24×24, но
	   иконки стоят плотно. Бокс в 44px раздвигал бы их почти на 40px. */
	padding: 6px;
	border-radius: 8px;
	color: inherit;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.matland-social__link:hover {
	color: var(--wp--preset--color--brass);
	background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 781px) {
	/* На телефоне добираем до полного тап-таргета; соседние зоны не
	   пересекаются за счёт зазора между ними. */
	.matland-social__link {
		padding: 11px;
	}
}

/* ------------------------------------------------------ Верхняя полоса --- */

.matland-topbar {
	background: var(--wp--preset--color--navy);
	color: #c8d1da;
}

/* Части шаблона — соседи в корневом потоке, и общий blockGap (20px) оставлял
   между шапкой и тёмной плашкой белую полосу. Плашка примыкает вплотную;
   правило висит на обёртке части шаблона, своего класса у неё нет. */
.wp-site-blocks > :has(> .matland-topbar) {
	margin-block-start: 0;
}

.matland-topbar a {
	color: rgba(255, 255, 255, 0.78);
}

.matland-topbar a:hover {
	color: var(--wp--preset--color--brass);
}

.matland-topbar__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(17px, 4.2vw, 26px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: 0.3px;
	color: #f8f5e9;
	margin: 0;
}

.matland-topbar__schools {
	font-size: clamp(11px, 2.6vw, 12px);
	font-weight: 500;
	letter-spacing: 0.5px;
	color: #c8d1da;
	margin: 0;
}

/* Декоративный разделитель из макета: линия с ромбом посередине.
   Это обычный core/separator — ромб и разрыв рисуются псевдоэлементом,
   чтобы не заводить блок ради трёх пустых <span>. */
hr.matland-topbar__divider {
	position: relative;
	overflow: visible;
	max-width: 307px;
	height: 1px;
	margin: 14px auto 15px;
	border: 0;
	background: var(--wp--preset--color--brass);
}

hr.matland-topbar__divider::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 6px;
	height: 6px;
	background: var(--wp--preset--color--brass);
	/* Обводка цветом фона разрывает линию вокруг ромба. */
	box-shadow: 0 0 0 5px var(--wp--preset--color--navy);
	transform: translate(-50%, -50%) rotate(45deg);
}

/* Порог бургера. Ядро переключает меню на оверлей ниже 600px, но ряд шапки
   (логотип с названием ~240px, семь пунктов ~584px, две кнопки ~317px плюс
   зазоры) требует около 1190px и с боковыми отступами помещается примерно
   с 1240px. Ниже — скрываем горизонтальное меню и показываем бургер. */
@media (min-width: 600px) and (max-width: 1239px) {
	.matland-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.matland-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

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

.matland-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid #e6e8ee;
}

/* backdrop-filter делает шапку containing block для position:fixed внутри
   неё — и полноэкранный оверлей меню ядра начинает считать координаты от
   шапки, а не от вьюпорта: получается обрезанная полоска. Пока меню открыто,
   размытие выключаем; фон и так непрозрачный. */
.matland-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
	backdrop-filter: none;
}

.matland-header__inner {
	min-height: var(--matland-header-height);
}

/* Название сайта — ссылка на главную; строка в 22px не дотягивает до
   минимальной цели 24×24, добираем вертикальным отступом. */
.matland-header .wp-block-site-title a {
	display: inline-block;
	padding-block: 3px;
}

/* Размер шрифта меню приходит из самого блока (fontSize: small = 13px);
   переопределять его здесь нельзя — на 14px семь пунктов перестают
   помещаться в контейнер и ломаются на вторую строку. */
.matland-header .wp-block-navigation-item__content {
	padding: 6px 0;
}

/* Кнопки в шапке компактнее обычных: в ряд с логотипом и семью пунктами
   меню полноразмерные не влезают. Так же было в макете. */
.matland-header__actions .matland-btn {
	padding: 10px 18px;
	font-size: 14px;
	white-space: nowrap;
}

/* Ряд шапки не переносится, поэтому запрещаем разрыв подписей — но только
   там, где меню развёрнуто. Ниже стоит бургер, места меньше, и название
   сайта должно спокойно переноситься на вторую строку. */
@media (min-width: 1240px) {
	.matland-header .wp-block-navigation-item__content,
	.matland-header .wp-block-site-title,
	.matland-header .wp-block-site-tagline {
		white-space: nowrap;
	}
}

/* Между логотипом, меню и кнопками нужен гарантированный зазор: при
   space-between блоки иначе смыкаются вплотную, как только ряд заполнен. */
.matland-header__inner {
	gap: 24px;
}

/* Ряд шапки плотный, и flex сжимает логотип до нескольких пикселей, отдавая
   место непереносимому названию. Фиксируем его размер. */
.matland-header .wp-block-site-logo {
	flex: none;
}

.matland-header .wp-block-site-logo img {
	width: 52px;
	height: auto;
}

.matland-header .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--teal);
}

/* Стрелка подменю. Готовый SVG ядра крупноват и не совпадает по толщине с
   типографикой меню — прячем его и рисуем тонкий шеврон псевдоэлементом:
   он наследует цвет пункта и доворачивается при раскрытии. Сама кнопка при
   этом остаётся 24×24, чтобы по ней можно было попасть. */
.matland-header .wp-block-navigation__submenu-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
}

.matland-header .wp-block-navigation__submenu-icon svg {
	display: none;
}

.matland-header .wp-block-navigation__submenu-icon::after {
	content: "";
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	/* Сдвиг компенсирует смещение центра при повороте квадрата. */
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.2s ease;
}

/* Иконка живёт то внутри ссылки, то внутри отдельной кнопки-переключателя —
   зависит от того, ведёт ли пункт на страницу. Ловим оба случая по родителю. */
.matland-header .has-child:hover .wp-block-navigation__submenu-icon::after,
.matland-header .has-child:focus-within .wp-block-navigation__submenu-icon::after,
.matland-header [aria-expanded="true"] .wp-block-navigation__submenu-icon::after {
	transform: translateY(1px) rotate(225deg);
}

/* Цвета оверлея (тёмный фон, светлый текст) ядро применяет и к выпадающему
   подменю на десктопе — на светлой шапке это выглядит чужеродно. Возвращаем
   белую карточку с тенью, как в макете; в раскрытом мобильном меню ниже по
   файлу подменю снова становится прозрачным. */
.matland-header
	.wp-block-navigation__responsive-container:not(.is-menu-open)
	.wp-block-navigation__submenu-container {
	border: 0;
	border-radius: var(--wp--custom--radius--sm);
	padding: 8px;
	min-width: 190px;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	box-shadow: var(--wp--preset--shadow--dropdown);

	/* Ядро переключает подменю через display: none → flex, а такой переход
	   анимировать нельзя. Держим его в потоке (оно и так absolute, места не
	   занимает) и прячем прозрачностью — тогда появление можно смягчить.
	   visibility в переходе нужна, чтобы скрытое подменю не ловило курсор. */
	display: flex !important;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

.matland-header
	.wp-block-navigation__responsive-container:not(.is-menu-open)
	.has-child:hover
	> .wp-block-navigation__submenu-container,
.matland-header
	.wp-block-navigation__responsive-container:not(.is-menu-open)
	.has-child:focus-within
	> .wp-block-navigation__submenu-container,
.matland-header
	.wp-block-navigation__responsive-container:not(.is-menu-open)
	.wp-block-navigation-submenu__toggle[aria-expanded="true"]
	+ .wp-block-navigation__submenu-container {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
	transition-delay: 0s;
}

/* Курсор идёт от пункта к подменю по диагонали и успевает выйти за пределы
   обоих — невидимая полоса сверху перекрывает этот зазор. */
.matland-header
	.wp-block-navigation__responsive-container:not(.is-menu-open)
	.wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -12px;
	height: 12px;
}

@media (prefers-reduced-motion: reduce) {
	.matland-header
		.wp-block-navigation__responsive-container:not(.is-menu-open)
		.wp-block-navigation__submenu-container {
		transition: none;
		transform: none;
	}
}

.matland-header
	.wp-block-navigation__responsive-container:not(.is-menu-open)
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item__content {
	color: var(--wp--preset--color--contrast);
}

.matland-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 8px 12px;
	border-radius: 8px;
	transition: background-color 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}

.matland-header
	.wp-block-navigation__responsive-container:not(.is-menu-open)
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--teal);
	padding-left: 16px;
}

/* Порядок в мобильной шапке: логотип — кнопка записи — бургер. Бургер уходит
   к правому краю, под большой палец, а главное действие остаётся на виду. */
@media (max-width: 1239px) {
	.matland-header__inner > .wp-block-navigation {
		order: 3;
	}

	.matland-header__actions {
		order: 2;
	}

	/* Прижать кнопку и бургер друг к другу у правого края через
	   margin-left: auto не выходит — раскладочный CSS ядра обнуляет внешние
	   отступы у детей flex-группы. Вместо этого растягиваем блок логотипа:
	   он забирает свободное место, и правая пара смыкается. */
	.matland-header__inner > :first-child {
		flex: 1;
	}
}

/* Выезд меню сбоку.

   Ядро переключает оверлей через display: none → flex, а такой переход
   анимировать нельзя: при закрытии элемент исчезает мгновенно. Поэтому на
   мобильных держим панель в DOM постоянно и прячем сдвигом за правый край —
   тогда и открытие, и закрытие едут одинаково плавно.

   visibility в переходе убирает закрытую панель из таб-порядка и от
   скринридеров, pointer-events — чтобы невидимая панель не перехватывала
   клики по странице. */
@media (max-width: 1239px) {
	/* :not(.hidden-by-default) нужен не по смыслу, а ради веса селектора:
	   выше 600px ядро правилом с тремя классами возвращает контейнеру обычное
	   позиционирование, и без этого довеска панель перестаёт быть оверлеем. */
	.matland-header .wp-block-navigation__responsive-container:not(.hidden-by-default) {
		display: flex !important;
		position: fixed;
		inset: 0;
		z-index: 100;
		/* Сдвигаем не сам контейнер, а его содержимое: уехавший за правый
		   край fixed-элемент растягивает прокрутку документа, и overflow-x
		   на body от этого не спасает. Контейнер стоит на месте и обрезает
		   выехавшую панель. */
		overflow: hidden;
		visibility: hidden;
		pointer-events: none;
		transition: visibility 0s linear 0.32s;
	}

	.matland-header .wp-block-navigation__responsive-container:not(.hidden-by-default) > * {
		width: 100%;
		transform: translateX(100%);
		transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.matland-header .wp-block-navigation__responsive-container.is-menu-open {
		visibility: visible;
		pointer-events: auto;
		transition-delay: 0s;
	}

	.matland-header .wp-block-navigation__responsive-container.is-menu-open > * {
		transform: translateX(0);
	}
}

@media (max-width: 1239px) and (prefers-reduced-motion: reduce) {
	.matland-header .wp-block-navigation__responsive-container:not(.hidden-by-default) > * {
		transition: none;
	}
}

/* Бургер и крестик ядра: увеличиваем тап-таргет и красим под тему.
   display здесь не трогаем — им ядро управляет видимостью кнопки по
   брейкпоинту, и наш более специфичный селектор показал бы бургер на
   десктопе поверх обычного меню. */
.matland-header .wp-block-navigation__responsive-container-open,
.matland-header .wp-block-navigation__responsive-container-close {
	min-width: var(--matland-tap);
	min-height: var(--matland-tap);
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--navy);
}

/* Цвета раскрытого меню задаём здесь, а не атрибутами блока: указанные в
   блоке, они превращаются в пресетные классы с !important и красят заодно
   выпадающее подменю на десктопе. Ядро ставит белый фон оверлея инлайном,
   поэтому перебить его можно только так же жёстко. */
.matland-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 24px;
	background-color: var(--wp--preset--color--navy) !important;
	color: var(--wp--preset--color--base) !important;
}

.matland-header .wp-block-navigation__responsive-container.is-menu-open a,
.matland-header .wp-block-navigation__responsive-container.is-menu-open button {
	color: var(--wp--preset--color--base) !important;
}

/* Пункты меню в оверлее начинаются сверху, а не растягиваются по центру
   экрана: со списком из семи пунктов центрирование выталкивает половину
   за нижний край. */
.matland-header
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
	align-items: flex-start;
	justify-content: flex-start;
	padding-top: 8px;
	overflow-y: auto;
}

.matland-header
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container,
.matland-header
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item {
	align-items: flex-start;
	gap: 4px;
}

/* Пункты с подменю ядро центрирует — рядом с левыми соседями это выглядит
   сбитым. */
.matland-header
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-submenu {
	text-align: left;
}

/* Раскрытое подменю в оверлее ядро центрирует — рядом с левыми пунктами
   верхнего уровня это выглядит сбитым. Выравниваем по левому краю и сдвигаем
   вложенность, чтобы иерархия читалась. */
.matland-header
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container {
	align-items: flex-start;
	padding: 0 0 0 16px;
	background: transparent;
	box-shadow: none;
	text-align: left;
}

.matland-header
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item__content {
	font-size: 16px;
	opacity: 0.85;
}

.matland-header
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
	/* В оверлее пункты крупные и с воздухом — попасть пальцем без прицеливания. */
	padding: 10px 0;
	font-size: 18px;
	min-height: var(--matland-tap);
	display: flex;
	align-items: center;
}

.matland-header
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--base);
}

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

.matland-footer {
	background: var(--wp--preset--color--navy);
	color: #c9d0e0;
}

.matland-footer a {
	color: #c9d0e0;
}

.matland-footer a:hover {
	color: var(--wp--preset--color--teal);
}

.matland-footer h2,
.matland-footer h3,
.matland-footer h4 {
	color: var(--wp--preset--color--base);
}

.matland-footer__list {
	list-style: none;
	margin: 0;
}

.matland-footer__list li {
	padding: 6px 0;
}

/* Ссылки в подвале стоят плотно — растягиваем зону нажатия по вертикали. */
.matland-footer__list a {
	display: inline-block;
	padding: 4px 0;
	transition: color 0.18s ease, transform 0.18s ease;
}

@media (hover: hover) {
	.matland-footer__list a:hover {
		transform: translateX(4px);
	}
}

.matland-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: var(--wp--preset--font-size--x-small);
	color: #8b95b3;
}

/* В подвале стоит тот же знак, что и в шапке, только в обратных цветах:
   золотая плашка с тёмной буквой читается на navy-фоне. */
.matland-footer__logo .matland-logo {
	flex: none;
}

/* --------------------------------------------------------- Мобильные --- */

@media (max-width: 781px) {
	/* Кнопку записи не прячем в бургер — это главное действие на телефоне. */
	.matland-header__actions .matland-btn {
		padding: 11px 18px;
		font-size: 14px;
	}

	.matland-header__actions .matland-btn--outline {
		display: none; /* «Вход в кабинет» остаётся в меню-оверлее */
	}
}

@media (max-width: 600px) {
	/* На узком экране логотип, название, бургер и кнопка записи вчетвером не
	   помещаются — название начинает налезать на бургер. Оставляем логотип:
	   он узнаваем и так же ведёт на главную. Для чтения с экрана название
	   никуда не девается, только визуально скрыто. */
	.matland-header .wp-block-site-title,
	.matland-header .wp-block-site-tagline {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.matland-header__inner {
		gap: 12px;
	}
}

@media (max-width: 480px) {
	.matland-btn {
		padding: 12px 20px;
	}
}