/* ═══════════════════════════════════════════════════════════════
   components.css — header, footer, top-note, modal
   ═══════════════════════════════════════════════════════════════ */

/* ─── TOP NOTE ──────────────────────────────────────────────── */
.top-note {
	background: var(--color-graphite-900);
	color: var(--color-paper);
	padding: 0 var(--page-padding-x);
	border-bottom: 2px solid var(--color-accent);
	box-shadow: 0 10px 28px -22px rgba(var(--rgb-black), 0.72);
}

.top-note__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: 46px;
	max-width: var(--container-grid);
	margin: 0 auto;
	font-size: var(--text-body-sm);
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
}

.top-note__label {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 4px 9px;
	background: var(--color-accent);
	color: var(--color-accent-fg);
	font-family: var(--font-mh-mono);
	font-size: var(--text-eyebrow);
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.top-note__text {
	max-width: 920px;
}

.top-note__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 30px;
	padding: 6px 12px;
	border: 1px solid currentColor;
	color: inherit;
	font-family: var(--font-mh-mono);
	font-size: var(--text-eyebrow);
	font-weight: 800;
	letter-spacing: 0.06em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.top-note__link:hover {
	background: var(--color-paper);
	color: var(--color-graphite-900);
	text-decoration: none;
}

.top-note--promo {
	background: var(--color-accent);
	color: var(--color-accent-fg);
	border-bottom-color: var(--color-graphite-900);
}

.top-note--promo .top-note__label {
	background: var(--color-graphite-900);
	color: var(--color-paper);
}

.top-note--vacation {
	background: var(--color-graphite-900);
	color: var(--color-paper);
	border-top: 2px solid var(--color-accent);
}

.top-note--vacation .top-note__label {
	background: var(--color-yellow-500);
	color: var(--color-graphite-900);
}

@media (max-width: 782px) {
	.top-note {
		padding: 0 16px;
	}

	.top-note__inner {
		flex-wrap: wrap;
		gap: 8px 10px;
		min-height: 58px;
		padding: 10px 0;
		font-size: var(--text-mono-sm);
		text-align: left;
		justify-content: flex-start;
	}

	.top-note__text {
		flex: 1 1 100%;
		max-width: none;
	}
}

/* ─── HEADER ────────────────────────────────────────────────── */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--header-bg);
	border-bottom: 1px solid var(--header-border);
	backdrop-filter: blur(8px);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
	padding: var(--space-4) var(--page-padding-x);
	max-width: var(--container-grid);
	margin: 0 auto;
}

.site-header__logo {
	display: flex;
	align-items: center;
	text-decoration: none;
	color: var(--header-fg);
}
.site-header__logo img,
.site-header__logo svg {
	height: 36px;
	width: auto;
	/* Лого №10 — максимальный визуальный размер в пределах header.
	   transform не влияет на layout, поэтому высота header не растёт. */
	transform: scale(1.75);
	transform-origin: left center;
}

.site-header__nav { display: flex; gap: var(--space-6); align-items: center; }

.site-header__nav a {
	color: var(--header-fg);
	text-decoration: none;
	font-weight: var(--fw-medium);
	font-size: var(--text-body);
	padding: var(--space-2) 0;
	border-bottom: 2px solid transparent;
	transition: border-color var(--duration-fast) var(--ease-out);
}
.site-header__nav a:hover,
.site-header__nav a[aria-current="page"] {
	border-bottom-color: var(--color-accent);
}

.site-header__cta { display: flex; gap: var(--space-3); align-items: center; }

.site-header__phone {
	font-weight: var(--fw-semibold);
	color: var(--header-fg);
	text-decoration: none;
	white-space: nowrap;
}
.site-header__phone:hover { color: var(--color-accent-hover); }

/* Polish P2 2026-05-20: burger из subtle stroke → Mohawk-кнопка.
   - Square accent-yellow background + ink-graphite stroke (контраст)
   - 44×44 touch target (Apple HIG 44pt минимум)
   - Active state на mobile-nav[open] инвертирует (ink + paper) */
