/**
 * Компонент: Site header.
 *
 * reference (шапка одинакова во всех четырёх макетах):
 *   header  position:sticky; top:0; z-index:50;
 *           background:rgba(255,255,255,0.96); backdrop-filter:blur(8px);
 *           border-bottom:1px solid #DDE0E6
 *   строка  max-width:1240px; width:calc(100% - 48px); gap:28px; height:72px
 *   порядок логотип · рейтинг · навигация · мессенджеры · телефон · CTA
 *
 * ПОЧЕМУ РЯДЫ ШАПКИ НЕ НА .tri-container.
 * В макете у ряда НЕТ горизонтального поля: `max-width:1240px` вместе с
 * `width:calc(100% - 48px)` означает «полезная ширина 1240px, и не ближе
 * 24px к краю окна». У `.tri-container` тот же предел 1240px, но 24px с
 * каждой стороны уходят внутрь, и содержимому остаётся 1192px.
 *
 * Этих 48px композиции и не хватало. Измерено: ряду нужно 1209px, дано
 * 1192px — поэтому кнопка заявки вылезала за край на 14px, а `margin-right:auto`
 * у меню схлопывался в ноль, и правая половина шапки читалась одним
 * сплошным куском. Ряды шапки поэтому стоят на своей оболочке
 * .tri-header-shell, повторяющей бокс макета буквально.
 *
 * ЕДИНЫЙ БРЕЙКПОИНТ ШАПКИ — 1280px.
 * Полная композиция макета (рейтинг + меню + мессенджеры + телефон + CTA)
 * умещается в строку начиная с 1280px; ниже включается бургер и панель.
 * Мобильного макета в /design-reference нет — всё, что относится
 * к бургеру, панели и компактной кнопке звонка, введено темой,
 * см. docs/DESIGN-DEVIATIONS.md.
 *
 * Структура (template-parts/header/site-header.php):
 *   .tri-site-header
 *     .tri-header__bar                    .tri-header-shell
 *       .tri-branding
 *       .tri-header__rating-wrap        (если есть данные)
 *       #tri-header-drawer              ЕДИНСТВЕННЫЙ экземпляр навигации
 *         .tri-header__nav              основное меню
 *         .tri-header__topics           направления + мегаменю
 *         .tri-header__social           мессенджеры (если есть данные)
 *         .tri-header__contacts         телефон и часы (если есть данные)
 *         .tri-header__cta              кнопка заявки (если есть адрес)
 *       .tri-header__phone-icon
 *       .tri-burger
 *
 * <1280px  — #tri-header-drawer это выпадающая панель;
 * >=1280px — у него display:contents, дети встают в строку шапки,
 *            а .tri-header__topics позиционируется вторым рядом.
 */

.tri-site-header {
	position: sticky;
	top: 0;
	z-index: var(--tri-z-header); /* reference: z-index:50 */
	background-color: rgba(255, 255, 255, 0.96); /* reference */
	border-bottom: var(--tri-border-width) solid var(--tri-color-border);
	backdrop-filter: blur(8px); /* reference: blur(8px) */
}

/* Административная панель WP занимает верх экрана. */
.admin-bar .tri-site-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .tri-site-header {
		top: 46px;
	}
}

/* --- Оболочка рядов шапки -------------------------------------------
 * reference: max-width:1240px; width:calc(100% - 48px); margin:0 auto.
 * Поле — снаружи ряда, а не внутри: полезная ширина равна пределу.
 * На узких экранах поле берётся из общей переменной, чтобы шапка
 * отступала от края окна так же, как остальная страница.
 * ------------------------------------------------------------------ */

.tri-header-shell {
	width: calc(100% - var(--tri-gutter) * 2);
	max-width: var(--tri-container-max);
	margin-inline: auto;
}

/* --- Первая строка -------------------------------------------------- */

.tri-header__bar {
	display: flex;
	align-items: center;
	gap: var(--tri-space-16);
	min-height: var(--tri-header-height);
}

/* --- Логотип -------------------------------------------------------- */

.tri-branding {
	display: flex;
	align-items: center;
	gap: var(--tri-space-10); /* reference: gap:10px */
	flex-shrink: 0;
	text-decoration: none;

}

.tri-branding img,
.tri-branding svg {
	height: 32px; /* мобильная величина — введена темой */
	width: auto;
}

.tri-branding__title {
	font-size: var(--tri-fs-19);
	font-weight: var(--tri-fw-800);
	letter-spacing: var(--tri-ls-n0-014);
	color: var(--tri-color-navy);
}

.tri-branding__tagline {
	display: none;
}

