/* -------------------------------------------------------- */
/* 🔹 FAQ Content                                           */
/* -------------------------------------------------------- */
/* Grouped FAQ list with dividers between tiles              */
/* Mirrors faq_content.dart                                 */


/* -------------------------------------------------------- */
/* 🔹 Section                                               */
/* -------------------------------------------------------- */
/* Groups tiles by subcategory, wrapped in optional card    */

/* Gap between sections — flex gap ignores display:none
   children, unlike margin + sibling selectors               */

#faq-sections,
#faq-search-results-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-between-faq-sections);
}


/* -------------------------------------------------------- */
/* 🔹 Dividers                                              */
/* -------------------------------------------------------- */
/* Thin separator between FAQ tiles                         */

.faq-divider {
  height: 1px;
  background-color: var(--color-outline);
  margin: 0 var(--space-l);
}


/* -------------------------------------------------------- */
/* 🔹 Section Card variant                                  */
/* -------------------------------------------------------- */
/* Wraps section in AppCard for hub layout                  */

.faq-section-card {
  background-color: var(--color-surface);
  border-radius: var(--radius);
  padding: 0 var(--space-s);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Extend tile (and hover highlight) to card edges */
.faq-section-card .faq-tile {
  margin-inline: calc(-1 * var(--space-s));
}

.faq-section-card .faq-tile__header {
  padding-inline: calc(var(--space-l) + var(--space-s));
}

.faq-section-card .faq-tile__question {
  font-size: var(--text-body-large);
}

.faq-section-card .faq-tile__answer {
  padding-inline: calc(var(--space-l) + var(--space-s));
  font-size: var(--text-body-medium);
}

.faq-section-card .faq-divider {
  margin: 0 var(--space-m);
}


/* -------------------------------------------------------- */
/* 🔹 Empty state                                           */
/* -------------------------------------------------------- */

.faq-empty {
  text-align: center;
  padding: var(--space-xxxl) var(--space-l);
  color: var(--color-on-surface-variant);
  font-size: var(--text-body-medium);
}

.faq-empty svg {
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-m);
  color: var(--color-on-surface-variant);
}