/* ============================================================
   ABATERJ VOTA 2027-2029 — Estilos compartilhados
   Complementa o Tailwind (CDN). Contém apenas o que não é utilitário:
   ícones Material, menu mobile, animações e regras de impressão.
   ============================================================ */

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
}

/* Material Symbols ---------------------------------------------------- */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}

/* Cabeçalho / menu mobile --------------------------------------------- */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
#mobile-menu.is-open {
  max-height: 480px;
}
#mobile-menu a.is-active {
  color: #1B62D8;
  background-color: #eff4ff;
}

/* Cédula eletrônica: aura pulsante da etapa ativa ---------------------- */
@keyframes pulse-ring {
  0%   { transform: scale(0.95); opacity: 0.8; }
  50%  { transform: scale(1.1);  opacity: 0.3; }
  100% { transform: scale(0.95); opacity: 0.8; }
}
.pulse-glow {
  animation: pulse-ring 2.5s infinite ease-in-out;
}

/* Home: botão "Votar Agora" piscando enquanto a votação está aberta ----- */
@keyframes vote-blink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 138, 75, 0.7); transform: scale(1); }
  50%      { box-shadow: 0 0 0 12px rgba(0, 138, 75, 0); transform: scale(1.03); }
}
.vote-blink {
  animation: vote-blink 1.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .vote-blink { animation: none; }
}

/* Comprovante: borda de ticket ---------------------------------------- */
.ticket-edge {
  background-image: radial-gradient(circle at 10px -5px, transparent 12px, #ffffff 13px);
}

/* Imagens nunca estouram a largura do container ----------------------- */
img {
  max-width: 100%;
  height: auto;
}

/* Impressão do comprovante -------------------------------------------- */
@media print {
  body * {
    visibility: hidden;
  }
  #printable-receipt,
  #printable-receipt * {
    visibility: visible;
  }
  #printable-receipt {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    box-shadow: none !important;
    border: 1px solid #000 !important;
  }
  .no-print,
  header,
  footer,
  aside {
    display: none !important;
  }
}

/* Conteúdo editorial (plano de gestão, notícias) ---------------------- */
.prose-abaterj { color: #161c24; font-family: Inter, sans-serif; font-size: 16px; line-height: 1.7; }
.prose-abaterj h2, .prose-abaterj h3, .prose-abaterj h4 { font-family: "Plus Jakarta Sans", sans-serif; color: #001947; font-weight: 700; margin: 1.4em 0 .5em; line-height: 1.3; }
.prose-abaterj h2 { font-size: 1.4rem; } .prose-abaterj h3 { font-size: 1.15rem; } .prose-abaterj h4 { font-size: 1rem; }
.prose-abaterj p { margin: 0 0 1em; }
.prose-abaterj ul, .prose-abaterj ol { margin: 0 0 1em 1.4em; }
.prose-abaterj ul { list-style: disc; } .prose-abaterj ol { list-style: decimal; }
.prose-abaterj li { margin: .25em 0; }
.prose-abaterj a { color: #1B62D8; text-decoration: underline; text-underline-offset: 2px; }
.prose-abaterj strong { color: #001947; }
.prose-abaterj img { max-width: 100%; border-radius: .5rem; }
.prose-abaterj blockquote { border-left: 3px solid #1B62D8; padding-left: 1em; color: #444650; font-style: italic; margin: 1em 0; }