/* ============================================================
 * /legal/q/q-style.css —— 婚姻家事问题页集群共享样式
 * 复用 marriage-family.html 的视觉语言（nav/hero/card/btn/sec-title）
 * 新增：面包屑、直答段、法条卡片、风险提示框、内链区、FAQ 折叠
 * 版本：20261112q1
 * ============================================================ */
* { box-sizing: border-box; }
body { margin:0; font-family: -apple-system, "Microsoft YaHei", "PingFang SC", sans-serif; background:#f4f5f7; color:#222; }

/* 顶部 nav —— 与 marriage-family.html 同款 */
.nav { background:#1B1B2F; color:#fff; display:flex; align-items:center; gap:12px; padding:0 18px; height:54px; flex-wrap:wrap; }
.nav .brand { font-weight:600; font-size:16px; white-space:nowrap; }
.nav .brand .en { font-weight:400; font-size:12px; color:#9b9bb5; margin-left:6px; }
.nav .spacer { flex:1; }
.nav .tab { flex:none; padding:7px 14px; border-radius:8px; background:transparent; border:1px solid transparent; color:#c9c9da; font-size:14px; cursor:pointer; text-decoration:none; }
.nav .tab:hover { background:rgba(255,255,255,.08); }
.nav .tab.on { background:#5b5bd6; color:#fff; border-color:#5b5bd6; font-weight:600; }

/* 主容器 */
.wrap { max-width: 960px; margin: 0 auto; padding: 16px 14px 48px; }

/* 面包屑 */
.crumbs { font-size:12.5px; color:#888; margin:10px 0 4px; }
.crumbs a { color:#5b5bd6; text-decoration:none; }
.crumbs a:hover { text-decoration:underline; }
.crumbs .sep { margin:0 6px; color:#bbb; }

/* hero */
.hero { background:#1B1B2F; color:#fff; border-radius:12px; padding:18px 22px; margin-bottom:14px; }
.hero h1 { margin:0 0 6px; font-size:22px; line-height:1.4; }
.hero .sub { font-size:13px; color:#c9c9da; line-height:1.7; }
.hero .meta { font-size:11.5px; color:#9b9bb5; margin-top:8px; }

/* 区块标题 */
.sec-title { font-weight:600; font-size:16px; color:#1F4E79; margin:26px 0 8px; }

/* 通用卡片 —— 与 marriage-family.html 同款 */
.card { background:#fff; border:1px solid #e3e4e8; border-left:5px solid #5b5bd6; border-radius:12px; padding:18px 20px; margin:14px 0; }
.card.warn { border-left-color:#c62828; background:#fff9f4; }
.card.law { border-left-color:#1F4E79; background:#f7fbff; }
.card.risk { border-left-color:#b8952e; background:#fffaf0; }
.card.link { border-left-color:#1d7a3e; background:#f7fdf9; }
.card .ct { font-size:17px; font-weight:700; color:#1B1B2F; line-height:1.6; margin-bottom:6px; }
.card .cm { font-size:13.5px; line-height:2; color:#2a2a2a; }
.card .cm p { margin:0 0 10px; }
.card .cm b { color:#1B1B2F; }
.card .cm .law-cite { color:#1F4E79; font-weight:600; }

/* 直答段 —— 结论先行 */
.answer-lead { font-size:15px; line-height:2; color:#222; }
.answer-lead .verdict { display:inline-block; background:#fff8d9; padding:1px 6px; border-radius:4px; font-weight:700; color:#8a6a1c; }
.answer-lead p { margin:0 0 12px; }

/* 法条卡片 */
.law-box { background:#f7fbff; border:1px solid #d4e1f5; border-left:5px solid #1F4E79; border-radius:11px; padding:14px 17px; margin:12px 0; }
.law-box .lb-t { font-weight:700; color:#1F4E79; font-size:14px; margin-bottom:6px; }
.law-box ol, .law-box ul { margin:6px 0 0; padding-left:23px; font-size:13px; line-height:1.95; color:#2a2a2a; }
.law-box li { margin:4px 0; }
.law-box li b { color:#1F4E79; }

/* 风险提示框 */
.risk-box { background:#fffaf0; border:1px solid #ead6a4; border-left:5px solid #b8952e; border-radius:11px; padding:14px 17px; margin:12px 0; }
.risk-box .rb-t { font-weight:700; color:#8a6a1c; font-size:14px; margin-bottom:6px; }
.risk-box ul { margin:6px 0 0; padding-left:23px; font-size:13px; line-height:1.95; }
.risk-box li { margin:4px 0; }

/* 模板下载入口 CTA */
.cta-box { background:linear-gradient(135deg,#fff5f5,#fff9f4); border:1px solid #f0c8c8; border-left:5px solid #c62828; border-radius:12px; padding:16px 18px; margin:14px 0; }
.cta-box .ct-h { font-size:17px; font-weight:800; color:#c62828; line-height:1.5; margin-bottom:7px; }
.cta-box .ct-s { font-size:13px; color:#4a4a5e; line-height:1.85; margin-bottom:10px; }
.cta-box .btn { display:inline-block; font-size:13.5px; font-weight:700; color:#fff; background:#c62828; border-radius:9px; padding:9px 18px; margin:0 8px 8px 0; text-decoration:none; }
.cta-box .btn:hover { background:#a81f1f; }
.cta-box .btn.ghost { background:#fff; color:#c62828; border:1px solid #e0a8a8; }
.cta-box .btn.ghost:hover { background:#fff5f5; }

/* 通用按钮 */
.btn { display:inline-block; margin-top:12px; padding:9px 22px; background:#5b5bd6; color:#fff; border-radius:9px; font-size:14px; text-decoration:none; font-weight:600; border:0; cursor:pointer; }
.btn:hover { background:#4a4ac2; }
.btn.ghost { background:transparent; color:#5b5bd6; border:1px solid #5b5bd6; }
.btn.ghost:hover { background:rgba(91,91,214,.08); }

/* 内链区 */
.links-box { background:#f7fdf9; border:1px solid #cfe9d4; border-left:5px solid #1d7a3e; border-radius:11px; padding:14px 17px; margin:12px 0; }
.links-box .lb-t { font-weight:700; color:#1d7a3e; font-size:14px; margin-bottom:8px; }
.links-box ul { margin:0; padding-left:0; list-style:none; }
.links-box li { margin:6px 0; font-size:13.5px; line-height:1.7; }
.links-box li a { color:#1d7a3e; text-decoration:none; font-weight:500; }
.links-box li a:hover { text-decoration:underline; }
.links-box li .desc { color:#666; font-weight:400; font-size:12.5px; margin-left:6px; }

/* FAQ 折叠 */
.faq { background:#fff; border:1px solid #e3e4e8; border-radius:11px; margin:10px 0; }
.faq details { border-bottom:1px solid #eef0f4; padding:12px 17px; }
.faq details:last-child { border-bottom:0; }
.faq summary { font-weight:600; font-size:14px; color:#1B1B2F; cursor:pointer; list-style:none; position:relative; padding-left:20px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::before { content:'▶'; position:absolute; left:0; top:1px; color:#5b5bd6; font-size:10px; transition:transform .2s; }
.faq details[open] summary::before { transform:rotate(90deg); }
.faq .ans { font-size:13px; line-height:1.95; color:#2a2a2a; margin-top:8px; padding-left:20px; }
.faq .ans b { color:#1B1B2F; }

/* 文末签名 */
.signoff { margin-top:30px; padding-top:14px; border-top:1px dashed #ddd; font-size:12.5px; color:#777; line-height:1.85; }

/* 页脚容器（site-legal.js 自动注入 #siteLegalFooter） */
footer { margin-top:20px; }

@media (max-width:640px) {
  .wrap { padding:12px 10px 36px; }
  .hero h1 { font-size:19px; }
  .card, .law-box, .risk-box, .cta-box, .links-box { padding:14px 14px; }
  .nav { overflow-x:auto; }
}