/* ===================================================================
   MATINTELLECT — наши правки поверх шаблона Jesper.
   Файлы шаблона (theme.css, theme-light.css) не трогаем: так советует автор,
   и так любую нашу правку видно отдельно. Подключён последним в <head>.
   =================================================================== */


/* Шрифты — свои файлы на сайте, без серверов Google.
   Оба шрифта — лицензия SIL OFL 1.1: Big Shoulders Display (русские буквы дорисованы нами,
   см. assets/fonts/OFL-big-shoulders-display.txt) и Montserrat (The Montserrat Project Authors).
   Имя "Big Shoulders Display" оставлено как у шаблона, чтобы его стили подхватили шрифт без правок. */

@font-face {
	font-family: "Big Shoulders Display";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/big-shoulders-display-ru.woff2") format("woff2");
}

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/montserrat-cyrillic-ext.woff2") format("woff2");
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/montserrat-cyrillic.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/montserrat-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/montserrat-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Шрифт текста: Montserrat вместо Poppins (у Poppins нет русских букв). Заголовки — шрифт шаблона, теперь с русскими буквами. */
:root {
	--tt-body-font: "Montserrat", sans-serif;

	/* Цвет акцента: красный вместо оранжевого шаблона (проба Mat 30.09) */
	--tt-main-color: #ff0000;       /* было #bf4a1a */
	--tt-link-color: #ff0000;       /* было #c93b00 */
	--tt-link-hover-color: #ff0000; /* было #f5533a */
}

/* Огрех шаблона: у <button> не задан шрифт, и браузер рисует кнопки форм системным Arial
   (так и на демо автора: «Send Message» — Arial, соседние кнопки-ссылки — Poppins). Кнопки берут шрифт страницы. */
button {
	font-family: inherit;
}

/* Водная рябь на первом экране: видео играет, но видна его копия с рябью (assets/js/mat-ripples.js).
   Класс jquery-ripples появляется, только если рябь включилась, иначе видео видно как обычно. */
.ph-video-inner.jquery-ripples video { opacity: 0 !important; }

/* Огрех шаблона (есть и на демо автора): круг-маска на первом экране двигался рывками.
   Координаты круга (--x, --y) уже плавно ведёт анимация theme.js, а стиль шаблона добавлял поверх
   «transition: clip-path .12s». Каждое движение мыши запускало это сглаживание заново, и круг
   на экране сдвигался в 1 кадре из 126 (замер 01.10). Сглаживаем только размер круга (появление
   и исчезание), а место круга берём прямо из анимации — с исправлением 151 кадр из 152. */
@property --ph-mask-r { syntax: "<length>"; inherits: false; initial-value: 0px; }
.ph-mask {
	clip-path: circle(var(--ph-mask-r) at var(--x, 50%) var(--y, 50%));
	transition: --ph-mask-r .12s;
}
body.ph-mask-active .ph-mask { /* правило шаблона для раскрытого круга сильнее — повторяем тут */
	--ph-mask-r: clamp(100px, 13vw, 230px);
	clip-path: circle(var(--ph-mask-r) at var(--x, 50%) var(--y, 50%));
}

/* Меню: подложка выпадающего списка чёрная (Mat, 01.10) */
:root { --tt-sub-menu-bg-color: #000; }

/* Переключатель языка RU/EN — кружок как у кнопки темы (32 px) рядом с ней */
.mat-lang {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin-left: 10px;
	margin-right: 12px;
	border-radius: 100%;
	background-color: rgb(179 179 179 / 35%);
	color: inherit;
	font-family: var(--tt-body-font); /* тонкий заголовочный шрифт в 32 px не читался (Mat, 01.10) */
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1;
	transition: background-color .3s;
}
.mat-lang:hover { background-color: var(--tt-main-color); color: #fff; }

/* Посты: видео-пост в тексте во всю ширину колонки, как картинка шаблона; вертикальное — не выше экрана */
.tt-blog-post-content video.tt-blog-post-image { display: block; width: 100%; height: auto; max-height: 85vh; object-fit: contain; background-color: #000; }

/* Надпись после кнопки Instagram в «поделиться» (assets/js/mat-podelitsya.js) */
.mat-podskazka { position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 99999; padding: 14px 22px; border-radius: 40px; background-color: var(--tt-main-color); color: #fff; font-size: 15px; transition: opacity .5s; }
.mat-podskazka-uhod { opacity: 0; }

/* Комментарии под постом (api/kommentariy.js, assets/js/mat-kommentarii.js) */
#tt-blog-post-comments .tt-comment { scroll-margin-top: 160px; }   /* «Открыть» из карточки Telegram (#komment-…): комментарий встаёт ниже шапки, как и новый в mat-kommentarii.js */
.tt-comment-avatar .mat-bukva { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; font-weight: 600; line-height: 1; }   /* буква вместо картинки-заглушки (api/_kommentarii.js bukva) */
.mat-lovushka { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }   /* ловушка для ботов: человек её не видит */
.mat-otvet-dlya { margin: 10px 0 20px; font-size: 15px; }
.mat-otmena { background: none; border: 0; padding: 0; color: var(--tt-main-color); font: inherit; text-decoration: underline; cursor: pointer; }
.mat-komment-soobshchenie:empty { display: none; }
.mat-komment-soobshchenie span { padding: 18px 20px; font-size: 15px; }   /* у шаблона 40px — рассчитано на всплывающее окно формы связи */

/* Переход по метке с другой страницы (/services#audit, /#price): блок встаёт под шапкой, а не под неё — как у переходов внутри страницы в theme.js («Scroll between anchors», отступ = высота шапки) */
.tt-section[id] { scroll-margin-top: 82px; }

/* «Поделиться» в шапке поста и проекта (компьютер): у шаблона слово повёрнуто только на вид (rotate), а место под ним считается как под горизонтальное — длинное «Поделиться» наезжает на значок. Вертикальный текст занимает место по своей длине, значок встаёт под ним */
@media (min-width: 1025px) {
	.ph-share-text { writing-mode: vertical-rl; transform: rotate(180deg); }
}

/* Видео проекта с кнопкой «смотреть» (api/site-project.js demo) */
.mat-proekt-video { display: block; width: 100%; height: auto; border-radius: 12px; background-color: #000; }

/* Листалка на странице проекта — окно в пропорции снимков экрана Mat (1920×1202), чтобы снимок не обрезался ни на компьютере, ни на телефоне */
.tt-wrap .tt-content-slider-item { padding-bottom: 62.6%; }

/* Заголовок с очень длинным словом («конфиденциальности» на /privacy): шаблонный размер не опускается ниже 64 px,
   и на телефоне слово шире экрана. Слово ≈ 7,4 размера шрифта в ширину, поэтому 11vw = ~82% ширины окна на любом экране */
#page-header .ph-caption-title.mat-dlinnoe-slovo { font-size: clamp(36px, 11vw, 230px); }