/*
 * Minimal language switcher, built by lang-switcher.js.
 *
 * A two-letter code and a short list of native names. No flags — a flag is a
 * country, not a language, and at this size they were the heaviest thing in
 * the header.
 */

/*
 * GTranslate's own widget is parked off-screen rather than removed, so the
 * plugin's initialisation still finds everything it expects. Kept out of the
 * tab order and away from screen readers.
 */
.gtranslate_wrapper,
.gtranslate_wrapper > div,
div[id^='gt-wrapper-'] {
	position: absolute !important;
	inset-block-start: auto !important;
	inset-inline-start: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	pointer-events: none !important;
	visibility: hidden !important;
}

.rb-lang {
	position: relative;
	/*
	 * Above the hero. .whb-header and .rb-hero both carry z-index 1 for the
	 * grain layer in warmth.css, and the hero comes later in the DOM — so the
	 * header's stacking context is raised in warmth.css and this sits inside it.
	 */
	z-index: 5;
	display: flex;
	align-items: center;
	margin-inline: 10px;
}

.rb-lang__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	gap: 6px;
	min-width: 38px;
	/* Woodmart sets a min-height on buttons that inflates this to 42px. */
	min-height: 0;
	height: 30px;
	padding: 0 9px;
	border: 1px solid rgba(42, 28, 15, 0.16);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.9);
	color: #2a1c0f;
	font-family: var(--rb-font, inherit);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
	cursor: pointer;
	transition: background-color 160ms ease, border-color 160ms ease;
}

.rb-lang__toggle:hover,
.rb-lang__toggle[aria-expanded='true'] {
	background: #fff;
	border-color: rgba(210, 172, 103, 0.9);
}

.rb-lang__toggle:focus-visible {
	outline: 3px solid #d2ac67;
	outline-offset: 2px;
}

.rb-lang__list {
	position: absolute;
	z-index: 60;
	inset-block-start: calc(100% + 8px);
	inset-inline-end: 0;
	min-width: 132px;
	/* Eleven languages ran to 572px — most of a phone screen. */
	max-height: min(52vh, 320px);
	overflow-y: auto;
	overscroll-behavior: contain;
	margin: 0;
	padding: 5px;
	list-style: none;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 8px 26px rgba(42, 28, 15, 0.18);
}

.rb-lang__list[hidden] {
	display: none;
}

.rb-lang__option {
	display: flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	width: 100%;
	/* Woodmart's button min-height inflated each row to 42px. */
	min-height: 0;
	padding: 6px 10px;
	border: 0;
	border-radius: 6px;
	background: none;
	color: #2a1c0f;
	font-family: var(--rb-font, inherit);
	font-size: 13px;
	line-height: 1.4;
	text-align: start;
	cursor: pointer;
	transition: background-color 140ms ease;
}

.rb-lang__option:hover,
.rb-lang__option:focus-visible {
	background: rgba(210, 172, 103, 0.16);
}

.rb-lang__option[aria-current='true'] {
	font-weight: 700;
	color: #8a6420;
}

@media (prefers-reduced-motion: reduce) {
	.rb-lang__toggle,
	.rb-lang__option {
		transition: none;
	}
}

/* Flags -------------------------------------------------------------------- */

.rb-lang__flag {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border-radius: 3px;
	/* Several of the SVGs are near-white; a hairline keeps them from
	   disappearing into the white control. */
	box-shadow: 0 0 0 1px rgba(42, 28, 15, 0.12);
	object-fit: cover;
}

.rb-lang__code {
	line-height: 1;
}