/* ============================================================
   CABEÇALHO E MENU
   O mesmo em todas as paginas: a home, Online e Offline. Saiu do
   hero.css para as paginas poderem usar sem levar o hero junto.
   ============================================================ */

/* ============ CABEÇALHO FIXO =============================== */
.cabecalho {
  position: fixed;
  /* Filha direta do <body>: nao ha transform, filter nem will-change
     acima dela, entao o fixed se prende a tela e nao a uma secao. */
  top: env(safe-area-inset-top, 0px);
  left: 0;
  right: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(.875rem, 2vh, 1.5rem) var(--margem);
  background: transparent;
  pointer-events: none;      /* so os filhos clicaveis recebem evento */
}
.cabecalho > * { pointer-events: auto; }

/* ---- A. Marca empilhada ----
   A regra de igualar a largura optica das duas linhas foi CANCELADA:
   para casar com "ANDRADE" o "Lediane" precisava de 0.5288em, e o
   esticamento ficava evidente. O contraste entre os dois pesos ja
   sustenta a marca; a linha de cima pode terminar antes.
   O margin-right negativo continua, so para descontar a sobra que o
   letter-spacing deixa depois da ultima letra. */
.marca {
  display: block;
  line-height: .92;
  /* PADRAO = tinta: o tom claro. Quem troca e o data-tom da barra,
     escrito por js/cabecalho.js; ver o bloco do TOM abaixo. */
  color: var(--tinta);
  transition: color .3s ease;
}
.marca__l1,
.marca__l2 {
  display: block;
  font-family: var(--fonte-texto);
  font-size: 30px;
  white-space: nowrap;
}
.marca__l1 {
  font-weight: 300;
  font-variation-settings: 'wdth' 100, 'wght' 300;
  letter-spacing: .06em;
  margin-right: -.06em;
  opacity: .70;
}
.marca__l2 {
  font-weight: 800;
  font-stretch: 125%;
  font-variation-settings: 'wdth' 125, 'wght' 800;
  letter-spacing: .02em;
  margin-right: -.02em;
  text-transform: uppercase;
  opacity: 1;
}

/* ---- B. Botao de menu: circulo de 52px ----
   Borda e tracos usam currentColor, entao o tema (claro/escuro) so
   precisa trocar a cor do botao. Desenhado em CSS, sem arquivo. */
.menu-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background: transparent;
  color: var(--tinta);          /* PADRAO = tinta, ver .marca */
  display: grid;
  place-content: center;
  gap: 7px;
  padding: 0;
  transition: background-color 300ms ease, border-color 300ms ease,
              color 300ms ease;
}
.menu-btn__traco {
  display: block;
  width: 20px;
  height: 1.5px;
  background: currentColor;
  transition: transform 300ms cubic-bezier(.22,.61,.36,1);
}
.menu-btn:hover,
.menu-btn:focus-visible {
  background: var(--ambar);
  border-color: var(--ambar);
  color: var(--tinta);
}
/* ---- O TOM acompanha o fundo que esta sob a barra ----
   js/cabecalho.js le o data-tema da secao que passa por baixo e
   escreve data-tom aqui. Com o menu aberto o tom e escuro, porque o
   overlay e tinta: e isso que deixa o fechar visivel desde o inicio.
     claro  -> marca e botao em tinta (o padrao acima)
     escuro -> marca em osso, botao em ambar
   :where() deixa o seletor com o peso de .menu-btn, para o hover em
   ambar (fundo cheio, X em tinta) continuar valendo por cima. */
:where(.cabecalho[data-tom='escuro']) .marca { color: var(--osso); }
:where(.cabecalho[data-tom='escuro']) .menu-btn { color: var(--ambar); }
/* aberto: os dois tracos giram e formam um X.
   distancia entre centros = 7 (gap) + 1.5 (altura) = 8.5 -> 4.25 cada */
.menu-btn[aria-expanded='true'] .menu-btn__traco:first-child {
  transform: translateY(4.25px) rotate(45deg);
}
.menu-btn[aria-expanded='true'] .menu-btn__traco:last-child {
  transform: translateY(-4.25px) rotate(-45deg);
}

