/* ==========================================================================
   FAQ 頁樣式
   --------------------------------------------------------------------------
   全檔的 .cf-site .fq-page 前綴改成 .page-faq .fq-page。

   .fq-page 保留不動 —— 它掛在 main 上，是設計代幣（CSS 變數）的掛載點，
   轉檔後仍然存在。

   .page-faq 由 functions.php 的 body_class 掛在 body 上。
   ========================================================================== */

@charset "UTF-8";

/* ==========================================================================
   style.css —— FAQ
   規格來源：使用者 2026-09-22 從線上實測的「Coolify 網站切版規格」＋ 2026-09-23 的設計稿
   --------------------------------------------------------------------------
   ★★ 這一頁走 WordPress 子主題那一套（跟 Desktop/About us/ 同一套），
      不是 Solution／Te-HoloOrb 那種「自帶完整 CSS 的獨立頁」，別套錯：

      - 只寫這一頁專屬的樣式
      - 不寫 :root、不寫 reset、不重新定義 .container / .btn（主題已經有了）
      - class 前綴用 fq-（ab- 是 About us、cs- 是 COOLIFY STUDIO，都不能沿用）
      - 斷點只有一個方向：@media (max-width: 900px)（桌機優先）

   ★ 每條選擇器都加 .page-faq .fq-page 兩層前綴：主題既有規則多半是
     「.cf-site + 一個 class」＝ 2 個 class，我們寫 3 個才穩穩蓋得過去。

   ★ 代幣一律寫成 var(--代幣, 備援值)。線上實測 --t-hero / --t-badge 根本不存在，
     直接寫 var(--t-hero) 會「安靜失效」、字級掉回預設，而且不會有錯誤訊息。

   --------------------------------------------------------------------------
   1. 這一頁的變數與共用小東西
   2. 區塊樣式
      2-1. INTRO
      2-2. ALL FAQs（標題 / 分類頁籤 / 手風琴）
   3. RWD（max-width: 900px）
   編號跟 index.html 的區塊註解對得上。
   ========================================================================== */


/* ==========================================================================
   1. 這一頁的變數與共用小東西

   變數掛在 .fq-page 上而不是 :root —— 規格明文不准寫 :root，
   掛在這裡也不會外漏去影響主題其他頁面。
   ========================================================================== */
.page-faq .fq-page {
  --fq-pad: clamp(64px, 8vw, 120px);   /* ← 區塊上下留白 */
  --fq-blue: #1a73e8;                  /* ← 小標和作用中頁籤的藍 */
  --fq-card-bg: #ebebeb;               /* ← 手風琴卡片底色（設計稿解析度低，先抓這個灰） */
  --fq-card-radius: 8px;               /* ← 卡片圓角 */
  --fq-item-gap: 12px;                 /* ← 題目和題目之間的距離 */
  --fq-anim: 0.25s ease;               /* ← 展開／收合的速度 */

  /* ＋／× 圖示。設計稿上這兩個是「粗」的，不是細線圖示：
     外框和線條量到是 1:3（＝3×3 格子去掉四個角）。改大小的話粗細要一起等比改。 */
  --fq-icon-size: 18px;                /* ← 圖示大小 */
  --fq-icon-weight: 6px;               /* ← 線條粗細（保持在大小的 1/3） */
}

/* 藍色小標。
   ★ max-width: none 不能省 —— 主題有一條 p { max-width: 70ch }（約 623px），
     小標是 <p> 就會吃到它。這一頁雖然是靠左不會看出來，但養成習慣，
     哪天改成置中就會中招（About us 那邊踩過）。 */
.page-faq .fq-page .fq-eyebrow {
  max-width: none;
  margin: 0 0 var(--space-2, 0.5rem);
  font-size: var(--t-small, 16px);
  font-weight: 700;
  color: var(--fq-blue);
}


/* ==========================================================================
   2. 區塊樣式
   ========================================================================== */

/* --------------------------------------------------------------------------
   2-1. INTRO —— 小標 ＋ 頁面大標
   -------------------------------------------------------------------------- */
.page-faq .fq-page .fq-intro {
  padding-block: var(--fq-pad) var(--space-6, 3rem);
}

/* ★ 設計稿解析度太低，字級是從「標題佔頁寬的比例」反推的（約 60px），
     這裡先用主題的 hero 級距。拿到放大圖再校正這一行。 */
