/*
 * Tema clássico — CSS comum (carregado por app/classico/layout.tsx depois do CSS
 * compilado do site antigo, app-*.css). Vale para todas as páginas clássicas.
 *
 * O app novo carrega também o Tailwind 4 (app/globals.css, layout raiz). O CSS
 * antigo não usa @layer, então ganha das classes iguais do Tailwind 4 — mas onde
 * os dois somam efeitos (propriedades diferentes) ou o 4 registra variáveis com
 * tipo (@property), o resultado quebra. As correções globais ficam aqui; a capa
 * tem as suas em extra-home.css.
 */

/* ── Página ─────────────────────────────────────────────────────────────── */

/*
 * Base do site antigo: o globals.css do tema novo põe Albert Sans e a cor da
 * marca no <body>; o #app antigo era branco com text-gray-900 e a fonte do
 * sistema (preflight do Tailwind 3) — o Open Sans só entra nas classes próprias
 * (títulos, menu, rótulos). Fonte do sistema aqui deixa as larguras iguais às do antigo.
 */
body:has(.classic-scope) {
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  background: #fff;
  color: #111827;
}
.classic-scope {
  color: #111827;
}
html.dark body:has(.classic-scope),
html.dark .classic-scope {
  background: #030712;
  color: #f3f4f6;
}

/*
 * space-x/space-y/divide-x: o Tailwind 3 (antigo) põe a margem/borda no item
 * SEGUINTE; o 4 (novo) põe no item ANTERIOR — com os dois, o espaço dobrava.
 * Zera só a parte do Tailwind 4 (:where = especificidade 0, perde para as
 * classes do CSS antigo como mr-5/mb-2).
 */
:where(.classic-scope [class*="space-x-"] > *) {
  margin-inline-end: 0;
}
:where(.classic-scope [class*="space-y-"] > *) {
  margin-block-end: 0;
}
:where(.classic-scope [class*="divide-x"] > *) {
  border-inline-end-width: 0;
}

/*
 * hover:scale-105 / rotate-180 / translate-*: o Tailwind 3 usa `transform`; o 4
 * usa as propriedades `scale`/`rotate`/`translate` — com os dois, a escala dobra
 * e a rotação de 180° se anula. Nas páginas clássicas vale só a do 3. (Os
 * utilitários equivalentes do 4 já não funcionam aqui: o reset `*` do CSS antigo
 * zera as variáveis --tw-* de que eles dependem — ver o aviso de cookies abaixo.)
 */
.classic-scope [class*="scale-"],
.classic-scope [class*="rotate-"],
.classic-scope [class*="translate-"] {
  scale: none;
  rotate: none;
  translate: none;
}

/*
 * Degradês do Tailwind 3: o Tailwind 4 registra --tw-gradient-from/to como <color>
 * (@property) e os valores do 3 ("#000 0%") ficam inválidos → o degradê some.
 * Refeitos com variáveis próprias para as classes usadas na marcação antiga.
 */
.classic-scope .bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--clh-gf, transparent), var(--clh-gt, transparent));
}
.classic-scope .bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--clh-gf, transparent), var(--clh-gt, transparent));
}
.classic-scope .bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--clh-gf, transparent), var(--clh-gt, transparent));
}
.classic-scope .from-black {
  --clh-gf: #000;
}
.classic-scope .from-white {
  --clh-gf: #fff;
}
.classic-scope .from-transparent {
  --clh-gf: transparent;
}
.classic-scope .to-transparent {
  --clh-gt: transparent;
}
.classic-scope .to-black {
  --clh-gt: #000;
}
.classic-scope .to-white {
  --clh-gt: #fff;
}
.classic-scope .to-slate-300 {
  --clh-gt: #cbd5e1;
}


/* ── Cabeçalho ──────────────────────────────────────────────────────────── */

@keyframes clh-from-left {
  from {
    transform: translateX(-100%);
  }
}
@keyframes clh-from-right {
  from {
    transform: translateX(100%);
  }
}
.clh-drawer {
  animation: clh-from-left 0.3s ease-out;
}
.clh-sub {
  animation: clh-from-right 0.3s ease-out;
}
.clh-search-in {
  animation: clh-from-left 0.5s ease-out;
}

/* Links de privacidade (LGPD) sob o © do rodapé. */
.clh-privacy a,
.clh-privacy button {
  color: #fff;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/*
 * Atenção (vale para qualquer componente do tema novo dentro das páginas
 * clássicas): o CSS antigo zera as variáveis --tw-* em `*` (sem @layer), o que
 * anula os utilitários do Tailwind 4 que dependem delas — translate/scale/rotate,
 * sombras, anéis, blur e degradês. Por isso o aviso de cookies clássico usa as
 * classes próprias abaixo.
 */

/* ── Aviso de cookies (ConsentBanner variant="classico") ────────────────── */

.clh-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: #fff;
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -10px 15px -3px #0000001a, 0 -4px 6px -4px #0000001a;
  font-family: Open-Sans, ui-sans-serif, system-ui, sans-serif;
}
.clh-consent__in {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .clh-consent__in {
    padding: 1rem 1.5rem;
  }
}
@media (min-width: 1024px) {
  .clh-consent__in {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
  }
}
.clh-consent__txt {
  font: 14px/1.6 Open-Sans, ui-sans-serif, system-ui, sans-serif;
  color: #4a4a49;
}
.clh-consent__link {
  color: #0075bf;
  text-decoration: underline;
}
.clh-consent__btns {
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  gap: 0.5rem;
}
.clh-btn {
  border-radius: 9999px;
  padding: 0.5rem 1.25rem;
  font: 14px/1.4 Open-Sans-SemiBold, ui-sans-serif, system-ui, sans-serif;
  border: 1px solid #0075bf;
  transition: background-color 0.2s;
}
.clh-btn--solid {
  background: #0075bf;
  color: #fff;
}
.clh-btn--solid:hover {
  background: #005ea1;
  border-color: #005ea1;
}
.clh-btn--outline {
  background: #fff;
  color: #0075bf;
}
.clh-btn--outline:hover {
  background: #f2f2f2;
}
.clh-dialog {
  translate: -50% -50%;
  border-radius: 18px;
  font-family: Open-Sans, ui-sans-serif, system-ui, sans-serif;
  box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
}
.clh-dialog h2 {
  font-family: Open-Sans-Bold, ui-sans-serif, system-ui, sans-serif;
  color: #0075bf;
}
/* Chaves liga/desliga do diálogo (o translate do ::before é do Tailwind 4). */
.clh-dialog [role="switch"]::before {
  translate: 0.125rem 0;
  box-shadow: 0 1px 2px #0000004d;
}
.clh-dialog [role="switch"]:checked {
  background-color: #0075bf;
}
.clh-dialog [role="switch"]:checked::before {
  translate: 1rem 0;
}