/*
 * Overdrive — single-state editorial masthead.
 *
 * Voxel is only the geometry reference: one stable bar, hamburger + full
 * Overdrive lockup in one left cluster at every breakpoint, no logo swap and
 * no masthead resize on scroll. This file loads after the historical header
 * layers and is deliberately authoritative.
 */

body.go-verge,
body.go-verge .go-header--editorial {
	--go-header-static-height: 43px;
	--go-header-expanded-height: var(--go-header-static-height);
	--go-header-compact-height: var(--go-header-static-height);
}

/* --------------------------------------------------------------------------
   Header geometry
   -------------------------------------------------------------------------- */
body.go-verge .go-header--editorial,
body.go-verge .go-header--editorial.is-compact {
	position: sticky !important;
	top: 0 !important;
	inset-block-start: 0 !important;
	z-index: 60;
	isolation: isolate;
	box-shadow: none;
	transition: box-shadow 160ms ease, border-color 160ms ease !important;
}

body.go-verge .go-header--editorial.is-stuck {
	box-shadow: 0 8px 24px rgb(0 0 0 / .18);
}

body.go-verge .go-header--editorial .go-header__bar,
body.go-verge .go-header--editorial.is-compact .go-header__bar {
	display: grid !important;
	grid-template-columns: auto minmax(0, 1fr) auto !important;
	align-items: center !important;
	gap: clamp(16px, 2vw, 30px) !important;
	height: var(--go-header-static-height) !important;
	min-height: var(--go-header-static-height) !important;
	max-height: var(--go-header-static-height) !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	transition: none !important;
}

body.go-verge .go-header--editorial .go-header__lead,
body.go-verge .go-header--editorial.is-compact .go-header__lead {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 9px !important;
	min-width: 0;
	justify-self: start;
}

body.go-verge .go-header--editorial .go-header__menu-toggle {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 34px !important;
	height: 34px !important;
	min-width: 34px !important;
	min-height: 34px !important;
	flex: 0 0 34px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	color: var(--text) !important;
}

body.go-verge .go-header--editorial .go-header__menu-toggle:hover,
body.go-verge .go-header--editorial .go-header__menu-toggle:focus-visible {
	background: color-mix(in srgb, var(--text) 8%, transparent) !important;
	color: var(--lime) !important;
}

body.go-verge .go-header--editorial .go-header__menu-toggle svg {
	width: 18px !important;
	height: 18px !important;
}

/* One real logo image in the header. No dark/light pair and no compact clone. */
body.go-verge .go-header--editorial .go-header__brand,
body.go-verge .go-header--editorial.is-compact .go-header__brand {
	display: inline-flex !important;
	align-items: center !important;
	width: auto !important;
	min-width: 0 !important;
	height: 30px !important;
	overflow: visible !important;
	line-height: 0 !important;
	pointer-events: auto !important;
	cursor: pointer;
	transition: none !important;
}

body.go-verge .go-header--editorial .go-header__logo-full,
body.go-verge .go-header--editorial.is-compact .go-header__logo-full {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	width: auto !important;
	height: 30px !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	transition: none !important;
	pointer-events: auto !important;
}

body.go-verge .go-header--editorial .go-header__logo-img,
body.go-verge .go-header--editorial.is-compact .go-header__logo-img {
	display: block !important;
	width: auto !important;
	height: 22px !important;
	max-width: 158px !important;
	max-height: 22px !important;
	margin: 0 !important;
	object-fit: contain;
	object-position: left center;
	transform: none !important;
	transition: none !important;
}

/* Old compact-logo layers can never reappear even if stale JS adds a class. */
body.go-verge .go-header--editorial .go-header__logo-icon,
body.go-verge .go-header--editorial.is-compact .go-header__logo-icon {
	display: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
	width: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
}

body.go-verge .go-header--editorial .go-header__nav,
body.go-verge .go-header--editorial.is-compact .go-header__nav {
	min-width: 0;
	justify-self: center;
}

body.go-verge .go-header--editorial .go-header__nav-list,
body.go-verge .go-header--editorial.is-compact .go-header__nav-list {
	gap: clamp(14px, 1.55vw, 24px) !important;
	transform: none !important;
}

body.go-verge .go-header--editorial .go-header__nav-list a,
body.go-verge .go-header--editorial.is-compact .go-header__nav-list a {
	min-height: 34px !important;
	font-size: clamp(.68rem, .72vw, .76rem) !important;
	letter-spacing: .04em !important;
}

body.go-verge .go-header--editorial .go-header__actions,
body.go-verge .go-header--editorial.is-compact .go-header__actions {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 1px !important;
	width: auto !important;
	min-width: 0 !important;
	justify-self: end;
	transform: none !important;
}

body.go-verge .go-header--editorial .go-header__actions .go-iconbtn,
body.go-verge .go-header--editorial .go-header__theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px !important;
	height: 34px !important;
	min-width: 34px !important;
	min-height: 34px !important;
	flex: 0 0 34px !important;
}

