/* Language menu and per-language type settings. Loaded on every page by the block that
   i18n/build.mjs writes into <head>. Uses the tokens from styles.css. */

.lang-menu {
  position: relative;
  flex-shrink: 0;
}

.lang-menu summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 38px;
  padding: 0 12px 0 10px;
  border-radius: 999px;
  background: var(--fill);
  color: var(--label);
  font: 600 13px var(--font);
  letter-spacing: 0.02em;
  list-style: none;
  cursor: pointer;
  user-select: none;
  transition: background-color 200ms, transform 200ms var(--ease-out);
}

.lang-menu summary::-webkit-details-marker {
  display: none;
}

.lang-menu summary:hover {
  background: var(--fill-strong);
}

.lang-menu summary:active {
  transform: scale(0.96);
}

.lang-menu summary .i {
  width: 17px;
  height: 17px;
}

.lang-menu ul {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 168px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-pop);
}

.lang-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--label);
  font: 500 15px var(--font);
  text-decoration: none;
}

.lang-menu a:hover {
  background: var(--fill);
  text-decoration: none;
}

.lang-menu a[aria-current='true'] {
  color: var(--tint);
  font-weight: 600;
}

.lang-menu a[aria-current='true']::after {
  content: ' ✓';
}

@media (max-width: 820px) {
  .lang-menu {
    order: 2;
  }

  .lang-menu summary {
    padding: 0 10px 0 9px;
  }
}

/* Long German and Polish compounds: break with a hyphen rather than overflow. */
:lang(de) h1,
:lang(de) h2,
:lang(de) h3,
:lang(pl) h1,
:lang(pl) h2,
:lang(pl) h3 {
  hyphens: auto;
  overflow-wrap: break-word;
}

/* Japanese: a Japanese font after the system font, phrase-aware line breaks, no negative tracking. */
html:lang(ja) {
  --font: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic',
    Meiryo, 'Noto Sans JP', sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI',
    'Yu Gothic', Meiryo, 'Noto Sans JP', sans-serif;
}

:lang(ja) h1,
:lang(ja) h2,
:lang(ja) h3,
:lang(ja) p,
:lang(ja) li,
:lang(ja) summary,
:lang(ja) figcaption {
  word-break: auto-phrase;
  line-break: strict;
}

:lang(ja) h1,
:lang(ja) h2,
:lang(ja) h3 {
  letter-spacing: 0;
}

:lang(ja) em,
:lang(ja) i {
  font-style: normal;
}

/* Translated pages: a note that Fromensics itself is English for now. */
.site-footer .lang-note {
  display: flex;
  flex-basis: 100%;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 6px;
  padding-bottom: 18px;
  border-bottom: 0.5px solid var(--separator);
  color: var(--label-2);
  font-size: 13px;
  line-height: 1.5;
}

.site-footer .lang-note span {
  margin-top: 1px;
  flex-shrink: 0;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--fill);
  color: var(--label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Links from a translated page to a page that is only in English. */
html:not(:lang(en)) a[hreflang='en']:not(.lang-menu a)::after {
  content: ' · EN';
  font-size: 0.82em;
  opacity: 0.7;
}

/* Translated words run longer than English: let table cells and buttons wrap on small screens
   instead of widening the page. */
html:not(:lang(en)) .prose th,
html:not(:lang(en)) .prose td {
  overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  html:not(:lang(en)) .btn {
    white-space: normal;
    text-align: center;
  }
}