/* lang.css: the EN | SV switch at the end of the top bar, on both pages (index.html, sv.html). It matches the
   Disclaimer button beside it: white, the same hairline and height, dim type. The page's own language is in ink;
   the other one is the link. lang.js keeps the reader's place when they switch. */
.lang-switch {
  display: inline-flex; align-items: stretch; margin: 0; padding: 0;
  background: var(--white); border: 1px solid #E8EBEE; border-radius: 8px; overflow: hidden;
}
.lang-switch a {
  position: relative; display: inline-flex; align-items: center; padding: 6px 9px;
  font-family: var(--sans); font-weight: 500; font-size: 13px; line-height: 20px; letter-spacing: .03em;
  color: var(--hero-lede); text-decoration: none;
}
.lang-switch a + a { border-left: 1px solid #E8EBEE; }
.lang-switch a[aria-current] { color: var(--slate-900); font-weight: 600; cursor: default; }
.lang-switch a:not([aria-current]):hover { color: var(--slate-900); background: #F5F7F8; }

@media (max-width: 767px) {
  .lang-switch a { padding: 5px 7px; font-size: 11px; line-height: 18px; }
  .lang-switch a::after { content: ""; position: absolute; inset: -7px 0; }   /* 44px tall touch target */
}
/* Narrow phones: the byline, Disclaimer and both languages no longer fit on one line (Swedish is the widest), so
   the switch shows only the other language, one link; the page's own language goes without saying. */
@media (max-width: 389px) {
  .lang-switch a[aria-current] { display: none; }
  .lang-switch a + a { border-left: 0; }
}
/* The narrowest (under 350 px, e.g. a first iPhone SE): the Disclaimer button keeps its icon only. Its word stays
   in the page at size 0, so it is still the button's name for screen readers. */
@media (max-width: 349px) {
  .disclaimer-link { gap: 0; font-size: 0; }
  .disclaimer-link svg { width: 13px; height: 13px; }
}