/**
 * support.css — styles specific to the support page (support.html).
 *
 * Covers the help-topic cards and the FAQ accordion. The FAQ rules mirror
 * pricing.css so the accordion behaves identically across pages. Layout is
 * handled by Tailwind utilities in the markup; global rules live in base.css.
 */

/* ---- Help topic cards ---- */
.topic-card {
  display: block;
  border-radius: 1rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  padding: 1.5rem;
  box-shadow: 0 10px 30px -10px rgba(17, 17, 17, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.topic-card:hover {
  transform: translateY(-4px);
  border-color: #FDE4DF;
  box-shadow: 0 20px 45px -15px rgba(234, 67, 37, 0.25);
}

/* ---- FAQ accordion (shared behaviour with pricing.css) ---- */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.faq-item.open .faq-answer {
  grid-template-rows: 1fr;
}

.faq-item.open .faq-chevron {
  transform: rotate(180deg);
}

.faq-chevron {
  transition: transform 0.3s ease;
}