/* The language page switcher.
 *
 * ⚠ IT SITS AT THE TOP OF EVERY SITE AND MUST NOT IMPOSE A THEME. Eighteen
 * sites run different templates; this borrows currentColor and the inherited
 * font so it reads as part of whatever header it lands in, rather than
 * arriving as a white box on a black bar.
 */
.mls { position: relative; display: inline-block; font-size: .9rem; line-height: 1.2; }

.mls-trigger {
	display: inline-flex; align-items: center; gap: .4em;
	background: none; border: 1px solid currentColor; border-radius: 4px;
	color: inherit; font: inherit; padding: .3em .6em; cursor: pointer;
	opacity: .85;
	/* ⚠ THE NAME NEVER WRAPS. "English (United Kingdom)" is 24 characters and
	   in a narrow header column it broke onto a second line INSIDE the pill -
	   the text overflowed its own border and the control stood 45px tall
	   beside a 33px one. Greg, 2026-09-29: "the menu on gregloucks.food is
	   all scrunched over to the left". A control that is allowed to wrap has
	   no predictable width, which is the thing a flex header row needs most. */
	white-space: nowrap;
}
.mls-trigger:hover, .mls-trigger:focus-visible { opacity: 1; }

.mls-caret { font-size: .7em; }
.mls-flag { width: 18px; height: 12px; flex: 0 0 auto; object-fit: cover; border-radius: 1px; }

.mls-list {
	position: absolute; z-index: 1000; top: calc(100% + .3em); left: 0;
	margin: 0; padding: .3em 0; list-style: none;
	/* ⚠ A FIXED HEIGHT WITH ITS OWN SCROLL. Fifty-two languages is a list
	   longer than most screens, and a menu that runs off the bottom of the
	   viewport cannot be reached at all on a phone. */
	max-height: min(60vh, 24rem); overflow-y: auto;
	min-width: 12rem;
	background: Canvas; color: CanvasText;
	border: 1px solid rgba(128, 128, 128, .4); border-radius: 6px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
}

.mls-item {
	display: flex; align-items: center; gap: .5em;
	padding: .35em .8em; text-decoration: none; color: inherit; white-space: nowrap;
}
.mls-item:hover, .mls-item:focus-visible { background: rgba(128, 128, 128, .18); }
.mls-item.is-active { font-weight: 600; }

/* ⚠ EVERY ROW IS LAID OUT THE SAME WAY, and a language's own direction applies
   to its NAME only - see the note in the template. There is nothing left to
   style: HTML already isolates the bidi of an element carrying `dir`, and the
   rule that used to be here (`text-align: right` on the row) was part of the
   same mistake that put Persian's flag on the wrong side of its row. */

@media (max-width: 480px) {
	.mls-list { min-width: 10rem; max-height: 50vh; }
}

/* ── ON A PHONE THE LIST IS A SHEET, NOT A DROPDOWN ──────────────────────
 *
 * Greg, 2026-09-29 - "make sure the language page chooser is in a good
 * location on mobile devices".
 *
 * ⚠ THE TRIGGER'S POSITION IS THE TEMPLATE'S DECISION AND IT IS DIFFERENT ON
 * ALL EIGHTEEN SITES. A dropdown anchored under a button that the template
 * has pushed into a corner, a collapsed header or an off-canvas panel can
 * open off the side of a 360px screen, and a list of fifty-four languages
 * can open off the bottom of it. Neither is reachable and neither shows an
 * error.
 *
 * So below 640px the list stops being anchored to the trigger at all and
 * becomes a sheet pinned to the bottom of the VIEWPORT - always on screen,
 * always scrollable, wherever the button itself happens to live. This is the
 * one layout that does not depend on knowing the template.
 */
@media (max-width: 640px) {
	.mls-list {
		position: fixed;
		inset: auto 0 0 0;
		top: auto;
		min-width: 0;
		width: 100%;
		max-height: 65vh;
		border-radius: 12px 12px 0 0;
		border-left: 0; border-right: 0; border-bottom: 0;
		box-shadow: 0 -8px 30px rgba(0, 0, 0, .3);
		/* Clear of the home indicator on a modern phone. */
		padding-bottom: calc(.3em + env(safe-area-inset-bottom, 0px));
	}

	/* ⚠ A BIGGER TARGET, NOT A SMALLER ONE. 54 entries invite a mis-tap, and
	   a mis-tap here navigates the reader into a language they cannot read
	   and may not be able to get back out of. */
	.mls-item { padding: .7em 1em; }

	.mls-trigger { padding: .45em .7em; }
}

/* ⚠ AND IT MUST NOT OPEN OFF THE RIGHT EDGE ON A TABLET either, where the
   sheet does not apply but the header is often right-aligned. */
@media (min-width: 641px) {
	.mls-list { left: auto; right: 0; }
	.mls[data-mls-align="left"] .mls-list { left: 0; right: auto; }
}