/**
 * BDTranslate language switcher.
 *
 * Everything visual is driven by the CSS custom properties declared on
 * `.wpglotty-switcher`. Any source of styling (admin defaults, shortcode attributes,
 * Gutenberg attributes, Breakdance controls) only ever sets those variables, so
 * there is never a second stylesheet to keep in sync.
 *
 * Progressive enhancement: the collapsed state of dropdown/floating/modal/
 * off-canvas is applied only once switcher.js has flagged the wrapper with
 * `data-wpglotty-enhanced`. Without JavaScript the list is simply an expanded list.
 */

.wpglotty-switcher {
	/* Colours */
	--wpglotty-sw-color: inherit;
	--wpglotty-sw-color-hover: var(--wpglotty-sw-color);
	--wpglotty-sw-color-active: var(--wpglotty-sw-color);
	--wpglotty-sw-bg: transparent;
	--wpglotty-sw-bg-hover: rgba(0, 0, 0, 0.06);
	--wpglotty-sw-bg-active: rgba(0, 0, 0, 0.1);
	--wpglotty-sw-panel-bg: #fff;

	/* Typography */
	--wpglotty-sw-font-family: inherit;
	--wpglotty-sw-font-size: inherit;
	--wpglotty-sw-font-weight: inherit;
	--wpglotty-sw-text-transform: none;
	--wpglotty-sw-letter-spacing: normal;

	/* Metrics */
	--wpglotty-sw-item-padding: 0.4em 0.7em;
	--wpglotty-sw-gap: 0.5em;
	--wpglotty-sw-width: auto;

	/* Decoration */
	--wpglotty-sw-border: 1px solid rgba(0, 0, 0, 0.12);
	--wpglotty-sw-radius: 4px;
	--wpglotty-sw-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);

	/* Flags */
	--wpglotty-sw-flag-size: 20px;
	--wpglotty-sw-flag-radius: 2px;

	/* Motion */
	--wpglotty-sw-dropdown-anim: fade;
	--wpglotty-sw-anim-duration: 180ms;

	/* Layering, positioning and focus */
	--wpglotty-sw-z-index: 999;
	--wpglotty-sw-offset: 20px;
	--wpglotty-sw-focus-ring: 2px solid currentColor;

	/* Alignment of the horizontal layouts */
	--wpglotty-sw-align: flex-start;

	/* Toggle switch variant */
	/* The sliding switch. Its own colours: what travels is not an item's
	   background, and on two of the four skins it is not even a fill. */
	/* The pill and the word on it are named outright rather than taken from
	   the text around them. Built out of currentColor and canvas they came out
	   as a black pill with black text in a builder's header, where the switcher
	   inherits a colour nobody chose for it: unreadable by default, which is
	   the one thing a default must not be. */
	--wpglotty-sw-slide-track: rgba(0, 0, 0, 0.08);
	--wpglotty-sw-slide-bg: #ffffff;
	--wpglotty-sw-slide-ink: #16181d;
	--wpglotty-sw-slide-ring: currentColor;
	--wpglotty-sw-slide-thickness: 2px;
	--wpglotty-sw-slide-duration: 420ms;
	--wpglotty-sw-slide-ease: cubic-bezier(.34, 1.2, .44, 1);

	--wpglotty-sw-toggle-track-bg: rgba(0, 0, 0, 0.08);
	--wpglotty-sw-toggle-thumb-bg: #fff;
	--wpglotty-sw-toggle-inactive-color: rgba(0, 0, 0, 0.45);

	position: relative;
	display: inline-block;
	font-family: var(--wpglotty-sw-font-family);
	font-size: var(--wpglotty-sw-font-size);
	font-weight: var(--wpglotty-sw-font-weight);
	letter-spacing: var(--wpglotty-sw-letter-spacing);
	text-transform: var(--wpglotty-sw-text-transform);
	color: var(--wpglotty-sw-color);
	box-sizing: border-box;
}

.wpglotty-switcher *,
.wpglotty-switcher *::before,
.wpglotty-switcher *::after {
	box-sizing: inherit;
}

/* ---------------------------------------------------------------------------
 * Shared atoms
 * ------------------------------------------------------------------------ */

