/* ==========================================================================
   SEMPRE EM FAMÍLIA — FOLHA DE ESTILOS PRINCIPAL
   Organização do arquivo:
   1. Variáveis globais (cores, fontes)
   2. Reset básico
   3. Estilos globais de texto e links
   4. Cabeçalho e menu de navegação
   5. Menu mobile (hambúrguer)
   6. Container de conteúdo principal
   7. Home institucional (Sobre Nós + vídeo)
   8. Fundo decorativo da página institucional
   9. Formulário de contato
   10. Mensagens de alerta (sucesso/erro/info)
   11. Feeds em grid estilo YouTube (vídeos e notícias)
   12. Área de Downloads (categorias, submenu, thumbnails)
   13. Rodapé
   14. Responsividade (tablet e mobile)
   15. CARROSSEL DE BANNER (HOME)
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. VARIÁVEIS GLOBAIS
   Centralizam cores e fonte em um único lugar. Qualquer ajuste de
   identidade visual (ex: trocar o azul principal) deve ser feito aqui,
   nunca diretamente nas regras abaixo.
   -------------------------------------------------------------------------- */
:root {
  --azul-principal: #1b3b6f;
  --azul-escuro: #10294f;
  --dourado: #e0a458;
  --branco: #ffffff;
  --cinza-claro: #f5f7fa;
  --cinza-borda: #d7dce3;
  --texto: #242a33;
  --texto-suave: #5e6875;
  --sucesso-fundo: #dff4e5;
  --sucesso-texto: #176b35;
  --erro-fundo: #fde4e4;
  --erro-texto: #9c2222;
  --fonte: Arial, Helvetica, sans-serif;
}


/* --------------------------------------------------------------------------
   2. RESET BÁSICO
   Remove margens e espaçamentos padrão do navegador para garantir
   consistência entre Chrome, Firefox, Safari e Edge.
   -------------------------------------------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* Rolagem suave ao clicar em âncoras internas */
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--texto);
  background: var(--branco);
  font-family: var(--fonte);
  line-height: 1.6;
}

/* Respeita usuários que configuraram redução de movimento no sistema
   operacional (acessibilidade) */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* --------------------------------------------------------------------------
   3. ESTILOS GLOBAIS DE TEXTO E LINKS
   -------------------------------------------------------------------------- */
a {
  color: var(--azul-principal);
}

/* Estado de foco visível para navegação por teclado (acessibilidade) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--dourado);
  outline-offset: 3px;
}

h1,
h2,
h3 {
  line-height: 1.3;
}


/* --------------------------------------------------------------------------
   4. CABEÇALHO E MENU DE NAVEGAÇÃO
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--azul-principal);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
}

.header-container {
  width: min(1200px, 100%);
  min-height: 80px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: inline-flex;
  align-items: center;
}

.logo img {
  display: block;
  width: 200px;
  height: 60px;
  max-width: 100%;
  object-fit: contain;
}

.main-nav ul {
  display: flex;
  gap: 30px;
  list-style: none;
}

.main-nav a {
  color: var(--branco);
  text-decoration: none;
  font-weight: 700;
}

.main-nav a:hover {
  color: var(--dourado);
}


/* --------------------------------------------------------------------------
   5. MENU MOBILE (HAMBÚRGUER)
   Escondido por padrão; exibido apenas em telas pequenas via media query
   na seção 14.
   -------------------------------------------------------------------------- */
.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 28px;
  height: 3px;
  margin: 5px auto;
  background: var(--branco);
  border-radius: 2px;
}


/* --------------------------------------------------------------------------
   6. CONTAINER DE CONTEÚDO PRINCIPAL
   Aplica-se a todas as páginas via <main class="page-content ...">
   -------------------------------------------------------------------------- */
.page-content {
  flex: 1;
  width: min(1200px, 100%);
  margin: 0 auto;
  padding: 48px 20px 64px;
}


/* --------------------------------------------------------------------------
   7. HOME INSTITUCIONAL (SOBRE NÓS + VÍDEO)
   -------------------------------------------------------------------------- */
