/**
 * TRIADA — базовый слой: нормализация, элементы, утилиты доступности.
 *
 * Значения взяты из блока <style> в /design-reference (он одинаков во всех
 * четырёх макетах) и из фактических стилей тегов. Источник помечен
 * комментарием «reference: ...».
 */

*,
*::before,
*::after {
	box-sizing: border-box; /* reference: *{box-sizing:border-box} */
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Якорные ссылки не должны уезжать под липкую шапку.
	   В макетах у заголовков стоит scroll-margin-top:100px. */
	scroll-padding-top: calc(var(--tri-header-height) + var(--tri-space-16));
}

body {
	/* reference: html,body{margin:0;padding:0;background:#FFFFFF} */
	margin: 0;
	padding: 0;
	background-color: var(--tri-color-white);
	/* reference: body{font-family:'Muller','Golos Text',system-ui,sans-serif;color:#16181D} */
	color: var(--tri-color-ink);
	/* Сплошной текст — вес 400, то самое начертание Muller, что поставлено. */
	font-family: var(--tri-font-body);
	font-size: var(--tri-fs-16);
	font-weight: var(--tri-fw-400);
	line-height: var(--tri-lh-1-6);
	/* reference: font-feature-settings:'kern' 1,'liga' 1,'calt' 1 */
	font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* --------------------------------------------------------------------
 * Заголовки
 *
 * Кегли соответствуют тегам в макетах. Hero-заголовки страниц имеют
 * собственные размеры (58 / 56 / 50 / 44) и задают их на своём уровне —
 * здесь стоит нижний из них как безопасное значение по умолчанию.
 * ------------------------------------------------------------------ */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-family: var(--tri-font-display);
	color: var(--tri-color-ink);
	text-wrap: balance; /* reference: h1,h2,h3{text-wrap:balance} */
}

/* --------------------------------------------------------------------
 * Крупный текст, набранный не заголовком
 *
 * Цифры показателей, сумма калькулятора, имя автора, телефон в шапке —
 * по разметке это не <h*>, но по кеглю и весу это заголовки: 20–40px,
 * 700–800. Из Muller поставлено только Regular, и на таком кегле
 * подделанный браузером жирный виден сразу. Поэтому крупный текст
 * пользуется тем же стеком, что и заголовки, — с настоящим жирным.
 *
 * Здесь меняется ТОЛЬКО гарнитура: кегли, интерлиньяж и трекинг
 * остаются такими, какими их задал макет.
 * ------------------------------------------------------------------ */

.tri-header__phone,
.tri-hero__video-title,
.tri-svc-card__title,
.tri-mega__promo-title,
.tri-home-team__stat-value,
.tri-home-cases__stat-value,
.tri-home-geo__stat-value,
.tri-home-contact__person,
.tri-pj-hero__metric-value,
.tri-sv-adv__stat-value,
.tri-sv-calc__amount,
.tri-sv-experts__count-value,
.tri-sv-geo__stat-value,
.tri-sv-price__fact-value,
.tri-wiki-author__name,
.tri-wiki-author__stat-value {
	font-family: var(--tri-font-display);
}

h1 {
	/* reference: <h1> — 44..58px, w700, ls -0.028em, lh 1.08..1.12 */
	font-size: var(--tri-fs-44);
	font-weight: var(--tri-fw-700);
	line-height: var(--tri-lh-1-12);
	letter-spacing: var(--tri-ls-n0-028);
}

h2 {
	/* reference: секционный <h2> — 40px, w700, ls -0.022em, lh 1.15 */
	font-size: var(--tri-fs-40);
	font-weight: var(--tri-fw-700);
	line-height: var(--tri-lh-1-15);
	letter-spacing: var(--tri-ls-n0-022);
}