.wpglotty-switcher__list,
.wpglotty-switcher__grid {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Said again, and marked important, because a theme reaches this list with an
   ID: Divi puts the content inside `#left-area` and gives every `ul` in there a
   bullet and an indent, which no class of ours can outrank. The switcher's list
   is a row of languages rather than prose, and these three are not settings, so
   there is nothing here for a theme to have an opinion about. */
.wpglotty-switcher__list,
.wpglotty-switcher__grid {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.wpglotty-switcher__link,
.wpglotty-switcher__label,
.wpglotty-switcher__trigger,
.wpglotty-switcher__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--wpglotty-sw-gap);
	padding: var(--wpglotty-sw-item-padding);
	color: var(--wpglotty-sw-color);
	background: var(--wpglotty-sw-bg);
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-decoration: none;
	line-height: 1.3;
	border-radius: var(--wpglotty-sw-radius);
	transition: background-color var(--wpglotty-sw-anim-duration) ease, color var(--wpglotty-sw-anim-duration) ease;
}

.wpglotty-switcher__link,
.wpglotty-switcher__toggle {
	cursor: pointer;
}

/* A language you have already been to is not a visited link.
   Browsers and themes paint :visited purple, and that rule outranks a plain
   class, so the language you switched to once stayed purple in every switcher
   from then on. The switcher only ever uses the colours that can be set on it,
   and its own default when they are not. Said with one class and one
   pseudo-class, so each style's own colours, which come later in this file,
   still win. */
.wpglotty-switcher__link:link,
.wpglotty-switcher__link:visited,
.wpglotty-switcher__trigger:link,
.wpglotty-switcher__trigger:visited,
.wpglotty-switcher__label:link,
.wpglotty-switcher__label:visited {
	color: var(--wpglotty-sw-color);
}

/* A switcher is a control, not prose.
   Themes underline every link in a header, and a page builder loads its own
   copy of this file after ours, so a plain rule here loses on source order
   alone. This is the one place the plugin insists: a language is picked, not
   read, and an underline under a flag or a two letter code reads as a mistake.
   The current language is marked by colour and weight instead. */
.wpglotty-switcher a,
.wpglotty-switcher a:hover,
.wpglotty-switcher a:focus,
.wpglotty-switcher a:focus-visible,
.wpglotty-switcher a:active {
	text-decoration: none !important;
}

.wpglotty-switcher__link:hover,
.wpglotty-switcher__link:focus-visible,
.wpglotty-switcher__toggle:hover,
.wpglotty-switcher__toggle:focus-visible,
.wpglotty-switcher__trigger:hover,
.wpglotty-switcher__trigger:focus-visible {
	color: var(--wpglotty-sw-color-hover);
	background: var(--wpglotty-sw-bg-hover);
}

.wpglotty-switcher__link.is-current,
.wpglotty-switcher__link[aria-current="true"] {
	color: var(--wpglotty-sw-color-active);
	background: var(--wpglotty-sw-bg-active);
}

.wpglotty-switcher a:focus-visible,
.wpglotty-switcher button:focus-visible {
	outline: var(--wpglotty-sw-focus-ring);
	outline-offset: 2px;
}

.wpglotty-switcher__flag {
	display: block;
	flex: 0 0 auto;
	width: var(--wpglotty-sw-flag-size);
	height: auto;
	border-radius: var(--wpglotty-sw-flag-radius);
	object-fit: cover;
}

.wpglotty-switcher--flag-round .wpglotty-switcher__flag {
	height: var(--wpglotty-sw-flag-size);
	border-radius: 50%;
}

.wpglotty-switcher--flag-square .wpglotty-switcher__flag {
	height: var(--wpglotty-sw-flag-size);
	border-radius: var(--wpglotty-sw-flag-radius);
}

/* Emoji flags size with the type, not with the box, so they need their own
   sizing rule; the shape modifiers above only apply to real images. */
/* An emoji flag is a glyph, not an image, so it cannot be cropped by object-fit.
   To take a shape it needs a box of its own that clips it, with the glyph set
   large enough to cover that box. Rect needs none of this: the emoji is already
   drawn as a rectangle. */