.site-header__burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: var(--color-yellow-500);
	border: 1.5px solid var(--color-graphite-900);
	color: var(--color-graphite-900);
	cursor: pointer;
	padding: 0;
	border-radius: 0;
	transition: background 160ms ease, color 160ms ease;
}
.site-header__burger svg {
	width: 24px;
	height: 24px;
	stroke-width: 2.4;
}
.site-header__burger:hover {
	background: var(--color-graphite-900);
	color: var(--color-yellow-500);
}
.site-header__burger:focus-visible {
	outline: 2px solid var(--color-graphite-900);
	outline-offset: 3px;
}
.site-header__burger[aria-expanded="true"] {
	background: var(--color-graphite-900);
	color: var(--color-yellow-500);
}

@media (max-width: 1024px) {
	.site-header__nav { display: none; }
	.site-header__phone { display: none; }
	.site-header__burger { display: inline-flex; }
}

/* ─── MOBILE NAV — Mohawk dark bottom-sheet (P3 polish 2026-05-20) ─────
   Решает «плоский белый список» — переход на индустриальный темный sheet:
   - graphite-900 фон, paper текст
   - Header sheet: logo-mark + close
   - Section «УСЛУГИ»: grid 2 col с иконками + цена «по запросу»
   - Section «КОНТАКТЫ»: phone + messenger + address + status-indicator
   ────────────────────────────────────────────────────────────────── */
.mobile-nav[open] {
	position: fixed;
	inset: 0;
	border: 0;
	max-width: none;
	max-height: none;
	width: 100%;
	height: 100%;
	margin: 0;
	/* iOS safe-area: notch сверху (47pt) + home-indicator снизу (34pt)
	   на iPhone 14/15 перекрывают контент при inset:0. На non-iOS = 0px. */
	padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
	background: var(--color-graphite-900);
	color: var(--color-paper);
	overflow-y: auto;
}

.mobile-nav__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 24px;
	border-bottom: 1px solid rgba(var(--rgb-paper), 0.12);
}
.mobile-nav__brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--color-paper);
	text-decoration: none;
}
.mobile-nav__brand img {
	height: 48px;
	width: auto;
	max-width: 220px;
	object-fit: contain;
}

.mobile-nav__close {
	position: static;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1.5px solid rgba(var(--rgb-paper), 0.3);
	color: var(--color-paper);
	font-size: var(--text-price); /* 22px → token */
	font-weight: 300;
	line-height: 1;
	cursor: pointer;
	transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.mobile-nav__close:hover {
	background: var(--color-yellow-500);
	color: var(--color-graphite-900);
	border-color: var(--color-yellow-500);
}

.mobile-nav__section {
	padding: 28px 24px 8px;
}
.mobile-nav__eyebrow {
	font-family: var(--font-mh-mono);
	font-size: var(--text-eyebrow); /* 11px → token */
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-yellow-500);
	margin-bottom: 18px;
	display: block;
}

