/*
 * Шапка сайта.
 *
 * 60 px на десктопе, 54 на телефоне. Липкая, с собственным фоном:
 * прежняя была прозрачной и наезжала на первый экран, и это видно
 * на любом снимке главной.
 *
 * Фон полупрозрачный с размытием — там, где браузер это умеет.
 * Где не умеет, остаётся сплошной: проверка через @supports,
 * а не надежда.
 */

.ssh {
	--ssh-bg: #0e0e0e;
	--ssh-ink: #ffffff;
	--ssh-muted: rgba(255, 255, 255, 0.5);
	--ssh-line: rgba(255, 255, 255, 0.09);
	--ssh-accent: #25cbc2;
	--ssh-h: 78px;

	background: var(--ssh-bg);
	border-block-end: 1px solid var(--ssh-line);
	color: var(--ssh-ink);
	font-family: "Gotham Pro", system-ui, -apple-system, sans-serif;
	inset-block-start: 0;
	position: sticky;
	z-index: 500;
}

@supports (backdrop-filter: blur(1px)) {
	.ssh {
		backdrop-filter: blur(14px);
		background: rgba(14, 14, 14, 0.82);
	}
}

.ssh .ssh__inner {
	align-items: center;
	box-sizing: border-box;
	display: flex;
	gap: 20px;
	margin-inline: auto;
	/* Одна оболочка на шапку, меню и подвал — величина в tokens.css. */
	max-width: calc(var(--ss-shell) + var(--ss-gutter) * 2);
	min-block-size: var(--ssh-h);
	padding-block: 9px;
	padding-inline: var(--ss-gutter);
}

.ssh a {
	color: inherit;
	text-decoration: none;
}

.ssh a:focus-visible {
	outline: 2px solid var(--ssh-accent);
	outline-offset: 3px;
}

.ssh .ssh__logo img {
	display: block;
	height: auto;
	width: 190px;
}

/* Оценка — одна пилюля, а не четыре отдельных элемента. */
.ssh .ssh__rating {
	align-items: center;
	border: 1px solid var(--ssh-line);
	border-radius: 999px;
	display: flex;
	font-size: 14px;
	gap: 8px;
	/* Вровень с «Обсудить проект» и «Меню»: пилюли в одной строке
	   должны быть одной высоты. */
	min-block-size: 46px;
	padding-inline: 16px;
	margin-inline-end: auto;
	transition: border-color 0.2s ease;
	white-space: nowrap;
}

.ssh .ssh__rating:hover {
	border-color: rgba(255, 255, 255, 0.24);
}

.ssh .ssh__star {
	color: #ffb800;
}

.ssh .ssh__score {
	font-weight: 600;
}

.ssh .ssh__sep,
.ssh .ssh__count {
	color: var(--ssh-muted);
}