.wpglotty-switcher__flag--emoji {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	border-radius: 0;
	font-size: var(--wpglotty-sw-flag-size);
	line-height: 1;
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;
	font-style: normal;
}

.wpglotty-switcher--flag-round .wpglotty-switcher__flag--emoji,
.wpglotty-switcher--flag-square .wpglotty-switcher__flag--emoji {
	width: var(--wpglotty-sw-flag-size);
	height: var(--wpglotty-sw-flag-size);
	overflow: hidden;
	font-size: calc(var(--wpglotty-sw-flag-size) * 1.4);
}

.wpglotty-switcher--flag-round .wpglotty-switcher__flag--emoji {
	border-radius: 50%;
}

.wpglotty-switcher--flag-square .wpglotty-switcher__flag--emoji {
	border-radius: var(--wpglotty-sw-flag-radius);
}

.wpglotty-switcher .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------------------
 * Trigger
 * ------------------------------------------------------------------------ */

.wpglotty-switcher__trigger {
	width: var(--wpglotty-sw-width);
	margin: 0;
	border: var(--wpglotty-sw-border);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.wpglotty-switcher__trigger-inner {
	display: inline-flex;
	align-items: center;
	gap: var(--wpglotty-sw-gap);
	min-width: 0;
}

.wpglotty-switcher__trigger .wpglotty-switcher__label {
	padding: 0;
	background: none;
}

.wpglotty-switcher__caret {
	flex: 0 0 auto;
	width: 0;
	height: 0;
	margin-inline-start: auto;
	border-inline: 0.32em solid transparent;
	border-block-start: 0.36em solid currentColor;
	transition: transform var(--wpglotty-sw-anim-duration) ease;
}

.wpglotty-switcher[data-wpglotty-open] .wpglotty-switcher__caret {
	transform: rotate(180deg);
}

/* Without JS the trigger is pointless: the list is already there. */
.wpglotty-switcher__trigger {
	display: none;
}

.wpglotty-switcher[data-wpglotty-enhanced] .wpglotty-switcher__trigger {
	display: inline-flex;
}

/* ---------------------------------------------------------------------------
 * Dropdown and floating panels
 * ------------------------------------------------------------------------ */

.wpglotty-switcher--dropdown .wpglotty-switcher__panel,
.wpglotty-switcher--floating .wpglotty-switcher__panel {
	min-width: 100%;
	width: max-content;
	padding: 0.25em;
	background: var(--wpglotty-sw-panel-bg);
	border: var(--wpglotty-sw-border);
	border-radius: var(--wpglotty-sw-radius);
	box-shadow: var(--wpglotty-sw-shadow);
}

.wpglotty-switcher--dropdown .wpglotty-switcher__link,
.wpglotty-switcher--floating .wpglotty-switcher__link,
.wpglotty-switcher--offcanvas .wpglotty-switcher__link {
	display: flex;
	width: 100%;
}

/* On hover menus the gap between trigger and panel is dead space: the pointer
   is over neither element, mouseleave fires, and the menu closes while you are
   still on your way to it. This invisible strip bridges the gap so the pointer
   never leaves the switcher. */
.wpglotty-switcher--hoverable .wpglotty-switcher__panel::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 100%;
	height: calc(0.35em + 2px);
}

.wpglotty-switcher[data-wpglotty-enhanced].wpglotty-switcher--dropdown .wpglotty-switcher__panel,
.wpglotty-switcher[data-wpglotty-enhanced].wpglotty-switcher--floating .wpglotty-switcher__panel {
	position: absolute;
	inset-inline-start: 0;
	top: calc(100% + 0.35em);
	z-index: var(--wpglotty-sw-z-index);
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--wpglotty-sw-anim-duration) ease,
		transform var(--wpglotty-sw-anim-duration) ease,
		visibility var(--wpglotty-sw-anim-duration);
}

.wpglotty-switcher[data-wpglotty-enhanced][data-wpglotty-open].wpglotty-switcher--dropdown .wpglotty-switcher__panel,
.wpglotty-switcher[data-wpglotty-enhanced][data-wpglotty-open].wpglotty-switcher--floating .wpglotty-switcher__panel {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transform: none;
}

