/**
 * 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: var(--wpglotty-sw-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--border-hover .wpglotty-switcher__trigger:hover,
.wpglotty-switcher--border-hover .wpglotty-switcher__trigger:focus-visible,
.wpglotty-switcher--border-hover .wpglotty-switcher__toggle:hover,
.wpglotty-switcher--border-hover .wpglotty-switcher__toggle:focus-visible {
	border-color: var(--wpglotty-sw-border-color-hover);
}

.wpglotty-switcher__trigger .wpglotty-switcher__label {
	padding: 0;
	background: none;
	/* The button's line height, which is what a builder sets. */
	line-height: inherit;
}

.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 {
	display: flex;
	flex-direction: column;
	gap: var(--wpglotty-sw-menu-gap, 0);
	min-width: 100%;
	width: var(--wpglotty-sw-panel-width, max-content);
	/* Important because this panel is also the list, whose padding is pinned
	   to nothing above against themes. Unset it stays nothing, as it was. */
	padding: var(--wpglotty-sw-panel-padding, 0) !important;
	background: var(--wpglotty-sw-panel-bg);
	border: var(--wpglotty-sw-panel-border, var(--wpglotty-sw-border));
	border-radius: var(--wpglotty-sw-panel-radius, var(--wpglotty-sw-radius));
	box-shadow: var(--wpglotty-sw-panel-shadow, var(--wpglotty-sw-shadow));
}

/* The panel has a type of its own. Each of these is left without a fallback on
   purpose: unset, the declaration is invalid, and an invalid font or case is
   inherited, which is what the panel did before it had settings of its own. */
.wpglotty-switcher__panel {
	font-family: var(--wpglotty-sw-menu-font-family);
	font-size: var(--wpglotty-sw-menu-font-size);
	font-weight: var(--wpglotty-sw-menu-font-weight);
	letter-spacing: var(--wpglotty-sw-menu-letter-spacing);
	text-transform: var(--wpglotty-sw-menu-text-transform);
}

/* The languages in a panel are not the button that opens it. Every value
   falls back to the button's own, so a switcher styled before the panel had
   settings of its own looks exactly as it did; one set here wins. Text that is
   set once stays that colour on hover and when current, unless those are set
   too, which is how the button's own colours behave. */
.wpglotty-switcher__panel .wpglotty-switcher__link {
	padding: var(--wpglotty-sw-menu-padding, var(--wpglotty-sw-item-padding));
	line-height: var(--wpglotty-sw-menu-line-height, var(--wpglotty-sw-line-height, 1.3));
	color: var(--wpglotty-sw-menu-color, var(--wpglotty-sw-color));
	background: var(--wpglotty-sw-menu-bg, var(--wpglotty-sw-bg));
	border-radius: var(--wpglotty-sw-menu-radius, var(--wpglotty-sw-radius));
}

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

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

.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;
	/* Moved back by the script when it would run off the screen. */
	inset-inline-start: calc(0px - var(--wpglotty-sw-panel-shift, 0px));
	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;
}

/* The tail: a square turned on its point and cut in half, so only the part
   above the dropdown shows. It takes the dropdown's background unless it has a
   colour of its own, and the dropdown's border on its two outer sides, so a
   bordered dropdown gets a bordered tail. The dropdown moves down by the
   tail's height, so the tail never touches the button.

   It is driven by variables alone, --wpglotty-sw-tail-on above all, so a
   builder that restyles its canvas without drawing the switcher again still
   shows it the moment it is switched on. Off, the variable is unset and every
   term it multiplies is nothing. Its position is a share of the top edge:
   0 at the left, 0.5 in the middle, 1 at the right. */
.wpglotty-switcher--dropdown {
	--wpglotty-sw-tail: calc(var(--wpglotty-sw-tail-size, 10px) * var(--wpglotty-sw-tail-on, 0));
}

.wpglotty-switcher[data-wpglotty-enhanced].wpglotty-switcher--dropdown .wpglotty-switcher__panel {
	top: calc(100% + 0.35em + var(--wpglotty-sw-tail) * 0.71);
}

.wpglotty-switcher--dropdown .wpglotty-switcher__panel::after {
	content: "";
	position: absolute;
	inset-inline-start: min(
		calc(1.1em + (100% - 2.2em - var(--wpglotty-sw-tail)) * var(--wpglotty-sw-tail-pos, 0) + var(--wpglotty-sw-panel-shift, 0px)),
		calc(100% - 1.1em - var(--wpglotty-sw-tail))
	);
	top: calc(var(--wpglotty-sw-tail) * -0.5);
	width: var(--wpglotty-sw-tail);
	height: var(--wpglotty-sw-tail);
	box-sizing: border-box;
	background: var(--wpglotty-sw-tail-color, var(--wpglotty-sw-panel-bg));
	border: var(--wpglotty-sw-panel-border, var(--wpglotty-sw-border));
	border-right: 0;
	border-bottom: 0;
	transform: rotate(45deg);
	clip-path: polygon(0 0, 100% 0, 0 100%);
	opacity: var(--wpglotty-sw-tail-on, 0);
	pointer-events: none;
}

.wpglotty-switcher--dropdown.wpglotty-switcher--hoverable .wpglotty-switcher__panel::before {
	height: calc(0.35em + 2px + var(--wpglotty-sw-tail) * 0.71);
}

/* 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;
}

/* Wide enough for the flags it holds, whatever it is dropped into.
 *
 * The root is an inline-block, so a builder that hands it a narrow box gets to
 * decide how wide it is, and the list above refuses to wrap: on a header built
 * in Breakdance the box came out 49px, the five flags ran to 159, and the
 * background the builder paints behind the element covered the first two of
 * them. Measured on a live site, 110px of it hanging out in the open.
 *
 * max-content is the box asking for what it actually needs. The cap keeps it
 * from pushing a narrow column wider than the column. */
.wpglotty-switcher--flags {
	width: max-content;
	max-width: 100%;
}

/* 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;
	color: var(--wpglotty-sw-panel-color);
	background: var(--wpglotty-sw-panel-bg);
	border: var(--wpglotty-sw-panel-border, 0);
	border-radius: var(--wpglotty-sw-panel-radius, var(--wpglotty-sw-radius));
	box-shadow: var(--wpglotty-sw-panel-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-menu-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);
	color: var(--wpglotty-sw-panel-color);
	background: var(--wpglotty-sw-panel-bg);
	border: var(--wpglotty-sw-panel-border, 0);
	border-radius: var(--wpglotty-sw-panel-radius, 0);
	box-shadow: var(--wpglotty-sw-panel-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--panel-color .wpglotty-switcher__modal-title {
	color: var(--wpglotty-sw-panel-color);
}

.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: var(--wpglotty-sw-menu-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;
	}
}