/*
 * Language switcher of Lobbit Multilingual.
 * The look chosen in the settings arrives as CSS variables (--lobbit-ml-*),
 * printed once after this file; the values below are the fallbacks.
 */
.lobbit-ml-switcher {
	--lobbit-ml-font: 15px;
	position: relative;
	display: inline-block;
	font-size: var(--lobbit-ml-font);
	line-height: 1.3;
}

.lobbit-ml-size--small {
	--lobbit-ml-font: 13px;
}

.lobbit-ml-size--large {
	--lobbit-ml-font: 18px;
}

.lobbit-ml-switcher ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lobbit-ml-switcher a {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	text-decoration: none;
}

.lobbit-ml-flag {
	display: inline-block;
	width: auto;
	height: 1em;
	min-height: 13px;
	aspect-ratio: 4 / 3;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
	vertical-align: -0.08em;
	object-fit: cover;
}

.lobbit-ml-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Row: every language side by side, in a box with the chosen colors. */
.lobbit-ml-switcher--row ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15em;
	padding: 0.2em;
	background: var(--lobbit-ml-bg, #fff);
	border: 1px solid var(--lobbit-ml-border, #c3c4c7);
	border-radius: var(--lobbit-ml-radius, 4px);
}

.lobbit-ml-switcher--row a {
	padding: 0.3em 0.65em;
	color: var(--lobbit-ml-text, #1d2327);
	border-radius: calc(var(--lobbit-ml-radius, 4px) - 2px);
}

.lobbit-ml-switcher--row a:hover,
.lobbit-ml-switcher--row a:focus-visible {
	background: color-mix(in srgb, currentColor 10%, transparent);
}

.lobbit-ml-switcher--row a.is-current {
	font-weight: 700;
	background: color-mix(in srgb, currentColor 16%, transparent);
}

/* Dropdown: the current language, the others open on click (or Enter/Space). */
.lobbit-ml-switcher--dropdown summary {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	min-height: 32px;
	box-sizing: border-box;
	padding: 0.4em 0.85em;
	color: var(--lobbit-ml-text, #1d2327);
	background: var(--lobbit-ml-bg, #fff);
	border: 1px solid var(--lobbit-ml-border, #c3c4c7);
	border-radius: var(--lobbit-ml-radius, 4px);
	cursor: pointer;
	list-style: none;
}

.lobbit-ml-switcher--dropdown summary::-webkit-details-marker {
	display: none;
}

.lobbit-ml-switcher--dropdown summary::after {
	content: "";
	flex: none;
	width: max(0.45em, 7px);
	height: max(0.45em, 7px);
	margin-left: 0.2em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
}

.lobbit-ml-switcher--dropdown[open] summary::after {
	transform: translateY(0.1em) rotate(-135deg);
}

.lobbit-ml-switcher--dropdown ul {
	position: absolute;
	z-index: 1000;
	top: 100%;
	left: 0;
	min-width: 100%;
	margin-top: 0.3em;
	padding: 0.3em;
	background: var(--lobbit-ml-bg, #fff);
	border: 1px solid var(--lobbit-ml-border, #c3c4c7);
	border-radius: min(var(--lobbit-ml-radius, 4px), 12px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
}

.lobbit-ml-switcher--dropdown li a {
	display: flex;
	padding: 0.35em 0.7em;
	color: var(--lobbit-ml-text, #1d2327);
	white-space: nowrap;
	border-radius: 3px;
}

.lobbit-ml-switcher--dropdown li a:hover,
.lobbit-ml-switcher--dropdown li a:focus-visible {
	background: color-mix(in srgb, currentColor 10%, transparent);
}

.lobbit-ml-switcher--dropdown li a.is-current {
	font-weight: 700;
}

.lobbit-ml-switcher summary:focus-visible,
.lobbit-ml-switcher a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Floating: one of the four corners, at the chosen distance from the edges. */
.lobbit-ml-floating {
	position: fixed;
	z-index: 99999;
	max-width: calc(100vw - 2 * var(--lobbit-ml-offset, 16px));
}

.lobbit-ml-floating--bottom-right {
	right: var(--lobbit-ml-offset, 16px);
	bottom: var(--lobbit-ml-offset, 16px);
}

.lobbit-ml-floating--bottom-left {
	left: var(--lobbit-ml-offset, 16px);
	bottom: var(--lobbit-ml-offset, 16px);
}

.lobbit-ml-floating--top-right {
	right: var(--lobbit-ml-offset, 16px);
	top: var(--lobbit-ml-offset, 16px);
}

.lobbit-ml-floating--top-left {
	left: var(--lobbit-ml-offset, 16px);
	top: var(--lobbit-ml-offset, 16px);
}

.admin-bar .lobbit-ml-floating--top-right,
.admin-bar .lobbit-ml-floating--top-left {
	top: calc(var(--lobbit-ml-offset, 16px) + 32px);
}

.lobbit-ml-floating summary,
.lobbit-ml-floating .lobbit-ml-switcher--row ul {
	box-shadow: var(--lobbit-ml-shadow, none);
}

/* At the bottom of the page the list opens upwards; on the right it lines up on the right. */
.lobbit-ml-floating--bottom-right .lobbit-ml-switcher--dropdown ul,
.lobbit-ml-floating--bottom-left .lobbit-ml-switcher--dropdown ul {
	top: auto;
	bottom: 100%;
	margin: 0 0 0.3em;
}

.lobbit-ml-floating--bottom-right .lobbit-ml-switcher--dropdown ul,
.lobbit-ml-floating--top-right .lobbit-ml-switcher--dropdown ul {
	left: auto;
	right: 0;
}

/* In menus the theme gives the look: only the flag is added, with a space before the text. */
a:not(.lobbit-ml-link) > .lobbit-ml-flag + .lobbit-ml-label {
	margin-left: 0.4em;
}

@media (max-width: 600px) {
	.admin-bar .lobbit-ml-floating--top-right,
	.admin-bar .lobbit-ml-floating--top-left {
		top: calc(var(--lobbit-ml-offset, 16px) + 46px);
	}
}

/*
 * Language dropdown in a menu: the theme styles it as any submenu. These
 * rules are only a fallback for themes that do not style submenus: :where()
 * gives them no weight, so every rule of the theme wins over them.
 */
:where(.lobbit-ml-menu-parent) {
	position: relative;
}

:where(.lobbit-ml-menu-parent > .sub-menu) {
	position: absolute;
	z-index: 1000;
	top: 100%;
	right: 0;
	display: none;
	min-width: 100%;
	margin: 0;
	padding: 0.3em 0;
	list-style: none;
	background: #fff;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
}

:where(.lobbit-ml-menu-parent:hover > .sub-menu, .lobbit-ml-menu-parent:focus-within > .sub-menu, .lobbit-ml-menu-parent.is-open > .sub-menu) {
	display: block;
}

:where(.lobbit-ml-menu-parent > .sub-menu a) {
	display: flex;
	padding: 0.35em 0.9em;
	white-space: nowrap;
}

/*
 * Themes style img, summary, lists and links of the whole page (".site img
 * { height: auto }", "* { box-sizing: border-box }"…). These rules, more
 * specific, keep the switcher as designed in every theme, as in the preview.
 */
.lobbit-ml-switcher img.lobbit-ml-flag,
.lobbit-ml-menu-item img.lobbit-ml-flag,
a[data-lobbit-ml-keep] img.lobbit-ml-flag {
	display: inline-block;
	box-sizing: content-box;
	width: 1.3333em;
	height: 1em;
	min-width: 17px;
	min-height: 13px;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	object-fit: cover;
	vertical-align: -0.12em;
}

details.lobbit-ml-switcher > summary {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	font-size: var(--lobbit-ml-font);
	line-height: 1.3;
}

details.lobbit-ml-switcher > summary::before {
	content: none;
}

details.lobbit-ml-switcher > summary::after {
	display: inline-block;
	box-sizing: content-box;
	flex: none;
	width: max(0.4em, 6px);
	height: max(0.4em, 6px);
	padding: 0;
	background: none;
}

.lobbit-ml-switcher.lobbit-ml-switcher ul,
.lobbit-ml-switcher.lobbit-ml-switcher li {
	box-sizing: border-box;
	margin-left: 0;
	list-style: none;
}

.lobbit-ml-switcher.lobbit-ml-switcher li {
	padding: 0;
	background: none;
	border: 0;
}

.lobbit-ml-switcher.lobbit-ml-switcher li a {
	box-sizing: border-box;
	font-size: inherit;
	line-height: 1.3;
	text-decoration: none;
}

/* Under the header of the page, when it would cover it (switcher.js). */
.lobbit-ml-floating--top-right.is-under-header,
.lobbit-ml-floating--top-left.is-under-header,
.admin-bar .lobbit-ml-floating--top-right.is-under-header,
.admin-bar .lobbit-ml-floating--top-left.is-under-header {
	top: var(--lobbit-ml-top);
}

.lobbit-ml-switcher.lobbit-ml-switcher--row > ul {
	padding: 0.2em;
}

details.lobbit-ml-switcher > ul {
	padding: 0.3em;
}

/*
 * The dropdown of the plugin inside a menu printed by the theme: it looks
 * like an item of that menu. switcher.js copies the look of the links next
 * to it and the background of the header (--lobbit-ml-menu-bg, --lobbit-ml-menu-text).
 */
details.lobbit-ml-switcher.lobbit-ml-in-menu {
	--lobbit-ml-font: 1em;
	font-size: inherit;
	vertical-align: middle;
}

details.lobbit-ml-switcher.lobbit-ml-in-menu > summary {
	min-height: 0;
	padding: 0;
	color: inherit;
	font: inherit;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

details.lobbit-ml-switcher.lobbit-ml-in-menu > ul {
	right: auto;
	left: 0;
	color: var(--lobbit-ml-menu-text, inherit);
	background: var(--lobbit-ml-menu-bg, Canvas);
	border-color: color-mix(in srgb, currentColor 18%, transparent);
}

details.lobbit-ml-switcher.lobbit-ml-in-menu li a {
	color: inherit;
	padding: 0.45em 0.8em;
}

details.lobbit-ml-switcher.lobbit-ml-in-menu.is-end > ul {
	right: 0;
	left: auto;
}

/* In a stacked menu (the menu of a phone) the list opens in the flow, as an accordion. */
details.lobbit-ml-switcher.lobbit-ml-in-menu.is-stacked {
	display: block;
}

details.lobbit-ml-switcher.lobbit-ml-in-menu.is-stacked > ul {
	position: static;
	margin: 0.2em 0 0;
	padding: 0 0 0 1em;
	background: none;
	border: 0;
	box-shadow: none;
}