/*
 * Header do SEB Education (etapa C2).
 *
 * Porte do bloco `.page__header` do `main.css` do site estático, com as cores e a fonte
 * trocadas pelos tokens e **uma divergência de layout deliberada**, explicada abaixo.
 *
 * Inclui o seletor de idioma (C3) e o overlay do menu mobile (C4).
 */

.page__header {
  position: relative;
}

/*
 * A divergência: grade de três colunas, no lugar do flex do original.
 *
 * O estático centraliza a logo com `display: flex` e `.links { width: 100% }` dos dois
 * lados -- o que funciona enquanto os dois lados têm o mesmo conteúdo, que é o caso lá,
 * com dois itens de cada lado escritos à mão no HTML. Aqui a quantidade é do editor: com
 * um item à esquerda e quatro à direita, os lados deixam de encolher igual e a logo
 * escorrega do centro.
 *
 * `minmax(0, 1fr)` nas laterais resolve por construção -- as duas colunas são sempre
 * iguais, e a do meio ocupa o que a logo pedir. O `minmax` importa: com `1fr` puro a
 * coluna não encolhe abaixo do conteúdo, e um lado cheio empurraria a logo de novo.
 */
.page__header .wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 32px;
  max-width: 1251px;
  /* A altura vem dos links (98px). Sem eles -- header recém-criado, ainda sem item -- a
   * barra colapsaria para 0px e o editor não veria onde clicar. */
  min-height: 98px;
  padding: 0 16px;
  margin-left: auto;
  margin-right: auto;
}

.page__header .logo {
  width: 230px;
}

.page__header .logo a,
.page__header .logo img {
  display: block;
  width: 100%;
}

/*
 * `height: auto` para a proporção mandar.
 *
 * O template escreve `width`/`height` no `<img>` (evita salto de layout ao carregar), e sem
 * isto o atributo de altura vence: a logo de 287x59 renderizava **59px de altura com 230px
 * de largura**, esticada. Com `auto`, os 230px de largura dão 47,28px de altura -- o mesmo
 * que o site original mostra, porque lá a imagem não tem atributo de altura.
 */
.page__header .logo img {
  height: auto;
}

/*
 * Sem `flex-wrap`, de propósito: com quebra permitida o item prefere pular de linha a
 * encolher, e foi o que aconteceu na primeira tentativa -- 2+3 itens punham o header em
 * 218px de altura em vez de 98px. Sem quebra, o excedente vira encolhimento.
 */
.page__header .links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.page__header .links a {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box; /* local: o reset do site não tem border-box global */
  flex: 1 1 auto;
  max-width: 170px;
  height: 98px;
  /*
   * Uma linha por item, sempre -- e degradação por reticências, não por invasão.
   *
   * `nowrap` resolve o pedido: o rótulo não quebra em duas linhas quando há espaço. Antes
   * ele quebrava porque o item podia ficar mais estreito que o texto.
   *
   * O que decide o que acontece quando **não** há espaço:
   *
   * - deixar `min-width: auto` (o default de item flex, = tamanho do conteúdo) mantém o
   *   texto inteiro, mas a fila para de encolher e **invade a logo**. Medido: cinco itens
   *   longos à direita somam 821px numa coluna de 401px, e o primeiro deles entra por cima
   *   da logo;
   * - com `min-width: 0` o item encolhe além do texto, e o `text-overflow` corta com
   *   reticências. A logo fica intacta, o header continua com uma linha, e o editor vê
   *   imediatamente que pôs item demais.
   *
   * A segunda é a escolhida: rótulo cortado é legível como sinal, sobreposição não.
   */
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--seb-azul);
  font-family: var(--seb-fonte-corpo);
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  text-align: center;
  transition: all linear 0.15s;
}

.page__header .links a:hover {
  background-color: var(--seb-azul-claro);
  color: var(--seb-azul);
  cursor: pointer;
}

