/* ==========================================================================
   legal.css — Política de Privacidade e Termos de Uso
   Carrega depois de style.css e procedimento.css: reaproveita os tokens
   (--primary, --accent) e toda a tipografia de .proc-article, trocando só o
   que é próprio de um documento legal — coluna única de leitura, cabeçalho
   sólido no lugar da hero em imagem, índice, tabelas e caixas de aviso.
   ========================================================================== */

/* ========== NAVBAR ======================================================= */
/* Nas páginas de procedimento a navbar nasce transparente sobre a hero e só
   aparece no mobile quando o IntersectionObserver do procedimento.js liga o
   .is-solid. Aqui não há hero em imagem nem esse JS, então a barra já entra
   sólida e visível em qualquer largura. */
.legal-page .proc-nav,
.legal-page .proc-nav.is-solid {
  opacity: 1;
  visibility: visible;
  transform: none;
  background: rgba(15, 23, 42, 0.92);
  box-shadow: 0 6px 24px -12px rgba(0, 0, 0, 0.45);
}

/* ========== CABEÇALHO ==================================================== */
.legal-hero {
  background: var(--primary);
  /* Espaço para a navbar fixa + respiro do título */
  padding: calc(var(--proc-nav-h) + 44px) 24px 48px;
}
@media (min-width: 768px)  { .legal-hero { padding: calc(var(--proc-nav-h) + 56px) 40px 60px; } }
@media (min-width: 1024px) { .legal-hero { padding: calc(var(--proc-nav-h) + 64px) 64px 68px; } }

.legal-hero-inner {
  max-width: 880px;
  margin: 0 auto;
}

.legal-hero .legal-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* variante do accent com contraste AA sobre fundo escuro */
  color: var(--accent-on-dark);
  margin-bottom: 16px;
}
.legal-hero .legal-eyebrow::before {
  content: '';
  width: 26px;
  height: 1px;
  background: var(--accent-on-dark);
}

.legal-hero h1 {
  font-family: 'Saira', sans-serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 3.6vw, 2.85rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--white);
  margin-bottom: 14px;
}

.legal-hero .legal-meta {
  font-family: 'Poppins', sans-serif;
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(248, 248, 246, 0.7);
}

/* ========== LAYOUT (coluna única de leitura) ============================= */
.legal-layout {
  max-width: 880px;
  margin: 0 auto;
  padding: 26px 24px 80px;
}
@media (min-width: 768px)  { .legal-layout { padding: 32px 40px 96px; } }
@media (min-width: 1024px) { .legal-layout { padding: 38px 24px 110px; } }

/* O breadcrumb de procedimento.css é centrado num container de 1320px; aqui
   ele precisa alinhar com a coluna de 880px do texto. */
.legal-page .proc-breadcrumb {
  max-width: 880px;
  padding: 20px 24px 0;
}
@media (min-width: 768px)  { .legal-page .proc-breadcrumb { padding: 24px 40px 0; } }
@media (min-width: 1024px) { .legal-page .proc-breadcrumb { padding: 28px 24px 0; } }

/* ========== ÍNDICE ======================================================= */
.legal-toc {
  background: var(--white);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 22px 24px;
  margin-bottom: 40px;
}
/* Título do índice: menor e sem o respiro dos h2 de seção do artigo. Não
   recebe id, portanto também fica fora da numeração automática das seções. */
.legal-article .legal-toc h2 {
  font-family: 'Saira', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--primary);
  margin: 0 0 14px;
  padding-top: 0;
}
/* Os seletores abaixo carregam .legal-article de propósito: dentro do artigo,
   procedimento.css transforma todo <ol> numa lista com marcador circular
   posicionado em absoluto, o que atrapalharia o índice. Aqui a lista volta ao
   decimal simples, e para isso precisa vencer aquela regra na cascata. */
.legal-article .legal-toc ol {
  margin: 0;
  padding-left: 20px;
  list-style: decimal;
  columns: 1;
}
@media (min-width: 640px) {
  .legal-article .legal-toc ol { columns: 2; column-gap: 32px; }
}
.legal-article .legal-toc ol li {
  font-family: 'Poppins', sans-serif;
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(15, 23, 42, 0.7);
  margin-bottom: 7px;
  padding-left: 2px;
  break-inside: avoid;
}
/* Desliga o marcador circular numerado de procedimento.css */
.legal-article .legal-toc ol li::before { content: none; }

.legal-article .legal-toc a {
  color: rgba(15, 23, 42, 0.78);
  text-decoration: none;
}
.legal-article .legal-toc a:hover {
  color: var(--accent-on-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ========== ARTIGO ======================================================= */
/* Âncoras do índice: compensa a navbar fixa ao pular para uma seção. */
.legal-article h2[id],
.legal-article h3[id] {
  scroll-margin-top: calc(var(--proc-nav-h) + 20px);
}

.legal-article a {
  color: var(--accent-on-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-article a:hover { color: var(--accent-hover); }

/* Numeração das seções, no padrão de documento legal */
.legal-article { counter-reset: legal-sec; }
.legal-article h2[id] { counter-increment: legal-sec; }
.legal-article h2[id]::before {
  content: counter(legal-sec) '. ';
  color: var(--accent);
}

/* ========== BOTÃO (gerenciar cookies) =================================== */
.legal-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--accent-solid);
  color: var(--white);
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  text-decoration: none;
  height: 44px;
  padding: 0 22px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  margin: 6px 0 22px;
  transition: background-color 220ms ease-out, transform 220ms ease-out;
}
.legal-btn:hover { background: var(--accent-hover); transform: translateY(-2px); }
.legal-btn:active { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .legal-btn, .legal-btn:hover { transition: none; transform: none; }
}