/* ==========================================================================
   FAQ section
   Uses native <details>/<summary> for the accordion behavior — no JS
   needed, works everywhere, and degrades gracefully. Question/answer
   text is Persian, so each item is set to RTL direction individually
   rather than flipping the whole section, since the eyebrow/heading
   above stay in the site's standard LTR type treatment.
   ========================================================================== */

.faq-list {
  max-width: 720px;
  border-top: 1px solid var(--line);
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 4px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  color: var(--bone);
  direction: rtl;
  text-align: right;
  transition: color 0.2s var(--ease);
}

/* Remove default browser marker (triangle/arrow) across engines */
.faq-item__question::-webkit-details-marker {
  display: none;
}

.faq-item__question::marker {
  content: '';
}

.faq-item__question:hover {
  color: var(--flare);
}

.faq-item__icon {
  flex-shrink: 0;
  color: var(--bone-dim);
  transition: transform 0.25s var(--ease), color 0.2s var(--ease);
}

.faq-item[open] .faq-item__icon {
  transform: rotate(180deg);
  color: var(--flare);
}

.faq-item__answer {
  margin: 0;
  padding: 0 4px 22px;
  color: var(--bone-dim);
  font-size: 14px;
  line-height: 1.8;
  direction: rtl;
  text-align: right;
  max-width: 60ch;
  margin-left: auto;
}

/* Smooth open/close — animating <details> natively isn't universally
   supported, so this fades the answer in on open rather than sliding;
   simple, reliable, and matches the site's restrained motion elsewhere. */
.faq-item__answer {
  animation: faq-answer-in 0.2s var(--ease);
}

@keyframes faq-answer-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 640px) {
  .faq-item__question {
    font-size: 15px;
    padding: 18px 2px;
  }

  .faq-item__answer {
    font-size: 13px;
    padding: 0 2px 18px;
    max-width: none;
  }
}