.about-content {
  max-width: 850px;
}

.about-content h1 {
  margin-bottom: 18px;
  color: var(--azul-principal);
}

.about-content h2 {
  margin-top: 28px;
  margin-bottom: 14px;
  color: var(--azul-principal);
}

.about-content p {
  margin-bottom: 14px;
}

.about-content ul {
  margin: 0 0 20px;
  padding-left: 24px;
}

.about-content li {
  margin-bottom: 10px;
}

/* Bloco do vídeo institucional do YouTube na Home */
.video-institucional {
  margin: 32px 0 40px;
}

.video-institucional h2 {
  margin-bottom: 12px;
}

.video-wrapper {
  position: relative;
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16 / 9;
  margin: 20px auto 0;
  overflow: hidden;
  background: var(--cinza-claro);
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

.video-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Links de navegação interna ao final da Home */
.internal-links {
  max-width: 850px;
  margin: 40px auto 0;
}

.internal-links h2 {
  margin-bottom: 14px;
  color: var(--azul-principal);
}

.internal-links p {
  margin-bottom: 14px;
}


/* --------------------------------------------------------------------------
   8. FUNDO DECORATIVO DA PÁGINA INSTITUCIONAL
   Aplicado via <body class="page-sobre">. Fica atrás de todo o conteúdo
   (z-index: -1) e não interfere em cliques (pointer-events: none).
   -------------------------------------------------------------------------- */
body.page-sobre {
  position: relative;
}

.about-background {
  position: fixed;
  inset: 0;
  background-image: url('/assets/img/Logo_SF2.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 480px auto;
  opacity: 0.4;
  z-index: -1;
  pointer-events: none;
}


/* --------------------------------------------------------------------------
   9. FORMULÁRIO DE CONTATO
   -------------------------------------------------------------------------- */
.contact-content {
  max-width: 850px;
}

.contact-content h1 {
  margin-bottom: 18px;
  color: var(--azul-principal);
}

.contact-content > p {
  margin-bottom: 24px;
}

.contact-form {
  max-width: 650px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.form-group label {
  font-weight: 700;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 13px 14px;
  color: var(--texto);
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: 6px;
  font: inherit;
}

.form-group textarea {
  resize: vertical;
  min-height: 150px;
}

.button {
  align-self: flex-start;
  padding: 13px 24px;
  color: var(--branco);
  background: var(--azul-principal);
  border: 0;
  border-radius: 6px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.button:hover {
  background: var(--azul-escuro);
}

.button--full {
  margin: 12px 16px 16px;
  text-align: center;
}

/* Campo honeypot: invisível para humanos, usado contra robôs de spam */
.honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* --------------------------------------------------------------------------
   10. MENSAGENS DE ALERTA (SUCESSO / ERRO / INFO)
   -------------------------------------------------------------------------- */
.alert {
  max-width: 650px;
  margin-bottom: 24px;
  padding: 14px 16px;
  border-radius: 6px;
  font-weight: 700;
}

.alert-success {
  color: var(--sucesso-texto);
  background: var(--sucesso-fundo);
}

.alert-error {
  color: var(--erro-texto);
  background: var(--erro-fundo);
}

.alert-info {
  color: #1b3b6f;
  background: #e6f0fb;
}


/* --------------------------------------------------------------------------
   11. FEEDS EM GRID ESTILO YOUTUBE (VÍDEOS E NOTÍCIAS)
   Usado nas páginas "Nosso Canal YouTube" e "Notícias Adventistas".
   O número de colunas é controlado via variáveis CSS customizadas
   (--cols-desktop, --cols-tablet, --cols-mobile), definidas
   dinamicamente pelo PHP em cada página — não é necessário editar
   este bloco para mudar a quantidade de colunas.
   -------------------------------------------------------------------------- */
.feed-page-content {
  max-width: 1200px;
}

.feed-page-content h1 {
  margin-bottom: 18px;
  color: var(--azul-principal);
}

.feed-page-content > p {
  max-width: 800px;
  margin-bottom: 16px;
  color: var(--texto-suave);
}

.feed-page-content .feed-grid {
  margin-top: 30px;
  margin-bottom: 40px;
}

.feed-grid {
  display: grid;
  gap: 28px 24px;
  grid-template-columns: repeat(var(--cols-desktop, 4), 1fr);
  text-align: left;
}

.feed-card {
  display: flex;
  flex-direction: column;
  color: var(--texto);
  text-decoration: none;
}

/* Thumbnail em proporção 16:9, padrão de vídeo */
.feed-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--cinza-claro);
  border-radius: 10px;
}

.feed-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.feed-card:hover .feed-thumb img {
  transform: scale(1.04);
}

/* Exibido quando o item do feed não possui imagem */
.feed-thumb-vazio {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--cinza-borda), var(--cinza-claro));
}

