/*
 * CEOVANTA — header language switcher (P0 multilingual, 2026-11-03).
 *
 * Loaded after main.css. Same four brand colours via the existing tokens, so
 * light and dark mode follow automatically.
 *
 *   < 1280px : globe button + dropdown (phones: globe only, full-width panel)
 *   >= 1280px: inline codes  EN | VI | ES | FR | DE | PT-BR
 *
 * Codes come from each link's hreflang attribute; the native language name
 * stays in the markup for screen readers.
 */

/* The switcher is part of the header on every screen size (main.css hid it below 600px). */
.cv-header__lang-desktop {
	display: block;
}

/* Dropdown wide enough for "PT-BR  Português do Brasil" on one line. */
.cv-lang__panel {
	min-width: 264px;
}

/* Language code badge in the dropdown and in the drawer list. */
.cv-lang__link {
	justify-content: flex-start;
}

.cv-lang__link::before {
	content: attr(hreflang);
	flex: 0 0 auto;
	min-width: 3.4em;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--cv-muted);
}

.cv-lang__link[aria-current="true"]::before {
	color: var(--cv-fg);
}

.cv-lang__note {
	margin-inline-start: auto;
	padding-inline-start: 8px;
	text-align: end;
}

/* Phones: globe icon only, panel spans the header width under the bar. */
@media (max-width: 599px) {
	.cv-header__inner {
		position: relative;
		gap: 8px;
	}

	.cv-logo {
		min-width: 0;
		font-size: 1rem;
		letter-spacing: 0.06em;
	}

	.cv-logo > span:last-child {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.cv-header__actions {
		gap: 2px;
		flex-shrink: 0;
	}

	.cv-header__actions .cv-icon-btn {
		min-width: 40px;
		padding: 0 8px;
	}

	.cv-header__lang-desktop .cv-lang__code {
		display: none;
	}

	.cv-header__lang-desktop .cv-lang {
		position: static;
	}

	.cv-header__lang-desktop .cv-lang__panel {
		top: calc(100% + 4px);
		inset-inline: 12px;
		min-width: 0;
		max-height: calc(100vh - var(--cv-header-h) - 32px);
		max-height: calc(100dvh - var(--cv-header-h) - 32px);
		overflow-y: auto;
	}
}

@media (max-width: 479px) {
	.cv-drawer-toggle__label {
		display: none;
	}
}

/* Very narrow phones (e.g. 320px): search stays available in the menu drawer. */
@media (max-width: 349px) {
	.cv-header__actions > button[aria-controls="cv-search-panel"] {
		display: none;
	}
}

/* Wide screens: inline language codes instead of the globe button. */
@media (min-width: 1280px) {
	.cv-header__lang-desktop .cv-lang > button {
		display: none;
	}

	.cv-header__lang-desktop .cv-lang__panel,
	.cv-header__lang-desktop .cv-lang__panel[hidden] {
		position: static;
		display: flex !important;
		align-items: center;
		min-width: 0;
		padding: 0 4px;
		margin: 0;
		background: transparent;
		border: 0;
		box-shadow: none;
	}

	.cv-header__lang-desktop .cv-lang__panel li {
		display: flex;
		align-items: center;
	}

	.cv-header__lang-desktop .cv-lang__panel li + li::before {
		content: "";
		width: 1px;
		height: 14px;
		background: var(--cv-line-strong);
	}

	.cv-header__lang-desktop .cv-lang__link {
		justify-content: center;
		gap: 0;
		min-width: 40px;
		min-height: 44px;
		padding: 0 7px;
		border-radius: 8px;
	}

	.cv-header__lang-desktop .cv-lang__link::before {
		min-width: 0;
		font-size: 0.8125rem;
		font-weight: 700;
		color: var(--cv-muted);
	}

	.cv-header__lang-desktop .cv-lang__link:hover::before,
	.cv-header__lang-desktop .cv-lang__link:focus-visible::before {
		color: var(--cv-fg);
	}

	.cv-header__lang-desktop .cv-lang__link[aria-current="true"] {
		box-shadow: inset 0 -3px 0 var(--cv-blue);
		border-radius: 0;
	}

	.cv-header__lang-desktop .cv-lang__link[aria-current="true"]::before {
		color: var(--cv-fg);
	}

	/* Native name and "homepage" note stay readable by screen readers only. */
	.cv-header__lang-desktop .cv-lang__link > span {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}
}