/*
 * Game Overdrive — masthead parity layer.
 * Keeps the current curated EM ALTA content while matching the header height,
 * rail height and expanded/compact animation of the reference theme.
 */

body.go-verge .go-header--editorial {
	--go-header-expanded-height: 94px;
	--go-header-compact-height: 58px;
	isolation: isolate;
}

body.go-verge .go-header--editorial .go-header__bar {
	will-change: auto;
	transition:
		height 320ms cubic-bezier(.16, 1, .3, 1),
		column-gap 280ms cubic-bezier(.16, 1, .3, 1) !important;
}

body.go-verge .go-header--editorial .go-header__logo-full,
body.go-verge .go-header--editorial .go-header__logo-icon,
body.go-verge .go-header--editorial.is-compact .go-header__logo-full,
body.go-verge .go-header--editorial.is-compact .go-header__logo-icon {
	display: inline-flex !important;
	visibility: visible !important;
	backface-visibility: hidden;
	transform-origin: left center;
	pointer-events: none;
	transition:
		opacity 210ms cubic-bezier(.4, 0, .2, 1),
		transform 320ms cubic-bezier(.16, 1, .3, 1) !important;
}

body.go-verge .go-header--editorial .go-header__logo-full {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
}

body.go-verge .go-header--editorial .go-header__logo-icon {
	opacity: 0;
	transform: translate3d(0, 1px, 0) scale(.94);
}

body.go-verge .go-header--editorial.is-compact .go-header__logo-full {
	opacity: 0;
	transform: translate3d(0, -1px, 0) scale(.975);
}

body.go-verge .go-header--editorial.is-compact .go-header__logo-icon {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
}

/* Same expanded/compact rail geometry and timing as the reference theme. */
body.go-verge .go-header--editorial + .go-latest-bar {
	top: var(--go-header-expanded-height) !important;
	max-height: 46px !important;
	margin: 0 !important;
	overflow: clip !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	transform: translate3d(0, 0, 0) !important;
	transform-origin: top center;
	transition:
		max-height 320ms cubic-bezier(.16, 1, .3, 1),
		top 320ms cubic-bezier(.16, 1, .3, 1),
		opacity 180ms ease,
		transform 300ms cubic-bezier(.16, 1, .3, 1),
		border-color 180ms ease,
		box-shadow 180ms ease,
		visibility 0s linear 0s !important;
}

body.go-verge .go-header--editorial.is-compact + .go-latest-bar,
body.go-verge .go-header--editorial + .go-latest-bar.is-hidden {
	top: var(--go-header-compact-height) !important;
	max-height: 0 !important;
	overflow: hidden !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	transform: translate3d(0, -8px, 0) !important;
	border-color: transparent !important;
	box-shadow: none !important;
	transition:
		max-height 300ms cubic-bezier(.16, 1, .3, 1),
		top 300ms cubic-bezier(.16, 1, .3, 1),
		opacity 150ms ease,
		transform 260ms cubic-bezier(.16, 1, .3, 1),
		border-color 150ms ease,
		box-shadow 150ms ease,
		visibility 0s linear 300ms !important;
}

/* EM ALTA keeps the current centered keyword design inside the reference size. */
body.go-verge .go-latest-bar__inner {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 18px !important;
	min-height: 38px !important;
	height: 38px !important;
	max-height: 38px !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

body.go-verge .go-latest-bar__head,
body.go-verge .go-latest-bar__label,
body.go-verge .go-latest-bar__items,
body.go-verge .go-latest-bar__item,
body.go-verge .go-latest-bar__item:nth-child(n + 2),
body.go-verge .go-latest-bar__item:nth-child(n + 3) {
	min-height: 38px !important;
	height: 38px !important;
	max-height: 38px !important;
}

body.go-verge .go-latest-bar__head,
body.go-verge .go-latest-bar__label {
	display: inline-flex !important;
	align-items: center !important;
}

body.go-verge .go-latest-bar__items {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 0 !important;
	overflow: hidden !important;
}

body.go-verge .go-latest-bar__item,
body.go-verge .go-latest-bar__item:nth-child(n + 2),
body.go-verge .go-latest-bar__item:nth-child(n + 3) {
	display: flex !important;
	align-items: center !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Do not animate from the wrong state after a restored scroll position. */
body.go-verge .go-header--editorial:not(.is-header-ready) .go-header__bar,
body.go-verge .go-header--editorial:not(.is-header-ready) .go-header__logo-full,
body.go-verge .go-header--editorial:not(.is-header-ready) .go-header__logo-icon,
body.go-verge .go-header--editorial:not(.is-header-ready) + .go-latest-bar {
	transition: none !important;
}

@media (max-width: 960px) {
	body.go-verge .go-header--editorial {
		--go-header-expanded-height: 74px;
		--go-header-compact-height: 56px;
	}
}

@media (max-width: 768px) {
	body.go-verge .go-latest-bar__inner {
		justify-content: flex-start !important;
		gap: 12px !important;
	}

	body.go-verge .go-latest-bar__items {
		justify-content: flex-start !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
	}
}

@media (max-width: 520px) {
	body.go-verge .go-header--editorial {
		--go-header-expanded-height: 66px;
		--go-header-compact-height: 54px;
	}

	body.go-verge .go-header--editorial + .go-latest-bar {
		max-height: 42px !important;
	}

	body.go-verge .go-latest-bar__inner,
	body.go-verge .go-latest-bar__head,
	body.go-verge .go-latest-bar__label,
	body.go-verge .go-latest-bar__items,
	body.go-verge .go-latest-bar__item,
	body.go-verge .go-latest-bar__item:nth-child(n + 2),
	body.go-verge .go-latest-bar__item:nth-child(n + 3) {
		min-height: 38px !important;
		height: 38px !important;
		max-height: 38px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.go-verge .go-header--editorial .go-header__bar,
	body.go-verge .go-header--editorial .go-header__logo-full,
	body.go-verge .go-header--editorial .go-header__logo-icon,
	body.go-verge .go-header--editorial + .go-latest-bar {
		transition: none !important;
	}
}
