/* ==========================================================================
   gmba-font.css  —  英文字型疊加層（襯線標題）
   建立 2026-09-07　定案版
   --------------------------------------------------------------------------
   決策（2026-09-07 主任確認）：
     ✅ 只改英文字型　　標題 Newsreader（襯線）、正文 IBM Plex Sans
     ❌ 中文字型不動　　標題與正文都留在思源黑體 Noto Sans TC，字重也不動

     不引入思源宋體（Noto Serif TC）的原因：一整套 CJK 字型是好幾 MB，
     而宋體的氣質只在大字看得出來 —— 縮到全站註解、表單提示的
     14.5px 那一級，跟黑體幾乎沒有差別。付了體積、拿不到效果。

   掛載範圍：
     只掛英文 8 頁。中文 6 頁不要掛。404.html 不要掛。
     檔案本身也用 html:not([lang^="zh"]) 包住每一條規則 ——
     萬一哪天誤掛到 -zh 頁，整份檔案是啞的，不會動到中文版面。

   這一層只改 font-family / font-weight / letter-spacing / 數字型態。
   不改 font-size（那是 gmba-type.css 的事）、不改顏色、不動 markup。
   ========================================================================== */

/* --- 0. 字型從哪裡來 -----------------------------------------------------
   Newsreader 與 IBM Plex Sans 由各頁 head 原有的 Google Fonts <link>
   一起載（見交件單 B 節），這裡不用 @import ——
   @import 寫在 CSS 檔裡會變成「先下載這支 CSS、解析完才發現要抓字型」
   的串行等待，比寫在 head 的 <link> 慢一個來回。

   ⚠ 如果要單獨打開這支 CSS 測試（沒有頁面的 <link>），把下面這行的
     註解拿掉就會自己載字型。正式上線時要保持註解狀態，避免重複下載。

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');
                                                                          */


/* --- 1. token 換血 -------------------------------------------------------
   英文擺前面、中文擺後面，瀏覽器會逐字挑：
   拉丁字母用 Newsreader，中文字碰到 Newsreader 沒有字符，
   往後找到 --ff-zh（思源黑體）—— 所以中文完全照舊。

   ⚠ 通用族（serif / sans-serif）一定要排在中文字型後面。
     排在前面的話，中文字會先命中系統預設字，思源黑體永遠輪不到。

   ⚠ 為什麼要 !important：各頁的 --ff-num / --ff-body 定義在頁內
     <style> 的 :root，而那段 <style> 有些排在 <link> 後面
     （save-my-seat、contact 都是）。custom property 也吃 !important，
     加上去就不必管載入順序。                                            */
html:not([lang^="zh"]) {
  --ff-display: 'Newsreader', 'Newsreader-fallback', var(--ff-zh, 'Noto Sans TC', 'PingFang TC', sans-serif) !important;
  --ff-num:     'Newsreader', 'Newsreader-fallback', var(--ff-zh, 'Noto Sans TC', 'PingFang TC', sans-serif) !important;
  --ff-body:    'IBM Plex Sans', var(--ff-zh, 'Noto Sans TC', 'PingFang TC', sans-serif) !important;
}

html:not([lang^="zh"]) body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
}


/* --- 2. 標題字重 900 → 500 ----------------------------------------------
   原本是 Inter / Barlow Condensed 900 的粗黑體。換成襯線後如果沿用 900，
   Newsreader 會被撐到最重的 800，筆畫接在一起變成一塊黑。
   大字降到 500、小標題留 600，層級才回來。                              */
html:not([lang^="zh"]) body h1,
html:not([lang^="zh"]) body h2,
html:not([lang^="zh"]) body .hero h1,
html:not([lang^="zh"]) body #hero-final h1,
html:not([lang^="zh"]) body .hero-feature-title,
html:not([lang^="zh"]) body .page-hero-strip h1 {
  font-family: var(--ff-display) !important;
  font-weight: 500 !important;
  letter-spacing: -.02em !important;
}

html:not([lang^="zh"]) body h3,
html:not([lang^="zh"]) body h4,
html:not([lang^="zh"]) body .card h3,
html:not([lang^="zh"]) body .cur-card h3,
html:not([lang^="zh"]) body .ai-callout h3,
html:not([lang^="zh"]) body .schol-box h3,
html:not([lang^="zh"]) body .faculty-card h3,
html:not([lang^="zh"]) body .inelig-card h3 {
  font-family: var(--ff-display) !important;
  font-weight: 600 !important;
  letter-spacing: -.005em !important;
}

/* 這兩處標題不是 h1–h4，靠 class 認 */
html:not([lang^="zh"]) body .success-section h2,
html:not([lang^="zh"]) body .form-card-header h2 {
  font-weight: 600 !important;
}


/* --- 3. 大數字 -----------------------------------------------------------
   兩件事一定要做：
   ① lining-nums —— 襯線體的預設常是舊式數字（3、4、7 會掉到基線下），
      統計數字掉下去看起來像排版壞了。
   ② tabular-nums —— 等寬數字，一整排百分比才對得齊。
   ③ white-space:nowrap —— Barlow Condensed 是窄體，同樣 40px 比
      Newsreader 窄約三成。換襯線之後「1 year」「20+ Nationalities」
      這種帶空白的值在四格擠一列的統計帶裡會斷行。數字不該斷行。      */