/*
 * Seletor de idioma (etapa C3).
 *
 * Porte do bloco `.language-switcher` do original, que usa `<details>` nativo -- sem
 * JavaScript, e o teclado já opera. Fica em posição absoluta sobre o header, fora da
 * grade, como no estático.
 */
.page__header .language-switcher details {
  position: absolute;
  top: 27px;
  right: 20px;
  z-index: 100;
}

.page__header .language-switcher summary {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  list-style: none; /* tira o triângulo padrão do <summary> */
}

.page__header .language-switcher summary::-webkit-details-marker {
  display: none;
}

.page__header .language-switcher summary,
.page__header .language-options a {
  color: var(--seb-azul);
  font-family: var(--seb-fonte-corpo);
  font-size: 16px;
}

/*
 * Espaço para o seletor, que flutua sobre o canto direito.
 *
 * No `padding` da **coluna**, e não do wrapper: aumentar o padding direito do wrapper
 * tiraria a logo do centro, que é o requisito da C2. Assim a coluna continua do mesmo
 * tamanho da esquerda -- a logo não se move -- e só o conteúdo dela encolhe.
 *
 * No estático a colisão não existe porque são quatro itens de largura fixa, com folga até
 * a borda. Aqui a quantidade é do editor: com cinco itens o último passava por baixo do
 * seletor (medido no navegador).
 */
.page__header .links--direita {
  padding-right: 88px;
}

.page__header .language-switcher img {
  width: 20px;
  height: 14px;
  object-fit: cover;
}

.page__header .language-switcher .arrow {
  font-size: 24px;
  padding-bottom: 14px;
}

.page__header .language-options {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 101;
  min-width: 165px;
  padding: 8px;
  background: var(--seb-branco);
  box-shadow: 0 4px 15px rgb(0 0 0 / 12%);
}

.page__header .language-options a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  text-decoration: none;
}

.page__header .language-options a:hover {
  background: #f2f2f2;
}

/*
 * Menu mobile (etapa C4).
 *
 * O botão e o overlay só existem abaixo do ponto de quebra; no desktop os itens estão nos
 * dois lados da logo e não há o que abrir.
 */
.page__header .navbar__hamburguer,
.page__header .navbar__overlay {
  display: none;
}

/*
 * O ponto de quebra do header é 1250px, e **não os 798px do estático**.
 *
 * Abaixo disso os rótulos começam a ser cortados por reticências, um a um -- e o estático
 * tem o mesmo defeito na mesma faixa, só que quebrando o texto em duas linhas em vez de
 * cortar. Medido antes da correção: em 1100px um rótulo cortado, em 1000px três, e em 800px
 * os quatro, com caixas de 60px.
 *
 * 1250px é o `max-width` do wrapper (1251px) menos um, o que dá à regra um significado além
 * do número: **o header de desktop só aparece quando o wrapper está na largura cheia**, que
 * é onde o encaixe é constante. Abaixo dela as colunas encolhem, e este menu não sobrevive.
 *
 * O que isto amarra ao conteúdo: um item a mais, ou um rótulo mais longo, sobe a largura
 * necessária. Se um dia o menu não couber nem em 1251px, o caminho é rótulo mais curto --
 * ou aceitar as reticências, que é a degradação que o item já tem.
 */
