/* -------------------------------------------------------------------------
   Language selector — public/js/i18n/language-select.js

   Link this after app.css:
     <link rel="stylesheet" href="css/i18n.css">

   Everything here is scoped under .i18n-lang and reads the tokens app.css
   already defines (--fg-dim, --line, --accent, --radius, --ease), with literal
   fallbacks so the control is still legible on a page that does not load
   app.css at all.
   ------------------------------------------------------------------------- */

.i18n-lang {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.i18n-lang-label {
  color: var(--fg-faint, #77747f);
  font-size: .82rem;
}

/* Not `.sr-only` — that class belongs to app.css and this component must not
   depend on it. Clip rather than `display:none`, which would take the label out
   of the accessibility tree along with the name it provides. */
.i18n-lang-label.is-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.i18n-lang-select {
  appearance: none;
  -webkit-appearance: none;
  min-width: 8.5rem;      /* fits "Українська" and "Português" without reflowing the footer */
  padding: .4rem 1.9rem .4rem .7rem;
  border: 1px solid var(--line, #2a2b33);
  border-radius: calc(var(--radius, 14px) - 5px);
  background: transparent;
  color: var(--fg-dim, #a09da8);
  font: inherit;
  font-size: .85rem;
  line-height: 1.4;
  cursor: pointer;
  transition: color .2s var(--ease, ease), border-color .2s var(--ease, ease);
}

.i18n-lang-select:hover {
  color: var(--fg, #eee);
  border-color: var(--fg-faint, #77747f);
}

.i18n-lang-select:focus-visible {
  outline: 2px solid var(--accent, #6fb3e0);
  outline-offset: 2px;
}

.i18n-lang-select:disabled {
  opacity: .55;
  cursor: progress;
}

/* The dropdown list is painted by the OS, which does not inherit page colours —
   name them so a dark page does not produce white-on-white options. */
.i18n-lang-select option {
  background: var(--bg-raised, #16171d);
  color: var(--fg, #eee);
}

.i18n-lang-chevron {
  position: absolute;
  right: .6rem;
  color: var(--fg-faint, #77747f);
  font-size: .7rem;
  pointer-events: none;
}

.i18n-lang.has-label .i18n-lang-chevron {
  /* With a visible label the select is no longer flush with the wrapper's
     right edge on every platform; anchor the chevron to the select instead. */
  right: .6rem;
}

@media (prefers-reduced-motion: reduce) {
  .i18n-lang-select { transition: none; }
}