/*
  Accordion 2.2 — Estilos CSS
  Desenvolvido por L. Pedrosa
  Rádioagência Nacional — EBC (Empresa Brasil de Comunicação)
  Contexto: Podcast eAjudante Digital
  Licença: MIT — veja o arquivo LICENSE para mais detalhes
  Última atualização: 07 de agosto de 2025
*/

.tab-accordion-widget {
  margin: 24px 0;
  font-family: system-ui, sans-serif;
}

.tab-button {
  background-color: #2f7c89;
  color: #ffffff;
  border: none;
  border-radius: 6px; /* Raio aplicado a todos os cantos inicialmente */
  padding: 12px 18px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.3s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  gap: 8px;
}

.tab-button:after {
  content: '▶';
  font-size: 10px;
  color: #daff00;
  transition: transform 0.3s;
}

.tab-button.active:after {
  content: '▼';
}

.tab-button:hover,
.tab-button.active {
  background-color: #1a5a65;
  color: #daff00;
}

.tab-content {
  background-color: transparent;
  overflow-y: auto; /* ← permite rolagem vertical */
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
  opacity: 0;
  max-height: 0;
  scroll-behavior: smooth; /* ← rolagem suave */
  scrollbar-width: none;     /* ← esconde scrollbar no Firefox */
  -ms-overflow-style: none;  /* ← esconde scrollbar no IE/Edge */
}

/* ← esconde scrollbar no Chrome/Safari/Edge Chromium */
.tab-content::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.tab-content-inner {
  padding: 15px 18px;
  border: 2px solid #1a5a65;
  border-top: none;
  border-radius: 0 0 6px 6px;
  background-color: transparent;
}

/* MOBILE (Accordion Behavior) */
@media (max-width: 768px) {
  .tab-group {
    margin-bottom: 6px; /* Espaçamento entre os botões do accordion */
  }

  .tab-button.active {
    border-radius: 6px 6px 0 0;
  }

  .tab-content.active {
    opacity: 1;
    max-height: 1000px; /* Valor alto para permitir qualquer conteúdo */
  }
  
  /* Esconde o contêiner de conteúdo de desktop */
  .shared-tab-contents {
    display: none;
  }
}

/* DESKTOP (Tab Behavior) */
@media (min-width: 769px) {
  .tab-buttons-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: -22px; /* Puxa o conteúdo para cima para sobrepor a borda */
    align-items: stretch; /* força todos os filhos a mesma altura */

  }

  .tab-group {
    flex: 1; /* Faz com que cada grupo ocupe espaço igual */
  }
  
.tab-button {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: normal;
  font-size: clamp(16px, 2vw, 18px);
  border-radius: 6px 6px 0 0;
  min-width: 110px;
  height: 100%;
  text-align: center;
  padding: 12px 18px;
  font-weight: 700;
  cursor: pointer;
  background-color: #2f7c89;
  color: #ffffff;
  border: none;
  transition: all 0.3s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  gap: 8px;
  flex: 1; /* Garante divisão igual de espaço */
}  

  .tab-button:after {
    display: none; /* Esconde o ícone de seta no desktop */
  }

  /* Esconde todos os conteúdos da sua posição original no desktop */
  .tab-content {
    display: none;
  }

  /* O contêiner compartilhado terá o conteúdo ativo */
  .shared-tab-contents {
    position: relative;
    min-height: 100px;
  }
  
  /* O JavaScript moverá o .tab-content.active para dentro de .shared-tab-contents.
     Quando isso acontecer, o conteúdo voltará a ser visível. */
  .shared-tab-contents .tab-content {
      display: block;
      opacity: 1;
      max-height: none; /* Garante que a altura não seja limitada */
  }
}

    /* Fix para h2 e h3 em fundo escuro */
    h2, h3 {
  color: #ffffff !important;
}