/*
 * Main menu.
 *
 * The bar sits on the dark brand band (see SecondaryHeader), so every token
 * here is expressed against that band: ink is light, and the "surface" tokens
 * are translucent whites that pick up whatever blue is behind them. Retune the
 * bar for another background by overriding these tokens on .main-menu.
 */
.main-menu {
	--menu-ink: rgba(255, 255, 255, 0.82);
	--menu-ink-strong: #fff;
	--menu-surface: rgba(255, 255, 255, 0.12);
	--menu-surface-strong: rgba(255, 255, 255, 0.2);
	--menu-focus: rgba(255, 255, 255, 0.55);
	--menu-radius: 999px;

	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	padding-inline-end: 1rem;
	font-size: 0.9375rem;
}

/* ---------------------------------------------------------------- nav items */

.main-menu__nav {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

.main-menu__link {
	display: block;
	padding: 0.4rem 0.85rem;
	border-radius: var(--menu-radius);
	color: var(--menu-ink);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.main-menu__link:hover,
.main-menu__link:focus-visible {
	background-color: var(--menu-surface);
	color: var(--menu-ink-strong);
}

/* Current section: filled pill, so the active item reads without relying on
 * color alone. */
.main-menu__link.is-active {
	background-color: var(--menu-surface-strong);
	color: var(--menu-ink-strong);
	font-weight: 600;
}

/* ------------------------------------------------------------------- search */

.main-menu__search {
	position: relative;
	display: flex;
	align-items: center;
	flex: 0 1 22rem;
	margin-inline-start: auto;
	min-width: 0;
}

.main-menu__search-icon {
	position: absolute;
	inset-inline-start: 0.7rem;
	width: 1rem;
	height: 1rem;
	color: var(--menu-ink);
	pointer-events: none;
}

/*
 * The shared icons are drawn on a 24 grid with a 1.5 stroke. At 1rem that stroke
 * renders at 1px, so it is scaled back up to the 1.5px the header had when this
 * icon was drawn on its own 16 grid; same reasoning for the caret below. The
 * rule has to name the shapes rather than the svg: stroke-width inherits, and an
 * inherited value loses to the stroke-width attribute each shape carries.
 */
.main-menu__search-icon > * {
	stroke-width: 2.25;
}

.main-menu__search-input {
	width: 100%;
	height: 2.125rem;
	padding: 0 0.9rem 0 2.2rem;
	border: 1px solid transparent;
	border-radius: var(--menu-radius);
	background-color: var(--menu-surface);
	color: var(--menu-ink-strong);
	font: inherit;
	line-height: 1;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.main-menu__search-input::placeholder {
	color: rgba(255, 255, 255, 0.6);
}

.main-menu__search-input:hover {
	background-color: var(--menu-surface-strong);
}

.main-menu__search-input:focus {
	outline: none;
	background-color: var(--menu-surface-strong);
	border-color: var(--menu-focus);
}

/* ------------------------------------------------------------ language menu */

/* Shares the button and dropdown rules with the user menu; only the trigger's
 * own parts are named here. */
.main-menu__language {
	position: relative;
	flex: none;
}

/* With no search field in between, the language menu takes over pushing the
 * right-hand group to the end. */
.main-menu__nav + .main-menu__language {
	margin-inline-start: auto;
}

.main-menu__language-icon {
	width: 1.25rem;
	height: 1.25rem;
}

.main-menu__language-code {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* Current language, in a dropdown whose items are buttons rather than links. */
.main-menu__dropdown-item.is-selected {
	font-weight: 600;
}

/* ---------------------------------------------------------------- user menu */

.main-menu__user {
	position: relative;
	flex: none;
}

.main-menu__user-button {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	height: 2.125rem;
	padding: 0 0.55rem;
	border: 0;
	border-radius: var(--menu-radius);
	background-color: transparent;
	color: var(--menu-ink);
	font: inherit;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.main-menu__user-button:hover,
.main-menu__user-button:focus-visible,
.main-menu__user-button[aria-expanded='true'] {
	background-color: var(--menu-surface);
	color: var(--menu-ink-strong);
}

.main-menu__user-icon {
	width: 1.375rem;
	height: 1.375rem;
}

.main-menu__caret {
	width: 0.7rem;
	height: 0.7rem;
	transition: transform 0.15s ease;
}

.main-menu__caret > * {
	stroke-width: 3.2;
}

.main-menu__user-button[aria-expanded='true'] .main-menu__caret {
	transform: rotate(180deg);
}

/*
 * The dropdown leaves the dark band, so it flips back to page ink on a white
 * surface rather than inheriting the translucent-white tokens above.
 */
.main-menu__dropdown {
	position: absolute;
	inset-inline-end: 0;
	top: calc(100% + 0.5rem);
	z-index: 1030;
	min-width: 12rem;
	margin: 0;
	padding: 0.35rem;
	list-style: none;
	border-radius: 0.75rem;
	background-color: #fff;
	box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.18);
	color: #22262b;
}

.main-menu__dropdown-header {
	padding: 0.35rem 0.65rem 0.5rem;
	color: #6b7280;
	font-size: 0.8125rem;
}

.main-menu__dropdown-item {
	display: block;
	width: 100%;
	padding: 0.45rem 0.65rem;
	border: 0;
	border-radius: 0.5rem;
	background: none;
	color: inherit;
	font: inherit;
	text-align: start;
	text-decoration: none;
	cursor: pointer;
}

.main-menu__dropdown-item:hover,
.main-menu__dropdown-item:focus-visible {
	background-color: rgba(0, 0, 0, 0.06);
	color: inherit;
}

.main-menu__dropdown-divider {
	margin: 0.35rem 0.65rem;
	border: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.11);
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 767.98px) {
	.main-menu {
		gap: 0.35rem;
		font-size: 0.875rem;
	}

	.main-menu__link {
		padding: 0.4rem 0.55rem;
	}

	/* Below this width the field would crowd the links out; it collapses to
	 * the icon's own width and expands again on focus. */
	.main-menu__search {
		flex-basis: 2.4rem;
	}

	.main-menu__search-input {
		padding-inline-end: 0.4rem;
	}

	.main-menu__search:focus-within {
		flex-basis: 12rem;
	}
}

/*
 * Light variant, for a header that sits on a pale surface (PrimaryLayout).
 * Only the tokens change — every rule above is written against them.
 */
.main-menu--light {
	--menu-ink: #4b5563;
	--menu-ink-strong: #101317;
	--menu-surface: rgba(0, 0, 0, 0.05);
	--menu-surface-strong: rgba(0, 0, 0, 0.09);
	--menu-focus: rgba(27, 65, 150, 0.65);
}

.main-menu--light .main-menu__search-input::placeholder {
	color: #6b7280;
}