/* =========================================
   FAQ — Estilos da página
   Depende das variáveis globais do style.css
========================================= */

/* ===== (1) Ajuste local do menu ativo: só cor azul, SEM linha ===== */
.navbar ul li a.active {
  color: var(--primary-color) !important;
  text-decoration: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
.navbar ul li a.active::after,
.navbar ul li a.active::before,
.navbar ul li a::after,
.navbar ul li a::before {
  content: none !important;
  display: none !important;
}

/* ===== Seção base ===== */
.section-faq {
  background: var(--white);
  padding: 56px 0;
}

/* ===== Título ===== */
.faq-title {
  font-size: clamp(1.3rem, .8vw + 1rem, 1.6rem);
  margin-bottom: 22px;
  color: var(--secondary-color);
  font-weight: 800;
  border-left: 6px solid var(--primary-color);
  padding-left: 12px;
  letter-spacing: .2px;
}

/* ===== Acordeão ===== */
.accordion {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Item do FAQ (card) */
.faq-item {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  transition: box-shadow 220ms var(--ease), border-color 220ms var(--ease), transform 220ms var(--ease);
  will-change: transform, box-shadow;
}
.faq-item:hover {
  transform: translateY(-2px);
  border-color: rgba(0,0,0,0.09);
  box-shadow: 0 12px 26px rgba(0,0,0,0.12);
}

/* Cabeçalho da pergunta */
.faq-question {
  width: 100%;
  background: #fff;
  border: 0;
  text-align: left;
  padding: 18px 20px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-dark);
  cursor: pointer;
  position: relative;
  transition: background 180ms var(--ease), color 180ms var(--ease);
}
.faq-question:hover { background: #f7f9fb; }

/* “+” / “x” */
.faq-question .icon {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 900;
  line-height: 1;
  transition: transform 250ms ease;
}
.faq-item.active .faq-question .icon {
  transform: translateY(-50%) rotate(45deg); /* + vira x */
}

/* Conteúdo da resposta (colapsável) */
.faq-answer {
  max-height: 0;                /* fechado por padrão */
  overflow: hidden;
  background: #fafafa;
  padding: 0 20px;              /* sem padding vertical quando fechado */
  transition: max-height 350ms ease, padding 250ms ease;
  font-size: .95rem;
  line-height: 1.7;
  color: var(--text-dark);
  will-change: max-height;
  border-top: 1px solid rgba(0,0,0,0.06);
}

/* aberto */
.faq-item.active .faq-answer {
  padding: 16px 20px 18px;
}

/* espaçamento interno “amigável” */
.faq-answer p {
  margin: 0 0 14px;
  padding: 12px 0;              /* respiro vertical */
  line-height: 1.7;
}
.faq-answer p:last-child { margin-bottom: 0; }

/* listas */
.faq-answer ul,
.faq-answer ol { margin: 8px 0 14px 1.25rem; }

/* ===== Foco acessível ===== */
.faq-question:focus-visible,
.faq-answer a:focus-visible {
  outline: 3px solid rgba(83,147,215,.35);
  outline-offset: 2px;
  border-radius: 12px;
}

/* ===== Imagens no FAQ ===== */

/* 1) Padrão seguro para imagens grandes (diagramas/prints) */
.section-faq .faq-answer img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 10px 0;
}

/* 2) ÍCONES inline: força tamanho único/alinhamento */
.section-faq .faq-answer p img[src*="icon"],
.section-faq .faq-answer p img[src*="icone"],
.section-faq .faq-answer p img[src*="lixeira"],
.section-faq .faq-answer p img[src*="relogio"],
.section-faq .faq-answer p img[src*="pasta"],
.section-faq .faq-answer p img[src*="arquivo"],
.section-faq .faq-answer p img[src*="setas"],
.section-faq .faq-answer p img[src*="tag"] {
  display: inline-block;
  height: 22px;
  width: auto;
  margin: 0 4px;
  vertical-align: middle;
}

/* 3) Diagramas grandes dentro de <p>: vira bloco */
.section-faq .faq-answer p img:not([src*="icon"]):not([src*="icone"])
:not([src*="lixeira"]):not([src*="relogio"]):not([src*="pasta"])
:not([src*="arquivo"]):not([src*="setas"]):not([src*="tag"]) {
  display: block;
  height: auto;
  margin: 10px 0;
}

.section-faq .faq-answer img.diagram {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 12px auto;
}

/* ===== Responsividade ===== */
@media (max-width: 800px) {
  .faq-title { margin-bottom: 20px; }

  /* Aumenta a área de clique no mobile */
  .faq-question { padding: 20px; }
  .faq-item.active .faq-answer { padding: 14px 18px 16px; }
}

/* ===== Respeita preferência por menos movimento ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}