/* ============================================================
   LANGUAGE SWITCHER - shared across every Kobe site.
   Copied from _template/lang.css, the canonical source. Loaded after site.css.

   Flag + autonym, by decision (2026-09-13). The flag is the fast
   visual cue a tourist scans for; the autonym is the part that is
   never wrong. Both are always present, which also covers the one
   real technical catch: WINDOWS DESKTOP DOES NOT RENDER FLAG EMOJI
   and falls back to a letter pair ("JP"). On a phone, which is the
   priority here, flags render correctly on iOS and Android. So the
   switcher degrades to a country-code badge rather than to nothing.

   Requires from site.css: --line --text --muted --accent --bg-2
   --font-body
   ============================================================ */

.langsw {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.langsw a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  /* 44px minimum: this is a primary control for a visitor who cannot
     read the page they have landed on. */
  min-height: 44px;
  padding: 0.35rem 0.6rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
  color: var(--muted);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
}

.langsw a:hover { color: var(--text); }

.langsw a[aria-current="true"] {
  color: var(--text);
  border-color: var(--line);
}

/* The flag glyph. Sized up a little because emoji render small next
   to Japanese text, and given its own font stack so the colour-emoji
   font is used even when the page font ships its own flat glyphs. */
.langsw .flag {
  font-size: 1.15em;
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
               "Twemoji Mozilla", sans-serif;
  letter-spacing: 0;
}

/* Autonym: the language's own name. Never abbreviate to a code. */
.langsw .name { letter-spacing: 0.02em; }

/* ---------- Phone layout ----------
   With seven languages the inline row stops fitting. Below 700px the
   switcher becomes a horizontally scrollable rail with snap points,
   so every language stays reachable with a thumb and nothing wraps
   into a second line that pushes the nav taller. */
@media (max-width: 700px) {
  .langsw {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100%;
  }
  .langsw::-webkit-scrollbar { display: none; }
  .langsw a { scroll-snap-align: start; flex: 0 0 auto; }
}

/* Below 420px the autonyms alone fill the rail, so lead with the flag
   and keep the name only for the language currently shown. */
@media (max-width: 420px) {
  .langsw a:not([aria-current="true"]) .name { display: none; }
  .langsw a { padding: 0.35rem 0.5rem; }
}

/* ---------- Optional: full-width language block ----------
   For a footer or a dedicated language section rather than the
   compact nav rail. */
.langsw-block {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.5rem;
}
.langsw-block a {
  justify-content: flex-start;
  border-color: var(--line);
  background: var(--bg-2);
  padding: 0.7rem 0.9rem;
  font-size: 0.9rem;
}