/* ==================================================================
   O que NAO veio do prototipo.

   Esta folha existe separada de proposito. O style.css e gerado por
   script a partir dos dois prototipos, e e reescrito inteiro toda vez
   que o desenho muda. Regra minha escrita la dentro morreria na
   proxima geracao, sem aviso.

   Aqui mora so o que o prototipo nao desenhou: a paginacao, o estado
   vazio e os ajustes dos tipos de pagina em tratamento derivado.
   Nada aqui inventa linguagem: tudo herda a tipografia, o fio e o
   espacamento que ja estao no prototipo.
   ================================================================== */

/* ---------- paginacao ----------
   O prototipo nao desenhou porque o site antigo nao tinha paginacao de
   verdade: o "mais posts" era AJAX e nao gerava URL. Ela e o item que
   destrava 1.200 artigos para o rastreador, entao merece existir com
   cuidado, e nao como texto solto no pe da pagina. */

.paginacao {
  margin: 64px 0 8px;
  padding-top: 26px;
  border-top: 1px solid var(--fio);
}

.paginacao .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.paginacao .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.paginacao .page-numbers {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cinza);
  padding: 10px 14px;
  border: 1px solid var(--fio);
  line-height: 1;
  /* 44px de alvo: abaixo disso o dedo erra, e listagem no celular e
     justamente onde a paginacao mais e usada. */
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .12s, border-color .12s;
}

.paginacao a.page-numbers:hover { color: var(--preto); border-color: var(--preto); }
.paginacao a.page-numbers:focus-visible { outline: 2px solid var(--preto); outline-offset: 2px; }

.paginacao .page-numbers.current {
  color: var(--branco);
  background: var(--preto);
  border-color: var(--preto);
}

.paginacao .page-numbers.dots { border-color: transparent; padding-inline: 4px; min-width: 0; }

/* Anterior e Proxima sao palavra, nao numero: ganham respiro dos lados
   e vao para as pontas da linha. */
.paginacao .prev, .paginacao .next { letter-spacing: .16em; padding-inline: 20px; }
.paginacao .next { margin-left: auto; }

/* ---------- estado vazio ---------- */

.vazio {
  padding: 60px 0 80px;
  max-width: 52ch;
}

.vazio p { font-family: var(--texto); font-size: 17px; line-height: 1.6; margin: 0 0 14px; }
.vazio a { text-decoration: underline; text-underline-offset: 4px; }

.vazio .busca {
  margin-top: 22px;
  border-bottom: 1px solid var(--preto);
  padding-bottom: 10px;
}

.vazio .busca input {
  width: 100%;
  border: 0;
  background: none;
  font-family: var(--titulo);
  font-size: 24px;
  text-transform: uppercase;
  /* 16px e o piso: abaixo disso o iOS da zoom sozinho no foco. */
  padding: 0;
}
.vazio .busca input:focus { outline: none; }

/* ---------- listagem ----------
   Reaproveita a .trinca da home. O que muda e o respiro entre as
   linhas, que numa pagina de 30 cartoes precisa ser maior do que numa
   fileira de tres. */

.listagem .trinca { row-gap: 54px; }

/* ---------- acessibilidade ----------
   O link de pular fica fora da tela ate receber foco pelo teclado. */

.pula {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--preto);
  color: var(--branco);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 14px 20px;
}
.pula:focus { left: 0; }

@media (max-width: 640px) {
  .paginacao { margin-top: 44px; }
  .paginacao .next { margin-left: 0; }
  .vazio .busca input { font-size: 18px; }
}

/* ---------- formulario de contato ----------
   O prototipo nao desenhou a pagina de contato. Tratamento derivado: o campo
   herda o fio e a tipografia do resto, e o rotulo usa a mesma mono maiuscula
   dos creditos. Nada de caixa cinza nem borda arredondada, que nao existem em
   lugar nenhum deste site. */

.form-contato { margin: 34px 0 0; max-width: 46rem; }

.form-contato p { margin: 0 0 26px; }

.form-contato label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cinza);
  margin-bottom: 8px;
}
.form-contato label span { text-transform: none; letter-spacing: 0; opacity: .7; }

.form-contato input[type="text"],
.form-contato input[type="email"],
.form-contato select,
.form-contato textarea {
  width: 100%;
  font-family: var(--texto);
  /* 16px e o piso: abaixo disso o iOS da zoom sozinho ao focar. */
  font-size: 16px;
  line-height: 1.5;
  color: var(--preto);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--fio);
  padding: 10px 0;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}

.form-contato input:focus,
.form-contato select:focus,
.form-contato textarea:focus {
  outline: none;
  border-bottom-color: var(--preto);
}

.form-contato textarea { resize: vertical; min-height: 150px; }

