/* ==========================================================================
   Block: Header
   1920: 141px (75 + 66) · 1440: 122px (65 + 57) · 1024: 99px (34 + 65) · 375: 66px (24 + 42)
   ========================================================================== */

:root {
	--header-h: 141px;
}

.site-header {
	position: relative;
	z-index: 100;
	color: var(--c-white);
}

/* ---------- Прехедер (только 1024 / 375) ---------- */

.site-header__pre {
	display: none;
}

/* ---------- Основная строка ---------- */

.site-header__main {
	display: flex;
	align-items: center;
	gap: 140px;
	padding: 16px 60px;
	background-color: var(--c-dark-1);
}

.site-header__brand {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 14px;
}

.site-header__burger {
	display: none;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 37px;
	height: 37px;
	border-radius: 4px;
	color: var(--c-white);
	transition: background-color var(--t-fast);
}

.site-header__burger-icon {
	width: 37px;
	height: 37px;
	-webkit-mask-image: url("../../../assets/icons/burger-37.svg");
	mask-image: url("../../../assets/icons/burger-37.svg");
}

.site-header__burger.is-active {
	color: var(--c-black);
	background-color: var(--c-white);
}

.site-header__burger.is-active .site-header__burger-icon {
	width: 21px;
	height: 21px;
	-webkit-mask-image: url("../../../assets/icons/burger-37-active.svg");
	mask-image: url("../../../assets/icons/burger-37-active.svg");
}

.site-header__logo {
	display: flex;
	align-items: center;
	gap: 12px;
}

.site-header__logo-text {
	font-size: 36px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	color: var(--c-orange);
}

.site-header__logo-tagline {
	width: 159px;
	font-size: 14px;
	line-height: 1.2;
	color: var(--c-white);
}

/* Верхнее меню */

.site-header__menu {
	flex: 1 1 auto;
	min-width: 0;
}

.site-header__menu-list {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.site-header__menu-item {
	position: relative;
}

.site-header__dropdown {
	position: absolute;
	top: calc(100% + 24px);
	left: -24px;
	z-index: 5;
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 16px 24px;
	border-radius: 8px;
	white-space: nowrap;
	background-color: var(--c-dark-1);
	filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.25));
	visibility: hidden;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}

/* «мостик» под курсор между пунктом и выпадашкой */
.site-header__dropdown::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 0;
	right: 0;
	height: 24px;
}

.site-header__menu-item.is-open > .site-header__dropdown {
	visibility: visible;
	opacity: 1;
	transform: none;
}

@media (hover: hover) {
	.site-header__menu-item.has-dropdown:hover > .site-header__dropdown {
		visibility: visible;
		opacity: 1;
		transform: none;
	}

	.site-header__menu-item.has-dropdown:hover > .nav-link .nav-link__chevron {
		transform: rotate(180deg);
	}
}

/* Правая часть: контакты + кнопки */

.site-header__side {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 60px;
}

