/* ─── P5 polish 2026-05-20: topstrip удалён, status/address перенесены
   в .mh__header-info (центр-правая колонка шапки). Анимация pulse
   используется новым .mh__header-status-dot. ─── */
@keyframes mhPulse {
	0% { box-shadow: 0 0 0 0 rgba(var(--rgb-status-working), 0.5); }
	70% { box-shadow: 0 0 0 7px rgba(var(--rgb-status-working), 0); }
	100% { box-shadow: 0 0 0 0 rgba(var(--rgb-status-working), 0); }
}

.mh__header {
	/* P5 polish 2026-05-20: 4-column grid с info-блоком в col3.
	   [Logo] [Nav] [Info: status+address] [Right: phone+CTA]
	   1fr на info-колонке — заполняет пустоту между nav и phone осмысленным
	   контентом. Topstrip удалён — был дублирован phone, статус виден тут.

	   Hero rework v2 polish 21.05: border-bottom УБРАН. ROW 2
	   (.mh__header-services-row) визуально продолжает header,
	   общая линия живёт на ROW 2 — header + ROW 2 = одна блок-группа. */
	padding: 4px 56px;
	display: grid;
	grid-template-columns: auto auto 1fr auto;
	gap: 0;
	align-items: center;
	min-height: 84px;
}
.mh__brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: var(--fg);
}
/* Логотип максимально использует высоту header'а (min-height 84 - 8 padding = ~76px). */
.mh__brand-logo {
	display: block;
	height: 76px;
	width: auto;
	max-width: 280px;
	object-fit: contain;
}
.mh__brand-text {
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
}
.mh__brand-name {
	font-family: var(--font-mh-display);
	font-weight: 800;
	font-size: var(--text-h3-sm); /* 18px → token */
	letter-spacing: -0.01em;
	line-height: 1;
}
.mh__brand-tag {
	font-family: var(--font-mh-mono);
	font-size: var(--text-mono-2xs); /* 10px → token */
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--fg-quiet);
}
/* Nav прижат к logo через padding-left, не gap — даёт визуальное единство. */
.mh__nav {
	display: inline-flex;
	align-items: center;
	gap: 28px;
	padding: 0 40px 0 56px;
	border-left: 1px solid var(--line);
	margin-left: 32px;
	height: 100%;
}
.mh__nav a,
.mh__nav-link {
	color: var(--fg);
	text-decoration: none;
	font-family: var(--font-mh-body);
	font-size: var(--text-body-sm); /* 14px → token */
	font-weight: 600;
	letter-spacing: -0.005em;
	line-height: 1;
	transition: color 160ms var(--ease-out, ease);
}
.mh__nav a:hover,
.mh__nav-link:hover { color: var(--accent); }
.mh__nav a:focus-visible,
.mh__nav-link:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 6px;
	border-radius: 2px;
}

/* CTA-блок справа: phone + кнопка. Separator перенесён в .mh__header-info
   (border-right). */
.mh__header-cta {
	display: inline-flex;
	align-items: center;
	gap: 0;
	height: 100%;
}
.mh__header-phone {
	font-family: var(--font-mh-mono);
	font-size: var(--text-body-sm);
	font-weight: 600;
	color: var(--fg);
	text-decoration: none;
	letter-spacing: 0.04em;
	padding-right: 24px;
	transition: color 160ms var(--ease-out, ease);
}
.mh__header-phone:hover { color: var(--accent); }
.mh__header-cta .mh__btn { margin-left: 0; }

/* ─── P13b polish: info-блок справа от nav (3 строки, без обрезаний) ───
   Layout: [● Работаем сейчас] / [ПН-ПТ 10:00-13:00, 15:00-19:00] / [адрес].
   Hierarchy:
     row 1 — status pill (bold, dot, slightly larger)
     row 2 — hours (mono, primary text, medium)
     row 3 — address (mono, quiet text, small)
   Размер шрифта подобран так, чтобы 3 строки умещались в высоту header'а
   (84px - 8px padding = 76px полезной; 13 + 12 + 12 + 2×3 gap = ~46px).
   Border-right визуально отделяет от phone+CTA. */
