/*
 * Overdrive - Electric Index
 * Authoritative brand layer loaded after the historical theme bundles.
 * Advertising components are intentionally outside this stylesheet.
 */

:root {
	--overdrive-electric-lime: #d8ff38;
	--overdrive-deep-navy: #10142a;
	--overdrive-soft-cloud: #f6f7f1;
	--overdrive-electric-blue: #421aff;
	--overdrive-electric-blue-on-dark: #7f68ff;

	--canvas: var(--overdrive-deep-navy);
	--slate: #171c36;
	--surface: #171c36;
	--surface-1: #171c36;
	--surface-2: #202642;
	--frame: #343b57;
	--black: #090c1c;
	--white: var(--overdrive-soft-cloud);
	--text: var(--overdrive-soft-cloud);
	--text-secondary: #afb4c5;
	--text-muted: #d4d7e1;
	--inverted: var(--overdrive-deep-navy);
	--border: rgba(246, 247, 241, .10);
	--border-strong: rgba(246, 247, 241, .19);
	--hair: 1px solid var(--border);
	--hair-strong: 1px solid var(--border-strong);

	--lime: var(--overdrive-electric-lime);
	--lime-dim: #b8d91f;
	--lime-text: var(--overdrive-electric-lime);
	--ink-on-lime: var(--overdrive-deep-navy);
	--mint: var(--overdrive-electric-lime);
	--mint-border: #b8d91f;
	--acc-mint: var(--overdrive-electric-lime);

	--uv: var(--overdrive-electric-blue);
	--acc-uv: var(--overdrive-electric-blue);
	--focus: var(--overdrive-electric-blue-on-dark);
	--link-hover: var(--overdrive-electric-lime);
}

html[data-theme='dark-mode'] {
	--canvas: var(--overdrive-deep-navy);
	--slate: #171c36;
	--surface: #171c36;
	--surface-1: #171c36;
	--surface-2: #202642;
	--frame: #343b57;
	--text: var(--overdrive-soft-cloud);
	--text-secondary: #afb4c5;
	--text-muted: #d4d7e1;
	--inverted: var(--overdrive-deep-navy);
	--border: rgba(246, 247, 241, .10);
	--border-strong: rgba(246, 247, 241, .19);
	--lime-dim: #b8d91f;
	--lime-text: var(--overdrive-electric-lime);
	--focus: var(--overdrive-electric-blue-on-dark);
	--link-hover: var(--overdrive-electric-lime);
}

html[data-theme='light-mode'] {
	--canvas: var(--overdrive-soft-cloud);
	--slate: #ffffff;
	--surface: #ffffff;
	--surface-1: #ffffff;
	--surface-2: #eceee7;
	--frame: #d6d9cf;
	--white: var(--overdrive-deep-navy);
	--text: var(--overdrive-deep-navy);
	--text-secondary: #5d6375;
	--text-muted: #30364b;
	--inverted: var(--overdrive-soft-cloud);
	--border: rgba(16, 20, 42, .10);
	--border-strong: rgba(16, 20, 42, .20);
	--lime: var(--overdrive-electric-blue);
	--lime-dim: var(--overdrive-electric-blue);
	--lime-text: var(--overdrive-electric-blue);
	--ink-on-lime: #ffffff;
	--mint: var(--overdrive-electric-blue);
	--mint-border: var(--overdrive-electric-blue);
	--acc-mint: var(--overdrive-electric-blue);
	--focus: var(--overdrive-electric-blue);
	--link-hover: #3212c7;
}

body.go-verge {
	--section-accent: var(--overdrive-electric-lime) !important;
	--section-accent-text: var(--lime-text) !important;
	--go-filter-accent: var(--overdrive-electric-lime) !important;
	--go-inline-link-accent: var(--overdrive-electric-blue-on-dark) !important;
	--go-neon-purple-text: var(--overdrive-electric-blue-on-dark) !important;
	--go-neon-blue-text: var(--overdrive-electric-blue-on-dark) !important;
}

