/*!
 * sticky-fix.css — 修復 Content/js/main.js 裡尚未實作的 scrollToFixed 固定捲動效果，
 * 改用原生 CSS position:sticky 實作（不使用任何 jQuery 外掛，也不用 JS 手動計算 scroll 位置）。
 *
 * 原始 jQuery 邏輯（Content/js/main.js 第131~151行、第391~411行，兩處幾乎重複）：
 *
 *   // 右側選單 scroll to fixed 大於1024時才執行 且 DOM 存在時
 *   if ($(window).width() >= 1024 && $('.editor-article-box').length > 0) {
 *     var scrollToright = $('.col-md-4')
 *     var limitHeight = $('.col-md-4.col-lg-4 .profile .btnBlue').outerHeight(true) +
 *       $('.col-md-4.col-lg-4 .card').outerHeight(true) +
 *       $('.col-md-4.col-lg-4 .icon-up.btn').outerHeight(true)
 *     scrollToright.scrollToFixed({
 *       marginTop: $('header').outerHeight(true),
 *       limit: $('footer').offset().top - limitHeight - 30,
 *       zIndex: 999,
 *     })
 *   }
 *   // 上方選單 scroll to fixed
 *   $('header').scrollToFixed({ marginTop: 0 })
 *
 * 本檔案只加規則、不修改 assets/css/main.css（原檔複製、不重寫樣式的既定原則）。
 * 這支 CSS 被全站 9 支 html 頁面引用（header 固定捲動是全站行為），但「右側選單固定捲動」
 * 的規則只在 home-article.html 有對應的 DOM 結構（.editor-article-box / .sticky-sidebar），
 * 其餘頁面即使載入這支 CSS 也不會有任何畫面變化。
 */


:root {
  --header-height: 72px; /* fallback，assets/js/site.js 的 initHeaderHeightVar() 會在頁面載入後立即覆寫成實際量到的 header.offsetHeight */
}


html {
  overflow-x: visible;
}

/* ============================================================
   3. header 固定捲動（對應原 $('header').scrollToFixed({ marginTop: 0 })）
   ============================================================
   原始邏輯是全站無條件套用、不分斷點，黏在視窗最上方。這裡比照辦理，不用 media query 包住，
   行動版/平板/桌機都要生效。

   z-index 選 1000：
     - 需要蓋在一般內容之上，也需要蓋在下面第 4 節的右側選單 sticky（z-index:999，直接沿用
       原本 scrollToFixed 的 zIndex:999 設定）之上，避免右側選單捲到頂端時蓋住 header。
     - 但要遠低於 main.css 既有的彈窗/下拉選單慣例（.modaal-wrapper:99999、
       .modaal-overlay 與 .selectric-open:9999），確認過不會蓋住彈窗或下拉選單開啟時的內容。
   ============================================================ */
header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* ============================================================
   4. 右側選單固定捲動（對應原 scrollToright.scrollToFixed({marginTop, limit, zIndex:999})）
   ============================================================
   原始條件：$(window).width() >= 1024 且 $('.editor-article-box').length > 0 才執行，
   也就是只有桌機寬度、且頁面上真的有 .editor-article-box（也就是 home-article.html）才生效。
   這裡用 @media (min-width:1024px) 對應斷點判斷，選擇器則 scope 到 home-article.html
   才有的 DOM 結構（.container.article > .row > .col-md-4.col-lg-4 > .sticky-sidebar），
   自然只有這個頁面會命中，不需要額外判斷 .editor-article-box 存不存在。

   對照關係：
     - marginTop: $('header').outerHeight(true) → top: var(--header-height)
       （見第 1 節說明，數值由 JS 動態量測寫入，不寫死 px）。
     - limit: $('footer').offset().top - limitHeight - 30
       （原本要動態算出「捲到距離 footer 還有 limitHeight+30px 時就停止固定、開始跟著頁面
       往下滑走」，避免蓋到 footer）→ 完全不需要 JS 算任何高度：
         1) 幫「文章頁專屬」的 .container.article > .row 加 align-items:stretch
            （main.css 的 .row 預設是 align-items:flex-start，只有
            .index-channel .card-channel .row 這種特定情境才有 stretch；這裡刻意 scope 在
            .container.article > .row，只影響文章頁這一個 row，不會波及全站其他用到
            .row 的地方），讓右側欄容器 .col-md-4.col-lg-4 的高度被撐到跟左側文章欄
            （.col-md-8.col-lg-8）一樣高（兩者是同一個 flex row 裡的 flex item，
            stretch 後兩個 item 的 computed height 完全一致）。
         2) 把 position:sticky 套在右側欄「內部的實際內容包裝層」——也就是
            home-article.html 新增的 .sticky-sidebar（包住原本兩個各自獨立的
            .right-profile.project 與 .right-project，讓 profile 卡片跟方案文章列表整體
            當成一個 sticky 區塊一起黏貼/一起放開，效果對應原始 scrollToright 是整個
            $('.col-md-4') 一起 fixed，不是只固定其中一小塊）。
         3) sticky 元素的「containing block」是它的父層 .col-md-4.col-lg-4
            （已經被步驟1的 align-items:stretch 撐到跟左側文章欄一樣高），瀏覽器會自動
            在「.sticky-sidebar 的底部即將超出 .col-md-4.col-lg-4 底部」的那一刻讓它自然
            停止黏貼、跟著頁面正常往下捲動，視覺效果等同原本 JS 算出來的 limit
            （在快到 footer 前停止固定），但完全交給瀏覽器排版引擎精算，不用手動算任何高度。
     - zIndex: 999 → 直接沿用同一個數值。
   ============================================================ */
@media (min-width: 1024px) {
  .container.article > .row {
    align-items: stretch;
  }

  .container.article > .row > .col-md-4.col-lg-4 > .sticky-sidebar {
    position: sticky;
    top: var(--header-height);
    z-index: 999;
  }
}

/* ------------------------------------------------------------
   sub-pixel rounding 容錯說明（判斷結果：這裡不需要加，原因如下）
   ------------------------------------------------------------
   已知的瀏覽器 bug：某些情況下用 height:100% 或 calc() 沿著多層巢狀容器手動往下傳遞百分比高度時，
   浮點數捨入誤差會讓子層算出來的高度跟父層「差一點點」（通常差不到 1px），造成 sticky 元素明明
   父層有算出高度、卻因為這一點點誤差提早解除黏貼或完全黏不住。

   本頁 .col-md-4.col-lg-4 的高度完全交給瀏覽器 flexbox 排版引擎透過 align-items:stretch
   自動撐高到跟同一個 .row 裡的另一個 flex item（.col-md-8.col-lg-8，左側文章欄）「精確一致」，
   整個過程中沒有經過任何我方手動寫的 height:百分比 或 calc() 換算——flex stretch
   是瀏覽器排版引擎在同一次 layout pass 內直接算出兩個 flex item 的最終 box 高度，
   不是「父層先產生一個百分比數值、子層再拿百分比去乘」這種容易有捨入誤差的鏈式計算，
   理論上不會遇到上述的 sub-pixel 落差問題，因此這裡刻意不加 calc(100% + 1px) 容錯。

   若日後在特定瀏覽器版本實測發現右側選單黏貼會提早解除（捲到底部前一兩 px 就放開），
   再把下面這行取消註解，在 .col-md-4.col-lg-4 上疊加 1px 高度作為保險：

   .container.article > .row > .col-md-4.col-lg-4 { height: calc(100% + 1px); }
*/