/* ==================================================================
   Barra fixa

   Sem fundo no topo. Recolhe quando a leitura desce e volta quando sobe;
   fora do topo, volta com o fundo da secao que esta atras dela, para o
   conteudo nao passar por baixo do logo.
   ================================================================== */

.barra{
  position:fixed;
  inset:0 0 auto 0;
  z-index:80;
  height:var(--topo);
  display:flex;
  align-items:center;
  color:var(--barra-fg,var(--navy));
  transition:color .35s var(--ease-out),background-color .35s var(--ease-out),transform .45s var(--ease-out);
}
.barra__caixa{display:flex;align-items:center;justify-content:space-between}
.barra.is-recolhida{transform:translateY(-100%)}
.barra.is-com-fundo{background:var(--barra-bg,var(--paper))}
html[data-tema="navy"] .barra{--barra-fg:var(--paper);--barra-bg:var(--navy)}
html[data-tema="petrol"] .barra{--barra-fg:var(--paper);--barra-bg:var(--petrol)}

.barra__logolink{display:block}
.barra__logo{height:clamp(2.25rem,4vw,4.25rem);width:auto}
.barra__logo--escuro{display:none}
html[data-tema="navy"] .barra__logo--claro,
html[data-tema="petrol"] .barra__logo--claro{display:none}
html[data-tema="navy"] .barra__logo--escuro,
html[data-tema="petrol"] .barra__logo--escuro{display:block}

/* ---- botao do menu --------------------------------------------------
   "Menu" e as tres linhas, sem caixa. O rotulo tem entrelinha 1: na DM
   Mono o centro da caixa fica a .01em do centro das maiusculas, entao o
   icone centralizado na caixa fica centralizado nas letras.
   O icone (Material Symbols, ver icones.js) mede 1.75em de largura; com o
   rotulo de 12px as linhas tem 1.85px, perto da haste da DM Mono. */
.barra{--barra-acento:var(--red)}
html[data-tema="navy"] .barra,
html[data-tema="petrol"] .barra{--barra-acento:var(--orange)}

.barra__menu{
  display:inline-flex;
  align-items:center;
  gap:.75em;
  min-height:44px;
  padding:0 0 0 .75rem;
  border:0;
  background:none;
  color:inherit;
  font-family:var(--font-mono);
  font-weight:500;
  font-size:var(--t-mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
}
.barra__rotulo{line-height:1}
.barra__icone{
  display:grid;
  width:1.75em;
  height:calc(1.75em * 532.3 / 680);
  transition:color .3s var(--ease-out);
}
.barra__svg{
  grid-area:1 / 1;
  width:100%;
  height:100%;
  transition:opacity .3s var(--ease-out),transform .45s var(--ease-out);
}
.barra__svg--fechar{opacity:0;transform:rotate(-90deg)}
.barra__menu[aria-expanded="true"] .barra__svg--abrir{opacity:0;transform:rotate(90deg)}
.barra__menu[aria-expanded="true"] .barra__svg--fechar{opacity:1;transform:none}
.barra__menu:hover .barra__icone,
.barra__menu:focus-visible .barra__icone{color:var(--barra-acento)}
.barra__menu:focus-visible{outline:1px solid currentColor;outline-offset:6px}

/* Com o painel aberto a barra fica sobre o navy: tinta clara, simbolo so,
   sem fundo proprio e sempre visivel. */
html.menu-aberto .barra{
  --barra-fg:var(--paper);
  --barra-bg:transparent;
  --barra-acento:var(--orange);
  transform:none;
}
html.menu-aberto .barra__logo--claro{display:none}
html.menu-aberto .barra__logo--escuro{display:block}

/* ---- painel -----------------------------------------------------------
     secoes (7 col.)                | servicos
     fio                            | contato: numero, redes, botao
     ...                            |
     H1 do hero                                   prova do hero
   A lista e o lado ficam centralizados na altura livre; o pe desce para a
   base. O corpo dos nomes cabe na altura (sete linhas de 1.54 x 5.6vh
   somam 60vh) e na coluna ("Base de desenvolvimento", o nome mais longo,
   mede 11.1em). */
.menu{
  position:fixed;
  inset:0;
  z-index:79;
  display:flex;
  overflow-y:auto;
  overscroll-behavior:contain;
  background:var(--navy);
  color:var(--paper);
  padding-block:calc(var(--topo) + clamp(.25rem,1.5vh,1.5rem)) clamp(1.25rem,3.5vh,2.25rem);
}
.menu[hidden]{display:none}
.menu__caixa{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  grid-template-rows:1fr auto;
  column-gap:clamp(2rem,6vw,7rem);
  row-gap:clamp(1.5rem,4vh,3rem);
  width:100%;
}

/* secoes: fios desenhados da esquerda (--fio, 0 a 1, animado em menu.js) */
.menu__lista{
  grid-column:1;
  grid-row:1;
  align-self:center;
  container-type:inline-size;
}
.menu__item{position:relative}
.menu__item::before,
.menu__item:last-child::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  height:1px;
  background:var(--linha-forte);
  transform:scaleX(var(--fio,1));
  transform-origin:left;
}
.menu__item::before{top:0}
.menu__item:last-child::after{bottom:0}
.menu__link{
  display:block;
  padding-block:.21em;
  font-family:var(--font-display);
  font-weight:800;
  font-size:min(5.6vh, 100cqw / 11.6, 4.25rem);
  line-height:1.12;
  letter-spacing:-.03em;
  color:var(--paper);
}
.menu__nome{
  display:inline-block;
  transition:color .3s var(--ease-out),transform .45s var(--ease-out);
}
.menu__link:hover .menu__nome,
.menu__link:focus-visible .menu__nome{color:var(--orange);transform:translateX(.12em)}
.menu__link:focus-visible{outline:none}
.menu__link:focus-visible .menu__nome{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.12em}

