/* ==========================================================================
   responsive.css  v2 — 手機／平板排版修正
   你得易資訊官網 (needit.com.tw)
   更新日期：2026/9/6

   ── 修正的兩個根因 ──────────────────────────────────────────────
   1. <font size="6|7"> 殘留標籤
      主題的 h2 { font-size:28px !important } 只作用在 h2 元素本身，
      文字由子元素 <font size="7"> 渲染（48px），父層管不到。

   2. .banner-wrap .banner h2 { font-size: 9vmin !important }
      vmin 取視窗寬高較小值。393px 直式手機 → 35.4px，
      加上 letter-spacing:1px，11 個中文字 = 400px > 可用的 353px。
      此規則是為英文大寫標題設計，英文有空格可斷，中文沒有。

   ── 載入順序 ─────────────────────────────────────────────────
   必須排在 files/main_style.css 與頁面行內 <style> 之後。
   建議緊接在 /assets/nav.css 後面（頁面第 159 行）。

   ── 相依的既有規則（請勿在別處重複覆寫）──────────────────────
   main_style.css:266  @media (max-width:767px)  h2 / .banner-wrap .banner h2
   main_style.css:213  @media (max-width:1024px) .container { overflow:hidden }
   頁面行內 <style>    @media (min-width:767px)  標題字級與 letter-spacing
   ========================================================================== */


/* ==========================================================================
   一、手機版（≤ 767px）

   斷點取 767px（含），與主題一致。頁面行內樣式用的是 min-width:767px，
   兩者在 767px 這一點重疊；本檔的選擇器權重較高，可壓過該重疊。
   ========================================================================== */

@media screen and (max-width: 767px) {

  /* ---- 1. 中和 <font size> ────────────────────────────────────────────
     不直接歸零，而是依原本的 size 給對應的流動字級，
     保留作者原本安排的視覺層級（size 7 是主標、6 是次標）。

     權重說明：<font size> 是 HTML 4 的表現屬性，對應到最低優先序的
     樣式，任何一條 CSS 規則都壓得過，不需要 !important。這裡仍加上
     是為了防止 sites.css 之後有同權重規則插隊。
  -------------------------------------------------------------------- */
  h2 font[size="7"],
  .wsite-content-title font[size="7"],
  .wsite-headline font[size="7"] {
    font-size: clamp(26px, 8vw, 44px) !important;   /* 393px → 31.4px */
  }

  h2 font[size="6"],
  .wsite-content-title font[size="6"],
  .wsite-headline font[size="6"] {
    font-size: clamp(22px, 6.4vw, 34px) !important; /* 393px → 25.2px */
  }

  /* size 5 / 4 / 3 出現在內文段落，字級落在 14~18px，
     不會造成溢出，維持原樣不動。 */


  /* ---- 2. Banner 大標題：9vmin → CJK 友善的 clamp ──────────────────
     clamp(22px, 6.4vw, 40px)
       320px（SE）      → 22px，11 字 = 242px < 可用 280px  ✓
       393px（15 Pro）  → 25.2px，11 字 = 277px < 353px     ✓ 單行不斷
       767px（iPad 邊界）→ 40px

     權重：主題的 .banner-wrap .banner h2 為 (0,2,1)，
          本規則同權重但檔案順序在後，因此勝出。
  -------------------------------------------------------------------- */
  .banner-wrap .banner h2,
  .wsite-header-section .wsite-content-title,
  .wsite-headline {
    font-size: clamp(22px, 6.4vw, 40px) !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;   /* 行內樣式的 1px 不在 media query 內，
                                       手機也會生效，11 字就多吃掉 1/3 個字 */
  }

  /* banner 內若用 <font size> 包住，一併交還給上面的 clamp */
  .banner-wrap .banner h2 font[size],
  .wsite-header-section .wsite-content-title font[size] {
    font-size: inherit !important;
  }


  /* ---- 3. 內文 h2 行高 ─────────────────────────────────────────────
     主題給 line-height:1.15。中文字身高，1.15 在兩行標題會顯得擁擠。
  -------------------------------------------------------------------- */
  h2 {
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
  }


  /* ---- 4. 中文斷行品質 ─────────────────────────────────────────────
     line-break: strict → 「，。、」不落在行首
     text-wrap: balance → 兩行標題自動均分，消除孤字
                          （Safari 17.4+ / Chrome 114+，舊版自動忽略）
  -------------------------------------------------------------------- */
  h2,
  .wsite-content-title,
  .wsite-headline {
    line-break: strict;
    overflow-wrap: break-word;
    word-break: normal;
    text-wrap: balance;
  }

  div.paragraph,
  #wsite-content p,
  .wsite-headline-paragraph {
    line-break: strict;
    overflow-wrap: break-word;
    word-break: normal;
  }


  /* ---- 5. 內文圖片不撐爆容器 ───────────────────────────────────────
     只針對內容區。不可寫成全域 img，會影響 .unite-header .logo img
     的 max-height:70px。
  -------------------------------------------------------------------- */
  #wsite-content img,
  #wsite-content iframe,
  .wsite-footer img {
    max-width: 100%;
  }

  /* 注意：
     此處刻意「不」加 table { display:block; overflow-x:auto }。
     Weebly 的多欄版面是用 <table> + td.wsite-multicol-col 排的，
     主題在 max-width:767px 已把 td 轉成 display:block width:100%，
     若再動 table 的 display，整個多欄區塊會崩掉。

     此處也刻意「不」加 html,body { overflow-x:hidden }。
     主題在 max-width:1024px 已對 .container 設 overflow:hidden，
     再疊一層會影響日後可能加入的 position:sticky 元素。
  ------------------------------------------------------------------- */
}


/* ==========================================================================
   二、平板（768px ~ 1024px）

   主題的 .banner-wrap .banner h2 { 9vmin } 只到 767px 為止，
   768px 以上直接吃頁面行內樣式的 90px。
   iPad 直式 768px 可用寬度僅 728px，11 個中文字 × 90px = 990px，必爆。
   ========================================================================== */

@media screen and (min-width: 768px) and (max-width: 1024px) {

  .banner-wrap .banner h2,
  .wsite-header-section .wsite-content-title,
  .wsite-headline {
    font-size: clamp(40px, 7vw, 72px) !important;
    line-height: 1.25 !important;
    letter-spacing: 0.5px !important;
    text-wrap: balance;
  }

  .banner-wrap .banner h2 font[size],
  .wsite-header-section .wsite-content-title font[size] {
    font-size: inherit !important;
  }

  h2 font[size="7"] {
    font-size: clamp(32px, 4.6vw, 44px) !important;
  }
}


/* ==========================================================================
   三、桌機與平板共通的行高修正（≥ 768px）

   頁面行內樣式有：
     #wsite-content h2 { font-size:30px !important; line-height:21px !important }
   行高 21px 小於字級 30px。若該標題內含 <font size="7">（48px），
   換行時上下兩行會直接重疊。

   目前桌機 1366px 下標題多為單行所以看不出來，但視窗一縮就會出現。

   權重：行內用的是 #wsite-content h2 (1,0,1)，含 ID，
        必須用同樣的選擇器才壓得過。
   ========================================================================== */

@media screen and (min-width: 768px) {

  #wsite-content h2,
  #wsite-content .wsite-content-title {
    line-height: 1.4 !important;
  }

  #wsite-content h2,
  .wsite-content-title,
  .wsite-headline {
    line-break: strict;
    text-wrap: balance;
  }
}