/* =====================================================================
   CMS 追加元件樣式
   只新增原網站沒有的元件（分頁／表格篩選／表單提示／404／頁尾署名），
   不覆寫 main.css 任何既有樣式，確保原設計 100% 不變。
   ===================================================================== */

/* ── 分頁 ────────────────────────────────────────────────────────── */
.pagination { margin: 2.5rem 0 1rem; text-align: center; }
.pagination__list {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .4rem; list-style: none; margin: 0; padding: 0;
}
.pagination__link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 .85rem;
  border: 1px solid #e4ddd2; border-radius: 6px;
  background: #fff; color: #6b5942; font-size: .92rem;
  text-decoration: none; transition: all .18s ease;
}
.pagination__link:hover { border-color: #8b6e4e; color: #8b6e4e; background: #fdfbf8; }
.pagination__link.is-current { background: #8b6e4e; border-color: #8b6e4e; color: #fff; font-weight: 600; }
.pagination__gap { display: inline-block; padding: 0 .35rem; color: #b3a794; line-height: 40px; }
.pagination__info { margin-top: .85rem; font-size: .85rem; color: #8d8175; }

/* ── Blog 分類篩選 ───────────────────────────────────────────────── */
.bl-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.75rem; }
.bl-filter__btn {
  display: inline-block; padding: .45rem 1rem;
  border: 1px solid #e4ddd2; border-radius: 99px;
  background: #fff; color: #6b5942; font-size: .88rem;
  text-decoration: none; transition: all .18s ease;
}
.bl-filter__btn:hover { border-color: #8b6e4e; color: #8b6e4e; }
.bl-filter__btn.is-active { background: #8b6e4e; border-color: #8b6e4e; color: #fff; }
.bl-empty { padding: 2rem; text-align: center; color: #8d8175; }

/* ── 文章卡片 ────────────────────────────────────────────────────── */
.post-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; margin-top: 1.5rem; }
.post-card { position: relative; background: #fff; border: 1px solid #ece6dd; border-radius: 8px; padding: 1.4rem 1.25rem; }
.post-card h3 { font-size: 1rem; line-height: 1.6; margin: 0 0 .55rem; }
.post-card h3 a { color: #2c2c2c; text-decoration: none; }
.post-card h3 a:hover { color: #8b6e4e; }
.post-card p { font-size: .88rem; line-height: 1.8; color: #6c6357; margin: 0; }
.post-card time { display: block; margin-top: .7rem; font-size: .8rem; color: #a89c8c; }
.post-card__tag {
  position: absolute; top: -9px; right: 14px;
  background: #8b6e4e; color: #fff; font-size: .7rem;
  padding: .18rem .6rem; border-radius: 99px; letter-spacing: .04em;
}
.related-posts { padding: 3.5rem 0; }
.related-posts h2 { font-size: 1.4rem; margin-bottom: .5rem; }

/* ── 查詢表格提示 ────────────────────────────────────────────────── */
.ct-notice { border-radius: 8px; padding: 1.1rem 1.3rem; margin: 0 0 1.5rem; font-size: .95rem; line-height: 1.8; }
.ct-notice p { margin: 0 0 .5rem; }
.ct-notice p:last-child { margin-bottom: 0; }
.ct-notice--ok { background: #eef8f0; border: 1px solid #cfe8d5; color: #256b3c; }
.ct-notice--err { background: #fdf1f1; border: 1px solid #f0d2d2; color: #9c2c2c; }
.ct-hp { position: absolute !important; left: -9999px !important; height: 0 !important; overflow: hidden !important; }

/* ── 404 ────────────────────────────────────────────────────────── */
.err-hero { text-align: center; }
.err-code { font-family: "Playfair Display", Georgia, serif; font-size: 4.5rem; line-height: 1; color: #8b6e4e; margin: 0 0 .5rem; }
.err-lead { max-width: 620px; margin: .75rem auto 0; color: #6c6357; line-height: 1.9; }
.err-links { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; padding: 0; margin: 1rem 0 2.5rem; }
.err-links a {
  display: inline-block; padding: .5rem 1.1rem; border: 1px solid #e4ddd2;
  border-radius: 99px; color: #6b5942; text-decoration: none; font-size: .9rem;
}
.err-links a:hover { border-color: #8b6e4e; color: #8b6e4e; }
.err-cta { margin-top: 1.5rem; }

/* ── 頁尾署名 ──────────────────────────────────────────────────────
   頁尾是淺色背景，故採用低調的深色系；字級較正文小一級。      */
.site-footer .footer-bottom .footer-credit {
  margin-top: .7rem;
  font-size: .72rem;
  letter-spacing: .05em;
  line-height: 1.8;
  color: var(--color-muted, #6B6568);
  opacity: .72;
  transition: opacity .25s ease;
}
/* 各頁專用 CSS 的整頁連結規則權重極高（最長達 6 個 class），
   署名一律以 !important 固定顏色，確保每頁一致。 */
.site-footer .footer-bottom .footer-credit a[href] {
  color: var(--color-muted, #6B6568) !important;
  font-weight: 500;
  opacity: 1;
  transition: color .25s ease;
}
.site-footer .footer-bottom .footer-credit:hover { opacity: 1; }
.site-footer .footer-bottom .footer-credit a[href]:hover { color: var(--secondary, #D8B36A) !important; }
.footer-credit__by { margin: 0 .2rem; opacity: .8; font-weight: 400; }

/* ── 麵包屑（若頁面未自帶） ──────────────────────────────────────── */
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0; font-size: .85rem; }
.breadcrumb li + li::before { content: "›"; margin-right: .4rem; color: #b3a794; }
.breadcrumb a { color: #8b6e4e; text-decoration: none; }

/* ── 內容顯示安全網 ────────────────────────────────────────────────
   捲動淡入效果（.reveal）在 JS 未執行時會令內容永久停留在 opacity:0。
   以下規則確保：只要 JS 未標記可用，內容一律正常顯示。
   （specificity 高於 home.css 的 .reveal，故可覆寫）                */
html:not(.js-on) .reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* ── 全站連結樣式統一 ──────────────────────────────────────────────
   舊版每頁各自有一條「整頁連結加底線」的規則（.about-page a、
   .price-page a、.pa-page a 等），令不同頁面外觀不一致。
   這裡統一取消底線，只以顏色區分連結，hover 時仍有顏色變化作提示。
   使用 !important 是因為那些規則寫在各頁的 <style> 內，
   選擇器權重高且排在本檔之後。                                  */
a,
a:link,
a:visited,
a:hover,
a:focus,
a:active {
  text-decoration: none !important;
}

/* ── 頁尾在所有頁面保持一致 ────────────────────────────────────────
   部分頁面的專用 CSS（例如 .pa-page p）權重高於 main.css 的頁尾
   規則，會連頁尾段落一併改掉。這裡以較高權重重申原本的樣式。   */
.site-footer .footer-grid p,
.site-footer .footer-brand p {
  font-size: .9rem;
  line-height: 1.9;
  color: var(--color-muted, #6B6568);
}
.site-footer .footer-grid .footer-service-area {
  font-size: .8rem;
  font-weight: 500;
  color: var(--color-muted, #6B6568);
}
.site-footer .footer-bottom p {
  font-size: .8rem;
  line-height: 1.9;
  color: var(--color-muted, #6B6568);
  margin: 0;
}
.site-footer .footer-grid li,
.site-footer .footer-grid a {
  font-size: .9rem;
  line-height: 1.9;
}

/* =====================================================================
   手機版版面修正
   舊版樣式有兩處會在窄螢幕撐爆版面，這裡以較高權重修正。
   ===================================================================== */

/* 1. 首頁區塊標題的「出血」邊距計算錯誤
      原式：margin: 0 calc(-1 * min(1rem, 50vw - 600px))
      在 375px 螢幕下 50vw - 600px = -412px，min() 會選中它，
      負負得正令左右邊距變成 +412px，把標題推出畫面外。
      正確做法是先用 max(0px, …) 夾住下限。                        */
main .home-heading.title-section {
  margin-left: calc(-1 * max(0px, min(1rem, 50vw - 600px)));
  margin-right: calc(-1 * max(0px, min(1rem, 50vw - 600px)));
  max-width: 100vw;
}

/* 2. 可橫向捲動的表格容器若身處 grid / flex 之內，
      必須加 min-width:0，否則子項的最小內容寬度會撐大整個欄位，
      令 overflow-x:auto 形同虛設。                                */
[class*="table-wrap"],
[class*="table-scroll"],
.price-package > *,
.fleet-package > *,
.ct-grid > *,
.bl-grid > * {
  min-width: 0;
}

[class*="table-wrap"] {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 3. 響應式基本防護：媒體與程式碼區塊不得超出容器 */
main img,
main video,
main iframe,
main canvas,
main svg:not([class*="icon"]) {
  max-width: 100%;
}
main pre {
  max-width: 100%;
  overflow-x: auto;
}

/* 4. 右下角 WhatsApp 浮動按鈕避開手機版底部固定 CTA 列
      （原本兩者重疊，浮動按鈕會遮住「立即致電」）
      CTA 列高度會因螢幕闊度而變（按鈕換行），故由 footer 的
      小段程式實測後寫入 --cfl-cta-h，這裡再據此上移。          */
.whatsapp-float {
  bottom: calc(1.5rem + var(--cfl-cta-h, 0px));
}

/* 5. 底部固定列本身要避開瀏覽器安全區（iPhone 底部橫條） */
[class*="mobile-cta"] {
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
}