/* Animation flavours, selected with --wpglotty-sw-dropdown-anim. */
.wpglotty-switcher[data-wpglotty-enhanced][data-wpglotty-anim="slide"] .wpglotty-switcher__panel {
	transform: translateY(-0.5em);
}

.wpglotty-switcher[data-wpglotty-enhanced][data-wpglotty-anim="scale"] .wpglotty-switcher__panel {
	transform: scale(0.94);
	transform-origin: top center;
}

.wpglotty-switcher[data-wpglotty-enhanced][data-wpglotty-anim="none"] .wpglotty-switcher__panel {
	transition: none;
}

/* ---------------------------------------------------------------------------
 * Lists
 * ------------------------------------------------------------------------ */

.wpglotty-switcher--list-horizontal .wpglotty-switcher__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: var(--wpglotty-sw-align);
	gap: var(--wpglotty-sw-gap);
}

.wpglotty-switcher--list-vertical .wpglotty-switcher__list {
	display: flex;
	flex-direction: column;
	gap: var(--wpglotty-sw-gap);
	width: var(--wpglotty-sw-width);
}

/* ---------------------------------------------------------------------------
 * Inline
 * ------------------------------------------------------------------------ */

.wpglotty-switcher--inline .wpglotty-switcher__inline {
	display: inline-flex;
	align-items: center;
	justify-content: var(--wpglotty-sw-align);
	gap: var(--wpglotty-sw-gap);
}

.wpglotty-switcher--inline .wpglotty-switcher__link {
	padding: 0;
	background: none;
}

.wpglotty-switcher--inline .wpglotty-switcher__link:hover {
	background: none;
	color: var(--wpglotty-sw-color-hover);
}

.wpglotty-switcher__sep::before {
	content: "|";
	opacity: 0.45;
}

/* ---------------------------------------------------------------------------
 * Plain
 *
 * The names, side by side, and nothing else: no box, no padding of its own. The
 * language you are in is the one that is not a link, and it is marked by weight
 * rather than by a shape, so the switcher reads as words. A flag appears only
 * when the Label setting asks for one.
 * ------------------------------------------------------------------------ */

.wpglotty-switcher--text .wpglotty-switcher__row {
	display: inline-flex;
	align-items: baseline;
	justify-content: var(--wpglotty-sw-align);
	gap: var(--wpglotty-sw-gap);
	flex-wrap: wrap;
}

.wpglotty-switcher--text .wpglotty-switcher__link,
.wpglotty-switcher--text .wpglotty-switcher__label {
	padding: var(--wpglotty-sw-item-padding);
	background: none;
	border-radius: 0;
}

.wpglotty-switcher--text .wpglotty-switcher__link:hover,
.wpglotty-switcher--text .wpglotty-switcher__link:focus-visible {
	background: none;
	color: var(--wpglotty-sw-color-hover);
}

.wpglotty-switcher--text .wpglotty-switcher__word.is-current .wpglotty-switcher__link,
.wpglotty-switcher--text .wpglotty-switcher__word.is-current .wpglotty-switcher__label {
	color: var(--wpglotty-sw-color-active);
	font-weight: 600;
	background: none;
}

/* ---------------------------------------------------------------------------
 * Flag only
 *
 * The flags in a row and nothing else. No box, no padding, no word: the flag
 * is the control, so its own size and corner are the only shape there is. The
 * current language is marked by opacity rather than by weight, since there is
 * no type here to make heavier.
 * ------------------------------------------------------------------------ */

.wpglotty-switcher--flags .wpglotty-switcher__list {
	display: flex;
	/* Side by side means side by side. Left to wrap, a switcher dropped into a
	   narrow column, which in a header is most of them, stacked its flags and
	   looked exactly like the vertical setting nobody had chosen. */
	flex-wrap: nowrap;
	align-items: center;
	justify-content: var(--wpglotty-sw-align);
	gap: var(--wpglotty-sw-gap);
}

.wpglotty-switcher--flags .wpglotty-switcher__item {
	flex: 0 0 auto;
}

/* Underneath each other, for the two styles whose name does not say which way
   they run. The plain style lays its languages out in a row of words and the
   flag-only style in a row of flags, so both turn on the same class. */
