/* The language switcher (templates/_language_switcher.html), on the field
 * band of every public page: the landing's nav, public_base's nav and the
 * error pages. A no-JS <details> menu, after brainful's; each language is
 * named in itself, so a visitor finds theirs whatever the page is in. */

.lang { position: relative; }
.lang-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 4px; cursor: pointer; list-style: none;
  font: 500 15px/1 var(--sans); letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--on-field-2);
  transition: color 160ms ease;
}
.lang-toggle::-webkit-details-marker { display: none; }
.lang-toggle:hover, .lang[open] .lang-toggle { color: var(--on-field); }
.lang-toggle svg { width: 16px; height: 16px; flex: none; }
.lang-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 40;
  display: grid; gap: 2px; min-width: 196px; padding: 8px;
  background: var(--sheet); color: var(--ink);
  border: 1px solid var(--hair); border-radius: 14px;
  box-shadow: 0 18px 44px -20px rgba(15, 20, 64, 0.45);
}
.lang-menu form { display: contents; }
.lang-menu button {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border: 0; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--ink-2);
  font: 500 15px/1.2 var(--sans); text-align: start;
}
.lang-menu button:hover { background: rgba(15, 20, 64, 0.06); color: var(--ink); }
.lang-menu button[aria-current] { color: var(--ink); font-weight: 650; }
.lang-flag { font-size: 17px; line-height: 1; }

/* Narrow phones: the globe alone, so the nav keeps its room. */
@media (max-width: 420px) {
  .lang-toggle span { display: none; }
}