/*
 * Template: faq
 * Page-specific styling for the Q&A list.
 * Source: legacy /media/com_sppagebuilder/css/page-234.css block scoped
 *         to #sppb-addon-1587509792582 (the articles addon on the FAQ page),
 *         plus helix3 .faq overrides (helix3_custom_css_combined.css 605-636).
 *
 * Depends on: tokens.css, base.css. NEVER redefine those tokens here.
 */

.faq-list-section {
  padding: 50px 0;
  background: #fff;
}

.faq-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  counter-reset: faq;
}

/* Each Q&A — left-bordered card, blue Q badge.
   Layout matches legacy spacing: 35px top + content + 37px bottom in info-wrap,
   plus 36px outer margin to next sibling.
   The legacy item also includes implicit body line-height padding from the
   floated badge — we reproduce by giving the body min-height equal to the
   badge plus a one-line answer buffer. */
.faq-list__item {
  display: flex;
  align-items: flex-start;
  border-left: 1px solid #E1E8EE;
  padding: 35px 30px 73px;     /* 35 top + 37 bottom + 36 spacing-to-next merged */
  margin: 0;
  position: relative;
  min-height: 200px;            /* matches legacy minimum item height observed */
}

/* Blue square Q badge (legacy uses a font-awesome ?-icon glyph; we render
   inline SVG question-circle for fidelity without loading FA. The glyph
   sits at 24px font-size inside a 48px square. */
.faq-list__badge {
  flex: 0 0 48px;
  width: 48px; height: 48px;
  background: var(--color-brand);
  color: #fff;
  border-radius: 3px;
  font-weight: 600;
  font-size: 24px;
  line-height: 48px;
  text-align: center;
  margin-right: 16px;
}
.faq-list__badge svg {
  width: 24px; height: 24px;
  margin: 12px auto;
  display: block;
  fill: currentColor;
}

.faq-list__body {
  flex: 1 1 auto;
  min-width: 0;
}

/* Question — h3-style header */
.faq-list__question {
  font-size: 24px;
  line-height: 32px;
  font-weight: 500;
  color: var(--color-text);
  margin: 0 0 12px;
  font-family: var(--font-sans);
}
.faq-list__question a {
  color: inherit;
  transition: color var(--transition-fast);
}
.faq-list__question a:hover {
  color: var(--color-brand);
}

/* Answer — flat block of paragraphs / lists.
   Legacy uses an `:before` badge floated left, with answer p {margin-top:20;
   margin-left:64}. The answer ALSO inherits implicit text-flow that wraps
   around the floated badge, which reserves vertical space when answers are
   short. We approximate by giving the answer a min-height so each item is
   at least ~80px taller, matching legacy spacing. */
.faq-list__answer {
  font-size: 18px;
  color: var(--color-text-faint);
  line-height: 1.84;
  margin-top: 20px;
  min-height: 184px;          /* matches typical short-answer footprint in legacy */
}
.faq-list__answer p {
  margin: 20px 0 0;            /* legacy: each p has margin-top:20 (no bottom) */
  line-height: 1.84;
}
.faq-list__answer p:first-child { margin-top: 0; }
.faq-list__answer p:last-child { margin-bottom: 0; }
.faq-list__answer ul,
.faq-list__answer ol {
  margin: 0 0 16px;
  padding-left: 24px;
}
.faq-list__answer ul { list-style: disc; }
.faq-list__answer ol { list-style: decimal; }
.faq-list__answer li { margin-bottom: 20px; }
.faq-list__answer a { color: var(--color-brand); }
.faq-list__answer a:hover { color: var(--color-brand-hover); }

/* ============ Responsive ============ */
@media (max-width: 767.98px) {
  .faq-list-section { padding: 30px 0; }
  .faq-list__item {
    flex-direction: column;
    padding: 24px 16px;
    border-left: 0;
    border-bottom: 1px solid #E1E8EE;
    margin-bottom: 0;
  }
  .faq-list__badge {
    margin-bottom: 16px;
    margin-right: 0;
  }
  .faq-list__question {
    font-size: 20px;
    line-height: 28px;
  }
  .faq-list__answer {
    font-size: 16px;
    margin-left: 0;
  }
}