/* ============================================================
   恆準定位官網 — 全站基礎樣式
   1) 字型統一(整站只在這裡定義一次,要換字型改 --p2-font 一行即可)
   2) 字級刻度變數
   3) 修正三種版型共通的手機溢出問題
   載入順序:bootstrap.css → p2base.css → p2nav.css
   ============================================================ */

:root{
  /* 系統字型優先,零下載:Apple 落蘋方、Windows 落微軟正黑體、Android/Linux 落思源黑體。
     中日韓網頁字型未壓縮動輒 15 MB 以上,不適合當內文字型。
     ★ 這一行待管理師的字型 survey 結果確認後可直接替換。 */
  --p2-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC",
             "Noto Sans TC", "Microsoft JhengHei", "Helvetica Neue", Arial, sans-serif;

  /* 字級刻度(桌機) */
  --p2-h1: 30px;
  --p2-h2: 23px;
  --p2-h3: 18px;
  --p2-body: 16.5px;
  --p2-small: 13.5px;
  --p2-lh: 1.75;

  /* 品牌色 */
  --p2-navy: #16305c;
  --p2-navy-d: #0f2444;
  --p2-red: #cc1122;
}
@media(max-width:600px){
  :root{
    --p2-h1: 23px; --p2-h2: 20px; --p2-h3: 17px;
    --p2-body: 16px; --p2-small: 13px;
  }
}

/* ---- 字型:三種版型(舊 bootstrap / p2lp / p2pd)統一成同一組 ---- */
body,
.p2lp, .p2lp *,
.p2pd, .p2pd *,
.navbar, .btn, .card, input, select, textarea, button{
  font-family: var(--p2-font);
}

/* ============================================================
   手機溢出修正(2026-07-30,由管理師的 RWD 回報 + CDP 稽核找出)
   ============================================================ */

/* ① CSS Grid 的 minmax 下限比容器還寬 -> 在 360px 手機上撐出畫面。
      加 min() 讓下限不超過容器本身。
      .news-grid 影響 12 支加值產品頁,.tracks 影響 company.html。 */
.p2pd .news-grid{
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)) !important;
}
.tracks{
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)) !important;
}

/* ② 聯絡我們的 Google 地圖 iframe 寫成 width="110%" -> 必定溢出 */
.rwd-map{width:100%;overflow:hidden;border-radius:12px}
.rwd-map iframe{width:100% !important;height:380px !important;max-width:100%;border:0;display:block}
@media(max-width:600px){.rwd-map iframe{height:300px !important}}

/* ③ 舊 bootstrap 頁的兩欄圖片列:兩張 width="50%" 再加一串  ,總和超過 100%。
      允許換行,並讓圖片不超過容器。 */
.d-flex.justify-content-start{flex-wrap:wrap;gap:10px}
.d-flex.justify-content-start img{max-width:100%;height:auto}

/* ④ 保險:整站圖片不得超出容器(舊頁有多處 width="101%" / "110%" 這種寫法) */
img{max-width:100%}

/* ⑤ 加值產品頁卡片標題:h4 原本是 21.48px、比同卡片的 h3(19.2px)還大,層級顛倒,
      而且「【採購端關心的三件事】」這類 11 字標題在 360px 的 228px 框裡差 8px 不換行。
      依字級刻度重新指定,順序改成 h3 > h4。 */
.p2pd .news-card h3{font-size:var(--p2-h3);line-height:1.45}
.p2pd .news-card h4{font-size:var(--p2-body);line-height:1.5;font-weight:700}
.p2pd .news-card h3,
.p2pd .news-card h4,
.p2pd .solution-item strong{overflow-wrap:break-word}

/* ⑥ 產業趨勢文章:中英夾雜的長字串(例「Nordic Semiconductor(低功耗藍芽領導廠)」)
      在 360px 的窄欄裡不換行,溢出 7px。用 anywhere 才會強制斷行,break-word 不夠。 */
.p2lp article p,
.p2lp article li,
.p2lp article strong{overflow-wrap:anywhere}

/* ============================================================
   諮詢表單(2026-07-30 表單改版 / 2026-07-31 高度重量)
   舊版把 Google 表單嵌在頁尾、iframe 寫死 820-950px,而表單自然高度是
   2,151-2,494px(實測),桌機與手機都被切掉。改成按鈕 + modal 外層捲動。

   2026-07-31:表單刪掉「來源頁面」、新增「您的場域類型」後高度變高,重量:
     寬 604px(桌機)  中文 2,551 / 英文 2,603
     寬 324px(手機)  中文 2,686 / 英文 2,874
   依規則取兩種語言的大者 +100px 再進位:桌機 2,800 / 手機 3,000。
   表單題目若再增減,用 handover/scripts/measure_form.mjs 重量,不要沿用舊值。
   ============================================================ */
.p2form-btn{
  display:inline-block;background:var(--p2-red);color:#fff;font-weight:700;
  font-size:var(--p2-body);line-height:1.4;padding:14px 34px;border:0;border-radius:999px;
  text-decoration:none;cursor:pointer;transition:background .15s ease;
}
.p2form-btn:hover,.p2form-btn:focus{background:#a80e1c;color:#fff;text-decoration:none}
.p2form-btn:focus-visible{outline:3px solid #fff;outline-offset:2px}
/* CTA 深藍區塊裡置中 */
.cta .p2form-btn{display:block;width:-moz-max-content;width:max-content;max-width:100%;margin:0 auto;text-align:center}

.p2form-frame{width:100%;height:2800px;border:0;display:block}
@media(max-width:600px){.p2form-frame{height:3000px}}

/* contact.html 直接嵌入(不用 modal)。高度是在 604px 寬量出來的,
   所以嵌入寬度也要壓在同一個量級,太寬會讓實際高度變矮、下方留白過多。 */
.p2form-embed{max-width:640px;margin:0 auto}

/* ── 頁尾（2026-08 上線前加入）───────────────────────────────
   全站原本沒有頁尾，隱私權政策也就沒有地方可以放。
   刻意做得很輕：一條分隔線 + 版權 + 兩個連結，不搶內容。 */
.p2foot{border-top:1px solid #e5e8ee;background:#f6f8fb;margin-top:38px;
  font-family:var(--p2-font);font-size:13.5px;color:#5b6472}
.p2foot .p2foot-in{max-width:1100px;margin:0 auto;padding:18px 16px;
  display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;justify-content:space-between}
.p2foot a{color:#16305c;text-decoration:none;margin-right:18px}
.p2foot a:last-child{margin-right:0}
.p2foot a:hover{text-decoration:underline}
@media(max-width:640px){.p2foot .p2foot-in{flex-direction:column;align-items:flex-start;gap:8px}}

/* 文章發布日期（2026-08 補：原本讀者與搜尋引擎都看不到日期） */
.pubdate{color:#5b6472;font-size:13.5px;margin:2px 0 16px;font-family:var(--p2-font)}