/* =========================================================
   AVANSEN — GLOBAL HEADER
========================================================= */


/* =========================================================
   HEADER POSITION
========================================================= */

.av-header {
	position: fixed;
	top: 24px;
	left: 0;

	width: 100%;

	z-index: 9999;

	transition: top 0.35s ease;
}


/* After scroll */

.av-header.is-scrolled {
	top: 0;
}


/* =========================================================
   HEADER INNER
========================================================= */

.av-header__inner {
	position: relative;
	z-index: 2;
}


/* =========================================================
   SCROLL BACKDROP
========================================================= */

.av-header__backdrop {
	position: absolute;

	top: -18px;
	right: 0;
	left: 0;

	height: 100px;

	z-index: 1;

	pointer-events: none;

	background:
		linear-gradient(
			to bottom,
			rgba(5, 4, 3, 0.96) 0%,
			rgba(5, 4, 3, 0.92) 45%,
			rgba(8, 5, 3, 0.78) 70%,
			rgba(8, 5, 3, 0.34) 88%,
			rgba(0, 0, 0, 0) 100%
		);

	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);

	box-shadow:
		0 12px 28px rgba(0, 0, 0, 0.30),
		0 18px 36px rgba(138, 51, 24, 0.08);

	opacity: 0;

	transition: opacity 0.35s ease;
}


/* After scroll */

.av-header.is-scrolled .av-header__backdrop {
	opacity: 1;
}


/* =========================================================
   WORDPRESS ADMIN BAR — DESKTOP
========================================================= */

body.admin-bar .av-header {
	top: 56px;
}

body.admin-bar .av-header.is-scrolled {
	top: 32px;
}


/* =========================================================
   WORDPRESS ADMIN BAR — MOBILE
========================================================= */

@media (max-width: 782px) {

	body.admin-bar .av-header {
		top: 70px;
	}

	body.admin-bar .av-header.is-scrolled {
		top: 46px;
	}

}