/**
 * ATS Base
 * Reset, типографика по умолчанию, контейнер .ats-container,
 * глобальное уважение prefers-reduced-motion.
 * Зависит от tokens.css — подключать после него.
 */

/* ---------- Reset ---------- */

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* высота sticky-шапки для scroll-padding при переходе по якорям/ToC */
	--ats-header-h: 64px;
	scroll-padding-top: var(--ats-header-h);
	/* высота нижней мобильной панели (.ats-sticky-bar) — одно число на весь
	   проект: им же задаётся её min-height и запас снизу у подвала */
	--ats-sticky-bar-h: 64px;
}

/*
 * Нижняя панель перекрывает низ экрана, поэтому переход по якорю к блоку в
 * конце страницы приводил фокус под неё (WCAG 2.2, «фокус не перекрыт»).
 * На десктопе панели нет — запас не нужен.
 */
@media (max-width: 1023.98px) {
	html {
		scroll-padding-bottom: calc(var(--ats-sticky-bar-h) + env(safe-area-inset-bottom));
	}
}

body {
	/*
	 * 100dvh с запасным 100vh: на мобильных 100vh считается по вьюпорту с
	 * РАЗВЁРНУТОЙ адресной строкой, поэтому нижняя часть экрана уезжает под
	 * неё и страница дёргается при скролле. dvh пересчитывается вместе с ней.
	 * Ревизия дизайна 2026-08-18.
	 */
	min-height: 100vh;
	min-height: 100dvh;
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.55;
	color: var(--text-primary);
	/* surface-app — тон "холста" страницы, отдельный от surface-base (белые
	   карточки поверх него) — см. tokens.css v2 и decisions-log 2026-08-05. */
	background: var(--surface-app);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas {
	display: block;
	max-width: 100%;
	height: auto;
}

/*
 * svg убран из общего reset выше: display:block выносил иконки на отдельную
 * строку над текстом (везде "иконка + текст" — телефон в шапке, контакты
 * футера, trust-bar, гарантии, hero__meta), а height:auto без viewBox на
 * <svg class="ats-icon"> перебивал width/height-атрибуты и ронял высоту на
 * дефолтные 150px. Иконки (<svg class="ats-icon"><use>) стилизуются ниже;
 * крупные декоративные/фоновые svg (hero-network, sprite-контейнер) сами
 * задают себе размеры через свои классы. Найдено ревизией через агентов
 * Fable, 2026-08-06, см. docs/11-audit-fable-2026-08-06.md, П1.7.
 */
.ats-icon {
	display: inline-block;
	flex-shrink: 0;
	vertical-align: -0.2em;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: none;
	cursor: pointer;
}

/*
 * touch-action: manipulation — отключает ожидание двойного тапа (зум) на
 * кликабельных элементах. Без него мобильный браузер выжидает ~300мс, прежде
 * чем признать тап кликом: кнопка «Оставить заявку» отвечала с заметной
 * задержкой, и её жали второй раз. Масштабирование страницы двумя пальцами
 * при этом сохраняется — запрещать зум нельзя. Ревизия дизайна 2026-08-18.
 */
a,
button,
label,
summary,
input[type="checkbox"],
input[type="radio"] {
	touch-action: manipulation;
}

a {
	color: var(--text-link);
	text-decoration: underline;
	text-decoration-color: transparent;
	transition: color var(--t-fast) var(--ease-standard), text-decoration-color var(--t-fast) var(--ease-standard);
}

a:hover {
	color: var(--text-link-hover);
	text-decoration-color: currentColor;
}

ul,
ol {
	list-style: none;
}

/*
 * Длинные неразрывные строки — адрес почты и текст, который владельцы вводят
 * в админке, — должны переноситься, а не распирать колонку. На узком экране
 * «79817176299@yandex.ru» в подвале выталкивал колонку за край и появлялась
 * горизонтальная прокрутка страницы. Правило точечное: `anywhere` на обычном
 * тексте рвал бы слова посреди строки. Ревизия дизайна 2026-08-18.
 */
a[href^="mailto:"],
.ats-direction-content,
.entry-content {
	overflow-wrap: anywhere;
}

/*
 * Контент из WYSIWYG (dir_content, srv_for_whom/srv_limitations, записи блога)
 * — вернуть маркеры/нумерацию и отступы между абзацами. .ats-direction-content
 * добавлен рядом с .entry-content: шаблоны single-ats_direction.php и
 * single-ats_service.php выводят уникальный текст именно в этот класс, а не
 * в .entry-content — без него reset обнулял margin у каждого <p>, и текст
 * превращался в сплошную простыню. Найдено ревизией через агентов Fable,
 * 2026-08-06, см. docs/11-audit-fable-2026-08-06.md, П1.13.
 */
.entry-content ul,
.entry-content ol,
.ats-direction-content ul,
.ats-direction-content ol {
	list-style: revert;
	padding-inline-start: 1.25em;
	margin-block: var(--space-4);
}

.entry-content p,
.ats-direction-content p {
	margin-block: var(--space-4);
}

.ats-direction-content h2,
.ats-direction-content h3 {
	margin-top: var(--space-8);
	margin-bottom: var(--space-3);
}

/*
 * Длина строки. Уникальный текст направления/услуги — единственный крупный
 * массив сплошного текста на сайте, и он растягивался на всю ширину колонки
 * (~900px ≈ 120 знаков в строке против комфортных 65-75). Ограничение на
 * абзацах и списках, а не на контейнере: заголовки и возможные таблицы
 * внутри WYSIWYG остаются на полную ширину. Полиш-проход 2026-08-11, круг 2.
 */
.ats-direction-content p,
.ats-direction-content ul,
.ats-direction-content ol {
	max-width: 68ch;
}

table {
	border-collapse: collapse;
}

::selection {
	background: var(--brand-100);
	color: var(--brand-900);
}

::placeholder {
	color: var(--text-muted);
	opacity: 1;
}

/*
 * ---------- Поверхности, которые рисует браузер ----------
 *
 * Каретка, полоса прокрутки и подчёркивание ссылок по умолчанию берутся из
 * настроек ОС и не принадлежат ни одной дизайн-системе: на сайте с фирменным
 * синим каретка в поле оставалась чёрной, а полоса прокрутки — серой системной.
 * Ревизия композиции 2026-08-22.
 */

input,
textarea,
select {
	caret-color: var(--brand-600);
}

/* Тонкая полоса в тонах холста. Firefox/Chromium понимают scrollbar-*,
   WebKit — только псевдоэлементы, поэтому заданы оба способа. */
html {
	scrollbar-color: var(--neutral-300) var(--surface-app);
	scrollbar-width: thin;
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: var(--surface-app);
}

::-webkit-scrollbar-thumb {
	background: var(--neutral-300);
	border: 2px solid var(--surface-app);
	border-radius: var(--r-full);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--neutral-400);
}

