/*
 * Acordeão (etapa D7) -- os 29 de politicas e privacidade.
 *
 * Transcreve o bloco `.accordions` do `csc.css`, com uma diferença de marcação: lá é
 * `<button class="accordion__trigger">` mais JavaScript, aqui é `<details>` + `<summary>`.
 * O porquê está na D7 e no comentário do template; em uma linha: o conteúdo tem de ser
 * alcançável sem JavaScript, e no estático não é.
 */

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

.accordion {
  background-color: var(--seb-branco);
  border: 1px solid var(--seb-azul-claro);
}

/*
 * `<summary>` traz um marcador triangular por padrão; o desenho tem o próprio ícone.
 *
 * **Sem `width: 100%`, e a ausência é a correção de um defeito que a troca de elemento
 * criou.** O original declara `width: 100%` no `.accordion__trigger` porque lá ele é um
 * `<button>`, que encolhe para o conteúdo -- e que ganha `box-sizing: border-box` da folha
 * do navegador, então os 24px de padding cabem dentro dos 100%.
 *
 * Um `<summary>` não é nenhuma das duas coisas: já ocupa a largura do pai, e usa o
 * `content-box` do projeto (a `base.css` explica por que não há `border-box` global). Com
 * `width: 100%` ele ficava **48px mais largo que o acordeão** e empurrava o ícone para fora
 * da tela. Medido no navegador: 1311px de `<summary>` dentro de 1265px de `<details>`.
 */
.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  text-align: left;
  cursor: pointer;
  list-style: none;
  transition: all linear 0.15s;
}

.accordion__trigger::-webkit-details-marker {
  display: none;
}

/*
 * O original escreve `#b2dce840` -- o azul-claro a 25% (0x40/255). Aqui sai do token por
 * `color-mix`, e não por um `--seb-azul-claro-rgb` novo: é o primeiro uso do azul-claro com
 * alfa, e o critério do `tokens.css` é só entrar o que é usado mais de uma vez. Se aparecer
 * o segundo, aí o token de componentes se paga.
 */
.accordion__trigger:hover {
  background-color: color-mix(in srgb, var(--seb-azul-claro) 25%, transparent);
}

.accordion__title {
  font-family: var(--seb-fonte-corpo);
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
  color: var(--seb-azul);
}

/*
 * O `+` vira `×` girando 45 graus quando abre. É o do original, e é decorativo: o estado
 * quem anuncia é o `<details>`, então o `<span>` é `aria-hidden` no template.
 */
.accordion__icon {
  position: relative;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--seb-azul);
  color: var(--seb-branco);
  font-size: 0;
  transition: all linear 0.15s;
}

.accordion__icon::before,
.accordion__icon::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 11px;
  width: 10px;
  height: 2px;
  background-color: currentColor;
}

.accordion__icon::after {
  transform: rotate(90deg);
}

.accordion[open] {
  border-color: var(--seb-azul);
}

.accordion[open] .accordion__icon {
  transform: rotate(45deg);
}

/*
 * O recuo é do contêiner, e **não** de cada filho.
 *
 * A primeira versão usava `.accordion__content > *`, copiando o original, onde o recuo está
 * em `.accordion__text` e `.accordion__list`. Aqui os filhos são plugins: dois blocos de
 * texto empilhariam dois recuos de fundo. E era pior do que feio -- o `font-size: 18px`
 * daquela regra tem a mesma especificidade de `.texto--seb-texto`, e esta folha carrega
 * depois de `texto.css`: o acordeão **sobrescrevia a escala tipográfica** que a D3 pôs sob
 * responsabilidade do plugin de texto.
 *
 * Aqui não há tipografia nenhuma, por isso. O tamanho do texto dentro do acordeão é o que o
 * editor escolher no `CustomTextPlugin` -- e o padrão dele, 20/16px, difere dos 18/16px do
 * original em um degrau no desktop. É consequência aceita do contrato da D3; a G13 decide
 * se vira um degrau novo.
 */
.accordion__content {
  padding: 0 24px 24px;
}

/*
 * **O espaço entre os blocos do conteúdo, e ele é medido na tela e não copiado da folha.**
 *
 * No original cada peça carrega o próprio `padding-bottom` -- 24px no `.accordion__text` e no
 * `.accordion__list`, 8px no `.accordion__subtitle` --, e ler só isso diz que o subtítulo fica
 * colado na lista que apresenta. **Não é o que a página desenha.** O `<ul>` de lá conserva o
 * `margin-top: 16px` que o navegador dá por padrão (o reset do site zera só o
 * `margin-bottom`, e o nosso `base.css` transcreve isso), então 8 + 16 dão os mesmos 24px de
 * todos os outros pares. Medido em `www.sebeducation.com` na G4, que é a etapa que trouxe o
 * primeiro conteúdo para dentro do acordeão.
 *
 * Aqui as peças são plugins, então o espaço é do contêiner -- regra da D2 --, e é um valor só
 * **entre blocos**. `margin-top` no irmão seguinte, e não `gap`: assim ele **substitui** o
 * padrão do `<ul>` em vez de somar a ele.
 *
 * **Um caso que esta regra não alcança, de propósito:** quando o primeiro bloco do painel é uma
 * lista -- o acordeão 5 de `politicas`, entre outros --, ela conserva os 16px de topo que o
 * navegador dá. É o que o original faz, medido: o reset dele também não os zera, e lá o `<ul>`
 * de topo tem a mesma folga. Fidelidade, e não descuido.
 */
