﻿/* ------------------ Header ------------------ */
	.header {
		position: sticky;
		top: 0;
		z-index: 80;
		background: rgba(255, 255, 255, 0.97);
		border-bottom: 1px solid rgba(15, 23, 42, 0.09);
		box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
		transition: background-color 0.25s ease, box-shadow 0.25s ease,
			border-color 0.25s ease;
	}

	.header__inner {
		position: relative;
		display: flex;
		align-items: center;
		gap: clamp(14px, 2vw, 28px);
		padding-block: clamp(8px, 1vw, 12px);
		transition: padding 0.25s ease;
	}

	.header__logo {
		display: inline-flex;
		align-items: center;
		flex-shrink: 0;
	}

	.header__logo-img {
		height: clamp(50px, 5.4vw, 62px);
		width: auto;
		object-fit: contain;
		transition: height 0.25s ease;
	}

	/* ------------------ Правый блок ------------------ */
	.header__right-block {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto auto;
		column-gap: clamp(8px, 1vw, 14px);
		align-items: center;
		flex: 1;
		min-width: 0;
	}

	.header__top-row,
	.header__region-label {
		display: none;
	}

	.header__nav {
		grid-column: 1;
		display: flex;
		align-items: center;
		column-gap: clamp(8px, 1.2vw, 18px);
		justify-content: flex-start;
		min-width: 0;
	}

	.header__nav-item {
		position: relative;
		display: inline-flex;
		align-items: center;
	}

	.header__projects-trigger {
		display: inline-flex;
		align-items: center;
		gap: 5px;
	}

	.header__projects-caret {
		display: inline-block;
		font-size: 0.72rem;
		line-height: 1;
		transform-origin: 50% 45%;
		transition: transform 0.2s ease;
	}

	.header__projects-menu {
		position: absolute;
		top: calc(100% + 10px);
		left: 0;
		min-width: 228px;
		padding: 8px;
		border: 1px solid rgba(15, 23, 42, 0.14);
		border-radius: 12px;
		background: rgba(255, 255, 255, 0.98);
		box-shadow: 0 16px 32px rgba(15, 23, 42, 0.14);
		display: grid;
		grid-template-columns: 1fr;
		gap: 4px;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		pointer-events: none;
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
		z-index: 100;
	}

	.header__projects-menu::before {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: -10px;
		height: 10px;
	}

	.header__projects-link {
		display: block;
		padding: 8px 10px;
		border-radius: 8px;
		font-size: 0.92rem;
		font-weight: 600;
		line-height: 1.2;
		color: #0f172a;
		white-space: nowrap;
		transition: background-color 0.2s ease, color 0.2s ease;
	}

	.header__projects-link:hover {
		background: #e8f4ff;
		color: #0369a1;
	}

	.header__projects:hover .header__projects-menu,
	.header__projects:focus-within .header__projects-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		pointer-events: auto;
	}

	.header__projects:hover .header__projects-caret,
	.header__projects:focus-within .header__projects-caret {
		transform: rotate(180deg);
	}

	.header__region-block {
		grid-column: 2;
		display: flex;
		justify-content: center;
	}

	/* ------------------ Регион ------------------ */
	.header__region-buttons {
		display: flex;
		flex-wrap: nowrap;
		gap: 7px;
	}

	.header__region-chip,
	.menu-panel__region-chip {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: #fff;
		appearance: none;
		font-family: inherit;
		color: inherit;
		padding: 6px 10px;
		font-weight: 700;
		font-size: 0.76rem;
		line-height: 1.1;
		border-radius: 8px;
		border: 1px solid #d6dde7;
		cursor: pointer;
		transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
		white-space: nowrap;
	}

	.header__region-chip:hover:not(.header__region-chip--active),
	.menu-panel__region-chip:hover:not(.menu-panel__region-chip--active) {
		color: #55c2f1;
		border-color: #55c2f1;
	}

	.header__region-chip--active,
	.menu-panel__region-chip--active {
		background: #55c2f1;
		color: #fff;
		border-color: transparent;
	}

	/* ------------------ Бургер ------------------ */
	.burger {
		display: none;
		grid-column: 3;
		position: relative;
		width: 30px;
		height: 20px;
		background: transparent;
		cursor: pointer;
		z-index: 100;
	}

	.burger input {
		display: none;
	}

	.burger span {
		display: block;
		position: absolute;
		height: 2.8px;
		width: 100%;
		background: #0f172a;
		border-radius: 9px;
		opacity: 1;
		left: 0;
		transform: rotate(0deg);
		transition: .25s ease-in-out;
	}

	.burger span:nth-of-type(1) {
		top: 0;
		transform-origin: left center;
	}

	.burger span:nth-of-type(2) {
		top: 50%;
		transform: translateY(-50%);
		transform-origin: left center;
	}

	.burger span:nth-of-type(3) {
		top: 100%;
		transform-origin: left center;
		transform: translateY(-100%);
	}

	.burger input:checked~span:nth-of-type(1),
	.burger--active span:nth-of-type(1) {
		transform: rotate(45deg);
		top: 50%;
		left: 0;
		width: 100%;
		transform-origin: center;
	}

	.burger input:checked~span:nth-of-type(2),
	.burger--active span:nth-of-type(2) {
		width: 0%;
		opacity: 0;
	}

	.burger input:checked~span:nth-of-type(3),
	.burger--active span:nth-of-type(3) {
		transform: rotate(-45deg);
		top: 50%;
		left: 0;
		width: 100%;
		transform-origin: center;
	}

	/* ------------------ Сжатый header ------------------ */
	.header--compact {
		background: rgba(255, 255, 255, 0.96);
		box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
		border-color: rgba(15, 23, 42, 0.08);
	}

	.header--compact .header__inner {
		padding-block: 7px;
	}

	.header--compact .header__logo-img {
		height: clamp(42px, 4.2vw, 50px);
	}

	.header--compact .header__region-chip {
		padding: 5px 9px;
		font-size: 0.72rem;
	}

	/* Панель меню и фон */
	.menu-panel {
		position: fixed;
		left: 0;
		right: 0;
		top: var(--header-offset, 72px);
		z-index: 70;
		background: rgba(255, 255, 255, 0.98);
		border-bottom: 1px solid #d6dde7;
		box-shadow: 0 14px 28px rgba(17, 25, 40, 0.12);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		max-height: 0;
		overflow: hidden;
		transform: translateY(-8px);
		will-change: opacity, transform;
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	}

	body.menu-open {
		overflow: hidden;
		overscroll-behavior: contain;
	}

	body.menu-open .menu-panel {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		max-height: calc(100dvh - var(--header-offset, 72px));
		overflow: auto;
		transform: translateY(0);
	}

	/* Внутренний блок панели */
	.menu-panel__inner {
		padding: 16px 0 22px;
		display: flex;
		flex-direction: column;
		gap: 14px;
		align-items: center;
	}

	.menu-panel__nav {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1.2rem;
	}

	.header__nav-link {
		position: relative;
		font-weight: 600;
		font-size: clamp(1rem, 0.95vw, 1.12rem);
		color: #0f172a;
		white-space: nowrap;
		text-decoration: none;
		transition: color 0.3s ease;
	}

	.menu-panel__nav a {
		position: relative;
		font-weight: 600;
		font-size: 1.125rem;
		color: #0f172a;
		white-space: nowrap;
		text-decoration: none;
		transition: color 0.3s ease;
	}

	.header__nav-link:hover,
	.menu-panel__nav a:hover {
		color: var(--blue);
	}

	.header__nav-link::after,
	.menu-panel__nav a::after {
		content: '';
		position: absolute;
		left: 0;
		bottom: 0;
		width: 0%;
		height: 2px;
		background-color: var(--blue);
		transition: width 0.3s ease;
	}

	.header__nav-link:hover::after,
	.menu-panel__nav a:hover::after {
		width: 100%;
	}

	/* Регион в панели */
	.menu-panel__region {
		width: min(680px, 96%);
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8px;
	}

	.menu-panel__region-buttons {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px;
		width: 100%;
	}

	.menu-panel__projects {
		width: min(680px, 96%);
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8px;
		padding-top: 4px;
	}

	.menu-panel__projects-label {
		font-size: 0.85rem;
		font-weight: 700;
		color: #475569;
		text-transform: uppercase;
		letter-spacing: 0.4px;
	}

	.menu-panel__projects-list {
		display: grid;
		grid-template-columns: 1fr;
		gap: 8px;
		width: min(420px, 100%);
	}

	.menu-panel__projects-link {
		display: block;
		padding: 10px 14px;
		border-radius: 10px;
		border: 1px solid #d6dde7;
		font-size: 0.98rem;
		font-weight: 600;
		text-align: center;
		color: #0f172a;
		background: #fff;
		transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
	}

	.menu-panel__projects-link:hover {
		border-color: #55c2f1;
		color: #0369a1;
		background: #f3fbff;
	}

	/* Фон под меню */
	.menu-backdrop {
		position: fixed;
		left: 0;
		right: 0;
		top: var(--header-offset, 72px);
		bottom: 0;
		z-index: 65;
		background: rgba(15, 23, 42, 0.18);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		will-change: opacity;
		transition: opacity 0.2s ease, visibility 0.2s;
	}

	body.menu-open .menu-backdrop {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	/* ------------------ Адаптив ------------------ */
	@media (max-width: 1200px) {
		.header__inner {
			padding-block: 9px;
		}

		.header__right-block {
			grid-template-columns: auto;
			justify-content: end;
			column-gap: 0;
		}

		.header__nav,
		.header__region-block {
			display: none;
		}

		.burger {
			display: block;
			grid-column: 1;
		}
	}

	@media (max-width: 760px) {
		.burger {
			grid-column: 1;
		}
	}

	@media (max-width: 540px) {
		.header__logo-img {
			height: clamp(40px, 14vw, 48px);
		}

		.header__region-chip,
		.menu-panel__region-chip {
			padding: 6px 8px;
			font-size: 12px;
		}
	}

