@use '../../../../styles/shared-legal.scss';

// Each FAQ entry is a native <details>/<summary> disclosure so long answer
// lists collapse to scannable questions; the expander chevron and its
// rotation come from the global details>summary rule in styles.scss.
.faq-item {
  margin-bottom: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-normal), border-color var(--transition-normal);
  border-left: 4px solid var(--primary-color);

  &:hover {
    box-shadow: var(--shadow-md);
  }

  &[open] {
    box-shadow: var(--shadow-md);
  }

  summary {
    color: var(--primary-color);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    cursor: pointer;
    border-radius: var(--radius-sm);

    &:focus-visible {
      outline: 2px solid var(--primary-color);
      outline-offset: 2px;
    }
  }

  &[open] summary {
    margin-bottom: 0.75rem;
  }

  .faq-answer {
    p {
      margin-bottom: 0.5rem;
      line-height: var(--line-height-relaxed);

      &:last-child {
        margin-bottom: 0;
      }
    }

    ul {
      margin-top: 0.5rem;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item {
    transition: none;
  }
}