body.go-verge .go-header--editorial .go-header__actions .go-iconbtn svg,
body.go-verge .go-header--editorial .go-header__theme-toggle svg {
	width: 17px !important;
	height: 17px !important;
}

/* --------------------------------------------------------------------------
   EM ALTA — attached directly below the masthead bar, then dismissed on scroll.
   -------------------------------------------------------------------------- */
body.go-verge .go-header--editorial > .go-latest-bar {
	/* The rail belongs to the masthead. It sits immediately below the header bar
	 * in normal flow, then the existing scroll state collapses it. It is never
	 * an independent sticky element, so ads cannot leave a phantom gap between
	 * the masthead and EM ALTA. */
	position: static !important;
	top: auto !important;
	inset: auto !important;
	z-index: auto !important;
	display: block !important;
	box-sizing: border-box !important;
	width: 100% !important;
	height: 38px !important;
	min-height: 38px !important;
	max-height: 38px !important;
	margin: 0 !important;
	overflow: hidden !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	transform: none !important;
	box-shadow: none !important;
	transition: height 220ms ease, max-height 220ms ease, opacity 160ms ease, visibility 0s linear 0s !important;
}

body.go-verge .go-header--editorial > .go-latest-bar.is-hidden {
	height: 0 !important;
	min-height: 0 !important;
	max-height: 0 !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	border-color: transparent !important;
	transition: max-height 220ms ease, opacity 140ms ease, visibility 0s linear 220ms !important;
}

body.go-verge .go-latest-bar__inner {
	display: grid !important;
	grid-template-columns: max-content minmax(0, 1fr) !important;
	align-items: center !important;
	justify-content: stretch !important;
	gap: 16px !important;
	box-sizing: border-box !important;
	width: 100% !important;
	min-width: 0 !important;
	height: 38px !important;
	min-height: 38px !important;
	max-height: 38px !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	overflow: hidden !important;
}

body.go-verge .go-latest-bar__head,
body.go-verge .go-latest-bar__label {
	display: inline-flex !important;
	align-items: center !important;
	width: max-content !important;
	min-width: max-content !important;
	height: 38px !important;
	min-height: 38px !important;
	max-height: 38px !important;
	margin: 0 !important;
	padding: 0 !important;
	flex: 0 0 auto !important;
	white-space: nowrap !important;
}

