/* ============================================================
   FAQ 页面样式 (page-faq.php) · 电气自动化买家 Top 10
   依赖 chusoon.css 中的变量与 .cs-hero / .cs-section / .cs-cta
   ============================================================ */

/* ---------- Hero ---------- */
.cs-faq-hero { padding: 64px 0 60px; }
.cs-faq-hero h1 { max-width: 720px; }
.cs-faq-hero .cs-accent { color: #ffc98a; }
.cs-faq-hero-cta { margin-top: 26px; }

/* ---------- 整体布局：左目录 + 右手风琴 ---------- */
.cs-faq-section { padding-bottom: 70px; }
.cs-faq-layout { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 30px; align-items: start; }

/* ---------- 侧栏卡片 ---------- */
.cs-faq-side { display: grid; gap: 20px; }
.cs-faq-side .cs-faq-card:first-child { position: sticky; top: 24px; }
.cs-faq-card {
	background: #fff; border: 1px solid #e4eaf1; border-radius: 14px;
	padding: 24px 22px; box-shadow: 0 6px 18px rgba(30, 58, 95, .05);
}
.cs-faq-card h2 { font-size: 15px; font-weight: 800; color: var(--cs-blue); margin: 0 0 14px; letter-spacing: .3px; }

/* 目录列表 */
.cs-faq-toc-list { list-style: none; margin: 0; padding: 0; }
.cs-faq-toc-list li + li { border-top: 1px solid #eef2f7; }
.cs-faq-toc-list a {
	display: flex; align-items: center; gap: 10px; padding: 9px 2px;
	color: #40546a; font-size: 13.5px; line-height: 1.35; text-decoration: none; transition: color .15s;
}
.cs-faq-toc-list a:hover { color: var(--cs-orange); }
.cs-faq-toc-list .cs-faq-no { flex: 0 0 auto; }

/* 编号徽章（目录与手风琴共用） */
.cs-faq-no {
	display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
	background: var(--cs-blue); color: #fff; border-radius: 8px;
	font-size: 12px; font-weight: 700; letter-spacing: .5px;
}
.cs-faq-toc-list a:hover .cs-faq-no,
.cs-faq-toc-list a:focus .cs-faq-no { background: var(--cs-orange); }

/* 联系卡片 */
.cs-faq-help { background: linear-gradient(160deg, #f8fafd, #eef4fb); }
.cs-faq-help > i { font-size: 30px; color: var(--cs-orange); margin-bottom: 8px; }
.cs-faq-help h2 { margin-bottom: 6px; }
.cs-faq-help p { font-size: 13.5px; color: #5a6b7d; margin: 0 0 12px; }
.cs-faq-help a { display: block; font-size: 13.5px; font-weight: 700; padding: 10px 14px; border-radius: 8px; text-decoration: none; }
.cs-faq-mail { background: var(--cs-blue); color: #fff !important; margin-bottom: 8px; }
.cs-faq-mail:hover { background: var(--cs-blue-deep); }
.cs-faq-wa { background: #fff; border: 1px solid #dde7f1; color: #1e9e5a !important; }
.cs-faq-wa:hover { border-color: #1e9e5a; }

/* ---------- 手风琴 ---------- */
.cs-faq-item {
	background: #fff; border: 1px solid #e4eaf1; border-radius: 12px;
	margin-bottom: 14px; overflow: hidden;
	transition: border-color .25s ease, box-shadow .25s ease;
}
.cs-faq-item[open] { border-color: rgba(246, 139, 30, .65); box-shadow: 0 10px 26px rgba(30, 58, 95, .10); }

.cs-faq-item summary {
	display: flex; align-items: center; gap: 16px;
	padding: 18px 20px; cursor: pointer; list-style: none; user-select: none;
	transition: background .18s ease;
}
.cs-faq-item summary::-webkit-details-marker { display: none; }
.cs-faq-item summary:hover { background: #f7fafd; }
.cs-faq-item summary:focus-visible { outline: 2px solid var(--cs-orange); outline-offset: -2px; }

.cs-faq-item summary h3 {
	flex: 1; font-size: 16.5px; font-weight: 700; color: var(--cs-blue); margin: 0; line-height: 1.4;
}
.cs-faq-item[open] summary h3 { color: var(--cs-orange); }

/* 加减图标 */
.cs-faq-chev {
	flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: #eef3f9; color: var(--cs-blue); transition: transform .3s ease, background .3s ease, color .3s ease;
}
.cs-faq-item[open] .cs-faq-chev { transform: rotate(45deg); background: var(--cs-orange); color: #fff; }

/* 内容区（grid 0fr -> 1fr 平滑展开） */
.cs-faq-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s ease; }
.cs-faq-item[open] > .cs-faq-body { grid-template-rows: 1fr; }
.cs-faq-body > .cs-faq-inner { overflow: hidden; }
.cs-faq-inner {
	padding: 0 22px; color: #4c5f73; font-size: 14.5px; line-height: 1.75;
	border-top: 1px solid transparent;
}
.cs-faq-item[open] .cs-faq-inner { padding: 16px 22px 20px 58px; border-top-color: #eef2f7; }
.cs-faq-inner p { margin: 0 0 10px; }
.cs-faq-inner p:last-child { margin-bottom: 0; }
.cs-faq-inner ul { margin: 4px 0 10px; padding-left: 20px; }
.cs-faq-inner ul li { margin-bottom: 5px; }
.cs-faq-inner li::marker { color: var(--cs-orange); }
.cs-faq-inner a { color: var(--cs-orange); font-weight: 600; }
.cs-faq-inner strong { color: var(--cs-blue); }

/* 折叠项底部提示 */
.cs-faq-more {
	margin: 22px 4px 0; font-size: 14px; color: #5a6b7d;
}
.cs-faq-more a { color: var(--cs-orange); font-weight: 600; }

/* ---------- 底部 CTA ---------- */
.cs-faq-cta-wrap { background: #eef3f9; padding: 44px 0 60px; }

/* ---------- 响应式 ---------- */
@media (max-width: 991px) {
	.cs-faq-layout { grid-template-columns: 1fr; }
	.cs-faq-side { grid-template-columns: 1fr; }
	.cs-faq-side .cs-faq-card:first-child { position: static; }
	.cs-faq-toc-list { columns: 2; column-gap: 26px; }
	.cs-faq-toc-list li { break-inside: avoid; }
	.cs-faq-toc-list li + li { border-top: 0; }
	.cs-faq-hero h1 { font-size: 32px; }
}

@media (max-width: 575px) {
	.cs-faq-toc-list { columns: 1; }
	.cs-faq-item summary { gap: 12px; padding: 15px 16px; }
	.cs-faq-item summary h3 { font-size: 15px; }
	.cs-faq-inner { font-size: 14px; }
	.cs-faq-item[open] .cs-faq-inner { padding: 14px 16px 18px 16px; }
	.cs-faq-no { width: 26px; height: 26px; font-size: 11.5px; }
	.cs-faq-hero { padding: 48px 0 44px; }
}