.wpglotty-switcher--stacked .wpglotty-switcher__list,
.wpglotty-switcher--stacked .wpglotty-switcher__row {
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: var(--wpglotty-sw-align);
}

.wpglotty-switcher--flags .wpglotty-switcher__link,
.wpglotty-switcher--flags .wpglotty-switcher__label {
	padding: var(--wpglotty-sw-item-padding);
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	line-height: 0;
}

.wpglotty-switcher--flags .wpglotty-switcher__link {
	opacity: 0.75;
	transition: opacity var(--wpglotty-sw-anim-duration, 160ms) ease;
}

.wpglotty-switcher--flags .wpglotty-switcher__link:hover,
.wpglotty-switcher--flags .wpglotty-switcher__link:focus-visible,
.wpglotty-switcher--flags .wpglotty-switcher__link.is-current {
	opacity: 1;
	background: none;
}

@media (prefers-reduced-motion: reduce) {
	.wpglotty-switcher--flags .wpglotty-switcher__link {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * Toggle: link, button and switch variants
 * ------------------------------------------------------------------------ */

.wpglotty-switcher--toggle .wpglotty-switcher__label {
	padding: 0;
	background: none;
}

.wpglotty-switcher--toggle-button .wpglotty-switcher__toggle {
	border: var(--wpglotty-sw-border);
	background: var(--wpglotty-sw-bg);
}

.wpglotty-switcher--toggle-button .wpglotty-switcher__toggle:hover {
	background: var(--wpglotty-sw-bg-hover);
}

.wpglotty-switcher__switch {
	display: inline-block;
	text-decoration: none;
	color: var(--wpglotty-sw-color);
}

.wpglotty-switcher__switch-track {
	position: relative;
	display: inline-flex;
	align-items: stretch;
	padding: 0.2em;
	background: var(--wpglotty-sw-toggle-track-bg);
	border-radius: var(--wpglotty-sw-radius);
}

.wpglotty-switcher__switch-half {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wpglotty-sw-gap);
	padding: var(--wpglotty-sw-item-padding);
	color: var(--wpglotty-sw-toggle-inactive-color);
	transition: color var(--wpglotty-sw-anim-duration) ease;
}

.wpglotty-switcher__switch-half.is-active {
	color: var(--wpglotty-sw-color-active);
}

.wpglotty-switcher__switch-thumb {
	position: absolute;
	z-index: 0;
	top: 0.2em;
	bottom: 0.2em;
	left: 0.2em;
	width: calc(50% - 0.2em);
	background: var(--wpglotty-sw-toggle-thumb-bg);
	border-radius: calc(var(--wpglotty-sw-radius) - 0.1em);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
	transition: transform var(--wpglotty-sw-anim-duration) ease;
}

.wpglotty-switcher__switch:hover .wpglotty-switcher__switch-thumb,
.wpglotty-switcher__switch:focus-visible .wpglotty-switcher__switch-thumb {
	transform: translateX(100%);
}

.wpglotty-switcher__switch:hover .wpglotty-switcher__switch-half.is-active {
	color: var(--wpglotty-sw-toggle-inactive-color);
}

.wpglotty-switcher__switch:hover .wpglotty-switcher__switch-half:not(.is-active) {
	color: var(--wpglotty-sw-color-active);
}

/* ---------------------------------------------------------------------------
 * Floating widget
 * ------------------------------------------------------------------------ */

.wpglotty-switcher--floating {
	position: fixed;
	z-index: var(--wpglotty-sw-z-index);
}

.wpglotty-switcher--floating.wpglotty-switcher--pos-top-left {
	top: var(--wpglotty-sw-offset);
	inset-inline-start: var(--wpglotty-sw-offset);
}

.wpglotty-switcher--floating.wpglotty-switcher--pos-top-right {
	top: var(--wpglotty-sw-offset);
	inset-inline-end: var(--wpglotty-sw-offset);
}

.wpglotty-switcher--floating.wpglotty-switcher--pos-bottom-left {
	bottom: var(--wpglotty-sw-offset);
	inset-inline-start: var(--wpglotty-sw-offset);
}

.wpglotty-switcher--floating.wpglotty-switcher--pos-bottom-right {
	bottom: var(--wpglotty-sw-offset);
	inset-inline-end: var(--wpglotty-sw-offset);
}

.wpglotty-switcher--floating.wpglotty-switcher--pos-bottom-left[data-wpglotty-enhanced] .wpglotty-switcher__panel,
.wpglotty-switcher--floating.wpglotty-switcher--pos-bottom-right[data-wpglotty-enhanced] .wpglotty-switcher__panel {
	top: auto;
	bottom: calc(100% + 0.35em);
}

.wpglotty-switcher--floating.wpglotty-switcher--pos-top-right[data-wpglotty-enhanced] .wpglotty-switcher__panel,
.wpglotty-switcher--floating.wpglotty-switcher--pos-bottom-right[data-wpglotty-enhanced] .wpglotty-switcher__panel {
	inset-inline-start: auto;
	inset-inline-end: 0;
}

/* ---------------------------------------------------------------------------
 * Modal and off-canvas
 * ------------------------------------------------------------------------ */

.wpglotty-switcher__overlay {
	position: fixed;
	inset: 0;
	z-index: calc(var(--wpglotty-sw-z-index) - 1);
	background: var(--wpglotty-sw-overlay, rgba(0, 0, 0, 0.55));
	opacity: 0;
	transition: opacity var(--wpglotty-sw-anim-duration) ease;
}

.wpglotty-switcher[data-wpglotty-open] .wpglotty-switcher__overlay {
	opacity: 1;
}

.wpglotty-switcher__modal {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: var(--wpglotty-sw-z-index);
	width: var(--wpglotty-sw-panel-width, min(92vw, 34rem));
	max-height: 84vh;
	overflow-y: auto;
	padding: var(--wpglotty-sw-panel-padding, 1.5rem);
	transform: translate(-50%, -50%) scale(0.96);
	opacity: 0;
	background: var(--wpglotty-sw-panel-bg);
	border-radius: var(--wpglotty-sw-radius);
	box-shadow: var(--wpglotty-sw-shadow);
	transition: opacity var(--wpglotty-sw-anim-duration) ease, transform var(--wpglotty-sw-anim-duration) ease;
}

.wpglotty-switcher[data-wpglotty-open] .wpglotty-switcher__modal {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

.wpglotty-switcher__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
	gap: var(--wpglotty-sw-gap);
}

.wpglotty-switcher__offcanvas {
	position: fixed;
	top: 0;
	bottom: 0;
	z-index: var(--wpglotty-sw-z-index);
	width: var(--wpglotty-sw-panel-width, min(88vw, 22rem));
	overflow-y: auto;
	padding: var(--wpglotty-sw-panel-padding, 1.5rem);
	background: var(--wpglotty-sw-panel-bg);
	box-shadow: var(--wpglotty-sw-shadow);
	transition: transform var(--wpglotty-sw-anim-duration) ease;
}

.wpglotty-switcher__offcanvas--left {
	left: 0;
	transform: translateX(-100%);
}

.wpglotty-switcher__offcanvas--right {
	right: 0;
	transform: translateX(100%);
}

.wpglotty-switcher[data-wpglotty-open] .wpglotty-switcher__offcanvas {
	transform: translateX(0);
}

.wpglotty-switcher__modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wpglotty-sw-gap);
	margin-bottom: 1rem;
}

