/* ==========================================================================
   FTS: FAQ Large Card
   --------------------------------------------------------------------------
   Large FAQ card/list component.

   - Uses existing Fuller Design System tokens.
   - Keeps question buttons visually clean.
   - Preserves accessible focus states.
========================================================================== */


/* Card shell ------------------------------------------------------------- */

.fts-faq-large-card {
  background-color: var(--color-surface);
}


/* Card title ------------------------------------------------------------- */

.fts-faq-large-card-title {
  margin-top: 0;
  margin-bottom: 0.75rem;
  color: var(--text-color-heading);
  text-transform: none;
}


/* FAQ list --------------------------------------------------------------- */

.fts-faq-large-card-content > ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.faq-large-card-faq + .faq-large-card-faq {
  margin-top: 0.35rem;
}

.faq-large-group {
  padding: 0;
}


/* Question button -------------------------------------------------------- */

.faq-large-question {
  display: flex;
  align-items: center;
  gap: 4px;

  width: 100%;
  margin: 0;
  padding: 0.35rem 0;

  appearance: none;
  -webkit-appearance: none;

  border: 0 !important;
  border-radius: var(--radius-0) !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;

  color: var(--color-text);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  font-weight: var(--weight-medium) !important;
  line-height: 1.3;
  letter-spacing: 0.05em;
  text-align: left;
  text-transform: none !important;
  text-decoration: none !important;

  cursor: pointer;

  transition:
    color var(--fts-btn-transition) ease;
}

.faq-large-question:hover,
.faq-large-question:active,
.faq-large-question:focus,
.faq-large-question:focus-visible {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--color-link-hover);
}

.faq-large-question:focus {
  outline: none;
}

.faq-large-question:focus-visible {
  outline: var(--fts-focus-width) solid var(--fts-focus-ring);
  outline-offset: var(--fts-focus-offset);
}


/* Caret ----------------------------------------------------------------- */

.faq-large-question-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 1.2rem;
  width: 1.2rem;
  height: 1.2rem;

  color: var(--color-link);
  font-size: var(--font-size-body);
  line-height: 1;

  transform: scale(1.35) translateY(-0.03em);

  transition:
    color var(--fts-btn-transition) ease,
    transform var(--fts-btn-transition) ease;
}

.faq-large-question:hover .faq-large-question-caret,
.faq-large-question:focus-visible .faq-large-question-caret {
  color: var(--color-link-hover);
}

.faq-large-question[aria-expanded="true"] .faq-large-question-caret {
  transform: scale(1.35) translateY(-0.03em) rotate(90deg);
}


/* Answer panel ----------------------------------------------------------- */

.faq-large-answer {
  display: none;
  margin-top: 0.5rem;
  padding: 14px 16px;

  background: var(--color-bg-soft);
  color: var(--color-muted);

  font-family: var(--font-family-body);
  font-size: var(--font-size-small) !important;
  line-height: 1.6;
}

.faq-large-answer p:first-child {
  margin-top: 0;
}

.faq-large-answer p:last-child {
  margin-bottom: 0;
}

.faq-large-answer ul {
  margin: 0.5rem 0 0.5rem 0.5rem;
  padding-left: 1rem;
  list-style-type: disc;
  list-style-position: outside;
}

.faq-large-answer ol {
  margin: 0.5rem 0 0.5rem 0.5rem;
  padding-left: 1rem;
  list-style-type: decimal;
  list-style-position: outside;
}

.faq-large-answer li {
  margin-bottom: 0.25rem;
}


/* Show more row ---------------------------------------------------------- */

.faq-large-show-more-row {
  margin-top: 0.75rem;
  list-style: none;
}


/* Show more button ------------------------------------------------------- */

.faq-large-show-more-button {
  appearance: none;
  -webkit-appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin: 10px 0 0 !important;
  padding: var(--fts-btn-pad-y) 24px;

  border: var(--fts-btn-border) solid var(--fts-btn-border-color) !important;
  border-radius: var(--fts-btn-radius);
  background: var(--fts-btn-bg);
  box-shadow: none;

  color: var(--fts-btn-text) !important;
  font-family: var(--font-family-body);
  font-size: var(--font-size-small);
  font-weight: var(--fts-btn-font-weight);
  line-height: var(--fts-btn-line-height);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;

  cursor: pointer;

  transition:
    background-color var(--fts-btn-transition) ease,
    border-color var(--fts-btn-transition) ease,
    color var(--fts-btn-transition) ease,
    opacity var(--fts-btn-transition) ease;
}

.faq-large-show-more-button:hover,
.faq-large-show-more-button:focus,
.faq-large-show-more-button:focus-visible {
  background-color: var(--fts-btn-hover-bg) !important;
  border-color: var(--fts-btn-hover-border) !important;
  color: var(--fts-btn-hover-text) !important;
  text-decoration: none;
  opacity: 0.92;
}

.faq-large-show-more-button:focus-visible {
  outline: var(--fts-focus-width) solid var(--fts-focus-ring);
  outline-offset: var(--fts-focus-offset);
}


/* Reduced motion --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .faq-large-question,
  .faq-large-question-caret,
  .faq-large-show-more-button {
    transition: none;
  }
}