/* FAQ 頁「金漆濃」重排 — 長輩查證頁：可讀性至上、一屏一事、首屏答題。
   契約面不動：#faq-list/#faq-category-btns/#faqSearch/#faq-ask-* 與
   .faq-item-card/.faq-q/.faq-a（faq.js、faq-ask.js、tests 依賴）。
   規範：色彩 token-only（棘輪 0 硬編）、字級 rem-only（放大鈕）、
   動畫掛 html.js 閘＋prefers-reduced-motion 全退。 */

/* 面板外觀＝components.css .page-panel 共用配方；本頁只給差異值（寬＋內距，零外觀變更）。 */
.faq-page {
    --page-panel-max: 860px;
    --page-panel-pad: clamp(3rem, 7vw, 4.5rem) 20px clamp(3.5rem, 8vw, 5.5rem);
}

/* — 頁首：儀式大標（桌機升階到 clamp(2.5rem,4vw,3.25rem)；≤768 維持
     style.css 既有降階，避免手機撐爆）＋一句白話 lede — */
.faq-page__head {
    text-align: center;
    margin-bottom: clamp(2.25rem, 5vw, 3.25rem);
}
/* .faq-kicker 外觀＝components.css .page-kicker 共用配方（金色小字＋寬字距）。 */
.faq-page__head .section-title {
    margin-bottom: 14px;
    color: var(--ink-site);
    font-size: 2rem;
    line-height: 1.3;
}
.faq-page__head .section-title::before,
.faq-page__head .section-title::after { content: none; }
@media (min-width: 769px) {
    .faq-page__head .section-title { font-size: 2.4rem; }
}
.faq-lede {
    margin: 0 auto;
    max-width: 30em;
    font-size: 1.125rem;
    line-height: 1.9;
    color: var(--ink-soft);
    text-wrap: pretty;
}

/* — 首屏答題帶：三題一板（神明廳供桌感的單一暖白面板，不做三張同款卡）。
     題目＝字金（--gold-rich 過 AA）、答案＝墨字 1.125rem/1.9。 — */
.faq-top {
    margin: 0 auto clamp(3rem, 7vw, 4.5rem);
    padding: clamp(1.5rem, 4vw, 2.4rem) clamp(1.25rem, 4vw, 2.75rem);
    background: var(--cream);
    border: 1px solid var(--gold-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.faq-top__list {
    margin: 0;
}
.faq-top__item {
    padding: 1.15rem 0;
}
.faq-top__item:first-child {
    padding-top: 0;
}
.faq-top__item + .faq-top__item {
    border-top: 1px solid var(--gold-border);
}
.faq-top__q {
    margin: 0 0 0.35em;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.04em;
    color: var(--gold-rich);
    text-wrap: balance;
}
.faq-top__a {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.9;
    color: var(--ink);
}
.faq-top__map {
    display: inline-block;
    padding: 10px 0;    /* 觸控高度含行高 ≥44px */
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--gold);
    text-underline-offset: 5px;
}
.faq-top__map:hover,
.faq-top__map:focus-visible {
    color: var(--gold-rich);
    text-decoration-color: var(--gold-rich);
}
.faq-top__mapmark {
    color: var(--gold-rich);
}
/* LINE 主 CTA 版位（T5 綠金規則）：外觀＝components.css .btn-line 單一真相（綠底白字）。
   ⚠️ 本 class 只准放版位——頁面 CSS 在 components.css 之後載入，同權重會蓋掉綠底。
   display/width/margin 三行是置中機制（inline-flex 吃不到 margin auto），不可刪。 */
.faq-top__line {
    display: flex;
    width: fit-content;
    margin: 1.5rem auto 0;
}

/* — 查其他問題：搜尋（或問答機器人）＋分類 pill — */
.faq-find {
    text-align: center;
    margin-bottom: clamp(2rem, 5vw, 2.75rem);
}
.faq-find__title {
    margin: 0 0 1.1rem;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--ink);
}
.faq-search {
    margin-bottom: 20px;
}
.faq-search__input {
    width: 100%;
    max-width: 560px;
    min-height: 48px;    /* 觸控/點按目標 ≥44px */
    padding: 10px 22px;
    border: 2px solid var(--c-e6ba67);
    border-radius: var(--radius-50);
    font-size: 1.125rem;
    color: var(--ink);
    outline: none;
    background-color: var(--c-white-a80);
}
.faq-search__input:focus-visible {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-glow);
}
.faq-search__input::placeholder {
    color: var(--ink-soft);    /* 老花可讀：placeholder 也過 AA */
}

