/* =========================
   FAQ Section (FINAL)
   - scoped typography
   - fixes huge gaps
   - restores list bullets
   - Redactor-safe
   ========================= */

.faqSection {
  background: var(--faq-bg, #fffef2);
  padding: clamp(28px, 5vw, 80px) 0;
}

/* =========================
   Title
   ========================= */

.faqSection__title {
  margin: 0 0 clamp(18px, 3vw, 36px);
  text-align: center;

  font-family: "Optima", "URW Classico", "Segoe UI", serif;
  font-weight: 700;
  font-size: clamp(26px, 3.2vw, 48px);
  line-height: 1.1;
  color: #111;
}

/* =========================
   Container
   ========================= */

.faqSection__list {
  max-width: 980px;
  margin: 0 auto;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

/* =========================
   FAQ Item
   ========================= */

.faqItem {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

/* =========================
   Trigger (Question row)
   ========================= */

.faqItem__trigger {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 28px;
  gap: 16px;
  align-items: center;

  padding: 22px 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.faqItem__q {
  margin: 0;

  font-family: "Suisse Int'l", "Suisse Intl", "Inter", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(16px, 1.6vw, 22px);
  line-height: 1.25;
  color: #111;
}

/* =========================
   Arrow Icon
   ========================= */

.faqItem__icon {
  width: 22px;
  height: 22px;
  justify-self: end;
  position: relative;
}

.faqItem__icon::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(0, 0, 0, 0.65);
  border-bottom: 2px solid rgba(0, 0, 0, 0.65);
  transform: rotate(45deg);
  transition: transform 220ms ease;
}

/* =========================
   Panel
   ========================= */

.faqItem__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 260ms ease;
}

/* =========================
   Answer wrapper
   ========================= */

.faqItem__a {
  padding: 0 0 18px 0;

  font-family: "Suisse Int'l", "Suisse Intl", "Inter", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.75;
  color: rgba(17, 17, 17, 0.9);
}

/* =====================================================
   Rich Text Reset (CRITICAL)
   ===================================================== */

/* 1) 先把全局 reset / flex / gap 全部中和 */
.faqItem__a :where(
  p,
  ul,
  ol,
  li,
  blockquote,
  h1, h2, h3, h4, h5, h6
) {
  margin: 0 !important;
  padding: 0 !important;
  display: block;
}

/* 2) 段落间距 */
.faqItem__a p {
  margin: 0 0 10px 0 !important;
}

/* 3) 列表：恢复 bullet + 缩进（关键） */
.faqItem__a ul,
.faqItem__a ol {
  margin: 8px 0 12px 0 !important;
  padding-left: 22px !important;          /* ✅ 缩进 */
  list-style-position: outside;
}

.faqItem__a ul {
  list-style-type: disc !important;       /* ✅ bullet 点 */
}

.faqItem__a ol {
  list-style-type: decimal !important;
}

/* 4) 每条 bullet 行距 */
.faqItem__a li {
  margin: 6px 0 !important;
  padding: 0 !important;
}

/* 5) Redactor 常见结构：li > p（否则会双倍间距） */
.faqItem__a li > p {
  margin: 0 !important;
}

/* 6) 干掉 Redactor 空段落 */
.faqItem__a p:empty,
.faqItem__a p > br:only-child {
  display: none !important;
}

/* 7) 避免 <br><br> 造成巨大空白 */
.faqItem__a br + br {
  display: none;
}

/* 8) 最后一个元素不留空白 */
.faqItem__a p:last-child,
.faqItem__a ul:last-child,
.faqItem__a ol:last-child {
  margin-bottom: 0 !important;
}

/* =========================
   Open state
   ========================= */

.faqItem.is-open .faqItem__icon::before {
  transform: rotate(-135deg);
}

.faqItem.is-open .faqItem__panel {
  max-height: 900px;
}

/* =========================
   Mobile
   ========================= */

@media (max-width: 560px) {
  .faqItem__trigger {
    padding: 18px 0;
    grid-template-columns: 1fr 24px;
    gap: 12px;
  }

  .faqItem__icon {
    width: 20px;
    height: 20px;
  }
}