/* Language styles, loaded once a language other than English is live (components/locale_head.html). */

/* ---- Japanese ----
   No loaded font has Japanese, so Noto Sans JP follows the Latin font in every stack. Google serves it in slices, so a page
   fetches only the glyphs it uses. Headings use it too: the serif display fonts have no Japanese. */
:root:lang(ja) {
  --font-sans: 'Manrope', 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic UI', Meiryo, sans-serif;
  --font-body: 'Manrope', 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic UI', Meiryo, sans-serif;
  --font-heading: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic UI', Meiryo, sans-serif;
  --font-display: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic UI', Meiryo, sans-serif;
  --font-mono: 'DM Mono', 'Noto Sans JP', monospace;
  --app-font-sans: 'Manrope', 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic UI', Meiryo, sans-serif;
  --app-font-serif: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic UI', Meiryo, sans-serif;
  --app-font-display: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic UI', Meiryo, sans-serif;
  --app-font-mono: 'DM Mono', 'Noto Sans JP', monospace;
}

:lang(ja) {
  line-break: strict;
  overflow-wrap: break-word; /* not "anywhere": that lets flex items shrink until labels break character by character */
  word-break: auto-phrase;
}

/* On a phone a whole phrase can be wider than the screen, so lines break between characters, the usual Japanese behaviour */
@media (max-width: 480px) {
  :lang(ja) {
    word-break: normal;
  }
}

/* Tight tracking makes kanji collide, and Japanese has no true italics, so browsers would slant it */
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3, :lang(ja) h4 {
  letter-spacing: normal;
  line-height: 1.4;
}

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

/* ---- Vietnamese ----
   DM Mono has no Vietnamese subset, which would mix two fonts inside a word. JetBrains Mono does, and base.html loads it. */
:root:lang(vi) {
  --font-mono: 'JetBrains Mono', monospace;
  --app-font-mono: 'JetBrains Mono', monospace;
}

/* Stacked marks such as Ấ and Ệ clip in tight line heights */
:lang(vi) h1, :lang(vi) h2, :lang(vi) h3, :lang(vi) h4 {
  line-height: 1.3;
}

/* Translated labels run longer than the English the layout was drawn for */
:lang(vi) .founder-patent-title, :lang(ja) .founder-patent-title {
  flex-wrap: wrap;
}

:lang(vi) .founder-patent-badge, :lang(ja) .founder-patent-badge {
  white-space: normal;
}

/* ---- Language dropdown ----
   Sits beside the header's pill buttons, so it uses their height, border and hover. */
.language-switcher {
  flex: none;
  position: relative;
}

.language-switcher-button {
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-full, 9999px);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  font: 700 13px/1 var(--app-font-sans, sans-serif);
  gap: 7px;
  height: 38px;
  list-style: none;
  padding: 0 11px 0 12px;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  user-select: none;
  white-space: nowrap;
}

.language-switcher-button::-webkit-details-marker {
  display: none;
}

.language-switcher-button:hover,
.language-switcher[open] .language-switcher-button {
  background: var(--muted);
  border-color: var(--teal);
  color: var(--teal);
}

.language-switcher-button:focus-visible,
.language-switcher-option:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.language-switcher-code {
  display: none;
}

.language-switcher-chevron {
  flex: none;
  opacity: .7;
  transition: transform .15s ease;
}

.language-switcher[open] .language-switcher-chevron {
  transform: rotate(180deg);
}

.language-switcher-panel {
  animation: language-switcher-open .15s ease;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 14px);
  box-shadow: 0 15px 35px hsl(183 34% 13% / .14);
  display: grid;
  gap: 2px;
  margin: 0;
  min-width: 190px;
  padding: 6px;
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 1100;
}

@keyframes language-switcher-open {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

.language-switcher-option {
  align-items: center;
  background: none;
  border: 0;
  border-radius: var(--radius-sm, 8px);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  font: 600 14px/1.2 var(--app-font-sans, sans-serif);
  gap: 16px;
  justify-content: space-between;
  min-height: 42px;
  padding: 8px 10px 8px 12px;
  text-align: left;
  transition: background .15s ease, color .15s ease;
  width: 100%;
}

.language-switcher-option:hover,
.language-switcher-option:focus-visible {
  background: var(--muted);
  color: var(--teal);
}

.language-switcher-option[aria-current="true"] {
  color: var(--teal);
  font-weight: 700;
}

.language-switcher-option svg {
  flex: none;
  visibility: hidden;
}

.language-switcher-option[aria-current="true"] svg {
  visibility: visible;
}

/* The header holds one more item now, and translated labels run longer, so it tightens in steps as the screen narrows. Without
   this the logo slides off the left edge. Contact stays in the Resources menu when its link goes. */
@media (max-width: 1220px) {
  .nav-actions .language-switcher-button {
    gap: 5px;
    padding: 0 9px 0 10px;
  }

  .nav-actions .language-switcher-current {
    display: none;
  }

  .nav-actions .language-switcher-code {
    display: inline;
  }
}

@media (max-width: 1120px) {
  .nav {
    gap: 18px;
  }

  .nav-links {
    gap: 18px;
  }

  .nav-actions {
    gap: 12px;
  }
}

@media (max-width: 1040px) {
  .nav-talk {
    display: none;
  }
}

/* In the phone menu it fills the row and opens in place, because the menu scrolls with the page */
.mobile-panel .language-switcher {
  margin-bottom: 12px;
}

.mobile-panel .language-switcher-button {
  border-radius: 10px;
  display: flex;
  font-size: 14px;
  height: 44px;
  padding: 0 12px 0 14px;
}

.mobile-panel .language-switcher-chevron {
  margin-left: auto;
}

.mobile-panel .language-switcher-panel {
  border: 0;
  box-shadow: none;
  margin-top: 4px;
  padding: 0;
  position: static;
}

/* On the dark footer it opens upwards, because nothing is below it */
.footer .language-switcher-button {
  background: transparent;
  border-color: hsl(183 21% 34%);
  color: var(--paper);
  font-size: 12px;
  height: 34px;
}

.footer .language-switcher-button:hover,
.footer .language-switcher[open] .language-switcher-button {
  background: hsl(183 25% 20%);
  border-color: hsl(183 21% 50%);
  color: var(--paper);
}

.footer .language-switcher-button:focus-visible {
  outline-color: var(--paper);
}

.footer .language-switcher-panel {
  bottom: calc(100% + 8px);
  left: 0;
  right: auto;
  top: auto;
}

/* ---- Notice for a reader whose browser prefers another language ---- */
.language-notice {
  align-items: center;
  background: var(--paper, #fbf9f4);
  border-bottom: 1px solid var(--line, #d9d4c7);
  color: var(--ink, #1c1b19);
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  gap: 8px 16px;
  justify-content: center;
  padding: 8px 16px;
}

.language-notice form {
  display: inline;
  margin: 0;
}

.language-notice a, .language-notice button {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  padding: 0;
  text-decoration: underline;
}

/* Scan page: asking for a translation, and telling a reader a machine wrote this text */
.translation-bar {
  align-items: center;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  color: #dbe5e2; /* the inspector panel is dark in every theme */
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  gap: 8px 12px;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 8px 12px;
}

.btn-translate, .btn-translate-link {
  background: none;
  border: 0;
  color: #7fd6c8;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 0;
  text-decoration: underline;
}

.finding-translation-row {
  align-items: center;
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.machine-translated-label {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: #dbe5e2;
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  margin-right: 8px;
  padding: 2px 6px;
}