/*
 * Páginas jurídicas (Termos de Uso).
 *
 * Documento longo em prosa: o que importa aqui não é decoração, é a leitura.
 * Três decisões carregam o resto:
 *
 * 1. A coluna de texto tem largura máxima. Linha longa demais faz o olho
 *    perder o começo da linha seguinte, e um termo de uso já é lido com má
 *    vontade — não precisa de ajuda para ficar pior.
 * 2. O número da cláusula fica na margem, fora do fluxo do texto. Ele existe
 *    para ser citado, não para ser lido no meio da frase.
 * 3. O sumário acompanha a rolagem em telas largas e vira uma lista comum no
 *    celular, onde não há margem para uma coluna lateral.
 */

.pt-legal-page {
  padding-bottom: 4rem;
}

/* ---- Abertura ------------------------------------------------------------ */

.pt-legal-hero {
  padding: 2.5rem 0 2rem;
  border-bottom: 1px solid var(--pt-border, rgba(15, 32, 56, 0.12));
}

.pt-legal-hero nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  color: var(--pt-text-muted);
  font-size: 0.82rem;
}

.pt-legal-hero nav i {
  font-size: 0.62rem;
}

.pt-legal-hero h1 {
  margin: 0;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1.2;
}

.pt-legal-lead {
  max-width: 60ch;
  margin: 0.75rem 0 0;
  color: var(--pt-text-muted);
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  line-height: 1.6;
}

.pt-legal-meta {
  margin: 1rem 0 0;
  color: var(--pt-text-muted);
  font-size: 0.82rem;
  font-weight: 600;
}

/* ---- Estrutura ----------------------------------------------------------- */

.pt-legal-layout {
  display: grid;
  gap: 2.5rem;
  padding-top: 2.25rem;
}

@media (min-width: 992px) {
  .pt-legal-layout {
    grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
    gap: 3.5rem;
    align-items: start;
  }
}

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

.pt-legal-summary h2 {
  margin: 0 0 0.75rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pt-text-muted);
}

.pt-legal-summary ol {
  margin: 0;
  padding: 0;
  list-style: none;
  /* A numeração vem do próprio sumário, para bater com a do documento. */
  display: grid;
  gap: 0.15rem;
}

.pt-legal-summary a {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: 0.35rem;
  padding: 0.3rem 0.4rem;
  border-radius: 6px;
  color: inherit;
  font-size: 0.85rem;
  line-height: 1.35;
  text-decoration: none;
}

.pt-legal-summary a:hover,
.pt-legal-summary a:focus-visible {
  background: rgba(15, 32, 56, 0.06);
  text-decoration: underline;
}

.pt-legal-summary-number {
  color: var(--pt-text-muted);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

@media (min-width: 992px) {
  .pt-legal-summary {
    position: sticky;
    /* Espaço para o cabeçalho fixo do site não cobrir o primeiro item. */
    top: 6rem;
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
  }
}

/* ---- Corpo do documento -------------------------------------------------- */

.pt-legal-body {
  max-width: 72ch;
}

.pt-legal-body section + section {
  margin-top: 2.25rem;
}

.pt-legal-body h2 {
  margin: 0 0 0.9rem;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  line-height: 1.3;
}

.pt-legal-body p,
.pt-legal-body li {
  font-size: 0.95rem;
  line-height: 1.7;
}

.pt-legal-body p {
  margin: 0 0 0.9rem;
}

.pt-legal-body ul {
  margin: 0 0 0.9rem;
  padding-left: 1.15rem;
}

.pt-legal-body li {
  margin-bottom: 0.45rem;
}

/*
 * O número da cláusula.
 *
 * Em telas largas ele sai para a margem, fora da coluna de texto: serve para
 * ser citado ("cláusula 8.2"), não para ser tropeçado no meio da leitura.
 */
.pt-legal-clause {
  display: inline-block;
  min-width: 2.4rem;
  color: var(--pt-text-muted);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.pt-legal-body h2 .pt-legal-clause {
  min-width: 1.8rem;
  color: inherit;
}

@media (min-width: 1200px) {
  .pt-legal-body p .pt-legal-clause,
  .pt-legal-body h2 .pt-legal-clause {
    position: absolute;
    margin-left: -3.4rem;
    min-width: 0;
    text-align: right;
    width: 2.8rem;
  }

  .pt-legal-body p,
  .pt-legal-body h2 {
    position: relative;
  }
}

/*
 * A seção alvo de uma âncora ganha destaque momentâneo: quem chega por link
 * externo precisa enxergar onde caiu.
 */
.pt-legal-body section:target h2 {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

/* O cabeçalho fixo do site cobriria o título alvo sem esta folga. */
.pt-legal-body section {
  scroll-margin-top: 6rem;
}

/* ---- Tema escuro --------------------------------------------------------- */

html[data-theme="dark"] .pt-legal-hero {
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

html[data-theme="dark"] .pt-legal-lead,
html[data-theme="dark"] .pt-legal-meta,
html[data-theme="dark"] .pt-legal-hero nav,
html[data-theme="dark"] .pt-legal-summary h2,
html[data-theme="dark"] .pt-legal-summary-number,
html[data-theme="dark"] .pt-legal-clause {
  color: #b8cbe2;
}

html[data-theme="dark"] .pt-legal-summary a:hover,
html[data-theme="dark"] .pt-legal-summary a:focus-visible {
  background: rgba(255, 255, 255, 0.08);
}

/* ---- Impressão ----------------------------------------------------------- */

/*
 * Termo de uso é documento que se imprime e se anexa. O sumário some — ele é
 * navegação, e no papel não leva a lugar nenhum.
 */
@media print {
  .pt-legal-summary {
    display: none;
  }

  .pt-legal-layout {
    display: block;
  }

  .pt-legal-body {
    max-width: none;
  }

  .pt-legal-body section {
    break-inside: avoid;
  }
}