/**
 * Language switcher.
 *
 * Reads the theme's design tokens so it matches the site automatically — change
 * a colour in Site Settings and this follows. Every var() carries a fallback, so
 * the plugin still looks deliberate if the theme is swapped out.
 *
 * It also cleans up after Google: the widget injects a banner iframe that shoves
 * the whole page down by 40px and a "Powered by" tooltip. Both are suppressed
 * below — the visible control is ours.
 */

.avt {
	position: relative;
	display: inline-flex;
	font-family: var(--av-font-body, system-ui, sans-serif);
}

/* --- toggle ------------------------------------------------------------- */

.avt__disclosure { position: relative; }

.avt__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.25rem 0.5rem;
	border-radius: var(--av-radius-pill, 999px);
	font-size: var(--av-fs-xs, 0.75rem);
	line-height: 1.4;
	color: inherit;
	cursor: pointer;
	list-style: none;
	user-select: none;
	transition: background-color var(--av-dur, 200ms) var(--av-ease, ease);
}

.avt__toggle::-webkit-details-marker { display: none; }

.avt__toggle:hover { background: rgb(255 255 255 / 10%); }

.avt__toggle:focus-visible {
	outline: 2px solid var(--av-accent, #18B7D3);
	outline-offset: 2px;
}

.avt__globe { opacity: 0.6; flex: 0 0 auto; }

.avt__chev {
	opacity: 0.5;
	flex: 0 0 auto;
	transition: transform var(--av-dur, 200ms) var(--av-ease, ease);
}

.avt__disclosure[open] .avt__chev { transform: rotate(180deg); }

/* --- list --------------------------------------------------------------- */

.avt__list {
	position: absolute;
	top: calc(100% + 0.4rem);
	inset-inline-end: 0;
	z-index: var(--av-z-dropdown, 200);
	min-width: 170px;
	max-height: 320px;
	overflow-y: auto;
	margin: 0;
	padding: 0.35rem;
	list-style: none;
	background: var(--av-surface, #fff);
	border: 1px solid var(--av-border, #E2E8F0);
	border-radius: var(--av-radius-sm, 10px);
	box-shadow: var(--av-shadow-lg, 0 12px 32px rgb(15 23 42 / 12%));
}

.avt__opt {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	text-align: start;
	background: none;
	border: 0;
	padding: 0.5rem 0.7rem;
	border-radius: var(--av-radius-sm, 8px);
	font-size: 0.875rem;
	color: var(--av-ink, #0F172A);
	cursor: pointer;
	white-space: nowrap;
	transition: background-color var(--av-dur, 200ms) var(--av-ease, ease);
}

/*
 * Flag emoji. Sized a touch larger than the label so it reads as an icon, and
 * given an explicit emoji font stack: on Windows the default UI font renders
 * regional-indicator pairs as two letter boxes rather than a flag, so we ask
 * for the colour emoji face first and simply show nothing rather than a broken
 * glyph if none exists.
 */
.avt__flag {
	font-family: "Twemoji Mozilla", "Apple Color Emoji", "Segoe UI Emoji",
		"Noto Color Emoji", "Android Emoji", sans-serif;
	font-size: 1.05em;
	line-height: 1;
	flex: 0 0 auto;
}

.avt__opt:hover,
.avt__opt:focus-visible {
	background: var(--av-muted, #F1F5F9);
	color: var(--av-primary, #123B8F);
}

/* --- google's mount point ----------------------------------------------- */

/*
 * Google needs a real element to attach to, but we render our own control, so
 * this is taken out of the layout without display:none — some builds of the
 * widget refuse to initialise inside a display:none parent.
 */
.avt-gt {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* --- suppress google's own chrome --------------------------------------- */

/*
 * The widget injects a fixed banner iframe and sets `body { top: 40px }` inline,
 * which pushes the entire page down and breaks the sticky header. These
 * !importants are unavoidable: we are overriding inline styles written by a
 * third-party script we do not control.
 */
.goog-te-banner-frame,
.goog-te-gadget-icon,
#goog-gt-tt,
.goog-tooltip,
.goog-text-highlight {
	display: none !important;
}

body { top: 0 !important; }

.skiptranslate iframe { display: none !important; }

/* --- machine-translation notice ----------------------------------------- */

.avt-notice {
	position: fixed;
	inset-inline: auto 18px;
	inset-block-end: 18px;
	z-index: var(--av-z-toast, 1100);
	max-width: 380px;
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	padding: 0.85rem 1rem;
	background: var(--av-surface, #fff);
	border: 1px solid var(--av-border, #E2E8F0);
	border-inline-start: 3px solid var(--av-accent, #18B7D3);
	border-radius: var(--av-radius-sm, 10px);
	box-shadow: var(--av-shadow-lg, 0 12px 32px rgb(15 23 42 / 12%));
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--av-text, #475569);
}

.avt-notice[hidden] { display: none; }

.avt-notice p { margin: 0; }

.avt-notice__close {
	background: none;
	border: 0;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	color: var(--av-text-subtle, #94a3b8);
	padding: 0 0.25rem;
	flex: 0 0 auto;
}

.avt-notice__close:hover { color: var(--av-ink, #0F172A); }

/* Clear the WhatsApp button and the mobile sticky CTA. */
@media (max-width: 720px) {
	.avt-notice {
		inset-inline: 12px;
		inset-block-end: 132px;
		max-width: none;
	}
}

/* --- in the topbar ------------------------------------------------------ */

.av-topbar .avt__toggle { color: inherit; }
.av-topbar .avt__globe,
.av-topbar .avt__chev { opacity: 0.55; }

/* --- rtl ---------------------------------------------------------------- */

/*
 * Arabic is in the default language list, and Google sets dir="rtl" on <html>
 * when it translates. Logical properties handle most of it; the dropdown needs
 * its own nudge.
 */
html[dir="rtl"] .avt__list {
	inset-inline-end: auto;
	inset-inline-start: 0;
}

@media (prefers-reduced-motion: reduce) {
	.avt__chev,
	.avt__toggle,
	.avt__opt { transition: none; }
}