/* ============================================================
   basic-style token 已由 base.html 載入的 basic-style.css 提供
   此檔只包含本頁專屬樣式，請勿在此重複定義全站共用規則
   ============================================================ */

/* ── 標題微調 ───────────────────────────────────────────────── */
.set-h1 {
  color: var(--color-primary, #0c2340);
  font-weight: 700;
  margin-bottom: 2rem;
}

/* ── FAQ 卡片外框 (Option A: 獨立卡片手風琴) ─────────────────── */
.faq-card {
  background-color: var(--color-bg, #ffffff);
  border: 1px solid var(--color-border, #dce3ed);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(12, 35, 64, 0.04);
  margin-bottom: 1.25rem;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.faq-card:hover {
  border-color: rgba(29, 143, 224, 0.4);
  box-shadow: 0 4px 14px rgba(12, 35, 64, 0.07);
}

.faq-card.active {
  border-color: var(--color-accent, #1d8fe0);
  box-shadow: 0 6px 18px rgba(29, 143, 224, 0.1);
}

/* ── 問題列 ─────────────────────────────────────────────────── */
.set-faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  margin: 0;
  list-style: none;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s ease;
}

.set-faq-question:hover {
  background-color: rgba(29, 143, 224, 0.03);
}

.set-faq-question li:first-child {
  flex: 1;
  padding-right: 1.25rem;
}

.set-faq-question h4,
.set-faq-question .set-h4 {
  color: var(--color-primary, #0c2340);
  font-size: 1.25rem; /* 20px (調整自過大的 26px/1.625rem，更均衡適中) */
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  cursor: pointer;
  transition: color 0.2s ease;
}

/* 懸停與展開時切換為品牌深藍，徹底修復舊版反白隱形 Bug */
.set-faq-question:hover h4,
.set-faq-question:hover .set-h4,
.set-faq-question.active h4,
.set-faq-question.active .set-h4 {
  color: var(--color-accent-dark, #0d6fbb);
}

/* ── 展開按鈕與旋轉動畫 ─────────────────────────────────────── */
.set-faq-question .set-open {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  min-width: 32px;
}

.set-faq-question .set-open img {
  width: 28px;
  height: 28px;
  /* 官方企業亮藍 #1d8fe0 */
  filter: invert(54%) sepia(96%) saturate(2423%) hue-rotate(180deg) brightness(87%) contrast(101%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), filter 0.2s ease;
}

.set-faq-question:hover .set-open img {
  /* 懸停深化為企業深藍 #0d6fbb */
  filter: invert(36%) sepia(82%) saturate(2250%) hue-rotate(190deg) brightness(85%) contrast(98%);
}

/* 展開狀態：順時針平滑旋轉 45 度（「+」號變「×」號關閉） */
.set-faq-question.active .set-open img {
  transform: rotate(45deg);
  filter: invert(36%) sepia(82%) saturate(2250%) hue-rotate(190deg) brightness(85%) contrast(98%);
}

/* ── 回答區塊 ───────────────────────────────────────────────── */
.set-faq-answer {
  display: none;
  padding: 0 1.5rem 1.5rem 1.5rem;
  background-color: transparent;
}

.set-faq-answer p {
  color: var(--color-text, #0c2340);
  font-size: 1.125rem;
  line-height: 2rem;
  margin: 0;
  padding: 1.15rem 1.35rem;
  background-color: var(--color-bg-soft, #f8fafc);
  border-radius: 6px;
}

/* ── 專案既有斷點（僅 900px 與 600px） ──────────────────────── */
@media (max-width: 900px) {
  .set-padding-lr {
    padding: 0 1.5rem;
  }
}

@media (max-width: 600px) {
  .faq-card {
    border-radius: 6px;
    margin-bottom: 1rem;
  }

  .set-faq-question {
    padding: 1rem 1.15rem;
  }

  .set-faq-question h4,
  .set-faq-question .set-h4 {
    font-size: 1.25rem;
    line-height: 1.45;
  }

  .set-faq-question .set-open img {
    width: 24px;
    height: 24px;
    min-width: 24px;
  }

  .set-faq-answer {
    padding: 0 1.15rem 1.15rem 1.15rem;
  }

  .set-faq-answer p {
    font-size: 1rem;
    line-height: 1.8;
    padding: 0.9rem 1rem;
  }
}