/* A navegação global — Happy Soaring
   ===================================

   PORQUE E UM FICHEIRO PROPRIO
     Esta barra aparece em dois sítios que não partilham folha de estilo: as
     131 páginas geradas (que carregam a pagina.css) e o Reflex Lab (que tem
     a sua própria reflex-lab.css e não sabe nada da outra). É o mesmo
     componente nos dois — logo, um ficheiro só, sem depender de nenhuma das
     duas folhas.

     Por isso as cores saem de variáveis com rede: `var(--papel, var(--ink,
     …))`. Nas páginas geradas o `--papel` existe; no Reflex Lab não existe
     e cai no `--ink`. Não há aqui nenhum valor que só funcione num deles.

   ESPECIFICIDADE
     A pagina.css tem `.pg a{color:var(--orange)}`. É (0,1,1) — empata com
     `.ng a` e o desempate passa a ser a ordem dos <link>, que é uma coisa
     frágil de que não quero depender. Daí `.ng a.ng-l`, que é (0,2,1) e
     ganha sempre. Foi este empate que deixou os botões do pilar laranja
     sobre laranja, invisíveis, durante uma publicação inteira.

   O JAVASCRIPT
     A menu.js põe `data-ng="fechado"` no header e passa a `"aberto"`. Sem
     JavaScript não há atributo nenhum, e sem atributo esta folha nunca
     esconde a navegação: fica a barra que quebra em duas filas, que é o que
     havia antes. O botão também só aparece quando o atributo existe — um
     hamburger que não abre nada é pior do que hamburger nenhum. */

/* ---------------------------------------------------------------- barra */
.ng{display:flex;align-items:center;flex-wrap:wrap;gap:2px}

.ng a.ng-l{
  display:inline-flex;align-items:center;
  font-size:11.5px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;
  color:rgba(255,255,255,.72);text-decoration:none;
  padding:8px 11px;border-radius:8px;
  transition:background .18s,color .18s;
}
.ng a.ng-l:hover{color:#fff;background:rgba(255,255,255,.09)}
.ng a.ng-l[aria-current]{color:var(--orange,#ff6a13)}
.ng a.ng-l[aria-current]:hover{background:rgba(255,106,19,.12)}
.ng a.ng-l:focus-visible{outline:2px solid var(--orange,#ff6a13);outline-offset:2px}

/* ---------------------------------------------------------------- botão */
/* 44×44 é o alvo de toque a sério. Os três riscos são decoração: o nome do
   botão vem do aria-label, que o gerador traduz. */
.ng-btn{
  display:none;
  flex:none;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);border-radius:10px;
  cursor:pointer;
}
.ng-btn:hover{background:rgba(255,255,255,.12)}
.ng-btn:focus-visible{outline:2px solid var(--orange,#ff6a13);outline-offset:2px}
/* Os tres riscos sao absolutos e ancorados ao CENTRO do botao — nao ao
   sitio onde calhariam no fluxo. Sem isto os dois que rodam giravam cada um
   a volta do seu proprio canto e a cruz saia torta. */
.ng-btn{position:relative}
.ng-btn-r{
  display:block;position:absolute;left:50%;top:50%;
  width:20px;height:2px;margin:-1px 0 0 -10px;border-radius:2px;background:#fff;
  transition:transform .2s,opacity .15s;
}
.ng-btn-r:nth-child(1){transform:translateY(-6px)}
.ng-btn-r:nth-child(3){transform:translateY(6px)}

/* Aberto, os três riscos passam a cruz — excepto no Reflex Lab.
   Aquela página já tem um X no header, que fecha o simulador. Dois X lado a
   lado dizem os dois "fechar" e só um deles fecha o que se está a ver. Ali o
   botão fica com os três riscos em qualquer estado, e o X volta a querer
   dizer uma coisa só. O que muda é o aria-label, que passa de "Abrir menu"
   para "Fechar menu" — para quem não vê o desenho, é o desenho. */
[data-ng="aberto"]:not(.rl-top) .ng-btn-r:nth-child(1){transform:rotate(45deg)}
[data-ng="aberto"]:not(.rl-top) .ng-btn-r:nth-child(2){opacity:0}
[data-ng="aberto"]:not(.rl-top) .ng-btn-r:nth-child(3){transform:rotate(-45deg)}

/* ------------------------------------------------------------- gaveta */
/* O painel é `fixed` e não `absolute` por uma razão concreta: no Reflex Lab
   o `.rl-app` tem `overflow:hidden` para o simulador caber no ecrã, e um
   painel absoluto era cortado pelo contentor. Fixo é relativo ao viewport e
   escapa a isso — a mesma regra serve os dois sítios.

   O `--ng-topo` é escrito pela menu.js quando abre: só o browser sabe onde
   acaba o header, e ele não tem a mesma altura nos dois. O 64px é a rede
   para o caso de a folha chegar antes do script. */
[data-ng="aberto"] .ng{
  position:fixed;top:var(--ng-topo,64px);left:0;right:0;bottom:0;z-index:200;
  flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:8px;
  padding:18px 20px 32px;overflow-y:auto;
  background:var(--papel,var(--ink,#071d3a));
  border-top:1px solid rgba(255,255,255,.1);
}
[data-ng="aberto"] .ng a.ng-l{
  min-height:52px;padding:14px 16px;
  font-size:13px;letter-spacing:1px;
  color:#fff;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);border-radius:12px;
}
[data-ng="aberto"] .ng a.ng-l[aria-current]{
  color:var(--orange,#ff6a13);
  border-color:rgba(255,106,19,.5);background:rgba(255,106,19,.1);
}

/* o header fica por cima da gaveta: é lá que está o botão que a fecha */
[data-ng]{position:relative;z-index:210}

/* enquanto está aberta, a página por baixo não anda */
html.ng-travado{overflow:hidden}

/* -------------------------------------------------- quando encolhe */
/* Dois números diferentes porque são dois headers diferentes.

   Nas páginas geradas o header é marca + linha de dealer + seletor de
   idiomas: aos 899px os seis rótulos deixam de caber ao lado disso.

   No Reflex Lab o header tem ainda o título REFLEX LAB ao centro e o X de
   fechar, e por isso fica sem espaço muito mais cedo — perto dos 1180px. */
@media(max-width:899px){
  .pg-topo[data-ng] .ng-btn{display:inline-flex}
  .pg-topo[data-ng="fechado"] .ng{display:none}
}
@media(max-width:1180px){
  .rl-top[data-ng] .ng-btn{display:inline-flex}
  .rl-top[data-ng="fechado"] .ng{display:none}
}

/* O botão custa 44px numa linha que já estava cheia. Medido a 390px: o
   título e o subtítulo pediam 298px dos 397 disponíveis, e o que sobrava
   não chegava — a marca encolheu até 0px e o X de fechar ficou com 15.

   O subtítulo é a linha mais larga do header e é a que menos falta faz num
   ecrã de telemóvel: o título por cima dele já diz o mesmo. Sai, e voltam a
   caber os quatro. Só quando há JavaScript, que é quando há botão. */
@media(max-width:680px){
  .rl-top[data-ng] .rl-brand{flex:none}
  .rl-top[data-ng] .rl-title-wrap{flex:0 1 auto;min-width:0}
  .rl-top[data-ng] .rl-subtitle{display:none}
}