/*!
 * @file css/about.css
 * @description Estilos da página "Sobre" (containers, acordeão, back-to-top).
 *              Mantém consistência visual com Bootstrap/Chart.js e padrão CityZen.
 * @author Giselle Cristina Cardoso, André Lucas Novaes, Débora Zumkeller Sabonaro
 * @since 2025-11
 */

  
  .content {
    display: flex; /* Coloca imagem e formulário lado a lado */
    flex-direction: center; /* Permite adaptação para telas menores */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    gap: 150px; /* Espaço entre a imagem e o formulário */
    padding: 20px;
    flex: 1;
   } 

  .content-container {
    background-color: #FFFFFF;
    border-radius: 10px;
    padding: 20px;
    width: 90%;
    margin: 30px auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adiciona sombra */
  }
    
  .accordion-container {
    margin: 20px auto; /* Centraliza horizontalmente */
    padding: 20px; /* Espaçamento interno */
    width: 90%; /* Largura relativa */
    max-width: 800px; /* Limita a largura máxima */
    background-color: #FFFFFF; /* Fundo branco */
    border-radius: 10px; /* Bordas arredondadas */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra */  
  }
  
  .accordion {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }
  
  .accordion-icon {
    font-size: 20px;
    color: #4CAF50; /* Cor do ícone */
    transition: transform 0.3s ease; /* Animação */
  }
  
  .accordion-header {
    border-bottom: 1px solid #E0E0E0;
    font-size: 18px;
    font-weight: bold;
    padding: 15px;
    cursor: pointer;
    display: flex;
    justify-content: space-between; /* Ícone à direita */
    align-items: center;
  }
  
  .accordion-header:hover {
    background-color:rgb(230, 247, 231);
  }
  
  .accordion-content {
    background-color: #FFF; /* Fundo branco */
    padding: 15px; /* Espaçamento interno */
    font-size: 16px; /* Tamanho do texto */
    color: #333; /* Cor do texto */
    display: none; /* Esconde o conteúdo inicialmente */
    border-top: 1px solid #CCC; /* Linha entre o cabeçalho e o conteúdo */
  }
  
  .accordion.open .accordion-content {
    display: block; /* Mostra o conteúdo quando aberto */
  }

  .accordion.open .accordion-icon {
    transform: rotate(45deg); /* Ícone muda para indicar aberto */
  }
  
  .accordion-content ul {
    padding-left: 20px;
  }
  
  .accordion-content ul li {
    font-size: 16px; /* Tamanho do texto */
    color: #333; /* Cor do texto */
    margin-bottom: 10px; /* Espaçamento entre as perguntas */
    line-height: 1.5; /* Altura da linha para legibilidade */
    text-decoration: none; 
  }
  
  .accordion-content ul li:hover {
    color: #4CAF50; /* Muda a cor ao passar o mouse */
    cursor: pointer; /* Mostra que o item é clicável */
    text-decoration: none; /* Destaca a pergunta no hover */
  }
  
  .accordion-content ul li a {
    color: #333; /* Cor preta */
    text-decoration: none; /* Remove o sublinhado */
    font-weight: bold; /* Deixa o texto em negrito  */
    transition: color 0.3s ease; /* Transição suave ao passar o mouse */
  }
  
  .accordion-content ul li a:hover {
    color: #4CAF50; /* Cor verde ao passar o mouse */
    text-decoration: none; 
  }
  
  /* Estilo para perguntas e respostas */
  .faq-answer {
    display: none; /* Esconde as respostas inicialmente */
    margin-top: 5px;
    font-size: 14px; /* Texto menor para a resposta */
    color: #666; /* Cor mais clara */
  }
  
  .faq-question {
    font-weight: bold;
    cursor: pointer;
  }
  
  .faq-question:hover {
    color: #4CAF50; /* Muda a cor no hover */
  }
  
  .back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #4CAF50;
    color: #FFFFFF;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    display: none; /* Esconde inicialmente */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease;
  }
  
  .back-to-top:hover {
    background-color: #45A049;
  }