/* -------------------------------------------------------------------------
 * Language selection block
 * ---------------------------------------------------------------------- */

.tippy-language-selection {
	display: inline-flex;
	--tippy-language-gap: 0.35em;
}

/* These are defaults only. Anything set in the block's Styles panel is
   emitted as an inline style or preset class on the button and therefore
   wins over these rules — so none of them may use !important. */
.language-switcher {
	display: inline-flex;
	align-items: center;
	gap: var(--tippy-language-gap, 0.35em);
	padding: 0.5em;
	font-weight: 600;
	font-size: 0.78rem;
	line-height: 1.2;
	color: inherit;
	background: transparent;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 4px;
	cursor: pointer;
}

/* Themes commonly ring any focused element — TwentyTwentyFive does it with
   `:where(.wp-site-blocks *:focus)`, which lingers after a click. Suppress it
   for pointer users, but keep a ring for keyboard users via :focus-visible.
   The theme rule is inside :where(), so it has zero specificity and a plain
   class selector is enough to override it. */
.language-switcher:focus,
.tippy-language-link:focus {
	outline: none;
}

.language-switcher:focus-visible,
.tippy-language-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.tippy-language-current-label.is-code {
	text-transform: uppercase;
}

/* Size comes from the width/height attributes set by the Icon size control. */
.language-switcher .tippy-language-globe,
.language-switcher .tippy-language-chevron {
	flex: none;
}

/* Bogo renders flags as emoji via .bogoflags-xx:before in its own stylesheet.
   Only the spacing needs adjusting for our inline-flex layouts. */
.tippy-language-selection .bogoflags,
.tippy-language-list .bogoflags {
	flex: none;
	width: auto;
	margin: 0;
	line-height: 1;
}

/* Dropdown list */

.tippy-language-list {
	list-style: none;
	margin: 0;
	padding: 0.5rem;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* The current option is a <span> and the others are <a>. Themes commonly
   size those differently inside a tooltip, which makes the list look ragged.
   Scoping through .tippy-language-list keeps the specificity above a typical
   theme rule such as `.tippy-box span`, so every option matches. */
.tippy-language-list .tippy-language-link,
.tippy-language-list .tippy-language-name,
.tippy-language-list li {
	font-size: 0.875rem;
	font-weight: 400;
	font-style: normal;
	line-height: 1.4;
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
}

.tippy-language-list li {
	display: flex;
	margin: 0;
	padding: 0;
}

.tippy-language-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.25em 0.5em;
	border-radius: 4px;
	text-decoration: none;
	color: inherit;
	white-space: nowrap;
}

a.tippy-language-link:hover,
a.tippy-language-link:focus-visible {
	background: rgba(0, 0, 0, 0.06);
}

/* Distinguish the active language by dimming it only — not by size or
   weight, so all options stay visually uniform. */
.tippy-language-item.is-current .tippy-language-link {
	opacity: 0.55;
	cursor: default;
}

/* This page has no published translation in that language. */
.tippy-language-item.is-unavailable .tippy-language-link {
	opacity: 0.4;
	cursor: default;
}

/* Editor-only flag placeholder */

.tippy-language-flag--placeholder {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}


/* -------------------------------------------------------------------------
 * Legacy [bogo] output, still used if the raw shortcode appears in content
 * ---------------------------------------------------------------------- */

.custom-language-selector ul {
	padding: 0.5em !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 4px;
}

.custom-language-selector ul br:last-of-type {
	display: none;
}

.custom-language-selector ul li {
	display: flex;
	margin: 0 5px;
}

footer [data-tippy-content] {
	display: inline-flex;
}