/* ================================================================
   Sol da Meia-Noite — estilos customizados
   O grosso do layout vem do Tailwind (CDN). Aqui ficam apenas os
   casos que o Tailwind não cobre: conteúdo vindo do editor rich text
   e os detalhes tipográficos do countdown.
   ================================================================ */

/* Regra guarda-chuva: neutraliza qualquer animação/transição (daqui
   e das classes motion-reduce: do Tailwind) para quem pediu menos
   movimento no sistema operacional. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Transições nativas de navegação entre páginas, onde o navegador
   suporta a API — quem não suporta ignora a regra silenciosamente. */
@view-transition {
  navigation: auto;
}

/* ── Conteúdo do editor (Quill) ───────────────────────────────── */
.rich-text p                  { margin-bottom: .9rem; }
.rich-text p:last-child       { margin-bottom: 0; }
.rich-text ul,
.rich-text ol                 { margin: .6rem 0 .6rem 1.4rem; }
.rich-text ul                 { list-style: disc; }
.rich-text li                 { margin-bottom: .3rem; }

/* O Quill sempre salva QUALQUER lista como <ol data-list="bullet|ordered">
   — nunca <ul>, mesmo para "lista com marcadores". O marcador de verdade
   vem do CSS do próprio editor (quill.snow.css), que só é carregado no
   admin; sem esta regra, toda lista aparece numerada na página pública,
   inclusive as com marcadores. */