/* --- Рейтинг --------------------------------------------------------
 * reference: плашка — gap:7px; background:#FFFFFF; border:1px solid #DDE0E6;
 * border-radius:6px; padding:5px 10px; 13.5px/800 #16181D
 * Значение рейтинга — бизнес-данные, в теме не захардкожено:
 * без данных обёртка не выводится вовсе.
 * ------------------------------------------------------------------ */

.tri-header__rating {
	display: inline-flex;
	align-items: center;
	gap: var(--tri-space-7);
	padding: var(--tri-space-5) var(--tri-space-10);
	background-color: var(--tri-color-white);
	border: var(--tri-border-width) solid var(--tri-color-border);
	border-radius: var(--tri-radius-6);
	font-size: var(--tri-fs-13-5);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	text-decoration: none;
	white-space: nowrap;
}

/* reference: 18x18; border-radius:6px; background:#FC3F1D; 12px/800 */
.tri-header__rating-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: var(--tri-radius-6);
	background-color: var(--tri-color-yandex);
	color: var(--tri-color-white);
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-800);
}

/* reference: звезда 13x13, fill #F5C518 */
.tri-header__rating-star {
	width: 13px;
	height: 13px;
	color: var(--tri-color-star);
}

.tri-header__rating-wrap {
	display: none;
}

/* --- Контакты ------------------------------------------------------- */

.tri-header__contacts {
	display: none;
	flex-direction: column;
	align-items: flex-end;
	line-height: var(--tri-lh-1-25); /* reference: line-height:1.25 */
}

/* reference: 21px/800; letter-spacing:-0.014em; #16181D */
.tri-header__phone {
	font-size: var(--tri-fs-21);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	white-space: nowrap;
	letter-spacing: var(--tri-ls-n0-014);
	text-decoration: none;
}

/* reference: 12px/500 #6B7280 */
.tri-header__hours {
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-500);
	color: var(--tri-color-muted-soft);
	white-space: nowrap;
}

/* Компактная кнопка звонка вместо номера на узких экранах — введена темой. */
.tri-header__phone-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-left: auto;
	border: var(--tri-border-width) solid var(--tri-color-border);
	border-radius: var(--tri-radius-10);
	color: var(--tri-color-navy);
	flex-shrink: 0;
}

/* --- Мессенджеры ---------------------------------------------------- */

/* reference: gap:8px; padding-right:18px */
.tri-header__social {
	display: none;
	align-items: center;
	gap: var(--tri-space-8);
}

/* reference: 36x36; border:1px solid #DDE0E6; border-radius:10px;
   MAX-подпись 12px/700 ls 0.02em #12295C */
.tri-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: var(--tri-border-width) solid var(--tri-color-border);
	border-radius: var(--tri-radius-10);
	background-color: var(--tri-color-white);
	color: var(--tri-color-navy);
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-700);
	letter-spacing: var(--tri-ls-p0-02);
	text-decoration: none;
}

/* reference: style-hover="border-color:#12295C" */
.tri-social-link:hover,
.tri-social-link:focus-visible {
	border-color: var(--tri-color-navy);
	color: var(--tri-color-navy);
}

.tri-social-link svg {
	width: 17px;
	height: 17px;
}

/* --- CTA в шапке ---------------------------------------------------- */

.tri-header__cta {
	display: none;
	flex-shrink: 0;
}

/* --- Бургер (введён темой) ------------------------------------------ */

.tri-burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44px — минимальная цель нажатия (мобильный этап 14.09). */
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border: var(--tri-border-width) solid var(--tri-color-border);
	border-radius: var(--tri-radius-10);
	color: var(--tri-color-ink);
	background-color: var(--tri-color-white);
}

.tri-burger__box {
	position: relative;
	display: block;
	width: 18px;
	height: 12px;
}

.tri-burger__line {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background-color: currentColor;
	transition:
		transform var(--tri-duration-28) var(--tri-ease),
		opacity var(--tri-duration-28) var(--tri-ease);
}

.tri-burger__line:nth-child(1) { top: 0; }
.tri-burger__line:nth-child(2) { top: 5px; }
.tri-burger__line:nth-child(3) { top: 10px; }

.tri-burger[aria-expanded="true"] .tri-burger__line:nth-child(1) {
	transform: translateY(5px) rotate(45deg);
}

.tri-burger[aria-expanded="true"] .tri-burger__line:nth-child(2) {
	opacity: 0;
}

.tri-burger[aria-expanded="true"] .tri-burger__line:nth-child(3) {
	transform: translateY(-5px) rotate(-45deg);
}

/* --- Мобильная панель (введена темой) -------------------------------- */