html[data-theme='light-mode'] body.go-verge {
	--section-accent: var(--overdrive-electric-blue) !important;
	--section-accent-text: var(--overdrive-electric-blue) !important;
	--go-filter-accent: var(--overdrive-electric-blue) !important;
	--go-inline-link-accent: var(--overdrive-electric-blue) !important;
	--go-neon-purple-text: var(--overdrive-electric-blue) !important;
	--go-neon-blue-text: var(--overdrive-electric-blue) !important;
}

::selection {
	background: var(--overdrive-electric-blue);
	color: #ffffff;
}

body.go-verge :where(a, button, input, select, textarea, summary):focus-visible {
	outline-color: var(--focus) !important;
}

/* The blue is AA on Cloud. Its lighter tint is AA on Deep Navy. */
body.go-verge .go-article__content a:not(.go-btn) {
	color: var(--overdrive-electric-blue-on-dark) !important;
	box-shadow: 0 1px 0 0 currentColor;
}

html[data-theme='light-mode'] body.go-verge .go-article__content a:not(.go-btn) {
	color: var(--overdrive-electric-blue) !important;
}

/* Historical article-zone rules used more specific selectors and revived the
 * old olive link colour. Keep every editorial link blue on light surfaces. */
html[data-theme='light-mode'] body.single-post.go-verge .go-article__content :where(p, li, blockquote, figcaption, td, th, dd) a:not(.go-btn):not(.go-inline-related__item):not(.go-context-link),
html[data-theme='light-mode'] body.single-post.go-verge .go-article__content a.go-auto-internal-link {
	color: var(--overdrive-electric-blue) !important;
	-webkit-text-fill-color: currentColor !important;
}

html[data-theme='light-mode'] body.single-post.go-verge .go-article__content--dropcap > p:first-of-type::first-letter {
	color: var(--overdrive-electric-blue) !important;
}

body.go-verge .go-article__content a:not(.go-btn):hover,
body.go-verge .go-article__content a:not(.go-btn):focus-visible {
	color: var(--lime-text) !important;
}

html[data-theme='light-mode'] body.go-verge .go-article__content a:not(.go-btn):hover,
html[data-theme='light-mode'] body.go-verge .go-article__content a:not(.go-btn):focus-visible {
	color: #3212c7 !important;
}

html[data-theme='light-mode'] body.single-post.go-verge,
html[data-theme='light-mode'] body.go-verge :is(.go-article--review, .go-article--critique, .go-article--scored) {
	--go-analysis-accent: var(--overdrive-electric-blue) !important;
	--go-analysis-accent-ink: #ffffff !important;
	--go-inline-link-accent: var(--overdrive-electric-blue) !important;
	--go-inline-link-hover: #3212c7 !important;
	--go-inline-link-soft: color-mix(in srgb, var(--overdrive-electric-blue) 14%, transparent) !important;
}

body.go-verge .go-btn--outline-uv {
	border-color: var(--overdrive-electric-blue-on-dark);
	color: var(--overdrive-electric-blue-on-dark);
}

html[data-theme='light-mode'] body.go-verge .go-btn--outline-uv {
	border-color: var(--overdrive-electric-blue);
	color: var(--overdrive-electric-blue);
}

body.go-verge .go-btn--outline-uv:hover,
body.go-verge .go-btn--outline-uv:focus-visible {
	border-color: var(--overdrive-electric-blue);
	background: var(--overdrive-electric-blue);
	color: #ffffff;
}

/* Permanent navy brand chrome. */
body.go-verge .go-header,
body.go-verge .go-header--editorial,
body.go-verge .go-latest-bar,
body.go-verge .go-offcanvas,
body.go-verge .go-footer {
	--canvas: var(--overdrive-deep-navy);
	--slate: #171c36;
	--surface: #171c36;
	--surface-1: #171c36;
	--surface-2: #202642;
	--frame: #343b57;
	--white: #ffffff;
	--text: var(--overdrive-soft-cloud);
	--text-secondary: #afb4c5;
	--text-muted: #d4d7e1;
	--inverted: var(--overdrive-deep-navy);
	--border: rgba(246, 247, 241, .11);
	--border-strong: rgba(246, 247, 241, .21);
	--lime: var(--overdrive-electric-lime);
	--lime-dim: #b8d91f;
	--lime-text: var(--overdrive-electric-lime);
	--link-hover: var(--overdrive-electric-lime);
	color: var(--overdrive-soft-cloud);
}