html:not([lang^="zh"]) body .stat-num,
html:not([lang^="zh"]) body .card-num,
html:not([lang^="zh"]) body .ar-year,
html:not([lang^="zh"]) body .dl-item-date,
html:not([lang^="zh"]) body .schol-amt .amount,
html:not([lang^="zh"]) body .ps-num,
html:not([lang^="zh"]) body .hf-num,
html:not([lang^="zh"]) body .cl-num,
html:not([lang^="zh"]) body .wt-scope .wt-num,
html:not([lang^="zh"]) body .wt-scope .wt-big-num,
html:not([lang^="zh"]) body .wt-scope .wt-bar-val,
html:not([lang^="zh"]) body .wt-scope .wt-big2,
html:not([lang^="zh"]) body #cp-regions .cp-hero-pct,
html:not([lang^="zh"]) body #cp-regions .cp-rest-pct {
  font-family: var(--ff-display) !important;
  font-weight: 500 !important;
  font-variant-numeric: lining-nums tabular-nums !important;
  letter-spacing: -.015em !important;
  white-space: nowrap !important;
}

/* 貼在數字後面的 %、+、yr 等小單位，比數字再輕一級 */
html:not([lang^="zh"]) body .stat-num small,
html:not([lang^="zh"]) body .wt-scope .wt-big-num small,
html:not([lang^="zh"]) body .wt-scope .wt-big2 small {
  font-weight: 400 !important;
}


/* --- 4. 寫死在頁內的字型 ------------------------------------------------
   index.html 有幾處直接寫 'Barlow Condensed' 或 'Arial Black'，
   沒有走 token，換 token 換不到。用 style 屬性選擇器一次收乾淨。
   （!important 的作者規則贏過沒有 !important 的 inline style。）
   ⚠ 這一條是各頁 head 的字型 <link> 可以拿掉 Barlow Condensed 的前提，
     改動時兩邊要一起檢查。                                            */
html:not([lang^="zh"]) body [style*="Barlow Condensed"],
html:not([lang^="zh"]) body [style*="Arial Black"] {
  font-family: var(--ff-display) !important;
  font-weight: 500 !important;
  letter-spacing: -.01em !important;
}


/* --- 5. 留在無襯線的東西 ------------------------------------------------
   全大寫加 .12em 以上字距的微標籤，用襯線體會碎成一串認不出來的筆畫。
   按鈕與表頭同理 —— 這些是介面，不是內文。                            */
html:not([lang^="zh"]) body .info-session-btn,
html:not([lang^="zh"]) body .info-modal-header h4,
html:not([lang^="zh"]) body .btn-primary,
html:not([lang^="zh"]) body .btn-next,
html:not([lang^="zh"]) body .btn-retry,
html:not([lang^="zh"]) body .gmba-notify__submit,
html:not([lang^="zh"]) body .gmba-notify__kicker,
html:not([lang^="zh"]) body .gmba-notify__close,
html:not([lang^="zh"]) body .gmba-notify__label,
html:not([lang^="zh"]) body .footer-col-title,
html:not([lang^="zh"]) body .footer-bottom-logo-text,
html:not([lang^="zh"]) body .nav-link,
html:not([lang^="zh"]) body .step-label,
html:not([lang^="zh"]) body th {
  font-family: var(--ff-body) !important;
}

/* 導覽列的 GMBA 字標要襯線 —— 它是標誌，不是介面 */
html:not([lang^="zh"]) body .nav-logo-gmba {
  font-family: var(--ff-display) !important;
  font-weight: 500 !important;
  letter-spacing: .04em !important;
}


/* --- 6. 英文頁裡夾的中文 ------------------------------------------------
   英文頁有些標題是中英各一行（例如表單的中文說明行）。那些中文字會落到
   思源黑體，但字重跟著英文降到 500、還吃到負字距。中文不吃負字距，
   擠在一起會黏 —— 把字距歸零。
   ⚠ 字重不救回 900：襯線 500 的英文配黑體 900 的中文，同一行裡輕重
     差太多，比兩邊都 500 更難看。
   ⚠ :lang(zh) 只認得元素上真的有 lang 屬性的情況。目前英文頁的中文
     多半沒標 lang，所以這一條大部分時候不會生效 —— 它是留給之後
     替中文行補上 lang="zh-TW" 時用的（無障礙與 SEO 也該補）。
     現階段中英同行的地方只有表單說明，字級小、看不出字距差異，不急。 */
html:not([lang^="zh"]) body h1:lang(zh),
html:not([lang^="zh"]) body h2:lang(zh),
html:not([lang^="zh"]) body h3:lang(zh),
html:not([lang^="zh"]) body [lang^="zh"] {
  letter-spacing: 0 !important;
}


/* --- 7. 手機 -----------------------------------------------------------
   小螢幕上 500 級襯線大標的橫畫會細到看不清，補回半級。            */
@media (max-width: 760px) {
  html:not([lang^="zh"]) body h1,
  html:not([lang^="zh"]) body .hero h1,
  html:not([lang^="zh"]) body #hero-final h1,
  html:not([lang^="zh"]) body .page-hero-strip h1 {
    font-weight: 600 !important;
    letter-spacing: -.01em !important;
  }
}


/* --- 8. 字型還沒下載完的過渡 --------------------------------------------
   display=swap 期間先用系統字。系統襯線（Georgia / Times）比
   Newsreader 窄，標題會先窄後寬跳一下 ——
   用 size-adjust 把備援字的字面對齊，跳動幅度會小很多。
   ⚠ 這只救英文。中文沿用思源黑體，本來就沒有換手，不會跳。        */
@font-face {
  font-family: 'Newsreader-fallback';
  src: local('Georgia'), local('Times New Roman');
  size-adjust: 105%;
  ascent-override: 92%;
  descent-override: 24%;
}