/* Ícone de "play" sobre a thumbnail, exibido apenas em vídeos */
.feed-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.2s;
}

.feed-card:hover .feed-play-icon {
  opacity: 1;
}

.feed-card-titulo {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 12px;
  color: var(--texto);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
}

.feed-card:hover .feed-card-titulo {
  color: var(--azul-principal);
}

.feed-card-data {
  margin-top: 4px;
  color: var(--texto-suave);
  font-size: 0.8rem;
}

/* Texto editorial ao final das páginas de feed (importante para
   políticas do Google AdSense — ver histórico do projeto) */
.feed-final-texto {
  max-width: 800px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--cinza-borda);
}

.feed-final-texto h2 {
  margin-bottom: 12px;
  color: var(--azul-principal);
}


/* --------------------------------------------------------------------------
   12. ÁREA DE DOWNLOADS (CATEGORIAS, SUBMENU, THUMBNAILS)
   -------------------------------------------------------------------------- */
.downloads-content {
  max-width: 1000px;
}

.downloads-content h1 {
  margin-bottom: 8px;
  color: var(--azul-principal);
}

.downloads-subtitulo {
  margin-bottom: 20px;
  color: var(--texto-suave);
  font-size: 1.1rem;
  font-weight: 700;
}

.downloads-content > p {
  margin-bottom: 20px;
}

.downloads-content h3 {
  margin-top: 20px;
  margin-bottom: 10px;
  color: var(--azul-principal);
}

.downloads-content ul {
  margin: 0 0 20px;
  padding-left: 24px;
}

.downloads-content li {
  margin-bottom: 10px;
}

/* Submenu de categorias (Aventureiros, Desbravadores, Escola Sabatina...) */
.downloads-submenu {
  margin: 30px 0 10px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--cinza-borda);
}

.downloads-submenu ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  list-style: none;
}

.downloads-submenu a {
  display: inline-block;
  padding: 9px 16px;
  color: var(--azul-principal);
  background: var(--cinza-claro);
  border: 1px solid var(--cinza-borda);
  border-radius: 30px;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.downloads-submenu a:hover {
  background: var(--dourado);
  color: var(--texto);
}

.downloads-submenu a.submenu-ativo {
  color: var(--branco);
  background: var(--azul-principal);
}

.downloads-categoria-titulo {
  margin-top: 20px;
  margin-bottom: 20px;
}

/* Grid de arquivos disponíveis para download */
.downloads-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.download-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.download-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 140px;
  background: var(--cinza-claro);
  overflow: hidden;
}

.download-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ícone genérico de arquivo (usado quando não é imagem) */
.file-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  color: var(--branco);
}

/* Cores por tipo de arquivo */
.file-icon--pdf {
  background: #d9534f;
}

.file-icon--zip {
  background: #6c757d;
}

.file-icon--mp3 {
  background: #5cb85c;
}

.file-icon--docx {
  background: #2b6cb0;
}

.file-icon--pptx {
  background: #dd6b20;
}

.download-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px 6px;
}

.download-nome {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--texto);
  overflow-wrap: anywhere;
}

.download-meta {
  font-size: 0.8rem;
  color: var(--texto-suave);
}


/* --------------------------------------------------------------------------
   13. RODAPÉ
   -------------------------------------------------------------------------- */