.site-header__contacts {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.site-header__contact {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	line-height: 1.2;
	white-space: nowrap;
	color: var(--c-white);
}

a.site-header__contact:hover {
	color: var(--c-grey);
}

.site-header__contact-icon {
	width: 16px;
	height: 16px;
}

.site-header__contact-icon--pin {
	-webkit-mask-image: url("../../../assets/icons/pin-16.svg");
	mask-image: url("../../../assets/icons/pin-16.svg");
}

.site-header__contact-icon--time {
	-webkit-mask-image: url("../../../assets/icons/time-16.svg");
	mask-image: url("../../../assets/icons/time-16.svg");
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.site-header__btn-call-short,
.site-header__search-btn--main {
	display: none;
}

/* ---------- Второй уровень ---------- */

.site-header__nav {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 12px 60px;
	background-color: var(--c-dark-2);
}

.site-header__nav-list {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: space-between;
	min-width: 0;
}

.site-header__search-btn.is-active {
	background-color: rgba(255, 255, 255, 0.18);
}

/* ---------- Выпадающие панели ---------- */

/* fixed + верх считается в JS (--panel-top), чтобы панель была под хедером
   при любом положении прокрутки */
.site-header__panel {
	position: fixed;
	top: var(--panel-top, var(--header-h));
	left: 0;
	right: 0;
	max-height: calc(100vh - var(--panel-top, var(--header-h)));
	max-height: calc(100dvh - var(--panel-top, var(--header-h)));
	overflow-y: auto;
	overscroll-behavior: contain;
	background-color: var(--c-dark-1);
}

.site-header__panel[hidden] {
	display: none;
}

/* Мега-меню */

.header-mega__title {
	padding: 32px 60px 6px;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
}

.header-mega__body {
	display: flex;
	align-items: flex-start;
}

.header-mega__columns {
	display: grid;
	flex: 1 1 auto;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	min-width: 0;
}

.header-mega__group {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 40px 60px;
}

.header-mega__group .nav-link {
	width: 100%;
}

.header-mega__features {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	gap: 32px;
	width: 384px;
	padding: 40px 60px;
}

/* Поиск */

.header-search {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 32px 60px;
}

.header-search[hidden] {
	display: none;
}

.header-search__form {
	position: relative;
}

.header-search__input {
	display: block;
	width: 100%;
	height: 41px;
	padding: 11px 50px 11px 18px;
	border: 0;
	border-radius: 4px;
	outline: 0;
	font-size: 16px;
	line-height: 1.2;
	color: var(--c-black);
	background-color: rgba(255, 255, 255, 0.9);
	-webkit-appearance: none;
	appearance: none;
	transition: background-color var(--t-fast);
}

.header-search__input::-webkit-search-cancel-button {
	display: none;
}

.header-search__input::placeholder {
	color: var(--c-grey-3);
	opacity: 1;
}

.header-search__input:focus,
.header-search__form.is-filled .header-search__input {
	background-color: var(--c-white);
}

.header-search__clear {
	position: absolute;
	top: 50%;
	right: 18px;
	display: none;
	width: 18px;
	height: 18px;
	color: var(--c-black);
	transform: translateY(-50%);
}

.header-search__form.is-filled .header-search__clear {
	display: block;
}

.header-search__clear-icon {
	width: 18px;
	height: 18px;
	-webkit-mask-image: url("../../../assets/icons/cross-m.svg");
	mask-image: url("../../../assets/icons/cross-m.svg");
}

.header-search__popular {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 36px;
}

.header-search__link {
	display: inline-block;
	padding: 4px 0;
	font-size: 16px;
	line-height: 1.2;
	color: var(--c-orange);
	text-decoration: underline;
	text-decoration-skip-ink: none;
	text-underline-position: from-font;
	transition: color var(--t-fast);
}

.header-search__link:hover {
	color: var(--c-orange-active);
}

/* Бургер-меню (≤1439) */

.header-burger {
	background-color: var(--c-black);
}

.header-burger__features {
	display: flex;
	justify-content: space-between;
	padding: 8px 28px;
}

.header-burger__features .feature {
	flex: 1 1 0;
	min-width: 0;
}

.header-burger__features .feature--only-wide {
	display: none;
}

.header-burger__body {
	display: flex;
	align-items: stretch;
	padding: 12px 28px;
}

.header-burger__aside {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	justify-content: space-between;
	gap: 24px;
	width: 288px;
	padding-bottom: 28px;
}

.header-burger__boxes {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.header-burger__box {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 28px;
	border-radius: 8px;
	background-color: rgba(255, 255, 255, 0.02);
}

.header-burger__cat {
	justify-content: space-between;
	width: 100%;
}

.header-burger__legal {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.header-burger__legal-links {
	display: flex;
	flex-direction: column;
}

.header-burger__legal-links .nav-link {
	width: 100%;
}

.header-burger__copy {
	font-size: 14px;
	line-height: 1.2;
}

.header-burger__groups {
	display: grid;
	flex: 1 1 auto;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-content: start;
	align-items: start;
	min-width: 0;
}

.header-burger__group {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 28px;
}

.header-burger__group[hidden] {
	display: none;
}

.header-burger__group .nav-link {
	width: 100%;
}

/* ==========================================================================
   1440
   ========================================================================== */

@media (max-width: 1919.98px) {
	:root {
		--header-h: 122px;
	}

	.site-header__main {
		gap: 60px;
		padding: 14px 40px;
	}

	.site-header__logo {
		gap: 10px;
	}

	.site-header__logo-text {
		font-size: 32px;
	}

	.site-header__logo-tagline {
		width: 137px;
		font-size: 12px;
	}

	.site-header__dropdown {
		top: calc(100% + 20px);
		left: -20px;
		gap: 16px;
		padding: 12px 20px;
	}

	.site-header__dropdown::before {
		height: 20px;
	}

	.site-header__side {
		gap: 32px;
	}

	.site-header__contacts {
		gap: 6px;
	}

	.site-header__contact {
		font-size: 12px;
	}

	.site-header__contact-icon {
		width: 14px;
		height: 14px;
	}

	.site-header__contact-icon--pin {
		-webkit-mask-image: url("../../../assets/icons/pin-14.svg");
		mask-image: url("../../../assets/icons/pin-14.svg");
	}

	.site-header__contact-icon--time {
		-webkit-mask-image: url("../../../assets/icons/time-14.svg");
		mask-image: url("../../../assets/icons/time-14.svg");
	}

	.site-header__actions {
		gap: 8px;
	}

	.site-header__nav {
		padding: 10px 40px;
	}

	.header-mega__title {
		padding: 20px 40px 6px;
		font-size: 18px;
	}

	.header-mega__group {
		gap: 16px;
		padding: 32px 40px;
	}

	.header-mega__features {
		gap: 28px;
		width: 288px;
		padding: 32px 40px;
	}

	.header-search {
		gap: 16px;
		padding: 20px 40px;
	}

	.header-search__input {
		height: 37px;
		padding: 9px 44px 9px 14px;
		font-size: 14px;
	}

	.header-search__clear {
		right: 14px;
	}

	.header-search__popular {
		gap: 10px 28px;
	}

	.header-search__link {
		font-size: 14px;
	}
}

/* ==========================================================================
   1024 — прехедер + строка с бургером
   ========================================================================== */

@media (max-width: 1439.98px) {
	:root {
		--header-h: 99px;
	}

	.site-header__pre {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		padding: 10px 28px;
		background-color: var(--c-dark-3);
	}

	.site-header__pre-group {
		display: flex;
		align-items: flex-end;
		gap: 44px;
	}

	.site-header__pre-group--address {
		width: 424px;
	}

	.site-header__pre-group--address > .site-header__contact {
		flex: 1 1 0;
		min-width: 0;
	}

	.site-header__pre-short {
		display: none;
	}

	.site-header__main {
		justify-content: space-between;
		gap: 20px;
		padding: 14px 28px;
	}

	.site-header__burger {
		display: flex;
	}

	.site-header__logo-tagline,
	.site-header__menu,
	.site-header__nav {
		display: none;
	}

	.site-header__search-btn--main {
		display: inline-flex;
	}

	.header-search {
		padding: 20px 28px;
	}
}

/* ==========================================================================
   375
   ========================================================================== */

@media (max-width: 1023.98px) {
	:root {
		--header-h: 66px;
	}

	.site-header__pre {
		padding: 6px 14px;
		background-color: var(--c-dark-2);
	}

	.site-header__pre-group {
		display: contents;
	}

	.site-header__pre .site-header__contact {
		flex: 0 0 auto;
		font-size: 10px;
	}

	.site-header__pre .site-header__contact-icon,
	.site-header__pre-full,
	.site-header__pre-hours {
		display: none;
	}

	.site-header__pre-short {
		display: inline;
	}

	.site-header__main {
		align-items: flex-start;
		padding: 8px 14px;
	}

	.site-header__brand {
		gap: 10px;
	}

	.site-header__burger {
		width: 26px;
		height: 26px;
	}

	.site-header__burger-icon {
		width: 26px;
		height: 26px;
		-webkit-mask-image: url("../../../assets/icons/burger-26.svg");
		mask-image: url("../../../assets/icons/burger-26.svg");
	}

	.site-header__burger.is-active {
		color: var(--c-white);
		background-color: rgba(255, 255, 255, 0.18);
	}

	.site-header__burger.is-active .site-header__burger-icon {
		width: 12px;
		height: 12px;
		-webkit-mask-image: url("../../../assets/icons/burger-26-active.svg");
		mask-image: url("../../../assets/icons/burger-26-active.svg");
	}

	.site-header__logo-text {
		font-size: 24px;
	}

	.site-header__side {
		gap: 8px;
	}

	.site-header__side > .site-header__contacts,
	.site-header__btn-call {
		display: none;
	}

	.site-header__btn-call-short {
		display: inline-flex;
	}

	.header-search {
		gap: 12px;
		padding: 14px;
	}

	.header-search__popular {
		gap: 4px 16px;
	}

	.header-search__link {
		font-size: 12px;
	}

	.header-burger__features {
		flex-direction: column;
		gap: 8px;
		padding: 8px 14px;
	}

	.header-burger__body {
		flex-direction: column;
		gap: 12px;
		padding: 4px 14px 24px;
	}

	.header-burger__aside {
		display: contents;
	}

	.header-burger__boxes {
		order: 1;
	}

	.header-burger__groups {
		order: 2;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.header-burger__legal {
		order: 3;
		gap: 12px;
		padding-top: 12px;
	}

	.header-burger__box {
		padding: 16px 14px;
	}

	.header-burger__group {
		padding: 14px 0;
	}
}

/* Узкие экраны (< 360): макета нет — прячем «Звонок», телефон есть в прехедере */
@media (max-width: 359.98px) {
	.site-header__btn-call-short {
		display: none;
	}
}
