/* ========================================
   常見問題（FAQ）分頁樣式
   來源：products-style-preview/src/styles.css 檔尾 .faq-* 定案區塊（2026-09-02 移植）
   規則：所有選擇器一律以 .faq-site 作範圍，不得影響其他頁面；數值照抄定案版本。
   說明：定案版的 var(--red) 在本站等值於 var(--hl-red)（同為 #B94316）。
   ======================================== */

/* ---- 抵消全站 style.css 既有的卡片式 .faq-list / .faq-item（舊 details 版） ---- */
.faq-site .faq-list {
    display: block;
    margin: 0;
    gap: 0;
}
.faq-site .faq-item {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    transition: none;
}

/* ---- 隱藏麵包屑列，讓 FAQ 區塊不捲動即可完整顯示（2026-09-02） ---- */
.faq-site .breadcrumb-nav { display: none; }

/* ---- 定案版面 ---- */
/* 麵包屑隱藏後失去 margin-top:var(--nav-h) 讓位效果，改由 faq-page 補上，避免內容被 fixed navbar 蓋住 */
.faq-site .faq-page { flex: 1; background: #f7f4ef; padding-top: var(--nav-h); }
.faq-site .faq-shell { width: min(100% - 48px, 1200px); margin-inline: auto; min-height: 560px; display: grid; grid-template-columns: 370px minmax(0, 1fr); gap: 74px; align-items: stretch; padding: 52px 24px 58px; }
.faq-site .faq-intro { min-height: 450px; display: grid; grid-template-columns: 68px minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: 0; padding: 22px 24px 20px 8px; color: #405669; }
.faq-site .faq-letters { grid-column: 1; grid-row: 1 / 3; align-self: start; display: grid; color: rgba(155,166,141,.22); font: 500 96px/.82 'Noto Serif TC', 'PMingLiU', serif; letter-spacing: 0; transform: translateY(-7px); user-select: none; }
.faq-site .faq-title-lockup { grid-column: 2; grid-row: 1; display: flex; align-items: flex-start; gap: 16px; padding-top: 8px; }
.faq-site .faq-title-lockup > span { flex: 0 0 6px; width: 6px; height: 98px; margin-top: 4px; background: #9ca98a; }
.faq-site .faq-title-lockup h1 { margin: 0; color: #405669; font: 400 46px/.98 'Noto Serif TC', 'PMingLiU', serif; letter-spacing: .08em; writing-mode: vertical-rl; transform: scaleX(.78) scaleY(1.06); transform-origin: top left; }
.faq-site .faq-tape-measure { grid-column: 2; grid-row: 2; align-self: center; justify-self: start; width: 188px; height: 124px; margin-left: 164px; object-fit: contain; opacity: .78; transform: translate(-18px, 20px); }
.faq-site .faq-intro p { grid-column: 1 / 3; grid-row: 3; margin: 24px 0 0; font: 500 15px/2 'Noto Serif TC', 'PMingLiU', serif; letter-spacing: .09em; }
.faq-site .faq-intro-lead { color: #8a6745; font-weight: 600; }
.faq-site .faq-intro-support { color: #647d87; font-weight: 500; }
.faq-site .faq-list { width: 100%; max-width: 880px; align-self: center; justify-self: end; min-width: 0; border-top: 1px solid #c9cec3; }
.faq-site .faq-item { border-bottom: 1px solid #c9cec3; }
.faq-site .faq-question { width: 100%; min-height: 78px; display: grid; grid-template-columns: 92px minmax(0, 1fr) 40px; align-items: center; gap: 24px; padding: 0 8px 0 16px; border: 0; background: transparent; color: #405669; text-align: left; cursor: pointer; transition: background-color .2s ease; }
.faq-site .faq-number { color: #748263; font: italic 500 50px/1 'Noto Serif TC', 'Times New Roman', serif; letter-spacing: .035em; transition: color .2s ease; }
.faq-site .faq-question-copy { color: #40596c; font: 600 21px/1.5 'Noto Serif TC', 'PMingLiU', serif; letter-spacing: .05em; }
.faq-site .faq-toggle { width: 36px; height: 36px; display: grid; place-items: center; color: #7f8c78; transition: color .2s ease, transform .2s ease; }
.faq-site .faq-question:hover { background: rgba(205,208,190,.16); }
.faq-site .faq-question:hover .faq-number, .faq-site .faq-question:hover .faq-toggle, .faq-site .faq-question:focus-visible .faq-toggle { color: var(--hl-red); }
.faq-site .faq-question:focus-visible { outline: 2px solid rgba(185,67,22,.45); outline-offset: -2px; }
.faq-site .faq-item.is-open .faq-number { color: var(--hl-red); }
.faq-site .faq-answer-wrap { margin: 0 8px 16px 132px; background: rgba(205,208,190,.58); box-shadow: inset 4px 0 0 rgba(156,169,138,.8); }
.faq-site .faq-answer-wrap p { margin: 0; padding: 21px 28px 22px; color: #576b68; font: 400 14.5px/1.9 'Noto Sans TC', 'Microsoft JhengHei', sans-serif; letter-spacing: .035em; }

/* 定案原稿的答案為純文字；正式站六題含連結與 <strong>，僅補這兩者的最小樣式 */
.faq-site .faq-answer-wrap a { color: var(--hl-red); text-decoration: underline; text-underline-offset: 3px; }
.faq-site .faq-answer-wrap a:hover { color: var(--hl-red-dark); }
.faq-site .faq-answer-wrap strong { color: #40596c; font-weight: 700; }

/* 加減號圖示（Phosphor regular，原稿以 React 元件切換，這裡改用 CSS 切換） */
.faq-site .faq-ico-minus { display: none; }
.faq-site .faq-item.is-open .faq-ico-plus { display: none; }
.faq-site .faq-item.is-open .faq-ico-minus { display: block; }

/* ---- FAQ 內容與頁尾之間的白砂銜接帶（二版定案，完全靜態、無動畫） ----
   本頁以白砂圖覆蓋全站 style.css 的 .footer::before 紅色漸層細線（其他頁面維持原樣）。
   圖高 72px、top:-58px：上方 58px 露在內容底部留白，下方 14px 被 .footer-top 蓋住，
   使下緣自然融入頁尾暖米白。footer 需 overflow:visible 才不會裁掉溢出的白砂。 */
.faq-site .footer {
    overflow: visible;
    isolation: isolate;
}
.faq-site .footer::before {
    content: '';
    position: absolute;
    z-index: 1;
    top: -58px;
    left: 0;
    right: auto;
    width: 100%;
    height: 112px;
    background: url('/images/faq/faq-sand-wave-static-v3.png') center bottom / 100% 100% no-repeat;
    pointer-events: none;
}
.faq-site .footer-top,
.faq-site .footer-bottom { position: relative; z-index: 3; }
.faq-site .footer-top { padding-top: 10px; }

@media (max-width: 900px) {
  .faq-site .faq-shell { width: min(100% - 36px, 760px); min-height: 0; grid-template-columns: 230px minmax(0, 1fr); gap: 42px; padding: 40px 0 46px; }
  .faq-site .faq-intro { min-height: 400px; grid-template-columns: 58px minmax(0, 1fr); column-gap: 0; padding-inline: 4px 12px; }
  .faq-site .faq-list { max-width: none; }
  .faq-site .faq-letters { font-size: 70px; transform: translateY(-5px); }
  .faq-site .faq-title-lockup h1 { font-size: 34px; }
  .faq-site .faq-title-lockup > span { height: 82px; }
  .faq-site .faq-tape-measure { width: 145px; height: 98px; margin-left: 39px; transform: translate(-18px, 14px); }
  .faq-site .faq-question { min-height: 68px; grid-template-columns: 68px minmax(0, 1fr) 30px; gap: 14px; padding-left: 9px; }
  .faq-site .faq-number { font-size: 32px; }
  .faq-site .faq-question-copy { font-size: 16px; letter-spacing: .035em; }
  .faq-site .faq-answer-wrap { margin-left: 91px; }
}

@media (max-width: 640px) {
  .faq-site .faq-shell { width: min(100% - 28px, 600px); display: block; padding: 28px 0 38px; }
  .faq-site .faq-intro { min-height: 0; grid-template-columns: minmax(0, 1fr) 118px; grid-template-rows: auto auto auto; column-gap: 10px; margin-bottom: 22px; padding: 8px 4px 24px; border: 0; }
  .faq-site .faq-letters { grid-column: 1; grid-row: 1; grid-auto-flow: column; justify-content: start; align-self: start; gap: 2px; padding-top: 0; font-size: 50px; line-height: 1; transform: none; }
  .faq-site .faq-title-lockup { grid-column: 1; grid-row: 2; align-items: center; gap: 12px; padding-top: 4px; }
  .faq-site .faq-title-lockup > span { flex: 0 0 54px; width: 54px; height: 7px; margin: 0; }
  .faq-site .faq-title-lockup h1 { font-size: 30px; letter-spacing: .08em; writing-mode: horizontal-tb; white-space: nowrap; transform: scaleX(.82) scaleY(1.04); }
  .faq-site .faq-tape-measure { grid-column: 2; grid-row: 1 / 3; align-self: center; justify-self: end; width: 116px; height: 82px; margin-left: 0; transform: translateX(-12px); }
  .faq-site .faq-intro p { grid-column: 1 / 3; grid-row: 3; margin: 24px 0 0; font-size: 12.5px; }
  .faq-site .faq-question { min-height: 72px; grid-template-columns: 54px minmax(0, 1fr) 28px; gap: 12px; padding-inline: 4px 0; }
  .faq-site .faq-number { font-size: 31px; }
  .faq-site .faq-question-copy { font-size: 15px; line-height: 1.6; letter-spacing: .025em; }
  .faq-site .faq-item:nth-child(5) .faq-question-copy { font-size: 14px; letter-spacing: 0; white-space: nowrap; }
  .faq-site .faq-answer-wrap { margin: 0 0 10px 0; }
  .faq-site .faq-answer-wrap p { padding: 17px 19px 18px; font-size: 13.5px; }
  .faq-site .footer::before { top: -38px; height: 80px; background-size: auto 100%; }
  .faq-site .footer-top { padding-top: 8px; }
}

@media (max-width: 360px) {
  .faq-site .faq-item:nth-child(5) .faq-question-copy { white-space: normal; }
}