.wpglotty-switcher__modal-title {
	margin: 0;
	font-size: 1.1em;
	font-weight: 600;
}

.wpglotty-switcher__close {
	padding: 0.15em 0.5em;
	font-size: 1.4em;
	line-height: 1;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

.wpglotty-switcher--offcanvas .wpglotty-switcher__list {
	display: flex;
	flex-direction: column;
	gap: 0.15em;
}


/* No-JS fallback list for modal / off-canvas: those panels are hidden until
   switcher.js is ready, so a plain list stands in for them. */
.wpglotty-switcher__nojs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wpglotty-sw-gap);
}

.wpglotty-switcher[data-wpglotty-enhanced] .wpglotty-switcher__nojs {
	display: none;
}

/* ---------------------------------------------------------------------------
 * hide_on
 * ------------------------------------------------------------------------ */

@media (max-width: 767px) {
	.wpglotty-switcher--hide-mobile {
		display: none !important;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.wpglotty-switcher--hide-tablet {
		display: none !important;
	}
}

@media (min-width: 1024px) {
	.wpglotty-switcher--hide-desktop {
		display: none !important;
	}
}

/* ---------------------------------------------------------------------------
 * Motion preferences
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.wpglotty-switcher,
	.wpglotty-switcher *,
	.wpglotty-switcher *::before,
	.wpglotty-switcher *::after {
		transition-duration: 1ms !important;
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
	}

	.wpglotty-switcher[data-wpglotty-enhanced][data-wpglotty-anim="slide"] .wpglotty-switcher__panel,
	.wpglotty-switcher[data-wpglotty-enhanced][data-wpglotty-anim="scale"] .wpglotty-switcher__panel {
		transform: none;
	}
}


/* ---------------------------------------------------------------------------
 * The sliding switch
 *
 * Every language on one row, and one indicator that travels to the one you
 * are in. The indicator is placed by script, which writes its width and its
 * offset as custom properties; until then it sits under the current language
 * with no transition, so nothing slides in on load.
 * ------------------------------------------------------------------------ */

/* The sliding switch sets a few of its own defaults, because the shape only
   reads as one control when the languages sit close together: a wider gap and
   a small radius make three separate buttons with a box drawn round them.
   Anything set on the element itself still wins.

   Written with the class twice on purpose. Breakdance bundles its own copy of
   this stylesheet into a per-post cache file that loads after ours; a single
   class would lose to the base block in that copy on source order alone. */
.wpglotty-switcher.wpglotty-switcher--text {
	--wpglotty-sw-item-padding: 0;
	--wpglotty-sw-gap: 0.6em;
}

.wpglotty-switcher.wpglotty-switcher--flags {
	--wpglotty-sw-item-padding: 0;
	--wpglotty-sw-gap: 0.5em;
	--wpglotty-sw-flag-size: 22px;
}

.wpglotty-switcher.wpglotty-switcher--slide {
	--wpglotty-sw-gap: 3px;
	--wpglotty-sw-radius: 8px;
	--wpglotty-sw-item-padding: 0.5em 0.85em;
	--wpglotty-sw-flag-size: 18px;
}

.wpglotty-switcher--slide .wpglotty-switcher__slide {
	position: relative;
	display: inline-flex;
	gap: var(--wpglotty-sw-gap);
	padding: var(--wpglotty-sw-gap);
	border-radius: calc(var(--wpglotty-sw-radius) + var(--wpglotty-sw-gap));
	background: var(--wpglotty-sw-slide-track);
	align-items: center;
}

.wpglotty-switcher--slide .wpglotty-switcher__indicator {
	position: absolute;
	top: var(--wpglotty-sw-gap);
	left: 0;
	width: var(--wpglotty-sw-ind-w, 0);
	height: calc(100% - (var(--wpglotty-sw-gap) * 2));
	border-radius: var(--wpglotty-sw-radius);
	background: var(--wpglotty-sw-slide-bg);
	/* Enough to separate a white pill from a white header without reading as a
	   raised button. The skins that travel an outline or a wash switch it off. */
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
	transform: translateX(var(--wpglotty-sw-ind-x, 0));
	pointer-events: none;
}

.wpglotty-switcher--slide-ring .wpglotty-switcher__indicator,
.wpglotty-switcher--slide-underline .wpglotty-switcher__indicator,
.wpglotty-switcher--slide-quiet .wpglotty-switcher__indicator {
	box-shadow: none;
}

/* Only once the script has measured it. A transition before that would run
   from nought to the first position on every page load. */
.wpglotty-switcher--slide.is-measured .wpglotty-switcher__indicator {
	transition:
		transform var(--wpglotty-sw-slide-duration) var(--wpglotty-sw-slide-ease),
		width var(--wpglotty-sw-slide-duration) var(--wpglotty-sw-slide-ease);
}

.wpglotty-switcher--slide .wpglotty-switcher__seg {
	position: relative;
	z-index: 1;
	display: inline-flex;
}

.wpglotty-switcher--slide .wpglotty-switcher__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: var(--wpglotty-sw-item-padding);
	border-radius: var(--wpglotty-sw-radius);
	/* The indicator is the only thing that says which language you are in, so
	   an item never carries a background of its own. Left to the shared rule
	   the current one kept a grey block behind it and the underline had two
	   marks saying the same thing. */
	background: none;
	color: var(--wpglotty-sw-color);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--wpglotty-sw-slide-duration) var(--wpglotty-sw-slide-ease);
}

