/* Languages, on every page (scripts/build_site.py links it): the row of
   languages in the footer, and type for the scripts Inter doesn't draw.
   Noto Sans Arabic and Noto Sans JP are served from this site and named only
   on pages in their language, so an English page never downloads them.
   Arabic reads right to left with rtl.css. Kept out of the HTML so the
   site's CSP can refuse inline styles. */

/* fonts: written by scripts/build_site.py */
@font-face { font-family: "Noto Sans Arabic"; font-weight: 400; font-display: swap; src: url("/fonts/NotoSansArabic-Regular.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200F, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Noto Sans Arabic"; font-weight: 500; font-display: swap; src: url("/fonts/NotoSansArabic-Medium.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200F, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Noto Sans Arabic"; font-weight: 600; font-display: swap; src: url("/fonts/NotoSansArabic-SemiBold.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200F, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Noto Sans Arabic"; font-weight: 700; font-display: swap; src: url("/fonts/NotoSansArabic-Bold.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200F, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Noto Sans Arabic"; font-weight: 800; font-display: swap; src: url("/fonts/NotoSansArabic-ExtraBold.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200F, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Noto Sans JP"; font-weight: 400; font-display: swap; src: url("/fonts/NotoSansJP-Regular.woff2") format("woff2"); unicode-range: U+3000-30FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF; }
@font-face { font-family: "Noto Sans JP"; font-weight: 700; font-display: swap; src: url("/fonts/NotoSansJP-Bold.woff2") format("woff2"); unicode-range: U+3000-30FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF; }
/* /fonts */

html[lang="ar"] body,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] .consent,
html[lang="ar"] .consent button {
  font-family: Inter, "Noto Sans Arabic", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
html[lang="ja"] body,
html[lang="ja"] button,
html[lang="ja"] input,
html[lang="ja"] .consent,
html[lang="ja"] .consent button {
  font-family: Inter, "Noto Sans JP", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Segoe UI", sans-serif;
}

/* Arabic's letters join, so no tracking; Japanese is set without it too.
   Headlines get room for taller letters. */
html[lang="ar"] *,
html[lang="ja"] * { letter-spacing: 0 !important; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ja"] h1, html[lang="ja"] h2, html[lang="ja"] h3 { line-height: 1.35 !important; }
/* Japanese has no spaces, so a line can break anywhere: auto-phrase breaks
   between phrases (bunsetsu) instead of inside one, for body text and
   headlines alike. A browser without it ignores the line and wraps as it did;
   strict line-breaking, which every browser reads, still keeps small kana and
   the long-vowel mark off the start of a line. An English word inside a
   Japanese page (lang="en") is not :lang(ja) and wraps as English does. */
:lang(ja) {
  word-break: normal;
  word-break: auto-phrase;
  line-break: strict;
}
html[lang="ar"] .overline, html[lang="ar"] .eyebrow, html[lang="ar"] .legal-label,
html[lang="ar"] .toc-title { text-transform: none; }

/* The row of languages: each name written in itself. */
.languages { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.languages a { color: inherit; opacity: .72; text-decoration: none; font-weight: 600; }
.languages a:hover { opacity: 1; text-decoration: underline; }
.languages a[aria-current] { opacity: 1; }
footer .languages { color: var(--muted, #687184); }
/* On the card pages (invite, pairing, not found) it sits under the card. */
body:has(> .languages) { flex-direction: column; }
body > .languages { justify-content: center; margin-top: 18px; color: #fff; }
body > .languages a { opacity: .8; }
body > .languages a[aria-current] { opacity: 1; text-decoration: underline; }

/* Japanese headlines are wider per character than Latin ones: on a phone the
   hero's would leave a lone 「に。」 on its own line at the English size. */
html[lang="ja"] .hero h1 span { white-space: nowrap; }
@media (max-width: 680px) {
  html[lang="ja"] .hero h1 { max-width: none; font-size: 40px; }
}