/* Подчёркивание по умолчанию проходит вплотную к буквам и режет выносные
   элементы у «р», «у», «д». */
a {
	text-underline-offset: .18em;
	text-decoration-thickness: 1.5px;
}

/* ---------- Фокус ---------- */

:focus {
	outline: none;
}

:focus-visible {
	outline: 2px solid var(--border-focus);
	outline-offset: 2px;
	box-shadow: var(--focus-ring);
	border-radius: var(--r-sm);
}

/* ---------- Типографика ---------- */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1.2;
	color: var(--text-primary);
	/*
	 * balance разносит слова по строкам ровно, вместо одинокого слова на
	 * последней строке. Ограничение браузеров — до 6 строк, заголовки в них
	 * укладываются. Ревизия композиции 2026-08-22.
	 */
	text-wrap: balance;
}

/* H3/H4 по спеке — 700/600, легче H1/H2 */
h3 { font-weight: 700; }
h4, h5, h6 { font-weight: 600; letter-spacing: 0; }

/*
 * Шкала на clamp вместо четырёх ступеней в медиазапросах. Ступени давали
 * заметный скачок кегля на границах 768/1024/1280 и одинаковый размер внутри
 * всего диапазона: на 1279px заголовок был ровно таким же, как на 1024. Здесь
 * размер растёт вместе с шириной непрерывно, а крайние значения зафиксированы.
 *
 * Трекинг ужимается вместе с кеглем: Manrope 800 на крупном размере с обычным
 * межбуквенным выглядит разреженным. Предел -.03em — ниже начинают слипаться
 * «ГР» и «ТР» в кириллице, что для «Грузоперевозки» критично.
 * Ревизия композиции 2026-08-22.
 */
