/* The links between a story's versions (components/language-switch.js): the
   header nav's tiny tracked caps, the one being read colored and underlined
   as the header marks its page (header.css .site-nav a.on). */

.language-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  margin: 0 0 var(--md);
  font-size: var(--tiny);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
}

.language-switch a { color: inherit; opacity: 0.75; white-space: nowrap; }
.language-switch a:hover { opacity: 1; color: var(--accent); text-decoration: none; }
.language-switch a.on { opacity: 1; color: var(--accent); text-decoration: underline; text-underline-offset: 0.4em; text-decoration-thickness: 1px; }
.language-switch [aria-hidden] { text-decoration: none; display: inline-block; }   /* the flag sits outside the underline */