/* Lazepe Translate - language switcher
   Same flag row the site used before (#lz-lang-top), now made of real links.
   Rendered server-side, so it reserves its space before paint. */

#lz-lang-top {
	/* .top-nav is a flex row (the theme toggle sits at order 99), so float is
	   ignored here; margin-left:auto is what pushes the row to the right. */
	order: 98;
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 8px;
	height: 28px;
	padding-left: 14px;
	border-left: 1px solid rgba(0, 0, 0, 0.12);
}

#lz-lang-top a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	min-height: 24px;
	flex: 0 0 auto;
	opacity: 0.55;
	transition: opacity 0.15s;
}

#lz-lang-top a:hover {
	opacity: 1;
}

/* The original had no keyboard affordance at all: tabbing through the flags
   gave no visible focus. */
#lz-lang-top a:focus-visible {
	opacity: 1;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #14607a;
	border-radius: 50%;
}

/* box-shadow, not outline: the theme resets outlines on links, so the active
   ring never rendered. A shadow also hugs the round flag instead of boxing it. */
#lz-lang-top a.lz-lang-on {
	opacity: 1;
	box-shadow: 0 0 0 2px #4caf50;
	border-radius: 50%;
}

#lz-lang-top img {
	display: block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
}

@media (max-width: 600px) {
	#lz-lang-top {
		gap: 2px;
		margin-left: 6px;
		padding-left: 6px;
	}

	/* Taller tap targets on touch without making the bar itself grow. */
	#lz-lang-top a {
		min-width: 28px;
		min-height: 28px;
	}

	#lz-lang-top img {
		width: 16px;
		height: 16px;
	}
}

/* Desktop: out of the page wrap entirely.
   The site is boxed at 1170px and #page-wrap clips with overflow:hidden, so an
   absolutely positioned row could never reach the grey margin. Fixed escapes
   that, and stacking the flags vertically fits the ~127px gutter that a row of
   160px could not. Below 1280px there is no gutter, so it stays in the bar. */
@media (min-width: 1280px) {
	#lz-lang-top {
		position: fixed;
		right: 14px;
		top: 50%;
		transform: translateY(-50%);
		flex-direction: column;
		height: auto;
		gap: 9px;
		margin: 0;
		padding: 10px 7px;
		border-left: 0;
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.82);
		box-shadow: 0 1px 8px rgba(0, 0, 0, 0.14);
		z-index: 900;
	}

	#lz-lang-top img {
		width: 21px;
		height: 21px;
	}

	#lz-lang-top a {
		min-width: 26px;
		min-height: 26px;
	}
}


/* Translated labels are longer than the English ones, and the main menu wraps
   them onto a second line that the bar's fixed height hides: "Die Lazen" showed
   as "Die". Keep every item on one line, and buy the extra width back from the
   padding - only in the translated languages, so the English menu is untouched.
   Measured: German needs 1091px on one line for 1123px available at 24px padding. */
@media (min-width: 992px) {
	ul.menu > li > a {
		white-space: nowrap;
	}

	/* !important because the parent theme's own menu rule outranks this one, and
	   the theme is a third party we do not edit. Without the narrower padding the
	   last item collides with the search icon on the right. */
	html[lang="de"] ul.menu > li > a,
	html[lang="fr"] ul.menu > li > a,
	html[lang="tr"] ul.menu > li > a,
	html[lang="ka"] ul.menu > li > a {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}