/*
 * Правки шрифтов поверх собранных бандлов.
 *
 * 1. Заголовочный AGOpus High Resolution — шрифт 1994 года, у него битая
 *    таблица cmap и неверные searchRange/rangeShift в каталоге таблиц.
 *    Браузерный санитайзер (OTS) такой файл отвергает целиком, и все
 *    заголовки рисовались системным запасным шрифтом. Файл пересобран
 *    fontTools; лежит под новым именем, чтобы обойти 30-дневный кэш
 *    старой, битой версии у посетителей.
 *
 * 2. Курсив Inter Light: в бандлах объявлено только прямое начертание,
 *    поэтому курсивные подписи и цитаты браузер подделывал наклоном.
 *
 * Имена семейств дублируются: в бандлах разных страниц встречаются оба
 * варианта написания.
 */

@font-face {
	font-family: "AgoPus High Resolution";
	src: url(../fonts/agopus-high-resolution.ttf) format("truetype");
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: AgoPush;
	src: url(../fonts/agopus-high-resolution.ttf) format("truetype");
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Inter Light";
	src: url(../fonts/Inter-Light.ttf) format("truetype");
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: InterLight;
	src: url(../fonts/Inter-Light.ttf) format("truetype");
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Inter Light";
	src: url(../fonts/Inter-LightItalic.ttf) format("truetype");
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: InterLight;
	src: url(../fonts/Inter-LightItalic.ttf) format("truetype");
	font-style: italic;
	font-display: swap;
}

/*
 * Переключатель языка в шапке.
 *
 * Собственные стили, а не Tailwind-утилиты: у каждой страницы свой
 * собранный бандл, и нужного набора классов может в нём не оказаться.
 */

.kw-lang-switch {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	white-space: nowrap;
}

.kw-lang-switch a {
	color: rgba(215, 240, 255, 0.45);
	transition: color 0.2s ease;
}

.kw-lang-switch a:hover {
	color: hsl(var(--primary));
}

.kw-lang-switch a[aria-current="true"] {
	color: hsl(var(--primary));
}

.kw-lang-switch span {
	color: rgba(215, 240, 255, 0.25);
}

/* В мобильном меню главной переключатель занимает всю строку. */
#mobile-navigation .kw-lang-switch {
	margin-top: 1.25rem;
	justify-content: center;
	width: 100%;
}

/*
 * Цвет подзаголовков.
 *
 * Переменная объявлена только в бандле главной; на внутренних страницах
 * класс вида text-[hsl(var(--...))] оставался без значения и текст уходил
 * в чистый белый. Берём те же значения, что и на главной. Это же чинит
 * цвет подписи на кнопках (--primary-foreground).
 */
:root {
	--hero-subtitle: 204 100% 91.8%;
	--muted-foreground: 204 100% 91.8%;
	--primary-foreground: 204 100% 91.8%;
	--secondary: 0 0% 12%;
	--ink-soft: 204 100% 91.8%;
}

/*
 * Основной шрифт текста.
 *
 * В бандлах внутренних страниц у body стоит семейство «Inter», для которого
 * @font-face нигде не объявлен, — текст падал на системный шрифт и отличался
 * от главной. Прибиваем к тому же Inter Light, что и на главной.
 */
