/* ==========================================================================
   Páginas legais — documentos só de texto
   ========================================================================== */

/* --- Cabeçalho ------------------------------------------------------------- */

.legal__head {
  padding-block: var(--space-16) var(--space-12);
  border-bottom: 1px solid var(--c-rule);
  background: var(--c-surface);
}

.legal__head .container { display: grid; gap: var(--space-4); }
.legal__head .display { max-width: 20ch; line-height: 1.06; }

.legal__updated {
  font-size: var(--fs-body);
  color: var(--c-ink);
  opacity: .7;
}

/* --- Corpo ----------------------------------------------------------------- */

.legal__body { padding-block: var(--section-y); }

.legal__body--with-toc {
  display: grid;
  grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
  gap: clamp(var(--space-8), 5vw, var(--space-24));
  align-items: start;
}

/* Item de grid nasce com min-width:auto, ou seja, não encolhe abaixo do
   min-content do que tem dentro. Com uma tabela larga no documento, isso
   esticava a coluna inteira — e o sumário junto — para fora da tela no
   celular, em vez de deixar a tabela rolar dentro do próprio quadro. */
.legal__body--with-toc > * { min-width: 0; }

/* A coluna de leitura fica estreita de propósito: texto corrido longo
   cansa acima de ~75 caracteres por linha.

   O corpo não usa --fs-lead: aquele token vai a 25px, tamanho de parágrafo
   de destaque, que num documento de 5.000 palavras cansa e ainda deixaria
   os h3 e h4 menores que o texto que eles titulam. */
.legal__content {
  max-width: 72ch;
  font-size: clamp(1rem, .94rem + .28vw, 1.1875rem);   /* 16 → 19px */
  line-height: 1.6;
  color: var(--c-ink);

  /* Documentos legais citam URLs inteiras. Dentro de uma lista aninhada,
     no celular, uma delas não cabe na linha e empurra a página para o lado. */
  overflow-wrap: break-word;
}

.legal__content > * + * { margin-top: var(--space-6); }

.legal__content h2 {
  margin-top: var(--space-16);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);   /* 24 → 36px */
  line-height: 1.2;
  scroll-margin-top: var(--space-16);
}
.legal__content h2:first-child { margin-top: 0; }

.legal__content h3 {
  margin-top: var(--space-12);
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: clamp(1.125rem, 1rem + .55vw, 1.375rem);   /* 18 → 22px */
  line-height: 1.3;
  color: var(--c-blue);
  scroll-margin-top: var(--space-16);
}

.legal__content h4 {
  margin-top: var(--space-8);
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 1em;
  line-height: 1.4;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-ink);
}

.legal__content a {
  color: var(--c-blue);
  text-decoration: underline;
  text-underline-offset: .15em;
}
.legal__content a:hover { text-decoration-thickness: 2px; }

.legal__content ul,
.legal__content ol {
  padding-left: var(--space-6);
  list-style: revert;
}
.legal__content li + li { margin-top: var(--space-3); }
.legal__content li::marker { color: var(--c-blue); }

.legal__content strong { font-weight: var(--fw-bold); }

.legal__content blockquote {
  padding-left: var(--space-6);
  border-left: 3px solid var(--c-blue);
  color: var(--c-ink);
}

.legal__content hr {
  height: 1px;
  margin-block: var(--space-12);
  border: 0;
  background: var(--c-rule);
}

/* Tabelas de documento legal costumam ser largas: rolam sozinhas, dentro do
   próprio quadro, em vez de empurrar a página inteira para o lado. */
.legal__content .legal__table,
.legal__content .wp-block-table,
.legal__content figure.wp-block-table {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

.legal__content .legal__table table { min-width: 32rem; }

.legal__content table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
}
.legal__content th,
.legal__content td {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--c-border);
  text-align: left;
  vertical-align: top;
}
.legal__content th {
  font-weight: var(--fw-bold);
  color: var(--c-blue);
  background: var(--c-surface);
}

/* Cor explícita em vez de opacidade: com opacity o tom final depende do que
   estiver atrás, e o contraste deixa de ser auditável. A .6 dava 3.7:1. */
.legal__empty { color: var(--c-ink-soft); }

/* --- Sumário --------------------------------------------------------------- */

.legal__toc {
  position: sticky;
  top: var(--space-8);
  padding: var(--space-6);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
}

.legal__toc-title {
  margin-bottom: var(--space-4);
  font-size: var(--fs-eyebrow, .8125rem);
  font-weight: var(--fw-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-ink);
}

.legal__toc ul { display: grid; gap: var(--space-3); }

.legal__toc a {
  display: block;
  overflow-wrap: break-word;
  font-size: var(--fs-body);
  line-height: 1.35;
  color: var(--c-blue);
}
.legal__toc a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .legal__body--with-toc { grid-template-columns: 1fr; }
  .legal__toc { position: static; }
}

/* --- Outros documentos ----------------------------------------------------- */

.legal__more {
  padding-block: var(--space-12);
  border-top: 1px solid var(--c-rule);
  background: var(--c-surface);
}

.legal__more-title {
  margin-bottom: var(--space-4);
  font-size: var(--fs-eyebrow, .8125rem);
  font-weight: var(--fw-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-ink);
}

.legal__more ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) clamp(var(--space-6), 3vw, var(--space-12));
}

.legal__more a {
  font-size: var(--fs-nav);
  font-weight: var(--fw-medium);
  color: var(--c-blue);
}
.legal__more a:hover { text-decoration: underline; }