h3 {
	/* reference: <h3> карточек — 23px, w700, ls -0.014em, lh 1.2 */
	font-size: var(--tri-fs-23);
	font-weight: var(--tri-fw-700);
	line-height: var(--tri-lh-1-2);
	letter-spacing: var(--tri-ls-n0-014);
}

h4 {
	/* В макетах <h4> не встречается — см. docs/DESIGN-DEVIATIONS.md.
	   Взят стиль ближайшего подзаголовка: 19px w800 lh1.3. */
	font-size: var(--tri-fs-19);
	font-weight: var(--tri-fw-800);
	line-height: var(--tri-lh-1-3);
}

h5 {
	/* В макетах отсутствует — см. docs/DESIGN-DEVIATIONS.md. */
	font-size: var(--tri-fs-16-5);
	font-weight: var(--tri-fw-800);
	line-height: var(--tri-lh-1-3);
}

h6 {
	/* В макетах отсутствует; взят стиль капсовой метки 12px w800 ls0.06em. */
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-800);
	line-height: var(--tri-lh-1-35);
	letter-spacing: var(--tri-ls-p0-06);
	text-transform: uppercase;
}

/* --------------------------------------------------------------------
 * Текст
 * ------------------------------------------------------------------ */

p,
ul,
ol,
dl,
figure,
blockquote,
pre,
table {
	margin: 0;
}

p {
	text-wrap: pretty; /* reference: p{text-wrap:pretty} */
}

strong,
b {
	font-weight: var(--tri-fw-800);
}

small {
	font-size: var(--tri-fs-12-5);
}

hr {
	height: 0;
	margin: var(--tri-space-32) 0;
	border: 0;
	border-top: var(--tri-border-width) solid var(--tri-color-divider);
}

/* --------------------------------------------------------------------
 * Ссылки
 * ------------------------------------------------------------------ */

a {
	/* reference: a{color:#16181D;text-decoration:none} */
	color: var(--tri-color-ink);
	text-decoration: none;
	/* reference: a,button{transition:color .28s …, box-shadow .32s …, transform .32s …} */
	transition:
		color var(--tri-duration-28) var(--tri-ease),
		background-color var(--tri-duration-28) var(--tri-ease),
		border-color var(--tri-duration-28) var(--tri-ease),
		box-shadow var(--tri-duration-32) var(--tri-ease),
		transform var(--tri-duration-32) var(--tri-ease);
}

a:hover {
	color: var(--tri-color-link-hover); /* reference: a:hover{color:#003B95} */
}

/* --------------------------------------------------------------------
 * Медиа
 * ------------------------------------------------------------------ */

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

/*
 * СБРОС ДОЛЖЕН УСТУПАТЬ КОМПОНЕНТУ.
 *
 * Оба правила ниже нужны, чтобы картинка по умолчанию сохраняла
 * пропорции: WordPress печатает у изображений width и height, и без
 * height:auto они ломают адаптив. Но `img[width][height]` — это
 * специфичность (0,2,1), выше любого разумного селектора компонента:
 * правило `.tri-case__media img { height: 100% }` проигрывало сбросу,
 * и картинка в зоне фиксированной высоты не заполняла её, а вставала
 * по своим пропорциям. Отсюда пустая полоса под фото в карточках
 * кейсов и «недотянутый» фон в карточках услуг и на первом экране.
 *
 * :where() обнуляет специфичность: поведение по умолчанию остаётся,
 * но любое правило компонента теперь его перекрывает.
 */
:where(img, video) {
	height: auto;
}

/* WordPress отдаёт width/height у изображений — не даём им ломать адаптив. */
:where(img[width][height]) {
	height: auto;
}

/* Только там, где заливка не задана атрибутом: CSS перебивает
   presentation-атрибут, и svg[fill="none"] иначе заливается цветом. */
svg:not([fill]) {
	fill: currentColor;
}

figure {
	margin: 0;
}

/* --------------------------------------------------------------------
 * Формы
 * ------------------------------------------------------------------ */

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

