/* palavras.css: a linha de palavras grandes em itálico separadas por barras, o jeito de revista de mostrar os temas.
   Na biblioteca do início e no alto da lista de episódios, cada palavra é um botão que filtra a lista (o comum
   marca aria-pressed no escolhido, e as outras palavras ficam cinza); o total de episódios do tema vai miúdo, como
   nota de rodapé. Na página do episódio a linha é menor e cada palavra leva pro tema.
   Depende de: base.css. Telefone nas regras soltas, computador no @media do fim. */

.palavras { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; row-gap: 2px; }

.palavras--esquerda { justify-content: flex-start; }

.palavra {
  display: block; padding: 0; border: 0; background: none; color: var(--preto);
  font-family: var(--letra-titulo); font-size: 30px; font-style: italic; font-weight: 500; line-height: 1.3;
  text-decoration: none; white-space: nowrap;
}

/* a barra depois de cada palavra (menos a última), pra quebra de linha nunca começar com "/";
   o leitor de tela não lê a barra */
.palavra:not(:last-child)::after {
  content: "/"; content: "/" / "";
  margin: 0 0.32em; color: var(--cinza-claro); font-style: normal; font-weight: 400;
}

.palavra__nome { text-decoration-thickness: 1px; text-underline-offset: 0.16em; }

.palavra:hover .palavra__nome { text-decoration-line: underline; }

.palavra[aria-pressed="true"] .palavra__nome { text-decoration-line: underline; text-decoration-thickness: 2px; }

/* com um tema escolhido, os outros recuam pro cinza */
.palavras:has([aria-pressed="true"]) .palavra[aria-pressed="false"] { color: var(--cinza); }

.palavra__total {
  margin-left: 0.15em; vertical-align: super;
  font-family: var(--letra); font-size: 12px; font-style: normal; font-weight: 500; line-height: 0; color: var(--cinza);
}

/* a linha menor da página do episódio */
.palavras--miuda .palavra { font-size: 22px; }

@media (min-width: 900px) {
  .palavra { font-size: 46px; line-height: 1.25; }
  .palavra__total { font-size: 14px; }
  .palavras--miuda .palavra { font-size: 26px; }
}