.ssh .ssh__social {
	display: flex;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ssh .ssh__social li {
	margin: 0;
}

.ssh .ssh__social a {
	align-items: center;
	block-size: 48px;
	display: flex;
	inline-size: 44px;
	justify-content: center;
	opacity: 0.75;
	transition: opacity 0.2s ease;
}

.ssh .ssh__social a:hover,
.ssh .ssh__social a:focus-visible {
	opacity: 1;
}

.ssh .ssh__social img {
	display: block;
	height: 26px;
	width: 26px;
}

.ssh .ssh__online {
	align-items: center;
	color: var(--ssh-muted);
	display: flex;
	font-size: 13px;
	gap: 7px;
	letter-spacing: 0.04em;
	margin: 0;
	margin-inline-end: auto;
	white-space: nowrap;
}

.ssh .ssh__dot {
	background: var(--ssh-accent);
	block-size: 7px;
	border-radius: 50%;
	display: inline-block;
	inline-size: 7px;
}

/* ------------------------------------------------------------ действие */

.ssh .ssh__phone {
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: 21px;
	font-weight: 500;
	letter-spacing: -0.01em;
	padding-block: 8px;
	transition: color 0.2s ease;
	white-space: nowrap;
}

.ssh .ssh__phone:hover,
.ssh .ssh__phone:focus-visible {
	color: var(--ssh-accent);
}

.ssh .ssh__cta {
	align-items: center;
	border: 1px solid var(--ssh-accent);
	border-radius: 999px;
	color: var(--ssh-accent);
	display: inline-flex;
	font-size: 15px;
	min-block-size: 50px;
	padding-inline: 24px;
	transition: background-color 0.2s ease, color 0.2s ease;
	white-space: nowrap;
}

.ssh .ssh__cta:hover,
.ssh .ssh__cta:focus-visible {
	background: var(--ssh-accent);
	color: #0e0e0e;
}

/* --------------------------------------------------------------- меню */

.ssh .ssh__menu {
	align-items: center;
	border: 1px solid var(--ssh-line);
	border-radius: 999px;
	display: inline-flex;
	font-size: 15px;
	gap: 11px;
	min-block-size: 50px;
	padding-inline: 18px 22px;
	transition: border-color 0.2s ease;
}

.ssh .ssh__menu:hover,
.ssh .ssh__menu:focus-visible {
	border-color: rgba(255, 255, 255, 0.28);
}

.ssh .ssh__burger {
	display: flex;
	flex-direction: column;
	gap: 5px;
	inline-size: 21px;
}

.ssh .ssh__burger i {
	background: currentColor;
	block-size: 1.5px;
	border-radius: 2px;
	display: block;
	inline-size: 100%;
}

/* --------------------------------------------------------- уже 1200 */

/* Пороги выбраны замером, а не по названиям устройств.
   1320 — полосе становится тесно раньше, чем она формально перестаёт
   помещаться: запас падает со 168 до 28 пикселей.
   1100 — запас уходит в минус (−20), и элементы начинают сжимать
   друг друга. Оценка уходит первой: она украшение доверия, и тот же
   рейтинг есть в панели меню, а телефон и кнопка — это действие. */
@media (max-width: 1320px) {
	.ssh .ssh__social {
		display: none;
	}
}

@media (max-width: 1100px) {
	.ssh .ssh__rating {
		display: none;
	}

	.ssh .ssh__logo {
		margin-inline-end: auto;
	}
}

/* ---------------------------------------------------------- уже 900 */

/* Между 767 и 820 логотип с телефоном, кнопкой и меню перестают
   помещаться: замер даёт −36. Кнопка уходит первой — то же действие
   есть в панели меню, а телефон в шапке ничем не заменить. */
@media (max-width: 860px) {
	.ssh .ssh__cta {
		display: none;
	}
}

/* Смена режима — вместе с контентом Elementor, на 767. */
@media (max-width: 767px) {
	.ssh {
		--ssh-h: 62px;
	}

	.ssh .ssh__inner {
		gap: 12px;
		padding-inline: 16px;
	}

	/* На телефоне в <picture> подставляется значок: он почти квадратный,
	   поэтому задаём высоту, а ширину пусть считает сам. */
	.ssh .ssh__logo img {
		block-size: 38px;
		width: auto;
	}

	.ssh .ssh__rating {
		display: none;
	}

	.ssh .ssh__phone {
		font-size: 16px;
		margin-inline-start: auto;
	}

	.ssh .ssh__menu-label {
		display: none;
	}

	.ssh .ssh__menu {
		block-size: 40px;
		inline-size: 40px;
		justify-content: center;
		padding-inline: 0;
	}
}

/* Значки источников отзывов в плашке. */
.ssh .ssh__sources {
	align-items: center;
	display: inline-flex;
	gap: 3px;
}

.ssh .ssh__sources img {
	border-radius: 3px;
	display: block;
	height: 16px;
	width: 16px;
}



/* Узкие телефоны. Со значком вместо надписи места хватает почти везде,
   поэтому осталась одна ступень — и та про поля, а не про размеры. */
@media (max-width: 360px) {
	.ssh .ssh__inner {
		gap: 10px;
		padding-inline: 14px;
	}

	.ssh .ssh__logo img {
		block-size: 34px;
	}
}