/* Lingua switcher.

   Four menu styles, chosen under Languages > Settings:

     panel    globe + current language, dropdown listing every language
     minimal  flag + name, dropdown listing the other languages
     inline   every language on one line, separated by a dot
     flat     one menu item per language, styled entirely by your theme

   Colours come from custom properties, so overriding is a one liner:

     .lingua-switcher-list { --lingua-bg: #111; --lingua-color: #fff; }
*/

.lingua-switcher-menu {
	position: relative;
}

/* ---------------------------------------------------------------- trigger */

.lingua-switcher-menu .lingua-switcher-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

.lingua-switcher-globe {
	flex: none;
	opacity: 0.75;
}

.lingua-switcher-caret {
	width: 0;
	height: 0;
	margin-left: 0.1em;
	border-right: 0.3em solid transparent;
	border-left: 0.3em solid transparent;
	border-top: 0.35em solid currentColor;
	opacity: 0.7;
	transition: transform 0.15s ease;
}

.lingua-switcher-toggle[aria-expanded="true"] .lingua-switcher-caret {
	transform: rotate(180deg);
}

/* ---------------------------------------------------------------- dropdown */

.lingua-switcher-menu .lingua-switcher-list {
	position: absolute;
	top: calc(100% + 0.5em);
	left: 0;
	z-index: 999;
	min-width: max(100%, 11em);
	margin: 0;
	padding: 0.4em;
	list-style: none;
	background: var(--lingua-bg, #fff);
	border: 1px solid var(--lingua-border, rgba(0, 0, 0, 0.1));
	border-radius: var(--lingua-radius, 10px);
	box-shadow: var(--lingua-shadow, 0 10px 30px rgba(0, 0, 0, 0.13));
	opacity: 0;
	visibility: hidden;
	transform: translateY(-0.4em);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.lingua-switcher-menu:hover > .lingua-switcher-list,
.lingua-switcher-menu:focus-within > .lingua-switcher-list,
.lingua-switcher-toggle[aria-expanded="true"] + .lingua-switcher-list {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* Flip to the right edge when the panel would run off screen. */
.lingua-switcher-menu--flip > .lingua-switcher-list {
	right: 0;
	left: auto;
}

.lingua-switcher-menu .lingua-switcher-list__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lingua-switcher-menu .lingua-switcher-list a {
	display: flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.5em 0.7em;
	font-size: var(--lingua-font-size, 0.95em);
	line-height: 1.3;
	color: var(--lingua-color, #1a1a1a);
	white-space: nowrap;
	text-decoration: none;
	border-radius: var(--lingua-item-radius, 6px);
}

.lingua-switcher-menu .lingua-switcher-list a:hover,
.lingua-switcher-menu .lingua-switcher-list a:focus {
	background: var(--lingua-hover, rgba(0, 0, 0, 0.06));
	color: var(--lingua-color, #1a1a1a);
}

/* -------------------------------------------------- panel selected markers */

.lingua-switcher-mark {
	flex: none;
	width: 1em;
	height: 1em;
	border: 1px solid var(--lingua-mark, rgba(0, 0, 0, 0.3));
	border-radius: 50%;
}

.lingua-switcher-list__item.is-current > a .lingua-switcher-mark {
	border-color: var(--lingua-mark-active, #c0392b);
	border-width: 0.3em;
}

.lingua-switcher-menu--panel .lingua-switcher-list a {
	padding: 0.55em 0.8em;
}

/* ------------------------------------------------------------------ inline */

.lingua-switcher-inline {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.2em 0;
}

.lingua-switcher-inline__item {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	text-decoration: none;
	opacity: 0.75;
}

.lingua-switcher-inline__item:hover,
.lingua-switcher-inline__item:focus {
	opacity: 1;
}

.lingua-switcher-inline__item.is-current {
	font-weight: 600;
	opacity: 1;
}

.lingua-switcher-inline__item + .lingua-switcher-inline__item::before {
	margin: 0 0.6em;
	opacity: 0.45;
	content: "\00b7";
}

/* ------------------------------------------------------------------ shared */

.lingua-menu-flag {
	flex: none;
	line-height: 1;
}

/* ------------------------------------------------------------------ mobile */

/* Off canvas menus have their own stacking and overflow, so an absolutely
   positioned panel either gets clipped or floats over the wrong thing. Below
   the usual mobile breakpoint the languages become a plain indented list that
   is always visible. */

@media (max-width: 999px) {
	.lingua-switcher-menu .lingua-switcher-list {
		position: static;
		min-width: 0;
		margin: 0.25em 0 0;
		padding: 0 0 0 0.5em;
		background: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.lingua-switcher-menu .lingua-switcher-list a {
		padding: 0.5em 0;
		font-size: inherit;
		color: inherit;
	}

	.lingua-switcher-menu .lingua-switcher-list a:hover,
	.lingua-switcher-menu .lingua-switcher-list a:focus {
		background: none;
	}

	.lingua-switcher-menu .lingua-switcher-toggle {
		display: none;
	}

	.lingua-switcher-inline {
		gap: 0.4em 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lingua-switcher-list,
	.lingua-switcher-caret {
		transition: none;
	}
}

/* ------------------------ shortcode, widget and template tag switcher ---- */

.lingua-switcher--list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lingua-switcher--list .lingua-switcher__item {
	margin: 0;
}

.lingua-switcher--list .lingua-switcher__item.is-current > a {
	font-weight: 600;
	text-decoration: none;
}

.lingua-switcher__flag {
	margin-right: 0.25em;
}

.lingua-switcher--dropdown {
	max-width: 100%;
}