.mh__header-info {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 6px 24px 6px 28px;
	margin: 0 0 0 auto; /* прижато к правой группе */
	border-right: 1px solid var(--line);
	height: 100%;
	justify-content: center;
	align-items: flex-end;
	text-align: right;
	/* белый запас 0 — данные не обрезаются, текст определяет ширину */
}
.mh__header-status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-mh-mono);
	font-size: var(--text-eyebrow); /* 11px → token */
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fg);
	line-height: 1.1;
	white-space: nowrap;
}
.mh__header-status-dot {
	width: 7px;
	height: 7px;
	background: var(--color-status-working);
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(var(--rgb-status-working), 0.5);
	animation: mhPulse 2.4s infinite ease-out;
	flex-shrink: 0;
}
.mh__header-status-dot[data-status="closed"],
.mh__header-status-dot[data-status="vacation"] {
	background: var(--color-yellow-500);
	box-shadow: 0 0 0 0 rgba(255, 185, 19, 0.52);
	animation: mhPulseWarning 2.4s infinite ease-out;
}
.mh__header-status-dot[data-status="promo"] {
	background: var(--color-accent);
	box-shadow: 0 0 0 0 rgba(255, 185, 19, 0.48);
	animation: mhPulseWarning 2.4s infinite ease-out;
}
.mh__header-status-dot[data-status="closed"] {
	background: var(--color-yellow-700);
	animation: none;
}

@keyframes mhPulseWarning {
	0% { box-shadow: 0 0 0 0 rgba(255, 185, 19, 0.52); }
	70% { box-shadow: 0 0 0 8px rgba(255, 185, 19, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 185, 19, 0); }
}
.mh__header-hours {
	font-size: var(--text-mono-2xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fg);
	line-height: 1.1;
	white-space: nowrap;
}
.mh__header-address {
	font-size: var(--text-mono-2xs); /* 10px → token */
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fg-quiet);
	line-height: 1.1;
	white-space: nowrap;
}

/* P13b polish 2026-05-20: info-блок показываем только на широких экранах
   (≥1280px). На viewport 1440 info занимает ~400px и помещается с зазором
   ~140px от nav. На 1280 — еле-еле, на меньше тесно. Mobile/tablet всю
   эту инфу видят в bottom-sheet через бургер (см. ≤960). На 960-1280
   доступ через бургер тоже есть — info-блок просто чуть менее насыщенная
   шапка, ничего не теряется. */