/* The language you are not in steps back a little, so the one you are in is
   legible before the eye has found the indicator. The name steps back, not the
   whole item: a faded flag reads as a broken image rather than as a choice you
   have not made. */
.wpglotty-switcher--slide .wpglotty-switcher__link .wpglotty-switcher__text {
	opacity: 0.68;
	transition: opacity var(--wpglotty-sw-slide-duration) var(--wpglotty-sw-slide-ease);
}

.wpglotty-switcher--slide .wpglotty-switcher__seg.is-current .wpglotty-switcher__text,
.wpglotty-switcher--slide .wpglotty-switcher__link:hover .wpglotty-switcher__text,
.wpglotty-switcher--slide .wpglotty-switcher__link:focus-visible .wpglotty-switcher__text {
	opacity: 1;
}

.wpglotty-switcher--slide .wpglotty-switcher__link:hover {
	background: var(--wpglotty-sw-bg-hover);
	color: var(--wpglotty-sw-color-hover);
}

/* Hovering the language you are already in would put a second background over
   the indicator. */
.wpglotty-switcher--slide .wpglotty-switcher__seg.is-current .wpglotty-switcher__link:hover {
	background: none;
}

.wpglotty-switcher--slide .wpglotty-switcher__seg.is-current .wpglotty-switcher__link {
	color: var(--wpglotty-sw-slide-ink);
}

