/* Language switcher.
 *
 * Base rules stay context-neutral (color: inherit) so the [ct_ml_switcher] shortcode
 * is safe to drop on a light page body. The header treatment is scoped to the header
 * block below — hardcoding white here would make the shortcode invisible elsewhere.
 */

.ct-lang-switcher {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	/* No font-size of its own: inherit the nav's, so the switcher can't be a
	   different size from the menu links sitting beside it. */
}

/* `margin-left: auto` ONLY inside GeneratePress's native nav, which has no
   justify-content of its own, so the switcher has to claim the free space itself.
   It must NOT apply in the block header: `.gb-menu-container` already right-aligns
   its children (justify-content: flex-end), and an auto margin there absorbs all the
   free space to the switcher's left, shoving the menu <ul> away from its alignment.
   That broke the main menu on 2026-07-19. */
.inside-navigation .ct-lang-switcher {
	margin-left: auto;
}

.ct-lang-switcher a {
	display: inline-flex;
	align-items: center;
	min-height: 24px; /* WCAG 2.5.8 target size */
	color: inherit;
	text-decoration: none;
	padding: 4px 8px;
}

.ct-lang-switcher a:hover,
.ct-lang-switcher a:focus {
	text-decoration: underline;
}

.ct-lang-switcher__current {
	font-weight: 600;
}

.ct-lang-switcher__sep {
	color: currentColor;
	opacity: 0.45;
}

.ct-lang-switcher a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* --- Header treatment: a segmented switch -----------------------------------
 * In the block header the switcher is a sibling of the menu <ul>, NOT a menu item, so
 * it never picked up `.gb-menu-item { color: var(--base-3) }`. No ancestor sets a
 * colour — the header only sets a navy *background* — so `color: inherit` resolved to
 * the body default and rendered dark-on-navy next to white menu links.
 *
 * Styled as a compact segmented control rather than two more nav links: at nav size
 * and weight it read as a fifth and sixth menu item, which is what made it feel
 * clunky. Smaller type, a pill outline, and a filled active segment make it read as a
 * control, and a left margin sets it apart from the menu.
 */
.gb-site-header .ct-lang-switcher,
.gb-menu-container .ct-lang-switcher {
	gap: 0;                 /* segments sit flush; the pill supplies the grouping */
	margin-left: 14px;      /* stand apart from the last menu item */
	/* 0.5 alpha = 4.58:1 on --brand. At 0.35 it was 2.96:1 and failed WCAG 1.4.11,
	   which wants 3:1 for the boundary of a UI component. */
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 999px;
	font-size: 0.75rem;
	line-height: 1.2;
	letter-spacing: 0.01em;
	/* NO overflow:hidden — it would clip the focus ring. The segments round their own
	   outer corners instead (below), which keeps the fill inside the pill shape. */
}

/* The "/" is decorative (aria-hidden); a segmented control divides by fill, not glyph. */
.gb-site-header .ct-lang-switcher__sep,
.gb-menu-container .ct-lang-switcher__sep {
	display: none;
}

.gb-site-header .ct-lang-switcher a,
.gb-menu-container .ct-lang-switcher a {
	color: var(--base-3);
	padding: 6px 12px;      /* ~26px tall — stays over the WCAG 2.5.8 24px minimum */
	min-height: 0;
	opacity: 0.8;           /* 9.36:1 on --brand; the inactive language still recedes */
	transition: opacity 120ms ease, background-color 120ms ease;
}

/* Round only the outer corners so the active fill stays inside the pill without
   overflow:hidden (which would clip the focus ring). */
.gb-site-header .ct-lang-switcher a:first-of-type,
.gb-menu-container .ct-lang-switcher a:first-of-type {
	border-radius: 999px 0 0 999px;
}

.gb-site-header .ct-lang-switcher a:last-of-type,
.gb-menu-container .ct-lang-switcher a:last-of-type {
	border-radius: 0 999px 999px 0;
}

.gb-site-header .ct-lang-switcher a:hover,
.gb-site-header .ct-lang-switcher a:focus,
.gb-menu-container .ct-lang-switcher a:hover,
.gb-menu-container .ct-lang-switcher a:focus {
	opacity: 1;
	text-decoration: none;  /* a switch highlights; it doesn't underline */
}

/* Active segment: AMBER fill, not white.
 *
 * A white fill read as "brighter" next to near-white inactive text, so the on/off
 * state was hard to distinguish at a glance. Amber is a different HUE, not just a
 * different lightness — the state now differs categorically. It is also the existing
 * --accent already used for link hovers, so it is on-brand rather than invented.
 *
 * navy-on-amber = 7.93:1 (text, needs 4.5); amber-on-navy = 7.93:1 (the state cue
 * itself, needs 3:1 as a UI component under 1.4.11).
 */
.gb-site-header .ct-lang-switcher__current,
.gb-menu-container .ct-lang-switcher__current {
	background-color: var(--accent);
	color: var(--brand);
	opacity: 1;
	font-weight: 700;       /* weight carries the state too, not colour alone (1.4.1) */
}

/* Focus ring: WHITE and OUTSET, so it sits on the navy header at 13.85:1 and works
   over both segments. The previous inset amber ring was 1.75:1 against the white
   active fill — an invisible keyboard focus indicator. */
.gb-site-header .ct-lang-switcher a:focus-visible,
.gb-menu-container .ct-lang-switcher a:focus-visible {
	outline: 2px solid var(--base-3);
	outline-offset: 2px;
	border-radius: 999px;   /* ring follows the pill, not the square inner corner */
}