.accordion__content > * + * {
  margin-top: 24px;
}

.accordion__content .texto {
  font-size: 18px;
  line-height: 26px;
}

/*
 * **O link dentro de um parágrafo do painel desmaia no hover, e é a única parte do
 * `.accordion__link` do original que ainda faltava.**
 *
 * Aquela regra (`csc.css` 109-122) vale para os links dos dois lugares do painel, e ela
 * chegou aqui em pedaços: o item de lista ganhou a versão dele na E6 (`.topicos__item a`,
 * com o `word-break` que a URL de lá exige) e o parágrafo ganhou o essencial na G4, em
 * `texto.css` -- `display: inline`, sublinhado e cor herdada, que é o que o link precisa
 * para existir em **qualquer** bloco de texto. O que sobrou é este `opacity`, e ele não cabe
 * em `texto.css`: o link do conduta, que é o outro caso daquela regra de lá, **não** tem
 * hover no original.
 *
 * Então ele fica aqui, alcançado pela estrutura (bloco de texto dentro do painel) e não pela
 * classe `accordion__link` -- que vem no conteúdo lido do estático e é inerte, como o E6 já
 * decidiu para os `<span>`. Os 5 links de e-mail de privacidade-cookies e os 2 de politicas
 * são os casos.
 */
.accordion__content .texto a:hover {
  opacity: 0.7;
}

/*
 * O subtítulo é a exceção, e por ser do acordeão: ele é campo do model, renderizado por
 * este template, não plugin filho. Então a tipografia dele mora aqui, e é a do original.
 *
 * **Sem espaçamento próprio, e isto mudou na G4:** ele tinha um `margin-bottom: 8px` daqui, e
 * agora os 8px saem da regra de adjacência acima -- que vale para ele e para o cabeçalho que
 * a G4 monta como plugin. Duas fontes para o mesmo espaço somariam 32px onde o original tem 8.
 *
 * E o campo continua **sem uso nas páginas montadas**: a D7 mediu que ele não mapeia (são
 * cabeçalhos *dentro* do conteúdo, vários por acordeão), e a G4 confirmou com o caso na mão.
 * A tipografia fica aqui porque o editor ainda pode preenchê-lo no admin.
 */
.accordion__subtitle {
  font-family: var(--seb-fonte-corpo);
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
  color: var(--seb-azul);
}

/*
 * A abertura animada é **melhoria progressiva**, e não requisito.
 *
 * `<details>` abre de uma vez; animar a altura dele exige `interpolate-size` e
 * `::details-content`, que hoje só o Chromium tem. Onde não há, o acordeão abre seco --
 * funciona igual, e continua sendo o comportamento nativo. Preferi isso a trazer o
 * JavaScript de volta só pela transição: os tempos e as curvas abaixo são os do
 * `csc.css`, então onde anima, anima igual ao original.
 */
@supports (interpolate-size: allow-keywords) {
  /*
   * No `.accordion`, e não no `:root`: `interpolate-size` é herdado, e no documento inteiro
   * ele faria **qualquer** transição futura para `auto` passar a animar sem ninguém pedir.
   * Daqui ele alcança o `::details-content`, que é tudo o que precisa alcançar.
   */
  .accordion {
    interpolate-size: allow-keywords;
  }

  .accordion::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    content-visibility: hidden;
    transition:
      block-size cubic-bezier(0.4, 0, 0.2, 1) 0.32s,
      opacity linear 0.18s,
      content-visibility 0.32s allow-discrete;
  }

  .accordion[open]::details-content {
    block-size: auto;
    opacity: 1;
    content-visibility: visible;
    transition:
      block-size cubic-bezier(0.22, 1, 0.36, 1) 0.36s,
      opacity linear 0.24s 0.06s,
      content-visibility 0.36s allow-discrete;
  }
}

@media (forced-colors: active) {
  .accordion__icon::before,
  .accordion__icon::after {
    background-color: CanvasText;
  }
}

/*
 * Duas regras, e não uma lista com os quatro seletores: um navegador que não conhece
 * `::details-content` **descarta a regra inteira**, e aí o movimento reduzido deixaria de
 * zerar até a transição do gatilho e do ícone -- que são as que existem lá.
 */
@media (prefers-reduced-motion: reduce) {
  .accordion__trigger,
  .accordion__icon {
    transition: none;
  }

  .accordion::details-content,
  .accordion[open]::details-content {
    transition: none;
  }
}

@media (max-width: 768px) {
  .accordion__trigger {
    padding: 16px;
  }

  .accordion__title {
    font-size: 16px;
    line-height: 22px;
  }

  .accordion__content {
    padding: 0 16px 16px;
  }

  .accordion__content .texto {
    font-size: 16px;
    line-height: 22px;
  }

  /*
   * No celular o original desce para 16px entre blocos -- **com uma exceção que não vem, e
   * ela é desvio deliberado.** Lá o subtítulo fica com 24px abaixo dele (os 8px da folha mais
   * os 16 do `<ul>`), ou seja, *mais* separado da lista do que os blocos estão entre si --
   * o contrário do que a folha pede. É default de navegador escapando de um reset incompleto,
   * e não desenho. Registrado na G4.
   */
  .accordion__content > * + * {
    margin-top: 16px;
  }

  .accordion__subtitle {
    font-size: 16px;
    line-height: 22px;
  }
}