/* Language switcher (tools/i18n/assets/lang.css, copied into each site by the build).
   It takes the nav's font and colour; a site can set --lang-bg / --lang-ink / --lang-line / --lang-accent. */
.lang { position: relative; display: inline-flex; align-items: center; flex: none; font: inherit; color: inherit; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; margin: 0;
  font: inherit; font-size: 13px; font-weight: 600; letter-spacing: .06em; line-height: 1;
  color: inherit; background: transparent; border: 1px solid var(--lang-line, rgba(128, 128, 128, .35)); border-radius: 999px;
  cursor: pointer; transition: border-color .2s, background-color .2s;
}
.lang-btn:hover, .lang.open .lang-btn { border-color: currentColor; }
.lang-btn:focus-visible { outline: 2px solid var(--lang-accent, currentColor); outline-offset: 2px; }
.lang-btn i { width: 6px; height: 6px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.lang.open .lang-btn i { transform: translateY(3px) rotate(225deg); }
.lang-list {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 1000; min-width: 168px; margin: 0; padding: 6px; list-style: none;
  background: var(--lang-bg, #121212); color: var(--lang-ink, #F4F2EE);
  border: 1px solid var(--lang-line, rgba(128, 128, 128, .35)); border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
}
.lang-list[hidden] { display: none; }
.lang-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 12px; border-radius: 8px;
  font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; color: inherit; text-decoration: none; white-space: nowrap;
}
.lang-list a::after { content: attr(data-lang); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .5; }
.lang-list a:hover, .lang-list a:focus-visible { background: rgba(128, 128, 128, .16); outline: none; }
.lang-list a[aria-current] { color: var(--lang-accent, inherit); }
.lang-list a[aria-current]::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .lang-btn, .lang-btn i { transition: none; } }

/* translated pages: long German and Finnish words may break inside headings rather than run off a phone screen */
html:not([lang="en"]) :is(h1, h2, h3) { overflow-wrap: break-word; hyphens: auto; }