/*
 * Camada base do SEB Education: reset e padrões de elemento.
 *
 * Transcreve fielmente o bloco base do `main.css` do site estático (as regras que
 * vinham antes do primeiro componente). A fidelidade é deliberada: o bloco G compara
 * cada página com o estático, e um reset "melhorado" faria toda comparação divergir.
 *
 * Uma coisa que deliberadamente **não** está aqui, pelo mesmo motivo:
 *
 * - `box-sizing: border-box` global. O estático não tem, e adicioná-lo mudaria o
 *   cálculo de largura de praticamente todo componente.
 */

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
  /*
   * **Desvio deliberado do original.** O `main.css` do estático não
   * tem esta linha, e a regra deste arquivo é transcrever o que ele tem -- mas aqui a ausência
   * é um defeito latente, não uma escolha de desenho: sem ela, Chrome e Safari de celular
   * podem **inflar o texto** por conta própria (o "font boosting"), e um texto inflado num
   * elemento que não quebra -- o título em script do conduta, por exemplo -- passa da tela e
   * a página ganha rolagem horizontal.
   *
   * `100%` não muda nada onde o navegador não infla, que é o caso do desktop e de qualquer
   * celular em zoom normal. É a mesma linha que o site 1 já tem, via o reset do Bootstrap.
   *
   * Entrou depois de um relato de rolagem horizontal no celular, junto com a fonte que não
   * carregava. A causa que sobrou era outra: os blocos animados que ainda estão fora da tela
   * ficam 60px deslocados, e só o `clip` do `body` os corta.
   */
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

/*
 * Rótulo só para leitor de tela.
 *
 * Nasceu no `header.css` da C3, para o seletor de idioma, com a nota de que subiria para cá
 * quando aparecesse o segundo uso. Apareceu na C5: o link de rede social do rodapé é um
 * ícone, e o rótulo dele não é visível.
 *
 * É utilitário e não token: não descreve nada do desenho, só esconde de olho e mantém para
 * leitor de tela.
 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

body {
  overflow-x: clip;
  background-color: var(--seb-branco);
  font-family: var(--seb-fonte-corpo);
  color: var(--seb-azul);
}

body,
p,
h1,
h2,
h3,
h4,
h5,
h6,
figure,
iframe {
  margin: 0;
}

a {
  display: block;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

address {
  font-style: normal;
}

iframe {
  border: none;
}

mark {
  padding: 0;
  background-color: transparent;
}

menu {
  padding-inline-start: 0;
  margin-block-start: 0;
  margin-block-end: 0;
}

ul {
  list-style-type: none;
  padding-inline-start: 0;
  margin-bottom: 0;
}

p {
  margin-bottom: 0;
}

section,
article,
aside,
details,
figcaption,
figure,
header,
footer,
menu,
nav {
  display: block;
}