body {
	font-family: "Inter Light", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/*
 * Стеклянная подложка кнопок. Определена только в бандле главной,
 * а кнопки с тем же оформлением нужны и на внутренних страницах.
 */
.liquid-glass {
	background: #42a9e008;
	background-blend-mode: luminosity;
	border: none;
	box-shadow: inset 0 1px 1px #ffffff0f;
	position: relative;
	overflow: hidden;
}

.liquid-glass:before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1.4px;
	background: linear-gradient(180deg, #42a9e07a, #ffffff29, #fff0, #fff0, #ffffff29, #42a9e07a);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

/*
 * Смысловые блоки страниц-услуг: заголовок и текст без рамок,
 * разделённые тонкой линией.
 *
 * Каждый блок лежит в своей обёртке .reveal, поэтому сами блоки друг другу
 * не соседи — отступ вешаем на вторую и последующие обёртки.
 */
.kw-article-block { margin-top: 0; padding-top: 0; border-top: 0; }

.reveal:has(> .kw-article-block) + .reveal:has(> .kw-article-block) > .kw-article-block,
.kw-article-block + .kw-article-block {
	margin-top: 3.5rem;
	padding-top: 3.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

@media (min-width: 48rem) {
	.reveal:has(> .kw-article-block) + .reveal:has(> .kw-article-block) > .kw-article-block,
	.kw-article-block + .kw-article-block {
		margin-top: 4.5rem;
		padding-top: 4.5rem;
	}
}

/*
 * На узких экранах в шапке подстраниц рядом стоят переключатель и кнопка
 * призыва к действию. Английские подписи длиннее русских, поэтому поджимаем
 * разрядку и отступы, чтобы связка не выходила за край.
 */
@media (max-width: 27.5rem) {
	.kw-lang-switch {
		gap: 0.25rem;
		font-size: 0.66rem;
		letter-spacing: 0.1em;
	}

	header .kw-lang-switch + a,
	header .kw-lang-switch ~ a.page-button {
		padding-left: 0.9rem;
		padding-right: 0.9rem;
		letter-spacing: 0.1em;
	}

	header nav .flex.items-center.gap-4:has(.kw-lang-switch) {
		gap: 0.6rem;
	}
}

/*
 * Утилиты, набранные вручную при правке страниц в админке.
 *
 * Tailwind здесь скомпилирован заранее: класс с новым значением, которого
 * не было в сборке, просто не имеет правила и молча ничего не делает.
 * Ниже — те значения, которые уже используются в текстах страниц.
 */
.opacity-\[0\.17\] { opacity: 0.17; }
.text-primary\/72 { color: hsl(var(--primary) / 0.72); }
.max-w-\[26ch\] { max-width: 26ch; }
.space-y-14 > :not([hidden]) ~ :not([hidden]) { margin-top: 3.5rem; }
.text-\[rgb\(213\,238\,255\)\] { color: rgb(213, 238, 255); }
.text-\[rgba\(213\,238\,255\,0\.6\)\] { color: rgba(213, 238, 255, 0.6); }
.text-\[rgba\(213\,238\,255\,0\.75\)\] { color: rgba(213, 238, 255, 0.75); }

/*
 * Продуктовые страницы: единый отступ слева у заголовков и текстов.
 * main#content есть только у них — главная и «Версия 3» не затрагиваются.
 */
@media (min-width: 64rem) {
	main#content > section > .layout-shell {
		padding-left: 6rem;
		padding-right: 6rem;
	}
}

/* Разделители между пунктами списков убраны — линии выглядели случайными. */
main#content .kw-article-block .flex.gap-3 {
	border-bottom: 0;
}

/*
 * Заголовки на продуктовых страницах — не длиннее трёх строк.
 *
 * Ограничивали не сами заголовки, а их обёртки (max-w-[56rem], [50rem],
 * [49rem], [26ch] и т. п.), поэтому расширяем именно обёртку с заголовком.
 * Колонки с текстом остаются узкими — их ширина не трогается.
 */
main#content h1,
main#content h2,
main#content .layout-shell > div:has(> .reveal > h1),
main#content .layout-shell > div:has(> .reveal > h2),
main#content .layout-shell > div:has(> h1),
main#content .layout-shell > div:has(> h2),
main#content .layout-shell > .reveal:has(> h1),
main#content .layout-shell > .reveal:has(> h2) {
	max-width: 76rem;
}

/* На узких экранах заголовок уменьшается вместе с колонкой. */
@media (max-width: 80rem) {
	main#content h2 {
		font-size: clamp(1.35rem, 3.1vw, 2.5rem);
	}
}

/*
 * Заголовок первого экрана. При 80 px каждая авторская строка переносилась
 * надвое — получалось шесть строк вместо трёх. Ограничиваем верхний предел.
 */
main#content h1 {
	font-size: clamp(1.9rem, 3.6vw, 3.25rem);
}