/**
 * 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(--ogt-font-body, system-ui, sans-serif);
}

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

.otr__disclosure { position: relative; }

/*
 * The toggle is a real control, so it looks like one at rest.
 *
 * It previously had no border and no background until hovered — on the dark
 * bar it read as a line of text sitting between the email and the phone
 * number, with nothing to say it could be tapped. On a phone there is no
 * hover to reveal the affordance at all.
 *
 * A hairline border and a faint fill are enough: it now reads as a pill,
 * matching the chips used elsewhere on the site, without competing with the
 * contact details beside it.
 */
.otr__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.25rem 0.6rem;
	border: 1px solid rgb(255 255 255 / 22%);
	border-radius: var(--ogt-radius-pill, 999px);
	background: rgb(255 255 255 / 8%);
	font-size: var(--ogt-fs-xs, 0.75rem);
	line-height: 1.4;
	color: inherit;
	cursor: pointer;
	list-style: none;
	user-select: none;
	transition:
		background-color var(--ogt-dur, 200ms) var(--ogt-ease, ease),
		border-color var(--ogt-dur, 200ms) var(--ogt-ease, ease);
}

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

.otr__toggle:hover {
	background: rgb(255 255 255 / 16%);
	border-color: rgb(255 255 255 / 40%);
}

/* Open state: the chevron flips, so the pill should confirm it too. */
.otr__disclosure[open] > .otr__toggle {
	background: rgb(255 255 255 / 18%);
	border-color: var(--ogt-accent, #18B7D3);
}

/* The flag sits in a rounded well so a pale flag still reads as a flag
   rather than a smudge on the dark bar. */
.otr__flag {
	display: inline-flex;
	border-radius: 2px;
	overflow: hidden;
	box-shadow: 0 0 0 1px rgb(255 255 255 / 25%);
	line-height: 0;
}

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

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

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

.otr__disclosure[open] .otr__chev { transform: rotate(180deg); }

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

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

.otr__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(--ogt-radius-sm, 8px);
	font-size: 0.875rem;
	color: var(--ogt-ink, #0F172A);
	cursor: pointer;
	white-space: nowrap;
	transition: background-color var(--ogt-dur, 200ms) var(--ogt-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.
 */
.otr__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;
}

.otr__opt:hover,
.otr__opt:focus-visible {
	background: var(--ogt-muted, #F1F5F9);
	color: var(--ogt-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(--ogt-z-toast, 1100);
	max-width: 380px;
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	padding: 0.85rem 1rem;
	background: var(--ogt-surface, #fff);
	border: 1px solid var(--ogt-border, #E2E8F0);
	border-inline-start: 3px solid var(--ogt-accent, #18B7D3);
	border-radius: var(--ogt-radius-sm, 10px);
	box-shadow: var(--ogt-shadow-lg, 0 12px 32px rgb(15 23 42 / 12%));
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--ogt-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(--ogt-text-subtle, #94a3b8);
	padding: 0 0.25rem;
	flex: 0 0 auto;
}

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

/*
 * Clear the WhatsApp button.
 *
 * This was 132px to sit above both the button and a sticky mobile CTA bar. The
 * CTA bar turned out never to have been rendered, so the button has come back
 * down to the corner (20px + 52px tall) and the notice follows it — otherwise
 * it hovers mid-screen with a visible gap beneath it.
 */
@media (max-width: 720px) {
	.avt-notice {
		inset-inline: 12px;
		inset-block-end: 84px;
		max-width: none;
	}
}

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

.ogt-topbar .otr__toggle { color: inherit; }
.ogt-topbar .otr__globe,
.ogt-topbar .otr__chev { opacity: 0.55; }

/* --- touch targets ------------------------------------------------------- */

/*
 * Measured on a 390px viewport, the toggle was 124x25 and each option 157x40 —
 * both under the 44px minimum, the toggle badly so.
 *
 * This one matters more than its size suggests: a visitor who cannot read
 * English has no alternative route into the site, so a switcher that is
 * awkward to tap is the difference between a usable page and none.
 *
 * The toggle grows through padding with a matching negative margin, so the top
 * bar keeps its height while the tappable box reaches 44px.
 */
@media (max-width: 860px) {
	/*
	 * Small pill, full-size target.
	 *
	 * Giving the toggle min-height:44px made it a 44px-tall slab once it
	 * gained a border and a fill — far heavier than the text either side of
	 * it, in a bar that should be quiet. The visible pill is ~28px; an
	 * invisible inset pseudo-element carries the 44px touch area, the same
	 * approach used for the slider dots and the WhatsApp button on cards.
	 */
	.otr__toggle {
		position: relative;
		min-height: 0;
		padding: 0.2rem 0.5rem;
		margin-block: 0;
		gap: 0.3rem;
	}

	.otr__toggle::after {
		content: "";
		position: absolute;
		inset: -9px -6px;
	}

	/* Slightly smaller flag to match the tighter pill. */
	.otr__toggle .ogt-flag {
		width: 17px;
		height: 12px;
	}

	.otr__opt {
		min-height: 44px;
		padding-block: 0.7rem;
	}

	/*
	 * In the top bar, swap the full language name for its two-letter code.
	 *
	 * The complete control is 124px of a 343px row, which pushed it onto a
	 * second line and doubled the height of the bar. Hiding the name entirely
	 * fixed the wrap but left only a 20px flag — and a visitor could no longer
	 * tell which language was active, which is the one thing this control has
	 * to communicate. "EN" says it in a third of the width.
	 *
	 * The full name stays in the accessible name (visually hidden, not
	 * display:none) because the flag, code and chevron are all aria-hidden.
	 */
	.ogt-topbar .otr__globe { display: none; }

	.ogt-topbar .otr__current {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.ogt-topbar .otr__code {
		display: inline;
		font-weight: 700;
		font-size: var(--ogt-fs-xs, 0.75rem);
		letter-spacing: 0.04em;
	}
}

/*
 * The code is a narrow-screen affordance only. On desktop the full language
 * name is shown and repeating it as "English EN" would be noise.
 */
.otr__code { display: none; }

/* --- 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"] .otr__list {
	inset-inline-end: auto;
	inset-inline-start: 0;
}

@media (prefers-reduced-motion: reduce) {
	.otr__chev,
	.otr__toggle,
	.otr__opt { transition: none; }
}