/* 版面留白；排列與 pill 樣式由 theme.css .filter-pills／.filter-pill 統一提供（R5-5）。
   此處僅做頁內長輩加強：觸控 ≥44px＋字級升到 1rem＋未選中字色過 AA。 */
.faq-categories {
    margin-bottom: clamp(2rem, 5vw, 2.75rem);
}
.faq-categories .filter-pill {
    min-height: 44px;
    padding: 10px 22px;
    font-size: 1rem;
    color: var(--gold-rich);
}
.faq-categories .filter-pill.is-active {
    color: var(--white);
}

.faq-all {
    margin: 0 0 18px;
    text-align: center;
}
.faq-list-title {
    margin: 0 0 6px;
    color: var(--gold-rich);
    font-size: 1.35rem;
}
.faq-result-summary {
    margin: 0;
    color: var(--ink-site);
}

/* 空清單（DB 讀不到資料）：SSR 直接出這句，不再有「載入中…」這個狀態（P1-13）。 */
.faq-empty {
    text-align: center;
    padding: 2rem 0;
    font-size: 1.05rem;
    color: var(--ink-soft);
}

/* --- FAQ 問答機器人（flag: faq_bot）：頁頂問答框＋命中卡片＋「沒找到？」區塊 --- */

/* hidden 屬性防禦：.btn 等元件的 display 規則會蓋掉 UA 的 [hidden]{display:none}（實測 2026-07-13） */
.faq-ask [hidden] {
    display: none !important;
}

.faq-ask__form {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 10px;
    flex-wrap: wrap;
}

.faq-ask__form .faq-search__input {
    flex: 1 1 300px;
    max-width: 560px;
}

.faq-ask__submit {
    white-space: nowrap;
    min-height: 48px;
    font-size: 1.05rem;
}

.faq-ask__results {
    max-width: 720px;
    margin: 18px auto 0;
    text-align: left;
}

/* 命中卡：金線點亮（style.css 舊層以 !important 鎖 border-color，此處等權反制） */
.faq-ask__card {
    border-color: var(--gold) !important;
}

.faq-ask__miss {
    max-width: 720px;
    margin: 14px auto 0;
    padding: 1.25rem 1.5rem;
    border: 1px dashed var(--gold-border);
    border-radius: var(--radius-sm);
    background: var(--c-white-a70);
}

.faq-ask__miss-title {
    font-weight: bold;
    font-size: 1.125rem;
    color: var(--c-574634);
    margin-bottom: 8px;
}

.faq-ask__fallback,
.faq-ask__dm-done {
    color: var(--c-574634);
    font-size: 1.05rem;
    line-height: 1.9;
}

/* — 問答卡（/faq 清單＝SSR <details>；faq-ask.js 命中卡仍動態生成；class 契約面）——
     去 glassmorphism（PRODUCT 反參考）：實底暖白紙面；
     去 word-break: break-all（style.css 舊層會把中文詞拆爛）。 — */
.faq-item-card {
    background: var(--surface-panel);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--gold-border);
    padding: clamp(1.4rem, 3.5vw, 1.9rem) clamp(1.25rem, 3.5vw, 2rem);
    margin-bottom: 1.1rem;
    border-radius: var(--radius-md);
    word-break: normal;
    overflow-wrap: anywhere;
}
/* 問題＝標題級（老花第一眼掃得到）；字金 --gold-rich 過 AA（--gold 3:1 掛 AA，禁用） */
.faq-item-card .faq-q {
    margin: 0 0 0.5em;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.04em;
    color: var(--gold-rich);
}
.faq-item-card .faq-a {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.95;
    color: var(--c-574634);
    white-space: pre-line;
}