body.go-verge .go-latest-bar__label {
	background: transparent !important;
	color: var(--lime) !important;
	font-family: var(--font-sans) !important;
	font-size: .74rem !important;
	font-weight: 750 !important;
	line-height: 1 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

body.go-verge .go-latest-bar__items {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 0 !important;
	min-width: 0 !important;
	height: 38px !important;
	min-height: 38px !important;
	max-height: 38px !important;
	margin: 0 !important;
	padding: 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) {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	flex: 0 1 auto !important;
	min-width: 0 !important;
	height: 38px !important;
	min-height: 38px !important;
	max-height: 38px !important;
	margin: 0 !important;
	padding: 0 0 0 18px !important;
	border: 0 !important;
	background: transparent !important;
}

body.go-verge .go-latest-bar__item:first-child {
	padding-left: 0 !important;
}

body.go-verge .go-latest-bar__item + .go-latest-bar__item::before {
	content: '•' !important;
	position: absolute !important;
	left: 6px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	color: var(--text-secondary) !important;
	line-height: 1 !important;
}

body.go-verge .go-latest-bar__item > span:first-child {
	display: block !important;
	min-width: 0 !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	font-size: .8rem !important;
	line-height: 1.15 !important;
}

/* --------------------------------------------------------------------------
   Top-edge ad coexistence. The detected ad height offsets the masthead once;
   EM ALTA follows inside that masthead without receiving a second offset.
   -------------------------------------------------------------------------- */
html body.go-verge[data-go-anchor-edge='top'] .go-header--editorial,
html body.go-verge[data-go-anchor-edge='top'] .go-header--editorial.is-compact {
	top: var(--go-top-anchor-live-safe, var(--go-top-anchor-safe, 0px)) !important;
	inset-block-start: var(--go-top-anchor-live-safe, var(--go-top-anchor-safe, 0px)) !important;
}

html body.go-verge[data-go-anchor-edge='top'] .go-header--editorial > .go-latest-bar {
	/* The parent header already clears a top Clever/AdSense anchor. Do not add
	 * that offset a second time to EM ALTA. */
	position: static !important;
	top: auto !important;
	inset: auto !important;
}

/* --------------------------------------------------------------------------
   Tablet / mobile — same composition, only the reference height changes.
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
	body.go-verge,
	body.go-verge .go-header--editorial {
		--go-header-static-height: 56px;
	}

	body.go-verge .go-header--editorial .go-header__bar,
	body.go-verge .go-header--editorial.is-compact .go-header__bar {
		grid-template-columns: minmax(0, 1fr) auto !important;
		gap: 8px !important;
	}

	body.go-verge .go-header--editorial .go-header__nav,
	body.go-verge .go-header--editorial.is-compact .go-header__nav {
		display: none !important;
	}

	body.go-verge .go-header--editorial .go-header__lead,
	body.go-verge .go-header--editorial.is-compact .go-header__lead {
		gap: 8px !important;
	}

	body.go-verge .go-header--editorial .go-header__menu-toggle {
		width: 40px !important;
		height: 40px !important;
		min-width: 40px !important;
		min-height: 40px !important;
		flex-basis: 40px !important;
	}

	body.go-verge .go-header--editorial .go-header__menu-toggle svg {
		width: 20px !important;
		height: 20px !important;
	}

	body.go-verge .go-header--editorial .go-header__brand,
	body.go-verge .go-header--editorial.is-compact .go-header__brand,
	body.go-verge .go-header--editorial .go-header__logo-full,
	body.go-verge .go-header--editorial.is-compact .go-header__logo-full {
		height: 30px !important;
	}

	body.go-verge .go-header--editorial .go-header__logo-img,
	body.go-verge .go-header--editorial.is-compact .go-header__logo-img {
		height: 22px !important;
		max-height: 22px !important;
		max-width: 152px !important;
	}

	body.go-verge .go-header--editorial .go-header__actions .go-iconbtn,
	body.go-verge .go-header--editorial .go-header__theme-toggle {
		width: 40px !important;
		height: 40px !important;
		min-width: 40px !important;
		min-height: 40px !important;
		flex-basis: 40px !important;
	}
}

@media (max-width: 768px) {
	body.go-verge .go-header--editorial > .go-latest-bar {
		height: 40px !important;
		min-height: 40px !important;
		max-height: 40px !important;
	}

	body.go-verge .go-header--editorial > .go-latest-bar.is-hidden {
		height: 0 !important;
		min-height: 0 !important;
		max-height: 0 !important;
	}

	body.go-verge .go-latest-bar__inner {
		grid-template-columns: max-content minmax(0, 1fr) !important;
		gap: 10px !important;
		height: 40px !important;
		min-height: 40px !important;
		max-height: 40px !important;
		padding: 0 14px !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) {
		height: 40px !important;
		min-height: 40px !important;
		max-height: 40px !important;
	}

	body.go-verge .go-latest-bar__label {
		font-size: .7rem !important;
	}

	body.go-verge .go-latest-bar__items {
		overflow-x: auto !important;
		overflow-y: hidden !important;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	body.go-verge .go-latest-bar__items::-webkit-scrollbar {
		display: none;
	}

	/* Keep every editorial item on phones. The rail scrolls horizontally instead
	 * of hiding items; the label remains fixed at the left of the row. */
	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;
		flex: 0 0 auto !important;
		max-width: min(78vw, 360px) !important;
	}

	body.go-verge .go-latest-bar__item:first-child {
		padding-left: 0 !important;
	}

	body.go-verge .go-latest-bar__item > span:first-child {
		font-size: .76rem !important;
		text-overflow: ellipsis !important;
	}
}

@media (max-width: 520px) {
	/* Keep the X link off the narrowest rail; theme mode stays beside search. */
	body.go-verge .go-header--editorial .go-header__x {
		display: none !important;
	}

	body.go-verge .go-header--editorial .go-header__theme-toggle,
	body.go-verge .go-header--editorial .go-header__search-toggle {
		display: inline-flex !important;
	}

	body.go-verge .go-header--editorial .go-header__actions {
		gap: 0 !important;
	}

	body.go-verge .go-header--editorial .go-header__logo-img,
	body.go-verge .go-header--editorial.is-compact .go-header__logo-img {
		height: 21px !important;
		max-height: 21px !important;
		max-width: 145px !important;
	}
}

@media (max-width: 360px) {
	body.go-verge .go-header--editorial .go-header__bar,
	body.go-verge .go-header--editorial.is-compact .go-header__bar {
		gap: 4px !important;
	}

	body.go-verge .go-header--editorial .go-header__lead,
	body.go-verge .go-header--editorial.is-compact .go-header__lead {
		gap: 5px !important;
	}

	body.go-verge .go-header--editorial .go-header__logo-img,
	body.go-verge .go-header--editorial.is-compact .go-header__logo-img {
		height: 19px !important;
		max-height: 19px !important;
		max-width: 132px !important;
	}

	body.go-verge .go-header--editorial .go-header__actions .go-iconbtn,
	body.go-verge .go-header--editorial .go-header__theme-toggle,
	body.go-verge .go-header--editorial .go-header__menu-toggle {
		width: 38px !important;
		height: 38px !important;
		min-width: 38px !important;
		min-height: 38px !important;
		flex-basis: 38px !important;
	}
}

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