.page-faq .fq-page .fq-intro__title {
  margin: 0;
  font-size: clamp(40px, 8vw, var(--t-hero, 80px));
  font-weight: 500;
  line-height: 1.15;
  color: var(--color-text, #222);
}

/* --------------------------------------------------------------------------
   2-2. ALL FAQs —— 標題 / 分類頁籤 / 手風琴
   -------------------------------------------------------------------------- */
.page-faq .fq-page .fq-list {
  padding-bottom: var(--fq-pad);
}

.page-faq .fq-page .fq-list__title {
  margin: 0 0 var(--space-4, 1.5rem);
  font-size: var(--t-sub, 24px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text, #222);
}

/* ---- 分類頁籤 ---- */
.page-faq .fq-page .fq-tabs {
  display: flex;
  gap: var(--space-5, 2rem);              /* ← 頁籤之間的距離 */
  margin-bottom: var(--space-5, 2rem);    /* ← 頁籤到第一題的距離 */
  overflow-x: auto;                       /* 塞不下時可以橫向滑，見第 3 節 */

  /* 底下那條灰線用 inset 陰影畫，不要用 border。
     ★ 用 border 的話，作用中頁籤的藍線要往下壓 1px 才不會跟灰線疊成 3px 厚，
       但那 1px 會造成「垂直」溢出 —— 而 overflow-x: auto 會連帶把 overflow-y
       也變成 auto，於是右邊就多長出一條根本不需要的捲軸。
     ★ 陰影是畫在父層背景上的，子層的 ::after 畫在它上面，所以藍線蓋得過去。 */
  box-shadow: inset 0 -1px 0 var(--color-border, #e0e0e0);
}

.page-faq .fq-page .fq-tabs__btn {
  position: relative;
  flex: none;                             /* 不要被擠扁，寧可橫向滑 */
  padding: 0 0 12px;                      /* ← 文字到底線的距離 */
  border: 0;
  background: none;
  font-size: var(--t-small, 16px);
  line-height: 1.4;
  color: var(--color-text-muted, #666);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease;
}

/* ★ 作用中只改顏色，不改字重。
     Arial 只有 400 和 700，切到 700 的話那顆頁籤會變寬，
     整排頁籤會跟著左右跳一下 —— 換頁籤時看起來像 bug。 */
.page-faq .fq-page .fq-tabs__btn[aria-pressed="true"] {
  color: var(--fq-blue);
}

/* 作用中的藍色底線。bottom: 0 就會蓋在上面那條 inset 灰線上，
   不會疊成 3px 厚，也不會凸出容器造成垂直溢出。 */
.page-faq .fq-page .fq-tabs__btn::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background-color: var(--fq-blue);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.page-faq .fq-page .fq-tabs__btn[aria-pressed="true"]::after {
  opacity: 1;
}

/* ---- 手風琴 ---- */
.page-faq .fq-page .fq-accordion {
  display: grid;
  gap: var(--fq-item-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-faq .fq-page .fq-item {
  border-radius: var(--fq-card-radius);
  background-color: var(--fq-card-bg);
  overflow: hidden;                       /* 展開的內容不會溢出圓角 */
}

/* 被分類篩掉的題目。<li hidden> 本來就是 display:none，
   這條是保險 —— 只要哪天給 .fq-item 設了 display，hidden 就會失效。 */
.page-faq .fq-page .fq-item[hidden] {
  display: none;
}

.page-faq .fq-page .fq-item__head {
  margin: 0;
  font-size: inherit;                     /* h3 的預設字級不要跑出來 */
}

/* 整條標題列就是按鈕（整條都可以點，不是只有文字）。 */
.page-faq .fq-page .fq-item__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4, 1.5rem);
  width: 100%;
  padding: var(--space-4, 1.5rem);        /* ← 卡片內距 */
  border: 0;
  background: none;
  color: var(--color-text, #222);
  text-align: left;
  cursor: pointer;
}

.page-faq .fq-page .fq-item__q {
  font-size: var(--t-body, 18px);
  font-weight: 700;
  line-height: 1.4;
}

/* ＋／× 圖示。用兩條 bar 畫成 ＋，展開時整個轉 45 度就變成 ×。
   ★ 不用外部 SVG 檔 —— file:// 預覽下載外部 SVG 會被當跨來源擋掉，而且是無聲失敗。
   ★ 粗細是照設計稿量的：外框 120、線條 40，剛好 1:3 ——
     等於一個 3×3 的格子去掉四個角，所以 --fq-icon-weight 要維持在大小的三分之一。
     兩個變數都改的話記得一起改，不然比例會走鐘。 */
.page-faq .fq-page .fq-item__icon {
  position: relative;
  flex: none;
  width: var(--fq-icon-size);
  height: var(--fq-icon-size);
  transition: transform var(--fq-anim);
}

.page-faq .fq-page .fq-item__icon::before,
.page-faq .fq-page .fq-item__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: var(--fq-icon-weight);
  background-color: currentColor;
  transform: translateY(-50%);
}

.page-faq .fq-page .fq-item__icon::after {
  transform: translateY(-50%) rotate(90deg);
}

.page-faq .fq-page .fq-item[data-open="true"] .fq-item__icon {
  transform: rotate(45deg);               /* ＋ → × */
}

/* 答案區的展開動畫。
   ★ 用 grid-template-rows 從 0fr 到 1fr，不是 max-height ——
     max-height 要自己填一個「猜的最大高度」，猜太大的話動畫會有一段空轉、
     看起來像延遲；猜太小則長的答案會被切掉。0fr→1fr 是瀏覽器自己算實際高度。
   ★ 裡面那層 .fq-item__inner 的 overflow: hidden 不能省，
     少了它收合時文字會整個露出來（格子高度是 0 但內容不會被裁）。 */
.page-faq .fq-page .fq-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--fq-anim);
}

.page-faq .fq-page .fq-item[data-open="true"] .fq-item__panel {
  grid-template-rows: 1fr;
}

/* ★ 這一層只負責「裁掉」，千萬不要在這裡加 padding。
   它是格線項目，收合時高度被設成 0，但 border-box 下 padding 仍然佔位子 ——
   結果就是收起來還留著一條莫名其妙的空白。padding 要加在裡面那層 __body。 */
.page-faq .fq-page .fq-item__inner {
  overflow: hidden;
}

.page-faq .fq-page .fq-item__body {
  padding: 0 var(--space-4, 1.5rem) var(--space-4, 1.5rem);   /* ← 答案的內距 */
}

/* 答案裡可能有好幾段、也可能有編號清單，所以間距用「相鄰才加」的寫法，
   第一個元素不會多出上緣空白、最後一個不會多出下緣空白。 */
.page-faq .fq-page .fq-item__body > * {
  margin: 0;
}

.page-faq .fq-page .fq-item__body > * + * {
  margin-top: var(--space-3, 1rem);      /* ← 段落之間的距離 */
}

.page-faq .fq-page .fq-item__body p,
.page-faq .fq-page .fq-item__body li {
  max-width: none;
  font-size: var(--t-small, 16px);
  line-height: 1.7;
  color: var(--color-text-muted, #666);
}

/* 編號清單。list-style 和 padding 都寫明 —— 主題可能有 ol 的 reset，
   不寫的話數字會不見或整段貼齊左邊。 */
.page-faq .fq-page .fq-item__body ol {
  padding-left: 1.6em;                   /* ← 數字到文字的距離 */
  list-style: decimal;
}

.page-faq .fq-page .fq-item__body li + li {
  margin-top: var(--space-1, 0.25rem);
}

.page-faq .fq-page .fq-item__body a {
  color: var(--fq-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 某個分類一題都沒有時才出現 */
.page-faq .fq-page .fq-list__empty {
  max-width: none;
  margin: var(--space-5, 2rem) 0 0;
  color: var(--color-text-muted, #666);
}

.page-faq .fq-page .fq-list__empty[hidden] {
  display: none;
}


/* ==========================================================================
   3. RWD —— 平板／手機（max-width: 900px）

   ★ 這一節必須放在檔案最後，這是技術限制不是慣例：media query 不會自動贏，
     被它覆蓋的規則一定要寫在它前面才蓋得掉。
   ========================================================================== */
@media (max-width: 900px) {

  /* 五個頁籤在手機上一定塞不下 → 改成橫向滑。
     ★ 左右各補 gutter 的負 margin ＋ 同樣的 padding，讓可以滑的範圍延伸到
       螢幕邊緣（不然滑到底時右邊會卡一段留白，看起來像滑不動）。 */
  .page-faq .fq-page .fq-tabs {
    gap: var(--space-4, 1.5rem);
    margin-inline: calc(var(--gutter, 3rem) * -1);
    padding-inline: var(--gutter, 3rem);
    scrollbar-width: none;                /* Firefox：不顯示捲軸 */
  }

  .page-faq .fq-page .fq-tabs::-webkit-scrollbar {
    display: none;                        /* Chrome / Safari */
  }

  .page-faq .fq-page .fq-item__toggle {
    gap: var(--space-3, 1rem);
    padding: var(--space-3, 1rem);
  }

  .page-faq .fq-page .fq-item__body {
    padding: 0 var(--space-3, 1rem) var(--space-3, 1rem);
  }
}

/* ---- 分類頁籤微調（2026-09-24 設計師）----
   1. 頁籤下方貫穿整排的灏線刪掉
   2. 文字色：選中 #484848、未選 #A6A6A6
   3. 選中指示線：改成 #32A1E6、加粗到 3px

   ※ 指示線是 ::after，靠 opacity 切換顯示（不是換顏色）。 */
.page-faq .fq-page .fq-tabs{
  /* 2026-09-24：那條貫穿整排的灏線不是 border，
     是 inset 的 box-shadow（#E0E0E0 0 -1px 0 inset），
     所以只刪 border-bottom 沒用，要一起清掉。 */
  border-bottom: 0;
  box-shadow: none;
}

.page-faq .fq-page .fq-tabs__btn{
  color: #A6A6A6;
  /* 2026-09-24 設計師：整排頁籤都加粗。
     ※ Arial 只有 400 與 700，這裡寫 700 才會真的變粗。 */
  font-weight: 700;
}

.page-faq .fq-page .fq-tabs__btn[aria-pressed="true"]{
  color: #484848;
}

.page-faq .fq-page .fq-tabs__btn::after{
  height: 3px;
  background-color: #BCE1FF;   /* 2026-09-24 更正：原本誤寫 #32A1E6 */
}

/* 小標 Support 改成 #32A1E6（2026-09-24 設計師） */
.page-faq .fq-page .fq-eyebrow{
  color: #32A1E6;
}