/**
 * Language switcher — front end.
 *
 * Every visual choice is a custom property set on the wrapper, so the settings
 * screen, the shortcode and the Elementor widget all drive the same rules.
 * A property left unset falls back to `inherit`, which is what lets the theme
 * show through when a colour was deliberately left empty.
 */

.wpait-switcher {
	--wpait-flag-size: 16px;
	--wpait-font-size: inherit;
	--wpait-font-weight: 500;
	--wpait-gap: 10px;
	--wpait-pad-y: 4px;
	--wpait-pad-x: 8px;
	--wpait-radius: 4px;
	--wpait-border-w: 0px;
	--wpait-border-color: currentColor;
	--wpait-transform: none;
	--wpait-color: inherit;
	--wpait-color-hover: var(--wpait-color);
	--wpait-color-current: var(--wpait-color);
	--wpait-bg: transparent;
	--wpait-bg-hover: var(--wpait-bg);
	--wpait-bg-current: var(--wpait-bg);

	display: flex;
	align-items: center;
	gap: var(--wpait-gap);
	flex-wrap: wrap;
	font-size: var(--wpait-font-size);
}

.wpait-switcher__title {
	font-weight: 600;
}

.wpait-switcher__list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--wpait-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wpait-switcher--vertical {
	display: inline-flex;
	align-items: flex-start;
	flex-direction: column;
}

.wpait-switcher--vertical .wpait-switcher__list {
	flex-direction: column;
	align-items: stretch;
	flex-wrap: nowrap;
}

.wpait-switcher__item {
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
}

.wpait-switcher__item::before {
	content: none;
}

/* Separator between items, set from the settings screen. Never after the last
   one, and never in the vertical layout where it would read as a stray mark. */
.wpait-switcher--horizontal .wpait-switcher__item:not(:last-child)::after {
	content: var(--wpait-separator, none);
	margin-left: var(--wpait-gap);
	opacity: 0.45;
}

.wpait-switcher__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: var(--wpait-pad-y) var(--wpait-pad-x);
	border: var(--wpait-border-w) solid var(--wpait-border-color);
	border-radius: var(--wpait-radius);
	background-color: var(--wpait-bg);
	color: var(--wpait-color);
	font-weight: var(--wpait-font-weight);
	text-transform: var(--wpait-transform);
	text-decoration: none;
	line-height: 1.3;
	transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.wpait-switcher__link:hover,
.wpait-switcher__link:focus {
	color: var(--wpait-color-hover);
	background-color: var(--wpait-bg-hover);
	text-decoration: none;
}

/* The current language reads as selected even when no colour is configured,
   because the theme's link colour is unknown here. */
.wpait-switcher__item.is-current .wpait-switcher__link {
	font-weight: 600;
	color: var(--wpait-color-current);
	background-color: var(--wpait-bg-current);
}

.wpait-switcher__item:not(.is-current) .wpait-switcher__link {
	opacity: 0.75;
}

.wpait-switcher__item:not(.is-current) .wpait-switcher__link:hover {
	opacity: 1;
}

/* A language with no translation still links somewhere, but should not look
   like an equal option. */
.wpait-switcher__item.is-untranslated {
	opacity: 0.5;
}

.wpait-switcher__code {
	text-transform: uppercase;
	font-size: 0.85em;
	letter-spacing: 0.03em;
}

/* Flags. The emoji and the image are sized from the same token so swapping one
   for the other does not shift the layout. Polylang and WPML supply their own
   <img> with no class of ours on it, so any image inside a link is covered. */
.wpait-switcher__link img,
.wpait-switcher__toggle img,
.wpait-switcher .wpait-flag-img {
	display: inline-block;
	width: auto;
	height: var(--wpait-flag-size);
	max-height: none;
	vertical-align: middle;
	object-fit: contain;
	flex-shrink: 0;
}

.wpait-switcher .wpait-flag-emoji-text {
	font-size: var(--wpait-flag-size);
	line-height: 1;
	font-style: normal;
	flex-shrink: 0;
}

/* ---------------------------------------------------------------------
 * Dropdown
 *
 * A toggle button plus a panel of ordinary links, not a native <select>:
 * an <option> can hold neither a flag image nor a styled span, so a select
 * could never show flags and gave the style controls nothing to target.
 * ------------------------------------------------------------------ */

.wpait-switcher--dropdown {
	display: inline-flex;
}

.wpait-switcher__dropdown {
	position: relative;
	display: inline-flex;
}

/* The toggle also carries .wpait-switcher__link, so it inherits every colour,
   typography, padding and radius rule an item link has. Only the parts a
   <button> does not get from that are set here. */
