/* FAQ Generator Frontend Styles - Mobile First */

:root {
  /* Cores base (Default/Light) */
  --faq-bg: #ffffff;
  --faq-primary: #0d6efd;
  --faq-text: #212529;
  --faq-secondary: #f8f9fa;
  --faq-accent: #fd7e14;
  --faq-radius: 8px;
  --faq-gap: 1.25rem;
  --faq-border: #e2e2e2;
  --faq-transition: all 0.3s ease;
  --faq-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Estilos Base - Mobile First */
/* Default style é automaticamente aplicado pela classe .faq-generator */
.faq-generator {
  max-width: 800px;
  margin: 20px auto;
  padding: 0 20px;
  font-family: "Segoe UI", Roboto, sans-serif;
  color: var(--faq-text) !important;
}

/* Forçando cores dos links para evitar interferência do tema */
.faq-generator .faq-answer a {
  color: var(--faq-primary) !important;
}

.faq-generator .faq-answer a:hover,
.faq-generator .faq-answer a:focus {
  color: var(--faq-text) !important;
  text-decoration: underline !important;
}

.faq-generator * {
  box-sizing: border-box;
}

/* Cada item do FAQ */
.faq-generator .faq-item {
  margin-bottom: 10px;
  border-radius: 4px;
  overflow: hidden;
}

/* Botão da pergunta */
.faq-generator .faq-question {
  cursor: pointer;
  background-color: var(--faq-secondary);
  padding: 16px 20px;
  margin: 0;
  border: none;
  width: 100%;
  font-size: 17px;
  font-weight: 600;
  text-align: left;
  position: relative;
  color: var(--faq-text);
  transition: background-color 0.3s ease, color 0.3s ease;
  border-radius: var(--faq-radius);
}

/* Ícone da seta */
.faq-generator .faq-question::after {
  content: "▼";
  position: absolute;
  right: 20px;
  font-size: 14px;
  transform: rotate(0deg);
  transition: transform 0.3s ease;
  color: var(--faq-text);
}

/* Removido hover para simplificação */

/* Quando estiver aberta */
.faq-generator .faq-question[aria-expanded='true'] {
  background-color: var(--faq-primary);
  color: white;
}

/* Rotaciona a seta ao abrir */
.faq-generator .faq-question[aria-expanded='true']::after {
  transform: rotate(180deg);
}

/* Corrige cinza pós-clique */
.faq-generator .faq-question:focus,
.faq-generator .faq-question:active {
  outline: none;
  box-shadow: none;
}

/* Resposta oculta por padrão */
.faq-generator .faq-answer {
  display: none;
  padding: 16px 20px;
  background-color: var(--faq-bg);
  font-size: 16px;
  line-height: 1.6;
  color: var(--faq-text);
  border-radius: 0 0 var(--faq-radius) var(--faq-radius);
  margin-top: -1px;
}

/* Resposta visível */
.faq-generator .faq-answer.visible {
  display: block;
}

/* Responsividade para dispositivos menores */
@media (max-width: 768px) {
  .faq-generator {
    padding: 0 10px;
  }
  
  .faq-generator .faq-question {
    font-size: 16px;
    padding: 12px 16px;
  }
  
  .faq-generator .faq-question::after {
    right: 15px;
  }
  
  .faq-generator .faq-answer {
    padding: 15px;
    font-size: 15px;
  }
}

/* Light Mode (Default) */
.faq-style-light {
  --faq-primary: #0d6efd;
  --faq-bg: #ffffff;
  --faq-text: #212529;
  --faq-secondary: #f8f9fa;
  --faq-border: #e2e2e2;
}

.faq-style-light .faq-item {
  margin-bottom: 10px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.faq-style-light .faq-question {
  background-color: var(--faq-secondary);
  border-left: 4px solid var(--faq-primary);
  font-weight: 600;
}

.faq-style-light .faq-question[aria-expanded='true'] {
  background-color: var(--faq-primary);
  color: white;
}

.faq-style-light .faq-answer {
  background-color: var(--faq-bg);
  border-top: 1px solid var(--faq-border);
}

/* Dark Mode */
.faq-style-dark {
  --faq-primary: #375bd2;
  --faq-bg: #0f172a;
  --faq-text: #e2e8f0;
  --faq-secondary: #1e293b;
  --faq-border: #334155;
}

.faq-style-dark .faq-item {
  margin-bottom: 10px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.faq-style-dark .faq-question {
  background-color: var(--faq-secondary);
  border-left: 4px solid var(--faq-primary);
  font-weight: 600;
  color: var(--faq-text);
}

.faq-style-dark .faq-question[aria-expanded='true'] {
  background-color: var(--faq-primary);
  color: white;
}

.faq-style-dark .faq-question::after {
  color: var(--faq-text);
}

.faq-style-dark .faq-answer {
  background-color: var(--faq-bg);
  color: var(--faq-text);
  border-top: 1px solid var(--faq-border);
}

/* Estilo Custom - será estilizado via CSS personalizado fornecido pelo usuário */
.faq-style-custom {
  /* Variáveis padrão que podem ser sobrescritas pelo usuário */
  --faq-primary: #0d6efd;
  --faq-bg: #ffffff;
  --faq-text: #212529;
  --faq-secondary: #f8f9fa;
  --faq-border: #e2e2e2;
}

.faq-style-custom .faq-item {
  margin-bottom: 10px;
  border-radius: 4px;
  overflow: hidden;
}

.faq-style-custom .faq-question {
  background-color: var(--faq-secondary);
  border-left: 4px solid var(--faq-primary);
  font-weight: 600;
}

.faq-style-custom .faq-question[aria-expanded='true'] {
  background-color: var(--faq-primary);
  color: white;
}

.faq-style-custom .faq-answer {
  background-color: var(--faq-bg);
  border-top: 1px solid var(--faq-border);
}

/* Adiciona os estilos para versão responsiva */
@media (min-width: 768px) {
  .faq-generator .faq-question {
    font-size: 1.1rem;
    padding: 18px 20px;
  }
  
  .faq-generator .faq-answer {
    padding: 20px;
    font-size: 16px;
  }
}