/* Skin: underline. No track, and the indicator is a rule under the row. */
.wpglotty-switcher--slide-underline .wpglotty-switcher__slide {
	background: none;
	padding-bottom: calc(var(--wpglotty-sw-gap) + var(--wpglotty-sw-slide-thickness) + 2px);
}

.wpglotty-switcher--slide-underline .wpglotty-switcher__indicator {
	top: auto;
	bottom: 0;
	height: var(--wpglotty-sw-slide-thickness);
	border-radius: var(--wpglotty-sw-slide-thickness);
}

.wpglotty-switcher--slide-underline .wpglotty-switcher__seg.is-current .wpglotty-switcher__link {
	color: var(--wpglotty-sw-color-active);
}

/* Skin: ring. An outline travels instead of a fill, which reads on a photo. */
.wpglotty-switcher--slide-ring .wpglotty-switcher__slide {
	background: none;
	border: var(--wpglotty-sw-border);
}

.wpglotty-switcher--slide-ring .wpglotty-switcher__indicator {
	background: none;
	border: var(--wpglotty-sw-slide-thickness) solid var(--wpglotty-sw-slide-ring);
}

.wpglotty-switcher--slide-ring .wpglotty-switcher__seg.is-current .wpglotty-switcher__link {
	color: var(--wpglotty-sw-color-active);
}

/* Skin: quiet. A wash rather than a colour, for a switcher in a header. The
   text stays the text colour, so what travels has to be light enough to read
   through: a tint of the ink rather than the ink itself. */
.wpglotty-switcher--slide-quiet {
	--wpglotty-sw-slide-bg: rgba(0, 0, 0, 0.07);
}

.wpglotty-switcher--slide-quiet .wpglotty-switcher__slide {
	background: none;
}

.wpglotty-switcher--slide-quiet .wpglotty-switcher__seg.is-current .wpglotty-switcher__link {
	color: var(--wpglotty-sw-color-active);
}

/* Vertical space is the one thing a row of languages cannot borrow, so a
   narrow screen turns the row into a column and the indicator with it. */
@media (max-width: 480px) {
	.wpglotty-switcher--slide .wpglotty-switcher__slide[data-wrap="1"] {
		flex-direction: column;
		align-items: stretch;
	}

	.wpglotty-switcher--slide .wpglotty-switcher__slide[data-wrap="1"] .wpglotty-switcher__link {
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wpglotty-switcher--slide .wpglotty-switcher__indicator,
	.wpglotty-switcher--slide .wpglotty-switcher__link {
		transition: none;
	}
}