.tri-header__drawer {
	display: none;
	/* Абсолютное, а не фиксированное позиционирование: backdrop-filter
	   на .tri-site-header создаёт для потомков containing block, и
	   position:fixed всё равно считался бы от шапки. */
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: var(--tri-z-dropdown);
	flex-direction: column;
	gap: var(--tri-space-16);
	max-height: calc(100dvh - var(--tri-header-height));
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--tri-space-16) var(--tri-gutter) var(--tri-space-40);
	background-color: var(--tri-color-white);
	border-top: var(--tri-border-width) solid var(--tri-color-border);
	box-shadow: var(--tri-shadow-navy-56-18);
}

.tri-header__drawer[data-open="true"] {
	display: flex;
}

/* Блокировка прокрутки страницы под открытой панелью. */
body.tri-scroll-locked {
	overflow: hidden;
}

/* ====================================================================
 * < 1280px — панель. Порядок блоков внутри панели удобнее десктопного.
 * ================================================================== */

@media (max-width: 1279px) {
	.tri-header__drawer .tri-header__nav { order: 1; width: 100%; }
	.tri-header__drawer .tri-header__topics { order: 2; }
	.tri-header__drawer .tri-header__contacts { order: 3; }
	.tri-header__drawer .tri-header__social { order: 4; }
	.tri-header__drawer .tri-header__cta { order: 5; }

	.tri-header__drawer .tri-header__contacts {
		display: flex;
		align-items: flex-start;
		margin-left: 0;
		padding-block-start: var(--tri-space-16);
		border-top: var(--tri-border-width) solid var(--tri-color-divider);
	}

	.tri-header__drawer .tri-header__social {
		display: flex;
		padding-right: 0;
	}

	.tri-header__drawer .tri-header__cta {
		display: flex;
	}

	.tri-header__drawer .tri-header__cta .tri-btn {
		width: 100%;
	}
}

/* ====================================================================
 * >= 1280px — полная композиция макета
 * ================================================================== */

@media (min-width: 1280px) {

	/* reference: gap:28px; height:72px */
	.tri-header__bar {
		gap: var(--tri-space-28);
		min-height: var(--tri-header-bar-height);
	}

	/*
	 * Второй ряд позиционируется абсолютно — резервируем его высоту.
	 * Она же анимируется при сворачивании ряда направлений: высота
	 * резерва и высота самого ряда уезжают в ноль одним движением,
	 * поэтому содержимое страницы поднимается плавно, без скачка.
	 */
	.tri-site-header--has-topics {
		padding-bottom: var(--tri-header-topics-height);
		transition: padding-bottom var(--tri-duration-28) var(--tri-ease);
	}

	.tri-site-header--has-topics.is-topics-collapsed {
		padding-bottom: 0;
	}

	/*
	 * Ни один блок правой половины не сжимается: у ссылок меню стоит
	 * white-space:nowrap, и при нехватке ширины flex резал бы не буквы,
	 * а расстояния между блоками — ровно тот «склеенный» вид, который
	 * и требовалось убрать. Лучше честная прокрутка ряда направлений
	 * (см. mega-menu.css), чем незаметно съеденный ритм.
	 */
	.tri-header__nav,
	.tri-header__social,
	.tri-header__contacts,
	.tri-header__cta {
		flex-shrink: 0;
	}

	/* reference: логотип height:40px */
	.tri-branding img,
	.tri-branding svg {
		height: 40px;
	}

	/* reference: padding-left/right:20px; границы слева и справа */
	.tri-header__rating-wrap {
		display: flex;
		align-items: center;
		padding-inline: var(--tri-space-20);
		border-left: var(--tri-border-width) solid var(--tri-color-border);
		border-right: var(--tri-border-width) solid var(--tri-color-border);
	}

	/*
	 * Контейнер растворяется: меню, мессенджеры, телефон и CTA становятся
	 * прямыми детьми .tri-header__bar; второй ряд позиционируется
	 * абсолютно и из потока строки выпадает.
	 */
	.tri-header__drawer,
	.tri-header__drawer[data-open="true"] {
		display: contents;
	}

	/* reference: nav{margin-right:auto} — всё правее прижимается к краю */
	.tri-header__nav {
		margin-right: auto;
	}

	.tri-header__contacts {
		display: flex;
	}

	.tri-header__social {
		display: flex;
		padding-right: var(--tri-space-18);
	}

	.tri-header__cta {
		display: inline-flex;
	}

	.tri-header__phone-icon,
	.tri-burger {
		display: none;
	}
}

/* Логотип — ссылка на главную, значит и цель нажатия: на телефоне
   картинка занимала 32px по высоте (мобильный этап 14.09). */
.tri-branding,
.custom-logo-link {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
}