body.go-verge .go-header,
body.go-verge .go-header--editorial,
body.go-verge .go-offcanvas,
body.go-verge .go-footer {
	background: var(--overdrive-deep-navy) !important;
}

body.go-verge .go-header .go-header__bar {
	background: var(--overdrive-deep-navy) !important;
}

body.go-verge .go-header,
body.go-verge .go-header--editorial {
	border-bottom-color: rgba(246, 247, 241, .12) !important;
}

body.go-verge .go-latest-bar,
body.go-verge .go-latest-bar .go-latest-bar__inner {
	background: var(--overdrive-deep-navy) !important;
}

body.go-verge .go-latest-bar {
	border-bottom-color: rgba(246, 247, 241, .10) !important;
}

body.go-verge .go-offcanvas {
	border-left-color: rgba(246, 247, 241, .18) !important;
}

body.go-verge .go-footer {
	border-top-color: rgba(246, 247, 241, .12) !important;
}

body.go-verge .go-footer .go-newsletter {
	border-color: color-mix(in srgb, var(--overdrive-electric-lime) 62%, transparent);
	background: #171c36;
}

body.go-verge .go-footer .go-newsletter input[type='email'] {
	background: var(--overdrive-deep-navy);
}

/* Logo hierarchy: full lockup on roomy headers, symbol in compact/mobile UI. */
body.go-verge .go-header--editorial .go-header__logo-full .go-logo__img {
	width: auto !important;
	height: 34px !important;
	max-width: 236px;
	object-fit: contain;
	object-position: left center;
}

body.go-verge .go-header--editorial .go-header__logo-icon .go-logo__img {
	width: auto !important;
	height: 34px !important;
	object-fit: contain;
}

body.go-verge .go-footer__brand .go-logo__img {
	width: auto;
	height: 34px;
	max-width: 236px;
}

body.go-verge .go-offcanvas__head .go-logo--full .go-logo__img {
	width: auto;
	height: 34px;
	max-width: 236px;
	object-fit: contain;
}

html[data-theme='light-mode'] body.go-verge .go-header .go-logo__img--dark,
html[data-theme='light-mode'] body.go-verge .go-offcanvas .go-logo__img--dark,
html[data-theme='light-mode'] body.go-verge .go-footer .go-logo__img--dark {
	display: block;
}

html[data-theme='light-mode'] body.go-verge .go-header .go-logo__img--light,
html[data-theme='light-mode'] body.go-verge .go-offcanvas .go-logo__img--light,
html[data-theme='light-mode'] body.go-verge .go-footer .go-logo__img--light {
	display: none;
}

@media (min-width: 1121px) {
	body.go-verge .go-header--editorial .go-header__bar {
		grid-template-columns: minmax(240px, 1fr) auto minmax(240px, 1fr);
	}

	body.go-verge .go-header--editorial .go-header__brand,
	body.go-verge .go-header--editorial .go-header__actions {
		width: 240px;
	}
}

@media (min-width: 961px) and (max-width: 1120px) {
	body.go-verge .go-header--editorial .go-header__bar {
		grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
	}

	body.go-verge .go-header--editorial .go-header__brand,
	body.go-verge .go-header--editorial .go-header__actions {
		width: 220px;
	}

	body.go-verge .go-header--editorial .go-header__logo-full .go-logo__img {
		height: 32px !important;
	}
}

@media (min-width: 521px) and (max-width: 960px) {
	body.go-verge .go-header--editorial .go-header__brand {
		width: 236px !important;
	}
}

@media (max-width: 520px) {
	body.go-verge .go-header--editorial .go-header__brand {
		width: 42px !important;
		height: 42px;
	}

	body.go-verge .go-header--editorial .go-header__logo-full,
	body.go-verge .go-header--editorial.is-compact .go-header__logo-full {
		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
	}

	body.go-verge .go-header--editorial .go-header__logo-icon,
	body.go-verge .go-header--editorial.is-compact .go-header__logo-icon {
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
	}

	body.go-verge .go-header--editorial .go-header__logo-icon .go-logo__img {
		height: 36px !important;
	}
}