@media (max-width: 1280px) {
	.mh__header-info { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   HEADER SERVICES ROW — Header rework v2 (21.05)
   Sub-bar под main header с 7 услугами полными названиями.
   Высота 44px → итого header 84+44=128px (совпадает с magic 128
   в _hero.css `calc(100vh - 128px)` — hero НЕ сдвигается).
   ═══════════════════════════════════════════════════════════════════ */

.mh__header-services-row {
	display: flex;
	align-items: stretch;
	/* Hero rework v2 polish round 3 (21.05): растянуть services на всю
	   ширину чтобы убрать «вырванные» зоны слева и справа.
	   space-between даёт равные gaps между пунктами + крайние услуги
	   на самих краях header bar. */
	justify-content: space-between;
	gap: 0;
	/* Background bg-deep (--color-soft — кремовый чуть темнее
	   --paper) — создаёт subtle paper-card визуальное отличие от hero
	   ниже. ROW 2 ясно читается как часть header-группы, не сливается
	   с hero paper. */
	background: var(--bg-deep);
	border-bottom: 1px solid var(--line);
	padding: 0 56px;
	min-height: 46px;
	position: relative;
	z-index: 90;
}

.mh__header-service {
	position: relative;
	display: flex;
	align-items: stretch;
	flex: 1 1 auto;
	justify-content: center;
}

.mh__header-service-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0 16px;
	font-family: var(--font-mh-display);
	font-size: var(--text-body-sm);
	font-weight: 600;
	letter-spacing: 0;
	color: var(--fg);
	text-decoration: none;
	background: transparent;
	transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
	white-space: nowrap;
}

/* Arrow «→» — appears on hover, slide-in 4px from left.
   Mono-style, signals «это link». */
.mh__header-service-link-arrow {
	font-family: var(--font-mh-mono);
	font-size: var(--text-body-sm);
	color: var(--fg-mute);
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 0.18s ease, transform 0.18s ease, color 0.18s ease;
}

/* Underline indicator — slide-in анимация снизу при hover.
   Mohawk-style: тонкая accent линия. */
.mh__header-service-link::after {
	content: "";
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 8px;
	height: 2px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.22s var(--ease-out, ease);
}

/* Hover state — lift + paper bg tint + arrow appears + underline */
.mh__header-service:hover .mh__header-service-link,
.mh__header-service-link:focus-visible {
	color: var(--ink);
	background: var(--paper);
	transform: translateY(var(--motion-lift-y-sm));
	outline: none;
}

.mh__header-service:hover .mh__header-service-link::after,
.mh__header-service-link:focus-visible::after {
	transform: scaleX(1);
}

.mh__header-service:hover .mh__header-service-link-arrow,
.mh__header-service-link:focus-visible .mh__header-service-link-arrow {
	opacity: 1;
	transform: translateX(0);
	color: var(--accent);
}

/* Active page indicator — static underline для текущей услуги. */
.mh__header-service-link[aria-current="page"]::after {
	transform: scaleX(1);
	background: var(--ink);
}

/* ─── PEEK HINT — auto-demo первой услуги после load ───
   Hero rework v2 (21.05) — Иван попросил «активную подсказку
   сразу после захода на страницу что вот тут можно нажать».
   Первая услуга «Интерьерная печать» автоматически показывается
   в hover-state на 2.4с через 1.2с после load — потом мягко
   возвращается в rest. CSS-only, без JS, 1 раз. */

@keyframes mhServicePeek {
	0%             { background: transparent; transform: translateY(0); }
	18%, 70%       { background: var(--paper); transform: translateY(var(--motion-lift-y-sm)); }
	100%           { background: transparent; transform: translateY(0); }
}

@keyframes mhServicePeekArrow {
	0%             { opacity: 0; transform: translateX(-4px); color: var(--fg-mute); }
	18%, 70%       { opacity: 1; transform: translateX(0); color: var(--accent); }
	100%           { opacity: 0; transform: translateX(-4px); color: var(--fg-mute); }
}

@keyframes mhServicePeekUnderline {
	0%             { transform: scaleX(0); }
	18%, 70%       { transform: scaleX(1); }
	100%           { transform: scaleX(0); }
}

.mh__header-services-row:not(.has-current-service) .mh__header-service:first-child .mh__header-service-link {
	animation: mhServicePeek 3.6s ease-in-out 1.2s 1 forwards;
}
.mh__header-services-row:not(.has-current-service) .mh__header-service:first-child .mh__header-service-link-arrow {
	animation: mhServicePeekArrow 3.6s ease-in-out 1.2s 1 forwards;
}
.mh__header-services-row:not(.has-current-service) .mh__header-service:first-child .mh__header-service-link::after {
	animation: mhServicePeekUnderline 3.6s ease-in-out 1.2s 1 forwards;
}

/* Если юзер наводит мышь во время peek — реальный hover должен
   перебивать анимацию. CSS-priority: :hover после animation. */
.mh__header-services-row .mh__header-service:hover .mh__header-service-link {
	animation: none;
}
.mh__header-services-row .mh__header-service:hover .mh__header-service-link-arrow {
	animation: none;
}
.mh__header-services-row .mh__header-service:hover .mh__header-service-link::after {
	animation: none;
}

@media (prefers-reduced-motion: reduce) {
	.mh__header-services-row .mh__header-service:first-child .mh__header-service-link,
	.mh__header-services-row .mh__header-service:first-child .mh__header-service-link-arrow,
	.mh__header-services-row .mh__header-service:first-child .mh__header-service-link::after {
		animation: none;
	}
}

/* ─── Popup при hover на услугу ──────────────────────────────────── */

/* Popup = whole-card link <a>. Клик в любое место — переход на услугу.
   CTA «Посчитать» внутри — visual marker affordance, не отдельная ссылка. */
.mh__header-service-popup {
	position: absolute;
	top: 100%;
	left: 50%;
	--service-popup-x: -50%;
	transform: translateX(var(--service-popup-x)) translateY(-6px);
	/* Mohawk paper-card style: paper bg + ink text + accent stripe top. */
	background: var(--paper);
	color: var(--fg);
	text-decoration: none;
	padding: 16px 20px 14px;
	min-width: 220px;
	border: 1.5px solid var(--ink);
	border-top: 3px solid var(--accent);
	box-shadow: 0 16px 40px -12px rgba(var(--rgb-black), 0.22);
	display: flex;
	flex-direction: column;
	gap: 6px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
	z-index: 100;
	white-space: nowrap;
	margin-top: 8px;
}

/* Невидимый мост — чтобы курсор не «терял» при движении вниз. */
.mh__header-service-popup::before {
	content: "";
	position: absolute;
	top: -16px;
	left: 0;
	right: 0;
	height: 16px;
}

.mh__header-service:hover .mh__header-service-popup,
.mh__header-service:focus-within .mh__header-service-popup {
	opacity: 1;
	pointer-events: auto;
	transform: translateX(var(--service-popup-x)) translateY(0);
}

/* Popup hover indicator — whole-card lift + shadow deeper.
   Сигнал «весь блок кликабельный». */
.mh__header-service-popup:hover,
.mh__header-service-popup:focus-visible {
	box-shadow: 0 20px 48px -10px rgba(var(--rgb-black), 0.32);
	transform: translateX(var(--service-popup-x)) translateY(var(--motion-lift-y-md));
	outline: none;
}

/* На hover popup — CTA внутри подсвечивается accent (хоть он span,
   visually выглядит как «активная кнопка вот тут»). */
.mh__header-service-popup:hover .mh__header-service-popup-cta,
.mh__header-service-popup:focus-visible .mh__header-service-popup-cta {
	background: var(--accent);
	color: var(--ink);
}

.mh__header-service-popup-title {
	font-family: var(--font-mh-display);
	font-weight: 700;
	font-size: var(--text-body); /* 16px → token */
	letter-spacing: -0.005em;
	color: var(--fg);
	line-height: 1.2;
}

.mh__header-service-popup-price {
	font-family: var(--font-mh-mono);
	font-size: var(--text-eyebrow); /* 11px → token */
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fg-mute);
}

