/* Help Center - FAQ accordion (Lunix-style structure) */

.help-faq-trigger {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.help-faq-trigger:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.4);
  outline-offset: 2px;
}

.help-faq-answer {
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  max-height: 0;
}
.help-faq-answer[hidden] {
  display: block !important;
  max-height: 0 !important;
  visibility: hidden;
}

.help-faq-content {
  background: linear-gradient(135deg, rgb(239, 246, 255) 0%, rgb(224, 242, 254) 100%);
  color: rgb(30, 58, 138);
  padding: 1.25rem 1.5rem !important;
  margin: 0 !important;
  border: none !important;
  border-left: 4px solid rgb(59, 130, 246);
}
.help-faq-content a {
  color: rgb(37, 99, 235);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.help-faq-content a:hover {
  color: rgb(29, 78, 216);
}
.help-faq-content p {
  color: rgb(51, 65, 85);
  margin: 0;
}

/* Expanded state: light accent on trigger + answer */
.help-faq-card.is-open .help-faq-trigger {
  background: linear-gradient(135deg, rgb(239, 246, 255) 0%, rgb(224, 242, 254) 100%) !important;
  color: rgb(30, 58, 138);
  border-color: rgb(191, 219, 254) !important;
  border-left: 4px solid rgb(59, 130, 246);
}
.help-faq-card.is-open .help-faq-trigger span:first-child {
  color: rgb(30, 58, 138) !important;
}
.help-faq-card.is-open .help-faq-chevron {
  color: rgb(59, 130, 246) !important;
}

/* Collapsed: white cards with subtle shadow */
.help-faq-card:not(.is-open) .help-faq-trigger:hover {
  background: rgb(248, 250, 252) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.help-faq-item {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.help-faq-item.visible {
  opacity: 1;
  transform: translateY(0);
}

.help-faq-chevron svg {
  width: 100%;
  height: 100%;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}