/* Languages: the picker, the browser-language note, and type for Chinese, Japanese, Korean and Thai.
   Added to every page by the server (server/i18n.js), after site.css. */

/* ---------- picker (header) and the list in the footer ---------- */
.langpick{position:relative}
.langpick > summary{list-style:none; display:inline-flex; align-items:center; gap:5px; cursor:pointer; white-space:nowrap}
.langpick > summary::-webkit-details-marker{display:none}
.langpick > summary svg{flex:none}
.langmenu{position:absolute; right:0; top:calc(100% + 6px); z-index:40; min-width:190px; max-width:min(260px, calc(100vw - 32px)); background:var(--surface); border:1px solid var(--line); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.14); padding:6px; display:flex; flex-direction:column}
.langmenu a{padding:7px 10px; border-radius:6px; text-decoration:none; color:var(--ink); font-weight:500}
.langmenu a:hover{background:var(--soft)}
.langmenu a[aria-current="true"]{background:var(--lapis-tint); font-weight:700}
.langmenu p{margin:6px 8px 4px; line-height:1.4}
.foot-langs{display:flex; flex-wrap:wrap; gap:4px 12px; width:100%}
.foot-langs a[aria-current="true"]{font-weight:700; text-decoration:none; color:var(--ink)}
@media (max-width:640px){
  .langpick{order:2}
  .langpick > summary span{display:none}             /* the globe alone on a phone */
}

/* the language was taken from the browser: a quiet note under the header */
.langnote{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 10px; padding:8px 16px; background:var(--lapis-tint); border-bottom:1px solid var(--line); font-size:14px; line-height:1.45; text-align:center}

/* ---------- type ---------- */
/* Alegreya draws the Latin letters and figures; the CJK and Thai letters come from the system's font where it has
   one, else from the Noto web font the server links for that language. */
:root:lang(zh-Hans){
  --f-ui:'Alegreya Sans', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Noto Sans SC', 'Source Han Sans SC', sans-serif;
  --f-display:'Alegreya', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Noto Sans SC', 'Source Han Sans SC', serif;
}
:root:lang(zh-Hant){
  --f-ui:'Alegreya Sans', 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans CJK TC', 'Noto Sans TC', 'Source Han Sans TC', sans-serif;
  --f-display:'Alegreya', 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans CJK TC', 'Noto Sans TC', 'Source Han Sans TC', serif;
}
:root:lang(ja){
  --f-ui:'Alegreya Sans', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', 'Noto Sans CJK JP', 'Noto Sans JP', sans-serif;
  --f-display:'Alegreya', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', 'Noto Sans CJK JP', 'Noto Sans JP', serif;
}
:root:lang(ko){
  --f-ui:'Alegreya Sans', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans CJK KR', 'Noto Sans KR', sans-serif;
  --f-display:'Alegreya', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans CJK KR', 'Noto Sans KR', serif;
}
:root:lang(th){
  --f-ui:'Alegreya Sans', 'Noto Sans Thai', 'Thonburi', 'Leelawadee UI', 'Tahoma', 'Loma', sans-serif;
  --f-display:'Alegreya', 'Noto Sans Thai', 'Thonburi', 'Leelawadee UI', 'Tahoma', 'Loma', serif;
}

/* CJK: no italics (there are none), a little more leading, line breaks by the strict CJK rules.
   Korean is written with spaces, so it keeps words whole like English. */
:root:lang(zh-Hans) body, :root:lang(zh-Hant) body, :root:lang(ja) body, :root:lang(ko) body{line-height:1.65; line-break:strict; overflow-wrap:anywhere}
:root:lang(ko) body{word-break:keep-all; overflow-wrap:break-word}
:root:lang(zh-Hans) :is(h1, h2, h3), :root:lang(zh-Hant) :is(h1, h2, h3), :root:lang(ja) :is(h1, h2, h3), :root:lang(ko) :is(h1, h2, h3){line-height:1.3; letter-spacing:0}
:root:lang(zh-Hans) :is(em, i), :root:lang(zh-Hant) :is(em, i), :root:lang(ja) :is(em, i){font-style:normal; font-weight:700}

/* Thai: tall vowels and tone marks above and below the line need room; Chromium and Safari find the word breaks */
:root:lang(th) body{line-height:1.75}
:root:lang(th) :is(h1, h2, h3){line-height:1.45}
:root:lang(th) .endword{line-height:1.3}
:root:lang(th) .btn, :root:lang(th) button{line-height:1.5}