/* ============================================================
   PAGE: legal — Termos, Privacidade, Cookies
   Layout simples e legível pra texto longo (long-form).
   Reusa header/footer/eyebrow de components.css.
   ============================================================ */

.legal {
  padding: var(--space-9) var(--layout-margin) var(--section-large);
}

.legal__article {
  max-width: 44rem; /* ~704px — measure ideal pra reading */
  margin-inline: auto;
}

/* ============================================================
   HEADER DA PÁGINA LEGAL — eyebrow + h1 + meta
   ============================================================ */
.legal__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-bottom: var(--space-7);
  margin-bottom: var(--space-7);
  border-bottom: var(--bw) solid var(--border-subtle);
}
.legal__header h1 {
  font-size: clamp(2.25rem, calc(1.5rem + 2vw), 3.25rem);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-medium);
  text-wrap: balance;
  margin: 0;
}
.legal__meta {
  font-size: var(--text-small);
  color: var(--text-subtle);
  margin: 0;
  line-height: var(--leading-large);
}

/* ============================================================
   CONTENT — long-form typography
   ============================================================ */
.legal__content {
  font-size: var(--text-main);
  line-height: var(--leading-huge);
  color: var(--text-muted);
}

/* Spacing entre blocos de texto */
.legal__content > * + * {
  margin-top: var(--space-4);
}

/* H2 (## sections) — separação maior antes */
.legal__content > h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(1.5rem, calc(1.25rem + 1vw), 2rem);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-medium);
  color: var(--text-primary);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
  text-wrap: balance;
}
.legal__content > h2:first-child { margin-top: 0; }

/* H3 (### subsections) */
.legal__content > h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 1.25rem;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-medium);
  color: var(--text-primary);
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}

/* Parágrafos */
.legal__content p {
  color: var(--text-muted);
  line-height: var(--leading-huge);
  text-wrap: pretty;
  margin: 0;
}

/* Strong */
.legal__content strong {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}

/* Em */
.legal__content em {
  font-style: italic;
  color: var(--text-primary);
}

/* Links */
.legal__content a {
  color: var(--color-brand-energy);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness var(--duration-fast) var(--ease-out);
}
.legal__content a:hover {
  text-decoration-thickness: 2px;
}

/* Listas */
.legal__content ul,
.legal__content ol {
  list-style: revert;
  padding-left: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.legal__content ul {
  list-style-type: disc;
}
.legal__content ol {
  list-style-type: decimal;
}
.legal__content li {
  color: var(--text-muted);
  line-height: var(--leading-huge);
  padding-left: 0.25rem;
}
.legal__content li::marker {
  color: var(--color-brand-energy);
}

/* Listas aninhadas */
.legal__content li > ul,
.legal__content li > ol {
  margin-top: var(--space-2);
}

/* Tables — design system colors */
.legal__content table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-small);
  line-height: var(--leading-large);
  margin-block: var(--space-4);
  display: block;
  overflow-x: auto;
}
.legal__content thead {
  background: var(--bg-elevated);
}
.legal__content th,
.legal__content td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: var(--bw) solid var(--border-subtle);
  vertical-align: top;
}
.legal__content th {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  letter-spacing: var(--tracking-normal);
}
.legal__content td {
  color: var(--text-muted);
}

/* Tables — wrap nice em desktop, scroll horizontal em mobile */
@media (min-width: 48rem) {
  .legal__content table {
    display: table;
    overflow: visible;
  }
}

/* Blockquote — destaque sutil com borda esquerda */
.legal__content blockquote {
  border-left: 2px solid var(--color-brand-energy);
  padding: var(--space-2) var(--space-5);
  margin-block: var(--space-4);
  background: color-mix(in srgb, var(--color-brand-energy) 4%, transparent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.legal__content blockquote p {
  color: var(--text-primary);
  font-size: var(--text-small);
  line-height: var(--leading-large);
}

/* Code inline */
.legal__content code {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 0.875em;
  background: var(--bg-elevated);
  color: var(--color-brand-energy);
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-xs);
  border: var(--bw) solid var(--border-subtle);
}

/* HR — divisor sutil */
.legal__content hr {
  border: 0;
  border-top: var(--bw) solid var(--border-subtle);
  margin-block: var(--space-8);
}

/* Footer da página legal — voltar pra home */
.legal__footer-nav {
  margin-top: var(--space-9);
  padding-top: var(--space-6);
  border-top: var(--bw) solid var(--border-subtle);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  font-size: var(--text-small);
}
.legal__footer-nav a {
  color: var(--text-muted);
  transition: color var(--duration-fast) var(--ease-out);
}
.legal__footer-nav a:hover {
  color: var(--color-brand-energy);
}
.legal__footer-nav a.is-current {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}