/* overlay do menu */
.menu {
  position: fixed;
  inset: 0;
  z-index: 69;
  background: var(--tinta);
  display: grid;
  align-content: center;
  padding: var(--margem);
  opacity: 0;
  visibility: hidden;
  transition: opacity 360ms ease, visibility 0s 360ms;
}
.menu[data-aberto='true'] {
  opacity: 1;
  visibility: visible;
  transition: opacity 360ms ease, visibility 0s;
}
.menu__lista { display: grid; gap: clamp(.25rem, 1.5vh, 1rem); }
.menu__lista a {
  font-family: var(--fonte-texto);
  font-weight: 800;
  font-stretch: 125%;
  /* A ALTURA tambem limita: com a Tecnologizando sao sete itens, e em
     tela baixa a lista passava por baixo do cabecalho e saia da tela,
     sem rolagem. 14svh - 37px foi medido para deixar ~12px livres sob
     o cabecalho de 600 a 768px de altura. Em tela alta quem manda
     continua sendo 7vw / 5rem. */
  font-size: clamp(2rem, min(7vw, 14svh - 37px), 5rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--osso);
  transition: color 200ms, transform 300ms cubic-bezier(.22,.61,.36,1);
  transform-origin: left;
  width: max-content;
  max-width: 100%;
}
.menu__lista a:hover { color: var(--ambar); transform: translateX(.75rem); }

/* Os que saem do site levam a seta .seta-ext (tokens.css), na cor do
   texto. inline-flex segura o translateX do hover; no flex o SVG nao
   tem linha de base, entao a base dele senta na do texto. O espaco
   vem da margem da seta, nao do gap. */
.menu__lista a[data-externo] {
  display: inline-flex;
  align-items: baseline;
}
.menu__lista a .seta-ext { transition: transform 300ms cubic-bezier(.22,.61,.36,1); }
.menu__lista a[data-externo]:hover .seta-ext { transform: translate(.06em, -.06em); }

/* A Tecnologizando, depois dos seis e separada por uma linha. Os seis
   levam a lugares dentro do site; esta leva para fora, e a lista tem
   de dizer isso antes do clique. Por isso tambem e menor. */
.menu__empresa {
  /* 26px entre o item de cima e a linha: desconta o gap da lista,
     que e o mesmo clamp de .menu__lista */
  margin-top: calc(26px - clamp(.25rem, 1.5vh, 1rem));
  padding-top: 22px;
  border-top: 1px solid var(--borda);
}
.menu__rotulo {
  display: block;
  margin-bottom: .5rem;
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--neutro);
}
.menu__lista .menu__empresa a { font-size: clamp(22px, min(3.6vw, 4.5svh), 38px); }

/* Entrada em cascata de 60ms. O atraso so existe ao ABRIR: ao fechar
   todos saem juntos, senao a saida fica arrastada. */
.menu__lista li {
  opacity: 0;
  transform: translateY(.6rem);
  transition: opacity 420ms ease, transform 420ms cubic-bezier(.22,.61,.36,1);
  transition-delay: 0ms;
}
.menu[data-aberto='true'] .menu__lista li { opacity: 1; transform: none; }
.menu[data-aberto='true'] .menu__lista li:nth-child(1) { transition-delay:   0ms; }
.menu[data-aberto='true'] .menu__lista li:nth-child(2) { transition-delay:  60ms; }
.menu[data-aberto='true'] .menu__lista li:nth-child(3) { transition-delay: 120ms; }
.menu[data-aberto='true'] .menu__lista li:nth-child(4) { transition-delay: 180ms; }
.menu[data-aberto='true'] .menu__lista li:nth-child(5) { transition-delay: 240ms; }
.menu[data-aberto='true'] .menu__lista li:nth-child(6) { transition-delay: 300ms; }
.menu[data-aberto='true'] .menu__lista li:nth-child(7) { transition-delay: 360ms; }

@media (max-width: 900px) {
  .marca__l1, .marca__l2 { font-size: 22px; }
  .menu-btn { width: 46px; height: 46px; }
}