/* ==========================================================================
   Chase — páginas de conteúdo do design system

   As cinco páginas legais — privacidade, termos, trocas, entrega e pré-venda —
   mais as duas que ainda estão em rascunho, pagamento e contato.

   O HANDOFF NÃO TEM UMA TELA DESTAS, e nem deveria: protótipo de loja mostra
   vitrine, não documento. Então aqui não há valor para copiar, e sim a escala
   de tipo e os tokens que as cinco telas já usam, aplicados a texto corrido.

   ── O DEFEITO QUE ISTO CONSERTA ──

   A linha de texto media **1181px**. Não é exagero de medida: é a largura do
   contêiner do Storefront sem nenhum teto de leitura. Uma linha assim faz o
   olho perder o começo da seguinte, e a Política de Entrega tem vinte
   parágrafos e onze seções.

   A medida vai para **42rem**, que são os 672px de 70 caracteres na fonte do
   corpo — o meio da faixa de 65 a 75 que a tipografia recomenda para texto
   corrido.

   COMEÇOU EM `70ch` E PRECISOU MUDAR, e vale saber por quê. O `ch` acompanha o
   tamanho da fonte, que é a propriedade certa para um bloco isolado — é assim
   que o handoff limita o herói (`38ch`) e o rodapé (`32ch`). Mas ele resolve
   contra a fonte DO ELEMENTO QUE O USA, e num documento os elementos têm
   tamanhos diferentes: medido, o parágrafo ficou com 672px e o `<h2>`, a 30px,
   escapou para os 1192 do contêiner.

   Uma coluna de leitura é UMA largura, não uma por tamanho de letra. O `rem`
   dá isso, e ainda acompanha quem aumenta a fonte no navegador.

   A entrelinha sobe de 1,5 para `--leading-relaxed` (1,65). O 1,5 é bom para
   interface; documento longo pede mais ar.
   ========================================================================== */

/* ==========================================================================
   1. Contêiner

   O mesmo das outras telas: teto de `--container-max` e recuo de
   `--container-pad`, com `box-sizing: border-box` porque o `.col-full` do
   Storefront é `content-box`.
   ========================================================================== */

body.chase-conteudo #content > .col-full {
  box-sizing: border-box;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-8) var(--container-pad) 0;
}

/* Três margens de baixo somavam antes do rodapé, como no carrinho e no
   checkout. O respiro é do próprio rodapé desde a 1.11.5. */
body.chase-conteudo .site-main,
body.chase-conteudo .content-area,
body.chase-conteudo .site-main > article.hentry {
  margin-bottom: 0;
}

/* ==========================================================================
   2. Título da página

   `text-3xl` em Outfit, como o "Seu carrinho" e o nome do produto. O
   `.entry-header` do Storefront traz borda e recuo próprios.
   ========================================================================== */

body.chase-conteudo .entry-header {
  margin: 0 0 var(--space-6);
  padding: 0;
  border: 0;
}

body.chase-conteudo .entry-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: 0;
}

/* ==========================================================================
   3. A medida de leitura

   O teto vai nos BLOCOS de texto, e não no contêiner. A diferença importa: com
   o teto no contêiner, uma tabela ou uma imagem larga ficaria espremida junto;
   com o teto nos blocos, cada um decide. Tabela e imagem seguem livres.

   Um custom property local deixa o valor num lugar só, e permite que um bloco
   solte a amarra quando precisar — é o que a regra da tabela faz adiante.
   ========================================================================== */

body.chase-conteudo .entry-content {
  /* 42rem = 672px na raiz de 16px, que são 70 caracteres no corpo do texto.
     Ver a nota do cabeçalho sobre por que não é `ch`. */
  --chase-medida: 42rem;

  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
  text-wrap: pretty;
}

body.chase-conteudo .entry-content > p,
body.chase-conteudo .entry-content > ul,
body.chase-conteudo .entry-content > ol,
body.chase-conteudo .entry-content > h2,
body.chase-conteudo .entry-content > h3,
body.chase-conteudo .entry-content > h4,
body.chase-conteudo .entry-content > blockquote,
body.chase-conteudo .entry-content > dl {
  max-width: var(--chase-medida);
}

/* ==========================================================================
   4. Ritmo vertical

   O Storefront dava 68,72px acima de cada `<h2>` e 16,22 abaixo — números que
   vêm da escala áurea dele, não da nossa. Passam para os tokens: `--space-10`
   acima, que separa uma seção da anterior, e `--space-3` abaixo, que mantém o
   título colado no texto que ele nomeia.

   A assimetria é deliberada. Título mais perto do que vem depois do que do que
   vem antes é o que diz, sem linha nenhuma, a qual bloco ele pertence.
   ========================================================================== */