.wpait-switcher__toggle {
	font: inherit;
	font-size: var(--wpait-font-size);
	cursor: pointer;
	white-space: nowrap;
	-webkit-appearance: none;
	appearance: none;
}

.wpait-switcher__arrow {
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 0.15em;
	border-left: 0.3em solid transparent;
	border-right: 0.3em solid transparent;
	border-top: 0.35em solid currentColor;
	transition: transform 0.15s ease;
	flex-shrink: 0;
}

.wpait-switcher__dropdown.is-open .wpait-switcher__arrow {
	transform: rotate(180deg);
}

.wpait-switcher__panel {
	position: absolute;
	z-index: 999;
	top: calc(100% + 4px);
	left: 0;
	/* As wide as the longest language, never narrower than the toggle. Without
	   max-content the panel takes the toggle's width and the nowrap links
	   spill out of it. */
	width: max-content;
	min-width: 100%;
	padding: 4px;
	border: 1px solid var(--wpait-border-color, rgba(15, 23, 42, 0.12));
	border-radius: 8px;
	/* Its own token, not the item background: a switcher with blue pills
	   should not get a blue panel behind them. */
	background-color: var(--wpait-panel-bg, #fff);
	box-shadow: 0 6px 20px rgba(15, 23, 42, 0.14);
}

.wpait-switcher__panel[hidden] {
	display: none;
}

/* The panel is always a column, whatever the outer layout is doing. */
.wpait-switcher__panel .wpait-switcher__list {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	width: 100%;
}

.wpait-switcher__panel .wpait-switcher__item {
	width: 100%;
}

/* Items in a row are pills; stacked in a panel the same chrome reads as a
   column of disconnected cards, so the per-item frame is dropped and the
   panel supplies the single frame instead. Colour, typography and padding
   still come from the item settings. */
/* The toggle and each item share .wpait-switcher__link, so the Border, Radius
   and Background controls the site owner sets for the toggle would repeat as
   a pill around every language inside the panel. Inside the dropdown, those
   are stripped: colour, typography and padding still flow through — they are
   the parts that make a menu readable — but the decorative frame belongs to
   the toggle only.

   These use !important because Elementor writes its per-widget CSS after this
   stylesheet at the same specificity, and would otherwise win. */
.wpait-switcher__panel .wpait-switcher__link,
.wpait-switcher__panel .wpait-switcher__link:hover,
.wpait-switcher__panel .wpait-switcher__link:focus {
	width: 100%;
	justify-content: flex-start;
	white-space: nowrap;
	border: 0 !important;
	border-radius: 0 !important;
	background-color: transparent !important;
	box-shadow: none !important;
}

/* Give hover something to reveal so the pointer sees a target. */
.wpait-switcher__panel .wpait-switcher__link:hover,
.wpait-switcher__panel .wpait-switcher__link:focus-visible,
.wpait-switcher__panel .wpait-switcher__item.is-current .wpait-switcher__link {
	background-color: rgba(15, 23, 42, 0.05) !important;
}

/* Separators belong between items in a row, never in a stacked panel. */
.wpait-switcher__panel .wpait-switcher__item::after,
.wpait-switcher__panel .wpait-switcher__item::before {
	content: none;
}

/* Editor-only notice from the Elementor widget. */
.wpait-switcher-notice {
	padding: 12px 14px;
	border: 1px dashed #c3c4c7;
	border-radius: 6px;
	background: #f6f7f7;
	color: #50575e;
	font-size: 13px;
	line-height: 1.5;
}

/* ---------------------------------------------------------------------
 * Nav menu items
 *
 * These live inside the theme's own menu markup, so the rules stay minimal:
 * size the flag against the surrounding text and space it from the label.
 * Everything else - colour, padding, hover - is the theme's job, which is
 * the whole point of putting real menu items in the menu.
 * ------------------------------------------------------------------ */

.wpait-menu-flag {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
}

.wpait-menu-flag img,
.wpait-menu-flag .wpait-flag-img {
	display: block;
	width: auto;
	height: var(--wpait-flag-size, 16px);
	max-height: 1.6em;
	object-fit: contain;
}

.wpait-menu-flag + .wpait-menu-name,
.wpait-menu-flag + .wpait-menu-code,
.wpait-menu-name + .wpait-menu-code {
	margin-inline-start: 0.4em;
}

.wpait-menu-code {
	text-transform: uppercase;
	opacity: 0.7;
}

.wpait-menu-item.no-translation > a {
	opacity: 0.6;
}