button {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	transition:
		color var(--tri-duration-28) var(--tri-ease),
		background-color var(--tri-duration-28) var(--tri-ease),
		border-color var(--tri-duration-28) var(--tri-ease),
		box-shadow var(--tri-duration-32) var(--tri-ease),
		transform var(--tri-duration-32) var(--tri-ease);
}

textarea {
	resize: vertical;
}

label {
	display: inline-block;
	font-size: var(--tri-fs-14);
	font-weight: var(--tri-fw-600);
	color: var(--tri-color-ink);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
select,
textarea {
	width: 100%;
	padding: var(--tri-space-12) var(--tri-space-14);
	background-color: var(--tri-color-white);
	border: var(--tri-border-width) solid var(--tri-color-border);
	border-radius: var(--tri-radius-10);
	font-size: var(--tri-fs-15);
	transition:
		border-color var(--tri-duration-28) var(--tri-ease),
		box-shadow var(--tri-duration-28) var(--tri-ease);
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
	border-color: var(--tri-color-navy);
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--tri-color-navy) 14%, transparent);
}

/* reference: input::placeholder{color:rgba(90,98,112,0.9);opacity:1} */
::placeholder {
	color: rgba(90, 98, 112, 0.9);
	opacity: 1;
}

/* reference: input[data-dark]::placeholder{color:rgba(255,255,255,0.82)} */
[data-dark]::placeholder {
	color: rgba(255, 255, 255, 0.82);
	opacity: 1;
}

/* --------------------------------------------------------------------
 * Таблицы
 * ------------------------------------------------------------------ */

table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--tri-fs-15);
}

th,
td {
	padding: var(--tri-space-12) var(--tri-space-14);
	text-align: left;
	border-bottom: var(--tri-border-width) solid var(--tri-color-divider);
	vertical-align: top;
}

th {
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
}

/* --------------------------------------------------------------------
 * Фокус, выделение, доступность
 * ------------------------------------------------------------------ */

/* reference: :focus-visible{outline:2px solid #12295C;outline-offset:3px;border-radius:4px} */
:focus-visible {
	outline: 2px solid var(--tri-role-focus);
	outline-offset: 3px;
	border-radius: var(--tri-radius-4);
}

/* reference: ::selection{background:#12295C;color:#FFFFFF} */
::selection {
	background-color: var(--tri-color-navy);
	color: var(--tri-color-white);
}

/* Текст только для скринридеров (совместимо с классом WP .screen-reader-text). */
.screen-reader-text,
.tri-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus,
.tri-skip-link:focus {
	position: fixed !important;
	top: var(--tri-space-16);
	left: var(--tri-space-16);
	z-index: var(--tri-z-skiplink);
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	padding: var(--tri-space-12) var(--tri-space-20);
	background-color: var(--tri-color-white);
	color: var(--tri-color-navy);
	border-radius: var(--tri-radius-10);
	box-shadow: var(--tri-shadow-navy-56-18);
	font-size: var(--tri-fs-14);
	font-weight: var(--tri-fw-700);
	text-decoration: none;
}

/* reference: .num{font-variant-numeric:tabular-nums lining-nums} */
.tri-num {
	font-variant-numeric: tabular-nums lining-nums;
}

/* --------------------------------------------------------------------
 * Форма поиска (searchform.php)
 * ------------------------------------------------------------------ */

.tri-search-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tri-space-8);
	max-width: 560px; /* reference: max-width:560px */
}

.tri-search-form__field {
	flex: 1 1 220px;
	min-width: 0;
}

.tri-search-form__submit {
	flex-shrink: 0;
}

/* --------------------------------------------------------------------
 * Уважение к системным настройкам
 * reference: @media (prefers-reduced-motion: reduce){*{…duration:.01ms}}
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	.tri-site-header,
	.tri-site-footer,
	.tri-skip-link {
		display: none !important;
	}

	body {
		color: #000;
	}
}