/*
 * Ajustes das páginas do tema clássico (busca, formulários, publicidade legal, 404)
 * sobre o CSS compilado do site antigo (app-*.css). Só o que o CSS antigo não
 * cobre porque aqui a marcação usa links (<a>) onde o Vue usava botões/cliques.
 */

/* Base do site antigo (preflight do Tailwind 3): fonte do sistema e texto preto —
   o <body> do tema novo usa Albert Sans e a cor da marca. */
.classic-paginas {
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  line-height: 1.5;
  color: #000;
}

/* Paginação: no Vue eram <button>; aqui são links (rastreáveis) e <span> nas pontas. */
.pagination-container a.paginate-buttons,
.pagination-container span.paginate-buttons {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.pagination-container span.paginate-buttons[aria-disabled="true"] {
  cursor: default;
}
.pagination-container span.paginate-buttons[aria-disabled="true"]:hover {
  background-color: transparent;
}

/* Filtros do celular: opção escolhida em negrito (no Vue era style inline com !important). */
.grupo-filtro__p.is-selected {
  font: 19px Open-Sans-Bold !important;
}

/* Card da publicação legal: o card inteiro abre a publicação (o Vue só tinha o título). */
.classic-stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.modal__button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Formulários: link da política (no Vue era só texto em negrito). */
a.fc__avisos-fale-conosco__semibold,
a.cp__avisos-fale-conosco__semibold,
a.sp__avisos-fale-conosco__semibold {
  text-decoration: none;
  color: inherit;
}
a.fc__avisos-fale-conosco__semibold:hover,
a.cp__avisos-fale-conosco__semibold:hover,
a.sp__avisos-fale-conosco__semibold:hover {
  text-decoration: underline;
}

/* Aviso (vue3-toastify) dos formulários: em cima da barra do site no celular. */
.classic-toast .Toastify__toast-body {
  font: 15px Open-Sans;
}
@media (max-width: 480px) {
  .classic-toast.Toastify__toast-container {
    width: calc(100vw - 2em);
  }
}

/* Honeypot dos formulários (fora da tela; robôs preenchem). */
.classic-bot-trap {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/*
 * Degradê dos cards (bg-gradient-to-t from-black to-transparent): o Tailwind 4 do
 * tema novo registra --tw-gradient-from/--tw-gradient-to com @property <color>, e o
 * valor do Tailwind 3 ("#000 var(--tw-gradient-from-position)") vira inválido → some.
 */
.bg-gradient-to-t.from-black.to-transparent {
  background-image: linear-gradient(to top, #000, rgb(0 0 0 / 0));
}

/* Subtítulos do Circuito Pet (no Vue: style="margin-top:2rem !important"). */
.classic-mt-2rem {
  margin-top: 2rem !important;
}
/* Aceite de publicação do Circuito Pet (a API do tema novo exige o aceite explícito). */
.classic-consent {
  width: 100%;
}

/*
 * Tailwind 3 (CSS antigo) × Tailwind 4 (tema novo) na mesma página: o 4 também gera
 * as classes da marcação antiga, e algumas somam efeito em vez de sobrepor:
 *   - scale/rotate/translate viram propriedades próprias no 4 (além do transform do 3):
 *     hover:scale-105 escalaria 2× e rotate-180 giraria 360° (seta do "Período personalizado");
 *   - divide-y: o 3 põe borda em cima do 2º filho, o 4 embaixo do 1º → linha dupla.
 */
.classic-paginas .hover\:scale-105:hover,
.classic-paginas .rotate-180 {
  scale: none;
  rotate: none;
  translate: none;
}
.classic-paginas .divide-y > * {
  border-bottom-width: 0;
}
/*
 * space-x/space-y: o 3 dá margem à esquerda/em cima do 2º filho em diante; o 4,
 * à direita/embaixo de todos menos o último. No 1º filho só vale a do 4 → espaço
 * dobrado entre o 1º e o 2º. (Do 2º em diante a margem física do 3 vence.)
 */
.classic-paginas [class*="space-x-"] > :first-child {
  margin-inline-end: 0;
}
.classic-paginas [class*="space-y-"] > :first-child {
  margin-block-end: 0;
}

/*
 * Conteúdo do tema novo dentro da casca antiga (components/classic/pages/conteudo-tema-novo.tsx):
 * revert-layer numa regra sem camada volta ao valor das camadas do Tailwind 4 —
 * ou seja, ignora o CSS antigo (sem camadas) só ali dentro. O id dá especificidade
 * acima de qualquer regra de classe/atributo do CSS antigo.
 */
#conteudo-tema-novo,
#conteudo-tema-novo *,
#conteudo-tema-novo *::before,
#conteudo-tema-novo *::after,
#conteudo-tema-novo ::placeholder {
  all: revert-layer;
}
#conteudo-tema-novo {
  font-family: var(--font-sans);
  color: var(--foreground);
  line-height: 1.5;
}