/* Estilos específicos da página Template Sant Programa Brasileiro
 * Extraído de <style> inline em template-programa-brasileiro.php para organização
 * Caso altere aqui, limpar cache do navegador se necessário.
 */

/* Cores padrão já definidas como CSS variables em header.php:
   --azul: #27348B;
   --amarelo: #FEA800;
   --vermelho: #BE1D2C;
   --azul-escuro: #0A1455;
   --escuro: #333333; */

h3,
h4,
h5 {
  color: var(--azul);
  margin-top: 0;
  /* line-height: 131%; */
  text-wrap: auto;
}

.botao-nav-prog-bra {
  margin-top: 8px;
  margin-right: 12px;
  font-size: 1rem;
  background-color: gainsboro;
  color: var(--escuro);
  border-color: gainsboro;
  font-weight: bold;
}

.botao-nav-prog-bra:hover {
  background-color: var(--azul);
  border-color: var(--azul);
}

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
  color: whitesmoke;
  background-color: #182470;
  border-color: var(--azul);
}

.botao-alem-sala {
  background-color: var(--amarelo);
  border-color: gainsboro;
  color: var(--escuro);
}

.botao-alem-sala:hover {
  background-color: var(--azul);
  border-color: var(--azul);
  color: whitesmoke;
}

.card-img-top {
  max-height: 130px;
}

.div-item-alem-sala:hover {
  cursor: pointer;
  /* animation: rubberBand; */
  animation: pulse;
  /* referring directly to the animation's @keyframe declaration */
  animation-duration: 1s;
  /* don't forget to set a duration! */
}

a.link-paginas {
  text-decoration: underline;
  color: var(--escuro) !important;
}

.badge-links {
  font-size: large;
  margin-right: 8px;
  background-color: var(--azul);
  color: whitesmoke;
  font-weight: 300;
  margin-bottom: 8px;
}

.badge {
  background-color: var(--vermelho);
  color: whitesmoke;
  font-weight: 300;
  margin-right: 8px;
}

.badge-brasileiro {
  background-color: var(--azul);
}

h6 {
  font-weight: bold;
}

p {
  line-height: 1.6;
}

/* ==== Blocos comuns (todas as telas) - Integração com Animate.css ==== */
.comum-programa [data-animate] {
  visibility: hidden;
}

.comum-programa [data-animate].in-view {
  visibility: visible;
}

/* Mantém animação original como fallback */
.comum-programa [data-animate]:not(.animate__animated) {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.21, 0.72, 0.34, 1);
}

.comum-programa [data-animate]:not(.animate__animated).in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Personalização das animações do Animate.css */
.animate__animated {
  --animate-duration: 0.8s;
}

.animate__animated.animate__slow {
  --animate-duration: 1.2s;
}

.animate__animated.animate__fast {
  --animate-duration: 0.6s;
}

/* ===== Ensino Fundamental Anos Finais (layout refinado) ===== */
.ens-fund-af-conteudo {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.ens-fund-af-conteudo .intro {
  background: linear-gradient(135deg, #ffffff 0%, #f5f7ff 100%);
  padding: 1.5rem 1.75rem;
  border: 1px solid #e3e8f5;
  border-radius: 18px;
  box-shadow: 0 4px 14px -4px rgba(10, 20, 85, 0.15);
}

.ens-fund-af-conteudo .title-main {
  font-size: 1.45rem;
  margin-bottom: 0.25rem;
}

.ens-fund-af-conteudo .subtitle-first {
  color: var(--vermelho);
  font-weight: 600;
  margin-bottom: 1rem;
}

.ens-fund-af-conteudo .section-block {
  background: #fff;
  padding: 1.25rem 1.5rem;
  border-left: 5px solid var(--azul);
  border-radius: 14px;
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.08);
}

.ens-fund-af-conteudo .section-block.highlight {
  border-left-color: var(--amarelo);
  background: linear-gradient(90deg, #fffaf1 0%, #ffffff 60%);
}

.ens-fund-af-conteudo .section-block h6 {
  margin-top: 0;
}

.ens-fund-af-conteudo ul.lista {
  margin-left: 1rem;
}

.ens-fund-af-aside {
  position: relative;
}
.ens-fund-af-aside {
  /* força alinhamento ao topo do row */
  align-self: flex-start;
  margin-top: 0;
  padding-top: 0;
}
.ens-fund-af-aside-inner {
  position: sticky;
  top: 0; /* alinhar topo da imagem com o conteúdo (corrige desalinhamento) */
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.ens-fund-af-aside .figura-programa img,
.ens-fund-af-aside-inner img.childeducation-img {
  object-fit: cover;
  width: 100%;
  height: auto;
  max-height: 360px;
  display: block;
  border-radius: 12px;
}

/* garantir que figures e imagens não adicionem spacing superior */
.ens-fund-af-aside .figura-programa,
.ens-fund-af-aside .figura-programa img,
.ens-fund-af-aside-inner img.childeducation-img {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.schedule-card table thead tr td {
  font-size: 0.85rem;
}
.schedule-card table tbody tr td {
  font-size: 0.8rem;
}

.cta-block {
  margin-top: 0.5rem;
}
.btn-whatsapp-modern {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 0.9rem 1.4rem;
  box-shadow: 0 4px 14px -4px rgba(34, 139, 64, 0.45) !important;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.btn-whatsapp-modern:hover {
  transform: translateY(-2px);
}
.btn-whatsapp-modern:active {
  transform: translateY(0);
}

/* Responsividade */
@media (max-width: 991.98px) {
  .ens-fund-af-aside-inner {
    position: static;
  }
  .ens-fund-af-aside {
    margin-top: 2.5rem;
  }
  .ens-fund-af-conteudo .section-block,
  .ens-fund-af-conteudo .intro {
    padding: 1.25rem 1.25rem;
  }
}

@media (max-width: 575.98px) {
  .ens-fund-af-conteudo .title-main {
    font-size: 1.25rem;
  }
  .ens-fund-af-conteudo .intro {
    padding: 1rem 1rem;
  }
  .ens-fund-af-conteudo .section-block {
    padding: 1rem 1rem;
  }
  .btn-whatsapp-modern {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 575.98px) {
  /* Força alinhamento à esquerda em mobile */
  .text-center,
  .text-justify,
  .comum-programa [data-animate],
  .ens-fund-af-conteudo,
  .ens-fund-af-aside,
  .ens-fund-af-conteudo p,
  .ens-fund-af-conteudo h3,
  .ens-fund-af-conteudo h4,
  .ens-fund-af-conteudo h5 {
    text-align: left !important;
  }
}