/*
 * Header language selector (RO / EN).
 *
 * The selector is a sibling of core/navigation inside the header group, so it
 * has to read as part of that band rather than as a control pasted over it.
 * Everything here is either inherited from the header or expressed relative to
 * the inherited font size — no font stack, background, border or shadow of its
 * own. That is the whole point: the previous implementation carried all four and
 * belonged to no visual world on the page.
 */

.dobrogea-lang-switcher {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	font-family: inherit;
	/*
	 * The header group runs at the site-title size; the navigation drops to the
	 * theme's medium step. Inheriting would make a two-letter code as loud as
	 * the site title, so the selector takes the navigation's step instead — via
	 * the same preset, so it tracks the theme's fluid scale rather than freezing
	 * a pixel value.
	 */
	font-size: var(--wp--preset--font-size--medium, 1rem);
	line-height: 1;
	white-space: nowrap;
}

/*
 * The header group sets no gap, so without an offset the selector butts straight
 * against the last menu item and reads as a sixth destination. It is held wider
 * than the navigation's own item spacing because this is a different class of
 * control — a state switch, not a place to go.
 *
 * Scoped through the flex-layout parent for two reasons: it is precisely the
 * case the offset is for (a row of siblings), and core emits
 * `.is-layout-flex > :is(*, div) { margin: 0 }`, which outranks a lone class
 * selector. Matching its shape is what makes this land.
 */
.is-layout-flex > .dobrogea-lang-switcher {
	margin-inline-start: calc(var(--wp--style--block-gap, 1.2rem) * 1.75);
}

.dobrogea-lang-switcher__item {
	color: inherit;
	text-decoration: none;
	/*
	 * Padding builds a ~44px tap target; the matching negative block margin
	 * keeps that target from growing the header band on desktop.
	 */
	padding: 0.9em 0.2em;
	margin-block: -0.9em;
}

.dobrogea-lang-switcher__item.is-current {
	font-weight: 600;
}

a.dobrogea-lang-switcher__item {
	/*
	 * Contrast floor, not a look: 0.65 of the header's near-black on its light
	 * background still clears 4.5:1, which a lighter de-emphasis would not.
	 */
	opacity: 0.65;
	transition: opacity 120ms ease-out;
}

a.dobrogea-lang-switcher__item:hover {
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 0.3em;
	text-decoration-thickness: from-font;
}

a.dobrogea-lang-switcher__item:focus-visible {
	opacity: 1;
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.dobrogea-lang-switcher__code {
	letter-spacing: 0.06em;
}

.dobrogea-lang-switcher__separator {
	opacity: 0.35;
}

/*
 * Accessible name for each option. The visible label is the two-letter code, so
 * without this a screen reader announces the link as "E N" instead of "English".
 */
.dobrogea-lang-switcher__name {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	a.dobrogea-lang-switcher__item {
		transition: none;
	}
}

/*
 * Below core/navigation's overlay breakpoint the header collapses to
 * title + hamburger. The selector stays visible — it is a sibling of the nav,
 * not a menu item — but moves inside the hamburger, which readers expect to
 * remain the outermost control in the row.
 */
@media (max-width: 599px) {
	.dobrogea-lang-switcher {
		order: -1;
	}

	/* Reordering puts the hamburger after the selector, so the separation has
	   to move to the other side with it — and shrinks, since phone headers have
	   no width to spare. */
	.is-layout-flex > .dobrogea-lang-switcher {
		margin-inline: 0 calc(var(--wp--style--block-gap, 1.2rem) * 0.75);
	}
}