.form-contato button {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--branco);
  background: var(--preto);
  border: 1px solid var(--preto);
  padding: 0 30px;
  min-height: 48px;
  cursor: pointer;
  transition: color .12s, background .12s;
}
.form-contato button:hover { color: var(--preto); background: none; }
.form-contato button:focus-visible { outline: 2px solid var(--preto); outline-offset: 3px; }

/* A isca some da tela sem usar display:none nem hidden, que alguns robos
   detectam e pulam. Ela continua no DOM e continua sendo enviada vazia. */
.form-contato .isca {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-recado {
  border-left: 3px solid var(--preto);
  padding: 16px 20px;
  margin: 28px 0 0;
  font-family: var(--texto);
  font-size: 16px;
}
.form-recado.erro { border-left-color: #b32821; }
.form-recado p { margin: 0; }

/* ==================================================================
   Conflitos entre as duas folhas do protótipo

   O style.css é home.css + artigo.css, inteiras e nessa ordem. Elas são
   PÁGINAS DIFERENTES e declaram o mesmo seletor de propósito diferente;
   como o artigo vem depois, a versão dele vencia na home também.

   Rodei um comparador (conflitos.mjs) e o conjunto é pequeno: quatro
   seletores, e só um com efeito real. Aqui ele volta ao que a home pede.
   ================================================================== */

/* A .barra: `fixed` na home, `sticky` no artigo.
 *
 * Sticky fica NO FLUXO. Na home ela passou a empurrar todo o conteúdo 65px
 * para baixo; o corte de -49px da marca comeu parte, e sobrou uma faixa
 * branca de 16px no topo da página. Foi o que o Renato viu em 04/09.
 *
 * No artigo `sticky` é o certo e continua valendo: lá a barra nasce no topo
 * e fica, porque não existe masthead para ela substituir. */
body:not(.sem-masthead) .barra {
  position: fixed;
  left: 0;
  right: 0;
  transform: translateY(-100%);
}
body:not(.sem-masthead).rolou .barra { transform: none; }

/* ---------------------------------------------------------------------------
   NEWSLETTER

   O RECADO MORA DENTRO DO CAMPO.

   Na primeira versao ele era uma linha nova embaixo do formulario, com
   `flex-basis:100%`. O Renato viu na hora e vetou: aquilo empurrava a nota de
   baixo, quebrava a pilula e parecia erro de sistema colado na peca.

   Agora o recado OCUPA A VAGA DO INPUT. O input some, o recado entra no mesmo
   lugar, com o mesmo padding, e a altura da pilula nao muda um pixel. O botao
   fica onde estava.

   O padding e repetido por variante de proposito: a pilula da divisa usa 13px e
   a linha do rodape usa 16px. Herdar um valor so faria a altura pular em um dos
   dois na hora da troca.
--------------------------------------------------------------------------- */

/* A isca do robo sai da tela sem `display:none` nem `hidden`: robo bom pula
   campo escondido desse jeito, e ai a isca nao pega nada. */
.hoop78-isca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.visualmente-oculto{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.hoop78-news-recado{display:none;flex:1;min-width:0;margin:0;
  font-family:var(--texto);line-height:normal}
form.hoop78-news.tem-recado .hoop78-news-recado{display:flex;align-items:center}
form.hoop78-news.tem-recado > input[type="email"]{display:none}

/* No erro da para clicar no recado e voltar a escrever, com o que foi digitado
   ainda la. Sem isso a pessoa teria que redigitar o e-mail inteiro so porque
   errou uma letra. */
form.hoop78-news.tem-erro .hoop78-news-recado{cursor:text}

/* Mesma fonte, mesmo padding e mesma entrelinha do input, para a pilula nao
   mudar de altura na troca. Medido: com 15px ela encolhia 1,25px. */
.campo .hoop78-news-recado{padding:13px 0;font-size:16px}
.campo .hoop78-news-recado.bom{color:#1a7f37}
.campo .hoop78-news-recado.ruim{color:#c0392b}

.form-assine .hoop78-news-recado{padding:16px 0;font-size:16px}
.form-assine .hoop78-news-recado.bom{color:#6ee7a0}
.form-assine .hoop78-news-recado.ruim{color:#ff8a80}

form.hoop78-news button[disabled]{opacity:.55;cursor:progress}

@media (max-width:760px){
  .campo .hoop78-news-recado{padding:12px 0;font-size:16px}
  .form-assine .hoop78-news-recado{font-size:15px}
}

/* A pagina de confirmacao do cadastro. */
.news-recado{max-width:34rem;margin:14vh auto;padding:0 20px;text-align:center}
.news-recado h1{font-size:clamp(26px,4vw,38px);line-height:1.15;margin:0 0 14px;text-wrap:balance}
.news-recado p{margin:0 0 10px;font-size:16px;line-height:1.55;opacity:.85}
.news-voltar{display:inline-block;margin-top:10px;font-weight:600}