/* — 摺疊（P1-13：28 題預設收合，不一次攤成長頁）——
     <details class="faq-item-card"><summary class="faq-q">：卡片外觀沿用上面的規則，
     這裡只補「可點開」需要的部分。JS 沒載入也能點開＝瀏覽器原生行為。 — */
.faq-item-card[open] {
    border-color: var(--gold);   /* 開著的那題：金線點亮，掃視時找得回來 */
}
.faq-item-card > .faq-q {
    display: flex;
    align-items: baseline;
    gap: 0.6em;
    min-height: 44px;            /* 觸控目標（長輩手指） */
    cursor: pointer;
    list-style: none;            /* 預設三角換成下方自繪箭頭 */
    text-wrap: pretty;
}
.faq-item-card > .faq-q::-webkit-details-marker {
    display: none;               /* Safari 仍認舊的 -webkit- marker */
}
/* 摺疊指示：金色 ▸，開啟時轉 90°。放 ::after 靠右，不擠壓題目文字。 */
.faq-item-card > .faq-q::after {
    content: "\203A";            /* › */
    margin-left: auto;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--gold-rich);
    transform: rotate(90deg);
    transform-origin: center;
    transition: transform 0.2s var(--ease-out);
}
.faq-item-card[open] > .faq-q::after {
    transform: rotate(-90deg);
}
.faq-item-card > .faq-q:focus-visible {
    outline: 2px solid var(--gold-rich);
    outline-offset: 4px;
}
.faq-item-card[open] > .faq-a {
    margin-top: 0.5em;           /* 展開後題與答之間的呼吸（收合時不佔高度） */
}
/* 篩選隱藏（JS 設 el.hidden）：實查 faq.css／style.css 目前都沒對 .faq-item-card 宣告
   display，UA 的 [hidden]{display:none} 本來就會生效。此處明寫是防禦——.faq-ask 就踩過
   「元件的 display 規則蓋掉 [hidden]」（2026-07-13 實測），別讓下一個人重踩。 */
.faq-list [hidden] {
    display: none !important;
}

/* — 動效：入場輕升＋卡片淡入（html.js 閘：JS 沒載入＝直接可見） — */
html.js .faq-page__head {
    animation: faq-rise 0.6s var(--ease-out) both;
}
html.js .faq-top {
    animation: faq-rise 0.6s var(--ease-out) 0.12s both;
}
html.js .faq-find {
    animation: faq-rise 0.6s var(--ease-out) 0.22s both;
}
@keyframes faq-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
/* 卡片淡入。P1-13 後卡片改 SSR 直出、篩選只切 [hidden] 不重繪 → 這段只在載入時跑一次
   （原註解說的「每次篩選重繪都會跑」已不成立）。仍只做純淡入，不位移不晃。 */
html.js .faq-list .faq-item-card {
    animation: faq-card-in 0.3s var(--ease-out) both;
}
html.js .faq-list .faq-item-card:nth-child(2) { animation-delay: 60ms; }
html.js .faq-list .faq-item-card:nth-child(3) { animation-delay: 120ms; }
@keyframes faq-card-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    html.js .faq-page__head,
    html.js .faq-top,
    html.js .faq-find,
    html.js .faq-list .faq-item-card {
        animation: none;
    }
    /* 摺疊箭頭的旋轉：動效偏好關掉時不轉（狀態仍由 [open] 的金線與答案本身表達）。 */
    .faq-item-card > .faq-q::after {
        transition: none;
    }
    /* .faq-top__line 的 reduced-motion 已隨外觀移交 components.css .btn-line（同名 media 區塊）。 */
}