h1 {
	font-size: clamp(2rem, 1.35rem + 2.9vw, 3.5rem);
	letter-spacing: -.03em;
	line-height: 1.08;
}

h2 {
	font-size: clamp(1.5rem, 1.15rem + 1.55vw, 2.5rem);
	letter-spacing: -.025em;
	line-height: 1.12;
}

h3 {
	font-size: clamp(1.25rem, 1.13rem + .55vw, 1.625rem);
	letter-spacing: -.015em;
}

h4 { font-size: 1.125rem; }
h5, h6 { font-size: 1rem; }

/*
 * pretty правит только последнюю строку абзаца (не оставляет висячее слово),
 * в отличие от balance не пересчитывает абзац целиком — на длинном тексте это
 * дешевле и не меняет привычную плотность строк.
 */
p {
	text-wrap: pretty;
}

small { font-size: .875rem; }

/* Числа и данные (цены, км, тонны, сроки, номера заявок) — моноширинным
   IBM Plex Mono, отдельно от заголовочного Manrope (замена v1-условности
   "цифры всегда Manrope 700" на "цифры — Mono 500..600", по спеке). */
.ats-numeric {
	font-family: var(--font-mono);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.ats-numeric--strong {
	font-weight: 600;
}

/* Эйбразы/лейблы/категории — caption 12-13px, uppercase, трекинг .04em */
.ats-caption {
	font-family: var(--font-body);
	font-size: .8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--text-muted);
}

/* h1/h2/h3 масштабируются через clamp выше — ступени в медиазапросах их только
   перебивали бы. Здесь остаётся h4: он на всех экранах близок к тексту, и
   непрерывный рост ему не нужен. */
@media (min-width: 768px) {
	h4 { font-size: 1.25rem; }
}

/* ---------- Контейнер ---------- */

.ats-container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--space-4);
}

@media (min-width: 480px) {
	.ats-container { padding-inline: var(--space-5); }
}

@media (min-width: 768px) {
	.ats-container { padding-inline: var(--space-6); }
}

@media (min-width: 1024px) {
	.ats-container { padding-inline: var(--space-8); }
}

@media (min-width: 1280px) {
	.ats-container { padding-inline: var(--space-10); }
}

/* ---------- Утилиты ---------- */

.ats-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ats-skip-link {
	position: absolute;
	left: var(--space-4);
	top: -100px;
	z-index: 999;
	background: var(--surface-inverse);
	color: var(--text-inverse);
	padding: var(--space-3) var(--space-5);
	border-radius: var(--r-md);
	transition: top var(--t-fast) var(--ease-standard);
}

.ats-skip-link:focus-visible {
	top: var(--space-4);
}

/*
 * Цель ссылки "Перейти к содержимому" — <main tabindex="-1">. Кольцо фокуса
 * здесь не рисуем: оно обвело бы контуром всю страницу целиком, а признаком
 * перехода служит сама прокрутка к началу контента.
 */
#ats-main-content:focus,
#ats-main-content:focus-visible {
	outline: none;
	box-shadow: none;
}

/*
 * header.js вешает этот класс на <html> при открытом мобильном меню, чтобы
 * заблокировать скролл страницы под офканвасом — класса в CSS не было,
 * страница продолжала скроллиться под открытым меню. Найдено ревизией через
 * агентов Fable, 2026-08-06, см. docs/11-audit-fable-2026-08-06.md, П1.17.
 */
html.ats-no-scroll {
	overflow: hidden;
}

/*
 * Плавное появление крупных секций при скролле (assets/js/reveal.js,
 * IntersectionObserver). Скрытое состояние навешивается ТОЛЬКО при наличии
 * класса "ats-js" на <html> — его ставит тот же JS-файл первой же строкой.
 * Без этого условия секция с классом .ats-reveal осталась бы невидимой
 * навсегда при отключённом/заблокированном JS (прогрессивное улучшение,
 * а не обязательное условие видимости контента). Решение заказчика,
 * см. docs/02-decisions-log.md, 2026-08-10.
 */
html.ats-js .ats-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out);
}

html.ats-js .ats-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ---------- Core Web Vitals: снижение анимаций ---------- */

/**
 * Все transition/animation в проекте построены только на transform/opacity —
 * это позволяет здесь безопасно "выключить" длительность без ломки layout.
 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}

	html {
		scroll-behavior: auto;
	}
}