/* lado: servicos e contato */
.menu__lado{
  grid-column:2;
  grid-row:1;
  align-self:center;
  display:flex;
  flex-direction:column;
  gap:clamp(2rem,5.5vh,4rem);
}
.menu__rotulo,
.menu__pe{
  font-family:var(--font-mono);
  font-weight:500;
  font-size:var(--t-mono-sm);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--fg-3);
}
.menu__servlista{margin-top:.6rem}
.menu__servico,
.menu__pagina{
  display:inline-block;
  padding-block:.28em;
  font-family:var(--font-display);
  font-weight:500;
  font-size:var(--t-lead);
  line-height:1.2;
  color:var(--fg-2);
  transition:color .3s var(--ease-out),transform .45s var(--ease-out);
}
.menu__servico:hover,
.menu__servico:focus-visible,
.menu__pagina:hover,
.menu__pagina:focus-visible{color:var(--orange);transform:translateX(.2em)}
/* Paginas (menu do painel, local "paginas"): abaixo dos servicos, depois
   de um fio. Sao paginas, e nao servicos. */
.menu__paginas{margin-top:1rem;padding-top:.75rem;border-top:1px solid var(--rule-dark)}

.menu__numero{
  display:inline-block;
  margin-top:.5rem;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.5rem,2.2vw,2.25rem);
  line-height:1.1;
  letter-spacing:-.02em;
  white-space:nowrap;
  color:var(--paper);
  transition:color .35s var(--ease-out);
}
.menu__numero:hover,
.menu__numero:focus-visible{color:var(--orange)}
/* Alvos de 44px; o icone de 20px no meio, com a borda esquerda do
   primeiro alinhada ao texto. */
.menu__redes{display:flex;margin:.35rem 0 0 -12px}
.menu__redes a{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  color:var(--paper);
  opacity:.78;
  transition:opacity .35s var(--ease-out);
}
.menu__redes a:hover,
.menu__redes a:focus-visible{opacity:1}
.menu__redes svg{width:1.25rem;height:1.25rem}
.menu__cta{margin-top:clamp(1rem,2.5vh,1.75rem)}

/* pe */
.menu__pe{
  grid-column:1 / -1;
  grid-row:2;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:.5rem 2rem;
}

/* A secao que recebe o foco depois de um nome clicado nao ganha contorno. */
main section[tabindex="-1"]:focus{outline:none}

/* Abaixo de 1100px: uma coluna; secoes, contato e pe. Os servicos saem
   (ficariam apertados, e Servicos e o primeiro nome da lista). */
@media (max-width:1099.98px){
  .menu__caixa{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto 1fr;
  }
  .menu__lista{align-self:start}
  .menu__link{font-size:clamp(1.5rem,7vw,2.5rem);padding-block:.26em}
  .menu__lado{grid-column:1;grid-row:2;align-self:start}
  .menu__servicos{display:none}
  /* Com paginas no menu, o bloco volta so com elas. */
  .menu__servicos.tem-paginas{display:block}
  .menu__servicos.tem-paginas > .menu__rotulo,
  .menu__servicos.tem-paginas > .menu__servlista{display:none}
  .menu__servicos.tem-paginas .menu__paginas{margin-top:0;padding-top:0;border-top:0}
  .menu__pe{grid-row:3;align-self:end;flex-direction:column}
}

/* Tela util muito baixa (iPhone SE, 320x568): o pe sai. Ele e contexto, e
   nao navegacao, e cortado no meio da linha o painel parecia inacabado. */
@media (max-width:1099.98px) and (max-height:640px){
  .menu__pe{display:none}
}