/* CTA — visual marker (НЕ link, popup сам link). Подсвечивается
   accent при hover на родительский popup. */
.mh__header-service-popup-cta {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 16px;
	background: var(--ink);
	color: var(--paper);
	font-family: var(--font-mh-display);
	font-size: var(--text-body-sm);
	font-weight: 700;
	letter-spacing: 0.01em;
	transition: background 0.18s ease, color 0.18s ease;
	margin-top: 8px;
	text-decoration: none;
}

.mh__header-service-popup-cta-arrow {
	font-family: var(--font-mh-mono);
	font-size: var(--text-body-sm); /* 14px → token */
}

.mh__header-service-popup--subservices {
	min-width: min(340px, calc(100vw - 32px));
	gap: 10px;
	white-space: normal;
}
.mh__header-services-row .mh__header-service:first-child .mh__header-service-popup {
	left: 0;
	--service-popup-x: 0;
}

.mh__header-service-sublist {
	display: grid;
	gap: 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.mh__header-service-subitem {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 16px;
	margin: 0 -10px;
	padding: 10px;
	color: var(--fg);
	text-decoration: none;
	border-bottom: 1px dashed var(--line);
	transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.mh__header-service-subitem:last-child {
	border-bottom: 0;
}

.mh__header-service-subitem:hover,
.mh__header-service-subitem:focus-visible {
	background: var(--ink);
	color: var(--paper);
	box-shadow: inset 3px 0 0 var(--accent);
	transform: translateX(2px);
	outline: none;
}

.mh__header-service-subitem-name {
	font-family: var(--font-mh-display);
	font-size: var(--text-body-sm);
	font-weight: 700;
	line-height: 1.25;
}

.mh__header-service-subitem-price {
	font-size: var(--text-mono-2xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--accent);
	white-space: nowrap;
}

.mh__header-service-subitem:hover .mh__header-service-subitem-price,
.mh__header-service-subitem:focus-visible .mh__header-service-subitem-price {
	color: var(--accent);
}

/* ─── Tablet (961-1280) — компактнее ─── */
@media (min-width: 961px) and (max-width: 1280px) {
	.mh__header-services-row { padding: 0 24px; }
	.mh__header-service-link { padding: 0 12px; font-size: var(--text-mono-sm); }
}

/* ─── Mobile (≤960) — скрыта, услуги через burger sheet ─── */
@media (max-width: 960px) {
	.mh__header-services-row { display: none; }
}