/*
 * Tópicos (etapa E6) -- 26 listas: 25 nos acordeões de politicas e privacidade-cookies, 1 no
 * conduta.
 *
 * **Um vocabulário no lugar de dois.** O estático chama a mesma coisa de `.accordion__list`
 * (25) e `.text__topics` (1). Comparadas no `csc.css` -- 60-108 e 259-287 --, são o mesmo
 * desenho: coluna, bolinha de 8px em `::before`, item de 18/26px. Diferem em dois valores de
 * espaçamento, que são de página: `padding: 0 24px 24px` dentro do acordeão contra
 * `padding-left: 20px` no conduta, e `gap` de 8 contra 4px. Nenhum dos dois vem para cá.
 *
 * O `gap` fica -- ele é interno ao componente, pela distinção que a E4 registrou -- e é o de
 * 8px, dos 25.
 *
 * **O que não é igual entre os dois grupos, e a unificação decide:** o item do conduta tem
 * `line-height: 28px` e `padding-left: 24px`, contra 26 e 20px no acordeão. Fica com os do
 * acordeão, que são 25 dos 26 casos -- ou seja, a lista do conduta muda de entrelinha e de
 * recuo do marcador em dois pixels. É desvio escolhido, não igualdade encontrada.
 *
 * A tipografia é transcrita do original (18/26px, 16/22 no celular), como fizeram a E3 e a
 * E4. Ela **não** é um degrau da escala da D3, e isso é sabido: a D7 já registrou que o
 * padrão do plugin de texto (20/16) difere dos 18/16 do original em um degrau, e deixou para
 * a G13 decidir se a escala ganha um degrau. Enquanto isso, este componente prefere concordar
 * com o original a concordar com uma escala que a G13 pode mudar.
 */

.topicos {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.topicos__item {
  position: relative;
  padding-left: 20px;
  font-family: var(--seb-fonte-corpo);
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  color: var(--seb-azul);
}

/*
 * A bolinha é desenhada, e não o marcador nativo: o `base.css` zera `list-style` de todo
 * `<ul>` (o site tem menus em `<ul>`), e o original também a desenha assim.
 *
 * `top: 11px` alinha o centro da bolinha com a primeira linha do item -- e é por isso que ele
 * muda no celular junto com o `line-height`, e não por capricho.
 */
.topicos__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--seb-azul);
}

/*
 * A variante é a **ausência** da bolinha, e o nome do original mentia: `is--lettered` não
 * desenha letra nenhuma -- ela vem digitada no item ("a) Cadastrais e de identificação…").
 * Some a bolinha e some o recuo que existia para ela.
 */
.topicos--nenhum .topicos__item {
  padding-left: 0;
}

.topicos--nenhum .topicos__item::before {
  content: none;
}

/*
 * **O link dentro do item precisa desta regra para existir.** O `base.css` faz de todo `<a>`
 * um `display: block` sem sublinhado -- decisão dele, porque no site quase todo link é um
 * item de menu. Dentro de um tópico isso quebraria a frase em duas e deixaria o link
 * indistinguível do texto. Os 5 links para a documentação de navegador, em
 * privacidade-cookies, são exatamente este caso.
 *
 * Transcrito do `.accordion__link` do original (`csc.css` 109-122), menos a tipografia, que o
 * item já dá: `word-break` porque lá o texto do link é uma URL, e ela não caberia no celular.
 */
.topicos__item a {
  display: inline;
  text-decoration: underline;
  word-break: break-word;
  color: inherit;
}

.topicos__item a:hover {
  opacity: 0.7;
}

@media (max-width: 768px) {
  .topicos__item {
    font-size: 16px;
    line-height: 22px;
  }

  .topicos__item::before {
    top: 8px;
  }
}