/* ─── Услуги — grid 2 col ─── */
.mobile-nav__services {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background: rgba(var(--rgb-paper), 0.08); /* тонкие линии-сетка между клетками */
}
.mobile-nav__service {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px 14px;
	background: var(--color-graphite-900);
	color: var(--color-paper);
	text-decoration: none;
	min-height: 92px;
	transition: background 160ms ease;
}
.mobile-nav__service:hover,
.mobile-nav__service:focus-visible {
	background: rgba(var(--rgb-paper), 0.04);
	outline: none;
}
.mobile-nav__service-icon {
	width: 24px;
	height: 24px;
	color: var(--color-yellow-500);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.mobile-nav__service-icon svg { width: 100%; height: 100%; }
.mobile-nav__service-title {
	font-family: var(--font-mh-display);
	font-size: var(--text-body-sm); /* 14px → token */
	font-weight: 600;
	line-height: 1.25;
	color: var(--color-paper);
	letter-spacing: -0.005em;
}
.mobile-nav__service-price {
	font-family: var(--font-mh-mono);
	font-size: var(--text-mono-2xs); /* 10px → token */
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(var(--rgb-paper), 0.5);
	margin-top: auto;
}
.mobile-nav__service--all {
	grid-column: span 2;
	background: var(--color-yellow-500);
	color: var(--color-graphite-900);
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	min-height: 64px;
	padding: 18px 20px;
}
.mobile-nav__service--all .mobile-nav__service-title { color: var(--color-graphite-900); }
.mobile-nav__service--all:hover,
.mobile-nav__service--all:focus-visible {
	background: var(--color-yellow-550);
}

/* ─── Контакты ─── */
.mobile-nav__contacts {
	display: flex;
	flex-direction: column;
}
.mobile-nav__contact {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 0;
	color: var(--color-paper);
	text-decoration: none;
	border-bottom: 1px solid rgba(var(--rgb-paper), 0.08);
	font-family: var(--font-mh-body);
	font-size: var(--text-body);
	transition: color 160ms ease;
}
.mobile-nav__contact:last-child { border-bottom: 0; }
.mobile-nav__contact:hover { color: var(--color-yellow-500); }
.mobile-nav__contact-icon {
	width: 18px;
	height: 18px;
	color: var(--color-yellow-500);
	flex-shrink: 0;
}
/* P13 polish 2026-05-20: arrow в конце контакта — даёт визуальный сигнал
   что элемент кликабелен. Раньше «Контакты» выглядели плоским списком и
   юзер сомневался активны они или нет. */
.mobile-nav__contact-arrow {
	margin-left: auto;
	font-family: var(--font-mh-mono);
	font-size: var(--text-body); /* 16px → token */
	color: var(--color-yellow-500);
	opacity: 0.7;
	transition: transform 160ms ease, opacity 160ms ease;
}
.mobile-nav__contact:hover .mobile-nav__contact-arrow {
	opacity: 1;
	transform: translateX(3px);
}
.mobile-nav__status {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 0;
	color: rgba(var(--rgb-paper), 0.65);
	font-family: var(--font-mh-mono);
	font-size: var(--text-eyebrow); /* 11px → token */
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.mobile-nav__status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-status-working);
	box-shadow: 0 0 0 3px rgba(var(--rgb-status-working), 0.2);
}

/* ─── MODAL <dialog> (заявка) ───────────────────────────────── */
.lead-modal {
	border: 0;
	border-radius: var(--radius-lg);
	padding: 0;
	max-width: 560px;
	width: calc(100% - var(--space-8));
	background: var(--color-bg);
	color: var(--color-fg);
	box-shadow: var(--shadow-lg);
}

.lead-modal::backdrop {
	background: rgba(var(--rgb-graphite-900), 0.6);
	backdrop-filter: blur(4px);
}

.lead-modal__head {
	padding: var(--space-6) var(--space-8) 0;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--space-4);
}

.lead-modal__title { margin: 0; font-size: var(--text-h3); }
.lead-modal__close {
	background: transparent;
	border: 0;
	font-size: var(--text-h4);
	color: var(--color-fg-muted);
	padding: var(--space-2);
	margin: calc(-1 * var(--space-2));
}

.lead-modal__body {
	padding: var(--space-4) var(--space-8) var(--space-8);
}

.lead-modal__fallback { display: grid; gap: var(--space-4); }
.lead-modal__fallback label { display: grid; gap: var(--space-2); }
.lead-modal__fallback input:not([type="checkbox"]),
.lead-modal__fallback select,
.lead-modal__fallback textarea { width: 100%; }
.lead-modal__fallback-consent { grid-template-columns: auto 1fr; align-items: start; }
.lead-modal__notice { margin: 0 0 var(--space-4); padding: var(--space-3); border-radius: var(--radius-sm); }
.lead-modal__notice--success { background: var(--color-soft); border-left: 3px solid var(--color-success); }
.lead-modal__notice--error { background: var(--color-soft); border-left: 3px solid var(--color-error); }

/* Progressive enhancement: если JS отключён — модалка не нужна,
   все ссылки на #lead-modal должны якорно вести на /contacts/ */
