/* ==========================================================================
   SEC-FAQ — Frequently Asked Questions
   Focofy Factory v3.2
   Design Tokens Contract v3.6

   v3.1 → v3.2:
     - --section-surface/border/muted/surface-alt → tokens canônicos Camada 2
       (--section-* não existem no DTC v3.6; dependência de sections-bg.css removida)
     - grid two-columns desktop-first → mobile-first:
         base = 1fr, min-width: 768px → repeat(2, 1fr)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS LOCAIS — derivam dos tokens de contexto da seção
   A variante data-bg já redefine --section-surface na camada sections-bg.css
   Aqui apenas criamos aliases semânticos para o FAQ
   -------------------------------------------------------------------------- */

.focofy-faq {
  --faq-card-bg:       var(--color-surface-2);
  --faq-card-border:   var(--color-border-subtle);
  --faq-card-bg-hover: var(--color-surface-3);
  --faq-answer-color:  var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */

.focofy-faq {
  border-radius: var(--radius-xl);
}

/* --------------------------------------------------------------------------
   3. HEADER
   -------------------------------------------------------------------------- */

.focofy-faq__header {
  margin-bottom: var(--space-8);
  text-align: center;
}

.focofy-faq__subtitle {
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-2);
  opacity: 0.9;
}

.focofy-faq__title {
  font-size: var(--font-size-4xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  margin: 0;
}

/* --------------------------------------------------------------------------
   4. LISTA
   -------------------------------------------------------------------------- */

.focofy-faq__items {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 768px) {              /* --bp-tablet */
  .focofy-faq--layout-two-columns .focofy-faq__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   5. ITEM
   -------------------------------------------------------------------------- */

.focofy-faq__item {
  background: var(--faq-card-bg);
  border: 1px solid var(--faq-card-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.focofy-faq__item summary          { list-style: none; }
.focofy-faq__item summary::-webkit-details-marker { display: none; }

@media (hover: hover) {
  .focofy-faq__item:hover {
    background: var(--faq-card-bg-hover);
    border-color: var(--color-accent);
  }
}

/* --------------------------------------------------------------------------
   6. PERGUNTA
   -------------------------------------------------------------------------- */

.focofy-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-weight: var(--fw-bold);
  font-size: var(--font-size-lg);
  line-height: var(--lh-snug);
  cursor: pointer;
  user-select: none;
}

.focofy-faq__question-text { flex: 1; }

.focofy-faq__question-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  border: 1px solid var(--faq-card-border);
  color: var(--color-accent);
  font-size: var(--font-size-lg);
  font-weight: var(--fw-bold);
  transition: transform var(--transition-fast), background var(--transition-fast);
}

.focofy-faq__question-icon::before  { content: '+'; }

.focofy-faq__item[open] .focofy-faq__question-icon {
  transform: rotate(45deg);
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-inverse);
}

/* --------------------------------------------------------------------------
   7. RESPOSTA
   -------------------------------------------------------------------------- */

.focofy-faq__answer {
  margin-top: var(--space-4);
  color: var(--faq-answer-color);
  line-height: var(--lh-relaxed);
  font-size: var(--font-size-base);
}

.focofy-faq__answer > *:first-child { margin-top: 0; }
.focofy-faq__answer > *:last-child  { margin-bottom: 0; }

.focofy-faq__item:not([open]) .focofy-faq__answer { display: none; }

/* --------------------------------------------------------------------------
   8. MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .focofy-faq__item      { padding: var(--space-4); }

  .focofy-faq__question  {
    font-size: var(--font-size-base);
    gap: var(--space-2);
  }

  .focofy-faq__question-icon {
    width: 24px;
    height: 24px;
    font-size: var(--font-size-sm);
  }
}

/* --------------------------------------------------------------------------
   9. REDUCED MOTION
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .focofy-faq__item,
  .focofy-faq__question-icon {
    transition: none;
  }
}