/* ========================================
   YOYAGE FAQ Page Styles
   Purpose: FAQ topic tabs + accordion panels
   Loaded only on /faq/index.html
   ======================================== */

/* Page hero, breadcrumb, FAQ accordion, support matrix,
   resource banner & CTA band styles live in components.css. */

/* ---------- 1. FAQ Topic Tabs ---------- */
.faq-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 32px;
}

.faq-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background-color: var(--color-tag-bg);
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.faq-tab svg {
  width: 16px;
  height: 16px;
  color: var(--color-brand);
  transition: color var(--transition-fast);
}

.faq-tab:hover {
  color: var(--color-brand);
  border-color: var(--color-brand);
}

.faq-tab.is-active {
  background-color: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-white);
}

.faq-tab.is-active svg {
  color: var(--color-white);
}

.faq-tab:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

/* 问题数角标 */
.faq-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background-color: var(--color-white);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-brand);
}

.faq-tab.is-active .faq-tab-count {
  background-color: rgba(255, 255, 255, 0.22);
  color: var(--color-white);
}

/* ---------- 2. FAQ Panels ---------- */
.faq-panels {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

/* 无 JS 时所有面板纵向堆叠全部可见;
   JS 可用时(head 内联脚本添加 html.js)只显示当前激活面板 */
html.js .faq-panel {
  display: none;
}

html.js .faq-panel.is-active {
  display: block;
  animation: faq-panel-in 0.3s ease;
}

@keyframes faq-panel-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* hash 直达定位时避开固定头部 */
.faq-panel {
  scroll-margin-top: calc(120px + var(--expo-bar-h));
}

.faq-panel-intro {
  margin: 0 0 20px;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

/* 答案内的内部链接 */
.faq-answer a {
  color: var(--color-brand);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}

.faq-answer a:hover {
  color: var(--color-brand-dark);
}

/* ---------- 3. Responsive ---------- */
@media (max-width: 767px) {
  /* Tab 条横向滚动,两侧贴边 */
  .faq-tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    margin-left: calc(-1 * var(--container-padding));
    margin-right: calc(-1 * var(--container-padding));
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .faq-tabs::-webkit-scrollbar {
    display: none;
  }

  .faq-panel-intro {
    text-align: left;
  }
}