/* Unidos In Power — top bar
   ---------------------------------------------------------------------------
   A slim band above the main navigation that holds the language switcher.
   Built from the design system's own tokens: the deep navy already used by the
   footer, so the header reads as a stacked pair of brand bands rather than a
   new colour. Hidden on small screens, where the space belongs to the logo and
   the menu toggle — the switcher stays reachable inside the mobile menu panel
   and, more importantly, through the hreflang links in the page head. */

.uip-topbar {
	background: var(--uip-navy-deep);
	padding: 0 40px;
}

.uip-topbar-inner {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-height: 38px;
}

.uip-lang-switcher {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.uip-lang-switcher a {
	display: inline-block;
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: var(--tracking-wide);
	color: var(--uip-gray-400);
	text-decoration: none;
	padding: 5px 10px;
	border-radius: var(--radius-pill);
	transition: color var(--dur-base) var(--ease-standard),
		background-color var(--dur-base) var(--ease-standard);
}

.uip-lang-switcher a:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
}

.uip-lang-switcher a.is-active {
	color: var(--uip-green);
}

/* Separator between the two codes, drawn rather than typed so it never ends up
   in the accessibility tree or in copied text. */
.uip-lang-switcher li + li {
	border-left: 1px solid var(--border-on-dark);
	padding-left: 4px;
}

/* The copy that lives inside the mobile menu panel: hidden while the top bar
   is on screen, shown once the top bar drops out. */
.uip-lang-mobile {
	display: none;
}

@media (max-width: 1080px) {
	.uip-topbar {
		display: none;
	}

	.uip-lang-mobile {
		display: block;
	}

	.uip-lang-mobile .uip-lang-switcher a {
		color: rgba(255, 255, 255, 0.78);
		padding-left: 0;
	}

	.uip-lang-mobile .uip-lang-switcher a.is-active {
		color: var(--uip-green);
	}
}