body.chase-conteudo .entry-content h2,
body.chase-conteudo .entry-content h3,
body.chase-conteudo .entry-content h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  margin: var(--space-10) 0 var(--space-3);
}

/* O `--text-2xl` é o mesmo degrau dos títulos de seção da home. Um documento
   não precisa de escala própria. */
body.chase-conteudo .entry-content h2 {
  font-size: var(--text-2xl);
}

body.chase-conteudo .entry-content h3 {
  font-size: var(--text-xl);
}

body.chase-conteudo .entry-content h4 {
  font-size: var(--text-lg);
}

/* Título logo no começo do documento não precisa do vão de seção. */
body.chase-conteudo .entry-content > :first-child {
  margin-top: 0;
}

body.chase-conteudo .entry-content > :last-child {
  margin-bottom: 0;
}

body.chase-conteudo .entry-content p {
  margin: 0 0 var(--space-4);
}

/* ==========================================================================
   5. Listas

   O Storefront zera o recuo das listas em vários contextos e o marcador some
   para fora do texto. Aqui a lista se comporta como lista: marcador alinhado
   com a margem do parágrafo, e um respiro entre itens que documento longo
   pede.
   ========================================================================== */

body.chase-conteudo .entry-content ul,
body.chase-conteudo .entry-content ol {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-6);
}

body.chase-conteudo .entry-content ul {
  list-style: disc;
}

body.chase-conteudo .entry-content ol {
  list-style: decimal;
}

body.chase-conteudo .entry-content li {
  margin-bottom: var(--space-2);
}

body.chase-conteudo .entry-content li::marker {
  color: var(--text-muted);
}

body.chase-conteudo .entry-content li:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   6. Destaques e links

   `<strong>` vai para o peso 600 do design system e para `--text-strong`: num
   documento legal ele carrega o que importa, e merece contraste além do peso.

   O LINK AQUI É SUBLINHADO, e é a única superfície do site onde isso vale. Em
   navegação e em cartão o sublinhado polui — foi por isso que ele saiu dos
   filtros da loja. Dentro de texto corrido é o contrário: sem sublinhado, um
   link só se distingue por cor, e quem não separa bem as cores perde a
   informação. É o critério de sempre — cor nunca é o único portador.
   ========================================================================== */

body.chase-conteudo .entry-content strong,
body.chase-conteudo .entry-content b {
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
}

body.chase-conteudo .entry-content a {
  color: var(--text-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.chase-conteudo .entry-content a:hover,
body.chase-conteudo .entry-content a:focus-visible {
  color: var(--text-link-hover);
}

/* ==========================================================================
   7. Tabela, citação e regra

   Nenhuma das páginas de hoje usa os três, mas o conteúdo é editável no painel
   e alguém vai usar. Sem regra, uma tabela cai no visual cru do navegador no
   meio de um documento desenhado.

   A tabela é o bloco que SOLTA a medida de leitura: ela precisa de largura, e
   rola dentro do próprio contêiner quando não couber, em vez de empurrar a
   página para a rolagem horizontal.
   ========================================================================== */

body.chase-conteudo .entry-content table {
  display: block;
  max-width: none;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: var(--text-sm);
  margin: 0 0 var(--space-4);
}

body.chase-conteudo .entry-content th,
body.chase-conteudo .entry-content td {
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
}

body.chase-conteudo .entry-content th {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
}

body.chase-conteudo .entry-content blockquote {
  margin: 0 0 var(--space-4);
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
  border-left: 3px solid var(--chase-yellow);
  color: var(--text-muted);
  font-style: normal;
}

body.chase-conteudo .entry-content hr {
  max-width: var(--chase-medida);
  height: 1px;
  margin: var(--space-10) 0;
  border: 0;
  background: var(--border-subtle);
}

/* ==========================================================================
   8. Celular

   A 375px a coluna tem 327px, bem abaixo dos 70ch — o teto não chega a valer,
   e o que precisa mudar é a escala dos títulos, que a 30px ocupariam quase
   duas linhas.
   ========================================================================== */

@media (max-width: 568px) {
  body.chase-conteudo .entry-title {
    font-size: var(--text-2xl);
  }

  body.chase-conteudo .entry-content h2 {
    font-size: var(--text-xl);
  }

  body.chase-conteudo .entry-content h3 {
    font-size: var(--text-lg);
  }

  body.chase-conteudo .entry-content h2,
  body.chase-conteudo .entry-content h3,
  body.chase-conteudo .entry-content h4 {
    margin-top: var(--space-8);
  }
}