/* Общее для PHP-шаблонов: страница, контейнер, крошки, заголовки, кнопки.
   Подключается на всех страницах, которые перешли на PHP.

   Значения — только токены; ни одного цвета и отступа числом. Если что-то
   нельзя выразить токеном, это повод завести токен, а не написать число. */

/* ---------- общее для страницы ---------- */

.sm-page {
	color: var(--text-body);
	background: var(--surface-page);
	padding-block: var(--section-y);
}

.sm-container {
	width: var(--container-width);
	max-width: var(--container-max);
	margin-inline: auto;
}

/* ---------- хлебные крошки ---------- */

/* Образец — цепочка в билдере на «Новостях»: домик вместо слова «Главная»,
   уголок-разделитель, текущая страница синяя. Длинный заголовок в цепочке
   ужимается до одной строки с многоточием — не потеря: полностью он стоит
   строкой ниже, в H1 страницы. */

.sm-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gap-inline);
	margin: 0 0 var(--gap-stack);
	padding: 0;
	list-style: none;
	font: var(--type-body-sm);
	color: var(--text-secondary);
}

.sm-crumbs li {
	display: flex;
	align-items: center;
	gap: var(--gap-inline);
	/* Без этого `overflow: hidden` у последнего звена не срабатывает:
	   элемент flex по умолчанию не ужимается меньше своего текста. */
	min-width: 0;
}

/* Уголок нарисован рамкой, а не значком: разделитель — чистое оформление,
   ради него не стоит ни запроса за файлом, ни лишнего узла в разметке. */
.sm-crumbs li + li::before {
	content: "";
	flex: none;
	width: 0.32em;
	height: 0.32em;
	border: solid var(--grey-dark);
	border-width: 0.09em 0.09em 0 0;
	transform: rotate(45deg);
}

.sm-crumbs a { color: var(--text-link); text-decoration: none; }
.sm-crumbs a:hover { color: var(--text-link-hover); text-decoration: underline; }

/* Домик подписан скрытым текстом, подчёркивать в нём нечего. */
.sm-crumbs__home:hover { text-decoration: none; }

.sm-crumbs__icon {
	width: 1.15em;
	height: 1.15em;
}

/* Текущая страница — синяя и не ссылка. */
.sm-crumbs [aria-current] {
	color: var(--text-current);
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Заголовки блоков. В билдере это два компонента: «Headline: (Main)» —
   --text-xl/600, и «Headline: (Secondary)» — --text-lg/600; у обоих есть
   необязательный подзаголовок под ним. Уровень тега здесь свой: компоненты
   ставят h2 и h3 где придётся, и заголовка первого уровня на странице не
   оказывается вовсе. На вид это не влияет, поэтому исправлено молча. */

.sm-h-main {
	font: var(--type-h2);
	color: var(--text-body);
	margin: 0;
}

/* Синий заголовок — не умолчание компонента, а отдельная настройка: так
   покрашено название проекта в серой плашке. На архиве заголовок чёрный. */
.sm-h-main--accent { color: var(--blue-line); }

.sm-h-main__sub {
	font: var(--type-body-lg);
	color: var(--text-body);
	margin: var(--gap-stack) 0 0;
}

.sm-h-secondary {
	font: var(--type-h4);
	margin: 0;
}

.sm-h-secondary__sub {
	font: var(--type-body);
	color: var(--text-body);
	margin: var(--gap-stack) 0 0;
}

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

/* Размер значка в билдере задан у каждой кнопки свой (1.2em у контактов,
   1.4em у марок, 1.8em у документов) и приезжает в этой переменной. */
.sm-btn {
	--sm-btn-icon: 1.2em;
	display: inline-flex;
	align-items: center;
	gap: var(--gap-inline);
	padding: var(--pad-button-y) var(--pad-button-x);
	border-radius: var(--radius-button);
	background: var(--blue);
	color: var(--text-on-dark);
	font: var(--type-button);
	text-decoration: none;
	transition: var(--transition-control);
}

.sm-btn:hover { background: var(--blue-hover); }

.sm-btn:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring);
	outline-offset: var(--focus-ring-offset);
}

/* Значок приходит обёрнутым: внутри либо <svg> из набора Pro, либо <i>
   иконочного шрифта. Размер задаётся обёртке, содержимое её заполняет. */
/* Текст только для экранного диктора: убран с экрана, но остался в дереве
   доступности. `clip-path` вместо `display: none` — скрытое таким образом
   имя ссылки диктор не читает. */
.sm-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.sm-icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	flex: none;
}

.sm-icon-wrap svg { width: 100%; height: 100%; display: block; fill: currentColor; }
.sm-icon-wrap i { font-size: inherit; line-height: 1; }

.sm-btn__icon { width: var(--sm-btn-icon); height: var(--sm-btn-icon); }
.sm-btn__figure { display: inline-flex; flex: none; }

/* Вместо значка бывает картинка: у мессенджера Макс марки в Font Awesome
   нет, и компонент «Button: Custom Logo» подставляет файл из медиатеки. */
.sm-btn__logo {
	height: var(--sm-btn-icon);
	width: auto;
	display: block;
}

.sm-btn__text { display: flex; flex-direction: column; align-items: flex-start; }
.sm-btn__label { text-transform: uppercase; }
.sm-btn__sublabel {
	font: var(--type-caption);
	font-weight: var(--weight-medium);
	text-transform: none;
}

/* «Button: Main Icon»: красная плашка, белая подпись, синяя на наведении.
   Умолчания компонента — отступы 10px/32px и скругление 8px. */
.sm-btn--main {
	background: var(--red);
	color: var(--text-on-dark);
	padding-block: var(--pad-button-y-icon);
	font-size: var(--text-base);
}

/* Наведение объявлено ЦЕЛИКОМ: и фон, и цвет подписи.

   Менять фон, а цвет оставлять на наследование — это ставить читаемость в
   зависимость от того, какое правило окажется ниже в файле. У
   `.sm-btn:hover` и `.sm-btn--main:hover` специфичность одинаковая, и
   побеждает порядок; вдобавок любое общее `a:hover` со стороны темы может
   перекрасить подпись, а значок нарисован `currentColor` и уйдёт следом.

   Цифры, по которым выбран фон (белый текст):
     --blue        8.16:1
     --blue-line   5.21:1
     --red         4.88:1
     --blue-hover  2.21:1   — не проходит даже порог для крупного текста

   Отсюда `--blue`, а не `--blue-hover`. */
.sm-btn--main:hover {
	background: var(--blue);
	color: var(--text-on-dark);
}

/* «Button: Text Icon»: без плашки, подпись и значок красные, на наведении
   Blue Line. Прописные и полужирность те же. */
.sm-btn--text {
	background: none;
	color: var(--red);
	padding: 0;
	border-radius: 0;
	line-height: var(--leading-heading);
}

.sm-btn--text:hover { background: none; color: var(--blue-line); }

/* Тот же «Button: Text Icon», перекрашенный в документе: Blue Line вместо
   красного, Blue на наведении, прописные сняты. */
.sm-btn--link {
	color: var(--blue-line);
	text-transform: none;
}

.sm-btn--link:hover { color: var(--blue); }
.sm-btn--link .sm-btn__label { text-transform: none; }