.site-footer {
  margin-top: auto;
  padding: 30px 20px;
  color: var(--branco);
  background: var(--azul-principal);
  text-align: center;
}

.footer-container {
  width: min(1200px, 100%);
  margin: 0 auto;
}

.social-links,
.footer-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 28px;
}

.social-links {
  margin-top: 14px;
}

.social-links a,
.footer-nav a {
  color: var(--branco);
  text-decoration: none;
}

.social-links a {
  font-weight: 700;
}

.footer-nav {
  margin-top: 20px;
  font-size: 0.92rem;
}

.social-links a:hover,
.footer-nav a:hover {
  color: var(--dourado);
}


/* --------------------------------------------------------------------------
   14. RESPONSIVIDADE (TABLET E MOBILE)
   Abordagem mobile-first invertida: como o layout base já é desktop,
   usamos max-width para "desmontar" progressivamente o layout em
   telas menores, conforme recomendação de boas práticas de RWD.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .header-container {
    min-height: 70px;
  }

  .logo img {
    width: 165px;
    height: 50px;
  }

  .menu-toggle {
    display: block;
  }

  .main-nav {
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    display: none;
    background: var(--azul-principal);
  }

  .main-nav.active {
    display: block;
  }

  .main-nav ul {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 10px 20px 20px;
  }

  .main-nav li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  }

  .main-nav a {
    display: block;
    padding: 14px 0;
  }

  .page-content {
    padding-top: 32px;
  }

  .about-background {
    background-size: 320px auto;
  }

  .button {
    width: 100%;
  }

  .feed-grid {
    grid-template-columns: repeat(var(--cols-tablet, 2), 1fr);
    gap: 22px 16px;
  }
}

@media (max-width: 480px) {
  .page-content {
    padding-right: 15px;
    padding-left: 15px;
  }

  .about-background {
    background-size: 240px auto;
  }

  .social-links,
  .footer-nav {
    flex-direction: column;
    gap: 12px;
  }

  .feed-grid {
    grid-template-columns: repeat(var(--cols-mobile, 1), 1fr);
    gap: 20px;
  }

  .video-wrapper {
    border-radius: 0;
  }

  .downloads-grid {
    grid-template-columns: 1fr 1fr;
  }

  .download-thumb {
    height: 110px;
  }

  .file-icon {
    width: 48px;
    height: 48px;
  }
}

/* --------------------------------------------------------------------------
   15. CARROSSEL DE BANNER (HOME)
   As imagens são listadas automaticamente pelo PHP a partir da pasta
   assets/img/banner/. O carrossel funciona mesmo sem JavaScript
   (mostra a primeira imagem de forma estática como fallback).
   -------------------------------------------------------------------------- */
.banner-carrossel {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  aspect-ratio: 3 / 1;
  max-height: 200px;
  overflow: hidden;
  background: var(--cinza-claro);
}

.banner-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.6s ease-in-out;
}

.banner-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}

.banner-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.banner-seta {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 44px;
  height: 44px;
  color: var(--branco);
  background: rgba(0, 0, 0, 0.35);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transform: translateY(-50%);
  font-size: 1.2rem;
  transition: background 0.2s;
}

.banner-seta:hover {
  background: rgba(0, 0, 0, 0.55);
}

.banner-seta--prev {
  left: 16px;
}

.banner-seta--next {
  right: 16px;
}

.banner-indicadores {
  position: absolute;
  bottom: 16px;
  left: 50%;
  z-index: 2;
  display: flex;
  gap: 10px;
  transform: translateX(-50%);
}

.banner-ponto {
  width: 12px;
  height: 12px;
  padding: 0;
  background: rgba(255, 255, 255, 0.55);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s;
}

.banner-ponto--ativo,
.banner-ponto:hover {
  background: var(--branco);
}

@media (max-width: 768px) {
  .banner-carrossel {
    aspect-ratio: 3 / 1;
    max-height: 320px;
  }

  .banner-seta {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .banner-carrossel {
    aspect-ratio: 16 / 9;
    max-height: 260px;
  }
}