.rich-text ol                          { list-style: none; counter-reset: ql-ordered; }
.rich-text ol li[data-list]            { position: relative; padding-left: 1.2em; }
.rich-text ol li[data-list]::before    { position: absolute; left: 0; }
.rich-text ol li[data-list="bullet"]::before  { content: '\2022'; }
.rich-text ol li[data-list="ordered"]::before { content: counter(ql-ordered) '.'; counter-increment: ql-ordered; }
.rich-text a                  { color: #c9973f; text-decoration: underline; }
.rich-text a:hover            { color: #9c7530; }
.rich-text strong             { font-weight: 600; }
.rich-text em                 { font-style: italic; }
.rich-text u                  { text-decoration: underline; }
.rich-text h1,
.rich-text h2,
.rich-text h3                 { font-weight: 600; margin: 1.2rem 0 .6rem; color: #0c1120; }
.rich-text h1                 { font-size: 1.5rem; }
.rich-text h2                 { font-size: 1.25rem; }
.rich-text h3                 { font-size: 1.1rem; }
.rich-text img                { max-width: 100%; height: auto; border-radius: 8px; margin: .8rem 0; }
.rich-text blockquote         { border-left: 3px solid #c9973f; padding-left: 1rem; margin: .8rem 0; color: #776b5b; }

/* Rich text sobre fundo escuro (rodapé) */
.rich-text-dark p             { margin-bottom: .7rem; }
.rich-text-dark p:last-child  { margin-bottom: 0; }
.rich-text-dark ul            { margin: .5rem 0 .5rem 1.2rem; list-style: disc; }
.rich-text-dark li            { margin-bottom: .25rem; }
.rich-text-dark a             { color: #c9973f; text-decoration: underline; }

/* ── Countdown ────────────────────────────────────────────────── */
.cd-num {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: transform .3s ease, opacity .3s ease;
}
.cd-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* Só o dígito que mudou recebe essa classe via JS — evita animar os
   4 números a cada segundo, quando normalmente só "seg" muda. */
.cd-num.cd-num--tick {
  animation: cd-tick .4s ease;
}
@keyframes cd-tick {
  0%   { transform: translateY(-6px); opacity: .35; }
  100% { transform: translateY(0);    opacity: 1; }
}

/* ── Scroll-reveal ────────────────────────────────────────────── */
/* Só ativa com JS (classe .js no <html>, ver includes/header.php):
   sem isso, o seletor não casa e o conteúdo aparece normalmente. */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease-out, transform .6s ease-out;
}
.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Skeleton do mapa ─────────────────────────────────────────── */
/* Some sem JS junto com o iframe, que também não carrega sem JS. */
#mapa-skeleton {
  display: none;
}
.js #mapa-skeleton {
  display: block;
}

/* ── Parallax do banner ───────────────────────────────────────── */
/* O deslocamento acontece no <picture> (via JS), nunca na <img> —
   .banner-img continua com object-fit: contain para nunca cortar a
   arte; o overflow:hidden aqui recorta só o "vão" do deslocamento,
   que fica preenchido pela mesma cor de fundo do letterbox abaixo. */
.banner-wrap {
  display: block;
  overflow: hidden;
  max-width: 1200px;
  max-height: 620px;
  margin: 30px auto 0;
  border-radius: 1rem 1rem 0 0; /* mesmo raio do rounded-2xl do Tailwind — junto com o
                                   rounded-b-2xl do painel bg-cream logo abaixo, forma
                                   um cartão único (imagem em cima, corpo embaixo) */
}

/* ── Banner ───────────────────────────────────────────────────── */
/* aspect-ratio reflete o tamanho máximo do banner (1200×620) —
   object-fit: contain porque não há validação de dimensão no upload,
   então é a única forma de garantir que a arte nunca é cortada, mesmo
   se o admin subir outra proporção (sobra barra na cor `night` em vez
   de recortar). O breakpoint de 767px casa com o
   <source media="(max-width: 767px)"> do <picture> em
   pages/evento.php — trocar um sem o outro estica a imagem numa
   faixa de viewport intermediária. Abaixo de 1200px de viewport o
   max-width do .banner-wrap não entra em jogo — o banner continua
   full-bleed, só passa a ser "encaixotado" em telas mais largas que
   isso, revelando o .evento-backdrop (abaixo) nas laterais. */
.banner-img {
  display: block;
  width: 100%;
  aspect-ratio: 1200 / 620;
  object-fit: contain;
  background-color: #0c1120;
}

@media (max-width: 767px) {
  .banner-img {
    aspect-ratio: 1 / 1;
  }
}

/* ── Backdrop ambiente do evento ─────────────────────────────────── */
/* Mesma imagem do banner, desfocada e escurecida, fixa atrás da
   página inteira — cobre exatamente a viewport (não a altura do
   documento), então continua preenchendo a tela conforme rola.
   transform:scale() evita que o blur revele a borda nítida do
   elemento. Só existe em pages/evento.php, quando há banner_desktop
   (ver body.evento-com-backdrop, que zera o bg-cream do body só
   nessa página para o backdrop aparecer). */
.evento-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(20px) brightness(0.45) saturate(1.1);
  transform: scale(1.1);
}

body.evento-com-backdrop {
  background: transparent;
}

/* ── Painel administrativo ────────────────────────────────────── */

/* Drawer da sidebar no mobile. No desktop o Tailwind neutraliza o
   translate, então a transição fica inerte. */
.sidebar-anim {
  transition: transform .25s ease;
}

/* Seta do grupo recolhível da sidebar. O <details> é nativo, então
   só a rotação precisa de CSS. */
details[open] > summary .chevron-menu {
  transform: rotate(180deg);
}

/* Scrollbar discreta, para a sidebar e a área de conteúdo */
.overflow-y-auto::-webkit-scrollbar { width: 6px; }
.overflow-y-auto::-webkit-scrollbar-track { background: transparent; }
.overflow-y-auto::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, .45);
  border-radius: 3px;
}
.overflow-y-auto::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, .75);
}

/* Tooltip simples nos botões só de ícone */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: #0B1B3A;
  color: #fff;
  font-size: 11px;
  line-height: 1.4;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
  z-index: 50;
}
[data-tooltip]:hover::after { opacity: 1; }

/* ── Acessibilidade ───────────────────────────────────────────── */
.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  z-index: 50;
  background: #fff;
  color: #0c1120;
  padding: .5rem 1rem;
  border-radius: 6px;
}

/* ── Card "grupo de WhatsApp" (pages/inscricao-sucesso.php) ──────── */
/* Teal escuro real do WhatsApp (#075E54) no fundo — contraste testado
   com texto branco (~7.7:1); o verde vivo (#25D366/#1ebe5b, já usado
   no botão flutuante de includes/footer.php) fica só no selo/ícone.
   O pulso é decorativo e já cai sob a regra de prefers-reduced-motion
   no topo deste arquivo. */
.whatsapp-grupo-card {
  background: linear-gradient(135deg, #075E54, #0a7a68);
}
.whatsapp-grupo-pulso {
  background: rgba(255, 255, 255, .55);
  animation: whatsapp-grupo-pulso 2.4s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes whatsapp-grupo-pulso {
  0%   { transform: scale(1);   opacity: .6; }
  100% { transform: scale(1.9); opacity: 0; }
}