@media (max-width: 1250px) {
  /*
   * A logo vai para a **esquerda**, como no original -- e não centralizada, que era o que
   * a C2 fazia enquanto o header mobile tinha só ela.
   *
   * Motivo medido: o seletor de idioma flutua no canto direito, e com a logo centralizada
   * (160px de largura, centro em 188px numa tela de 375px) ele caía por cima dela. O canto
   * direito no mobile é do seletor e, a partir da C4, do botão do menu.
   */
  .page__header .wrapper {
    grid-template-columns: 1fr;
    justify-items: start;
    /* O `min-height` de 98px é a altura dos links, que aqui não aparecem: com ele a barra
     * mobile ficava em 138px (98 + o padding), contra ~73px no original. */
    min-height: 0;
    padding: 20px 28px;
  }

  /* Os mesmos valores do original: o seletor sobe e abre espaço à direita, ao lado do
   * botão do menu. */
  .page__header .language-switcher details {
    top: 20px;
    right: 80px;
  }

  .page__header .language-switcher summary {
    gap: 4px;
  }

  /*
   * O botão fica no canto direito, na altura do seletor -- é o espaço que a C3 já
   * reservava ali ao empurrar o seletor para `right: 80px`.
   */
  .page__header .navbar__hamburguer {
    display: flex;
    position: absolute;
    top: 20px;
    right: 28px;
    align-items: center;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }

  .page__header .navbar__hamburguer img {
    width: 30px;
    height: auto;
  }

  .page__header .navbar__overlay {
    display: none;
    background-color: var(--seb-azul);
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: entra-pela-direita;
  }

  .page__header .navbar__overlay.open {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 3001;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .page__header .navbar__overlay .overlay__content {
    height: 90%;
    overflow-y: auto;
    /* Sem isto a rolagem do overlay "vaza" para a página atrás quando chega ao fim, no
     * toque -- o conteúdo coberto se move sob a camada. */
    overscroll-behavior: contain;
  }

  /*
   * Enquanto o overlay está aberto, a página atrás sai do foco e do leitor de tela.
   *
   * `visibility: hidden` faz as duas coisas de uma vez, e **em CSS de propósito**: a regra
   * mora dentro deste `@media`, então passar para o desktop a desliga sozinha. A primeira
   * versão fazia isto no JavaScript, com `inert`, e o estado ficava presente quando o evento
   * de mudança de largura não chegava -- medido, o `main` seguia inerte a 1280px.
   *
   * O `~ *` só alcança irmãos **seguintes** ao header, que é onde `main` e o rodapé estão; o
   * toolbar do CMS vem antes e continua usável em modo de edição.
   */
  .page__header:has(.navbar__overlay.open) > *:not(.navbar__overlay),
  .page__header:has(.navbar__overlay.open) ~ * {
    visibility: hidden;
  }

  .page__header .navbar__overlay .overlay__header {
    display: flex;
    justify-content: flex-end;
    margin: 30px 30px 109px;
  }

  .page__header .navbar__overlay .overlay__close {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }

  .page__header .navbar__overlay .overlay__links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  /*
   * O item do overlay declara a sua tipografia inteira.
   *
   * Eu tinha escrito estas regras como "override" do item do desktop, achando que os `<a>`
   * herdariam a caixa de 170x98 e a cor de lá -- e não herdam: aquelas regras são
   * `.page__header .links a`, e aqui o pai é `.overlay__links`. O sintoma foi o rótulo
   * aparecer em Times New Roman, porque o `base.css` não declara fonte no `body` (decisão
   * da B2) e nenhuma regra alcançava estes links.
   */
  .page__header .overlay__links a {
    color: var(--seb-branco);
    font-family: var(--seb-fonte-corpo);
    font-size: 16px;
    line-height: 28px;
    text-align: center;
  }

  .page__header .links {
    display: none;
  }

  .page__header .logo {
    width: 160px;
  }
}

/*
 * A entrada do overlay. É o `effect--fade_in_right` do estático, renomeado -- o nome de lá
 * descreve o efeito ao contrário (ele entra **da** direita) e carrega um prefixo de
 * biblioteca que não existe aqui.
 *
 * O gêmeo `effect--fade_top` do original **não** migra: nada o referencia, e os quadros
 * dele são cópia literal deste (era erro de copiar e colar). Ver a D6.
 */
@keyframes entra-pela-direita {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/*
 * Movimento reduzido: sem a animação de entrada, e o overlay simplesmente aparece.
 *
 * Nem o estático nem o AOS do site 1 respeitam esta preferência -- é dívida registrada na
 * D6. Aqui já entra respeitada, porque é um deslocamento de tela cheia e custa uma regra.
 */
@media (prefers-reduced-motion: reduce) {
  .page__header .navbar__overlay {
    animation: none;
  }
}