/**
 * EliteGas Core — закреплённая шапка (модуль sticky_header, скрипт sticky-header.js).
 * Классы на <html>: egh-fixed — шапка закреплена; egh-compact — ужата (компьютер);
 * egh-hidden — спрятана (телефон, прокрутка вниз).
 * Слой 1030 (как у закреплённой шапки Bootstrap): выше содержимого, ниже всплывающих окон
 * (видео-FAQ, видео — 9999, фильтр каталога на телефоне — 100002+).
 */

.egh-fixed #masthead {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1030;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}

/* Под админ-панелью WordPress (администраторы, режим предпросмотра) */
.egh-fixed .admin-bar #masthead { top: 32px; }
@media (max-width: 782px) {
	.egh-fixed .admin-bar #masthead { top: 46px; }
}
@media (max-width: 600px) {
	/* На узком экране админ-панель не закреплена — уезжает вместе со страницей */
	.egh-fixed .admin-bar #masthead { top: 0; }
}

/* Якоря (#price, прокрутка к калькулятору и т.п.) — не под шапкой */
html { scroll-padding-top: 72px; }

/* Карты Яндекса — в своём слое, чтобы их элементы не перекрывали шапку */
#gazmap-map,
#gm-mini-map,
[id^="ymaps-map-id"] { isolation: isolate; }

/* ---------- Компьютер: закреплена сразу, при прокрутке плавно ужимается ---------- */
@media (min-width: 768px) {
	/* Плавное ужатие: логотип и отступы (max-height — чтобы не задавать логотипу размер) */
	#masthead #logo img { width: auto; max-height: 76px; transition: max-height .2s ease-out; }
	#masthead .navbar-header,
	#masthead #logo,
	#masthead .navbar-nav > li > a { transition: margin .2s ease-out, padding .2s ease-out; }
	.egh-fixed:not(.egh-compact) #masthead { box-shadow: none; }

	.egh-compact #masthead #logo img { max-height: 44px; }
	.egh-compact #masthead .navbar { min-height: 0; }
	.egh-compact #masthead .navbar-header,
	.egh-compact #masthead #logo { margin-top: 0; margin-bottom: 0; }
	.egh-compact #masthead #logo { padding-top: 4px; padding-bottom: 4px; }
	.egh-compact #masthead .navbar-nav > li > a {
		padding-top: 7px;
		padding-bottom: 7px;
	}
}

/* ---------- Телефон: прячется при прокрутке вниз ---------- */
@media (max-width: 767px) {
	.egh-fixed #masthead {
		transition: transform .2s ease-out;
		will-change: transform;
	}
	.egh-fixed.egh-hidden #masthead {
		transform: translateY(-110%);
		box-shadow: none;
	}
	/* Длинное открытое меню — прокручивается внутри, а не уходит за экран */
	.egh-fixed #masthead .navbar-collapse {
		max-height: calc(100vh - 60px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
}

@media (prefers-reduced-motion: reduce) {
	.egh-fixed #masthead,
	#masthead #logo img,
	#masthead .navbar-header,
	#masthead #logo,
	#masthead .navbar-nav > li > a { transition: none; }
}