@media (max-width: 640px) {
	.lead-modal { max-width: none; width: 100%; height: 100%; max-height: 100%; border-radius: 0; margin: 0; }
}

/* Select2 dropdown внутри <dialog> — Forminator теряет background, когда мы
   меняем dropdownParent на #lead-modal (см. ui.js patchSelect2InModal).
   Forminator оборачивает результаты в .forminator-select-dropdown (НЕ
   стандартный .select2-dropdown) — стилизуем именно его + UL/LI ниже,
   иначе опции читаются поверх полей формы. */
.lead-modal .select2-container--open,
.lead-modal .forminator-select-dropdown {
	background: var(--color-bg);
	color: var(--color-fg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}

/* Контейнер сам по себе — без бордера/фона: только обёртка для wrapper выше */
.lead-modal .select2-container--open {
	border: 0;
	box-shadow: none;
	background: transparent;
}

.lead-modal .select2-results__options {
	background: var(--color-bg);
	max-height: 280px;
	overflow-y: auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lead-modal .select2-results__option {
	padding: var(--space-3) var(--space-4);
	background: var(--color-bg);
	color: var(--color-fg);
	font-size: var(--text-body);
	line-height: 1.4;
	cursor: pointer;
}

.lead-modal .select2-results__option--highlighted,
.lead-modal .select2-results__option--highlighted[aria-selected],
.lead-modal .select2-results__option[aria-selected="true"] {
	background: rgba(var(--rgb-graphite-900), 0.06);
	color: var(--color-fg);
}

/* ─── FOOTER ────────────────────────────────────────────────── */
.site-footer {
	background: var(--color-bg-inverse);
	color: var(--color-fg-inverse);
	padding: var(--page-padding-y) var(--page-padding-x) var(--space-8);
}

.site-footer a { color: var(--color-fg-inverse); }
.site-footer a:hover { color: var(--color-accent); }

.site-footer__inner {
	max-width: var(--container-grid);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
	gap: var(--space-12);
}

@media (max-width: 1024px) {
	.site-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
	.site-footer__inner { grid-template-columns: 1fr; gap: var(--space-8); }
}

.site-footer__brand img {
	height: 40px;
	/* Лого №10 — максимальный визуальный размер. transform-origin top → лого
	   растёт вниз, поэтому margin-bottom учитывает этот overflow (40*1.8-40+16). */
	transform: scale(1.8);
	transform-origin: left top;
	margin-bottom: 48px;
}
.site-footer__brand p { color: var(--color-warm-300); }

.site-footer__col h4 {
	font-size: var(--text-body);
	text-transform: uppercase;
	letter-spacing: var(--ls-caps);
	color: var(--color-warm-300);
	font-weight: var(--fw-semibold);
	margin-bottom: var(--space-4);
}

.site-footer__list { list-style: none; padding: 0; margin: 0; }
.site-footer__list li { margin-bottom: var(--space-3); }
.site-footer__list a { text-decoration: none; }

.site-footer__bottom {
	max-width: var(--container-grid);
	margin: var(--space-12) auto 0;
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-warm-700);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-4);
	color: var(--color-warm-300);
	font-size: var(--text-caption);
}

/* Юридические реквизиты ИП — отдельным мелким блоком под copyright.
   Mono-шрифт, second-tier opacity, не перетягивает внимание. */
.site-footer__legal {
	max-width: var(--container-grid);
	margin: var(--space-3) auto 0;
	padding: var(--space-3) 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	color: var(--color-warm-300);
	opacity: 0.65;
	font-family: var(--font-mono);
	font-size: var(--text-eyebrow);
	line-height: 1.5;
	letter-spacing: 0.01em;
}
.site-footer__legal-item {
	white-space: nowrap;
}
@media (max-width: 640px) {
	.site-footer__legal {
		font-size: var(--text-mono-2xs);
		gap: 4px 12px;
		opacity: 0.7;
	}
	.site-footer__legal-item {
		white-space: normal;
	}
}