/* ============================================================
   Clash Verge下载 · faq.css
   FAQ 页专属:分类跳转 / details 折叠问答 / 分区节奏
   ============================================================ */

/* ---- 页首 ---- */
.faq-hero{padding-top:72px;padding-bottom:8px}
.faq-head{max-width:840px}
.faq-head h1{margin:20px 0 16px}
.faq-intro{margin:0;font-size:16.5px;line-height:1.75;color:var(--text-muted);max-width:700px}
.faq-toc{margin-top:30px}

/* ---- 分类分区 ---- */
.faq-sec{padding-top:56px;padding-bottom:88px}
.faq-sec .sec-head{margin-bottom:32px}
.faq-sec .sec-head p{margin-top:10px;font-size:15px}
#basic,#install,#tips,#troubleshoot{scroll-margin-top:calc(var(--nav-h) + 20px)}

/* ---- details 折叠问答(复用 components.css 的 faq-item 外观) ---- */
.faq-item > summary.faq-q{list-style:none}
.faq-item > summary.faq-q::-webkit-details-marker{display:none}
.faq-item > summary.faq-q::marker{content:""}
.faq-item > summary.faq-q:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.faq-item[open]{border-color:var(--border-strong);box-shadow:var(--shadow-sm)}
.faq-item[open] .faq-ico{transform:rotate(45deg);background:var(--accent);border-color:var(--accent);color:var(--bg)}
.faq-item[open] > .faq-a{display:block}
.faq-a{line-height:1.85}
.faq-a code{font-family:var(--font-mono);font-size:13px;background:var(--bg-panel);border:1px solid var(--border);border-radius:6px;padding:.1em .4em}

/* ---- 底部引导 ---- */
.faq-foot{padding-top:8px;padding-bottom:96px}
.faq-more{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 32px}
.faq-more-text{min-width:0;max-width:560px}
.faq-more-text h2{font-size:20px;margin-bottom:8px}
.faq-more-text p{font-size:14.5px;color:var(--text-muted);line-height:1.7}
.faq-more-actions{display:flex;flex-wrap:wrap;gap:12px}

/* ---- 响应式 ---- */
@media (max-width:640px){
  .faq-hero{padding-top:56px}
  .faq-q{padding:16px 18px}
  .faq-a{padding:0 18px 18px}
  .faq-sec{padding-top:44px;padding-bottom:64px}
  .faq-foot{padding-bottom:64px}
}