/* ============================================================
   LANGUAGE SWITCHER
   ------------------------------------------------------------
   One component, three homes: the desktop sections panel, the
   mobile overlay, and the footer. All three grounds are dark
   (#1b1b1b or #121212), so one set of colours serves them.

   Each language is written in its own language, which is what
   lets someone who cannot read the page they landed on still
   recognise the one they want.
   ============================================================ */

.lang-switch {
  --lang-ink: #fff;
  --lang-muted: rgba(255, 255, 255, 0.55);
  --lang-accent: #ff820d;
  --lang-rule: rgba(255, 255, 255, 0.22);

  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: flex-start;
  font-family: 'Sofia Pro', sans-serif;
}

.lang-switch__label {
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lang-muted);
}

.lang-switch__options {
  display: flex;
  align-items: stretch;
}

.lang-switch__btn {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0.35rem 0.85rem;

  font-family: 'Sofia Pro', sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  color: var(--lang-muted);
  cursor: pointer;
  transition: color .15s ease;
}

.lang-switch__btn:first-child {
  padding-left: 0;
}

/* A hairline between the two, rather than a box around each. */
.lang-switch__btn + .lang-switch__btn {
  border-left: 1px solid var(--lang-rule);
}

.lang-switch__btn:hover {
  color: var(--lang-ink);
}

/* The current language is stated, not just implied by a hover colour:
   aria-current carries it to a screen reader too. */
.lang-switch__btn[aria-current="true"] {
  color: var(--lang-accent);
  cursor: default;
}

.lang-switch__btn:focus-visible {
  outline: 2px solid var(--lang-accent);
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   1. Desktop sections panel (the collapsed header menu)

   The panel's own rules give every <li> a link-shaped row; this
   one holds a control instead, so it opts out of that and sits
   below the links with its own separating rule.
   ------------------------------------------------------------ */
.page-menu .page-menu-lang {
  margin-top: clamp(1.25rem, 3vh, 2rem);
  padding-top: clamp(1rem, 2.5vh, 1.5rem);
  border-top: 1px solid var(--lang-rule, rgba(255, 255, 255, 0.22));
}

.page-menu .page-menu-lang .lang-switch__btn {
  /* .page-menu a is uppercase and letter-spaced; the buttons are not
     anchors, so they need saying explicitly rather than inheriting. */
  text-transform: none;
}

/* ------------------------------------------------------------
   2. Mobile overlay
   ------------------------------------------------------------ */
.header-toggle .nav-item-toggle-lang {
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
  list-style: none;
}

/* The overlay's list is centred, so the language block is centred with it --
   at every width, including the narrow ones. */
.header-toggle .nav-item-toggle-lang .lang-switch {
  align-items: center;
}

.header-toggle .nav-item-toggle-lang .lang-switch__options {
  justify-content: center;
}

/* ------------------------------------------------------------
   3. Footer — its own line above the bottom bar
   ------------------------------------------------------------ */
.footer-lang {
  grid-column: 1 / -1;
  margin-top: clamp(0.5rem, 1.5vw, 1rem);
}

/* The footer stays flush left at every width: its columns are left-aligned
   by design, and the switcher is one of them. */
@media screen and (max-width: 620px) {
  .footer-lang .lang-switch {
    align-items: flex-start;
  }
}

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