/* 中文 (zh) overrides.
 *
 * Loaded by header.php only when the page is in Chinese, so no other visitor
 * downloads it. Everything is scoped to html[lang="zh"] and cannot leak.
 *
 * Chinese behaves the opposite way to French here: the text is roughly half the
 * length of the English, so nothing overflows. The problems are typographic -
 * the site's font, its letter-spacing and its italics were all chosen for Latin.
 */

/* The page preloads an Inter subset, which has no CJK glyphs at all, and the CSP
   blocks font CDNs so no webfont can be pulled in. Everything below is a system
   font: PingFang on Apple, Microsoft YaHei on Windows, Source Han / Noto on Linux
   and Android. Noto Sans SC is listed first for the machines that happen to have
   it installed locally. */
html[lang="zh"] body,
html[lang="zh"] .alt-font,
html[lang="zh"] .navbar,
html[lang="zh"] .btn,
html[lang="zh"] input,
html[lang="zh"] textarea,
html[lang="zh"] select {
    font-family: "Noto Sans SC", "Source Han Sans SC", "PingFang SC",
                 "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei",
                 sans-serif;
}

/* CJK needs more room between lines than the Latin setting gives it. */
html[lang="zh"] body,
html[lang="zh"] p,
html[lang="zh"] li {
    line-height: 1.85;
}

/* The shared stylesheet tightens headline tracking for Latin. Negative tracking
   on Chinese pushes the characters into each other; the site's ls-* utilities and
   the letter-spacing on small caps labels all need neutralising. */
html[lang="zh"] h1, html[lang="zh"] h2, html[lang="zh"] h3,
html[lang="zh"] h4, html[lang="zh"] h5, html[lang="zh"] h6,
html[lang="zh"] .ls-minus-1px,
html[lang="zh"] .ls-minus-2px,
html[lang="zh"] .pot-lang-toggle,
html[lang="zh"] .pot-lang-toggle-text,
html[lang="zh"] .pot-lang-head,
html[lang="zh"] .pot-lang-soon {
    letter-spacing: 0;
}

/* Headings sit tighter than body text but still need more than the Latin value. */
html[lang="zh"] h1, html[lang="zh"] h2, html[lang="zh"] h3 {
    line-height: 1.45;
}

/* There is no italic form of these typefaces, so the browser synthesises one by
   slanting the glyphs. It looks broken. Icon fonts are exempt - they rely on <i>. */
html[lang="zh"] em,
html[lang="zh"] i:not([class*="icon"]):not([class*="fa-"]):not([class*="feather"]) {
    font-style: normal;
    font-weight: 600;      /* keep the emphasis that the italic carried */
}

/* Product names and specs stay Latin inside Chinese sentences - "VPS主机",
   "100 GB月流量". Let a long one break rather than widen a plan card. */
html[lang="zh"] .pot-lang-name,
html[lang="zh"] .nav-link,
html[lang="zh"] td, html[lang="zh"] th {
    overflow-wrap: anywhere;
}

/* Chinese labels are short, so the language menu's two columns have room to
   breathe rather than ellipsing. */
html[lang="zh"] .pot-lang-name {
    text-overflow: clip;
}