/* O ESTILO DO CABEÇALHO DO codenumber.pt. UMA FONTE, CINCO PÁGINAS.
   =================================================================

   🔴 PORQUE SAIU DE DENTRO DO `_cabecalho.html`: a regra da casa, escrita pelo
   João a 6/10/2026, é que **uma parte partilhada leva a marcação, o estilo e o
   comportamento. As três, ou não é partilhada.** Até aqui o estilo viajava
   dentro de um `<style>` colado ao markup, o que já era uma fonte só, mas o
   `<style>` não podia ser medido como ficheiro nem referenciado uma vez.

   🔴 E TEM UMA QUARTA PROPRIEDADE, QUE É A RAZÃO DESTE FICHEIRO SER ASSIM:
   **uma parte partilhada tem de ser IMUNE AO CSS DA PÁGINA QUE A RECEBE.**
   Antes desta ronda as cinco páginas mostravam o mesmo cabeçalho e ele NÃO SE
   COMPORTAVA DO MESMO MODO. Medido a 6/10/2026, a 1280px:

     index.html         barra 65px     desfoque blur(10px) + blur(14px)
     termos.html        barra 66,5px   desfoque blur(10px)
     privacidade.html   barra 66,5px   desfoque blur(10px)
     cookies.html       barra 66,5px   desfoque blur(10px)
     404.html           barra 83px     desfoque blur(10px)

   ⚠️ E AS CAUSAS SÃO TRÊS MECANISMOS DIFERENTES, não um. Foi medir cada uma
   que mostrou que "o CSS da página" é uma frase e não um diagnóstico:

     1. HERANÇA. O `line-height` do `body` é `1.6` na home e `1.7` nas três
        legais. O `.cnm-cta` e os links não o declaravam, logo herdavam-no: 24px
        na home contra 25,5px nas legais. O botão passava de 44 a 45,5 e a barra
        de 65 a 66,5.

     2. UMA REGRA DE TAG QUE O PARTILHADO NÃO DECLARAVA. O `404.html:52` tem
        `img{height:44px;width:auto;display:block;margin:0 auto 28px}`. O
        `.cnm-logo img` ganhava no `height` por especificidade, **mas não
        declarava `margin`**: os 28px de baixo atravessavam, o logótipo media
        62px em vez de 34, e a barra dava 83.

     3. UM PSEUDO-ELEMENTO QUE O PARTILHADO NÃO DECLARAVA. A home tem
        `nav::before{backdrop-filter:blur(14px)}`, e o cabeçalho não tinha
        `::before` nenhum. Resultado: desfoque a dobrar, só na home.

   ✅ AS REGRAS `nav{}` DAS TRÊS LEGAIS NÃO ATRAVESSAVAM NADA, e isso também se
   mediu: `.cnm-barra` (0,1,0) ganha a `nav` (0,0,1), por isso o `blur(14px)`
   delas perdia. Saíram do mesmo modo, mas como ARRUMAÇÃO e não como correção:
   o que elas eram é uma armadilha à espera de que o cabeçalho deixasse de
   declarar uma propriedade.

   ⬜ POR ISSO TODOS OS SELETORES AQUI COMEÇAM POR `nav.cnm-barra`, que é
   (0,1,1): ganha a `nav` (0,0,1), ganha a `img` (0,0,1), e ganha à própria
   `.cnm-barra` (0,1,0). Não é estilo defensivo por gosto: é a diferença entre
   um cabeçalho partilhado e cinco cabeçalhos parecidos.

   🔴 O DESFOQUE QUE FICOU É O `blur(10px)`, e a escolha mediu-se. Era o que
   QUATRO das cinco páginas já mostravam, é o que esta parte já declarava, e o
   `blur(14px)` da home vinha de um pseudo-elemento que a própria home declara
   para o `nav` dela e que esta parte nunca pediu. Ficar com 14 era mudar quatro
   páginas para acomodar o defeito de uma.

   ⬜ A PALETA NÃO SE INVENTA: sai das variáveis que as cinco páginas já
   declaram (`--brand`, `--ink`, `--ink2`, `--line`), com reserva literal para o
   caso de uma página futura não as declarar. Nenhuma cor nova entra aqui. */

/* -------------------------------------------------------------------------- */
/* AS CORES DA BARRA DE DESLOCAMENTO, QUE NÃO SÃO DO CABEÇALHO                 */
/* -------------------------------------------------------------------------- */

/* 🔴 ESTES DOIS TOKENS NÃO PERTENCEM AQUI, E ESTÃO AQUI COM RAZÃO ESCRITA. A
   barra de deslocamento é do DOCUMENTO e não do cabeçalho; o desenho dela vive
   no `_barra.css`, que é o `src/app/barra.css` copiado para cá. **O que ele não
   traz é a cor**, de propósito: quem a decide é quem o importa, e no backoffice
   o puxador é a cor da organização enquanto num documento de cliente não é.

   ⬜ E ESTE É O ÚNICO FICHEIRO QUE AS CINCO PÁGINAS DO SITE CARREGAM. Declarar
   os dois tokens aqui dá-lhes a cor sem criar uma sexta folha para duas linhas.
   Quem procurar as cores da barra encontra-as aqui, com esta nota.

   ⚠️ E NÃO SÃO `--brand` E `--brand2`, e isso mediu-se: a versão antiga, que
   vivia no `index.html`, lia `linear-gradient(var(--brand),var(--brand2))`, e o
   `--brand2` está VAZIO em quatro das oito páginas públicas. O gradiente ficava
   inválido e o puxador saía sem fundo nenhum. Os valores abaixo são os mesmos
   números que o `auditor.css` já declara, para as oito ficarem iguais. */
:root{
  --scroll-track:#04222e;
  --scroll-thumb:#00d2ff;
}

/* -------------------------------------------------------------------------- */
/* A IMUNIDADE, E É ISTO QUE A PÁGINA NÃO PODE ATRAVESSAR                      */
/* -------------------------------------------------------------------------- */

/* 🔴 OS VALORES SÃO OS DA HOME, E DE PROPÓSITO. A home é a referência e não o
   alvo: `font-size:16px` e `line-height:1.6` são exactamente o que o `body`
   dela já dava por herança, por isso o estilo computado do cabeçalho da home
   não muda uma propriedade, e as outras quatro passam a ser iguais a ele.

   ⚠️ O `line-height` VAI SEM UNIDADE de propósito: `1.6` herda-se como número
   e recalcula-se em cada descendente (15px dão 24px), enquanto `25.6px` herda-se
   como comprimento e fixava 25,6 em texto de 15. Era a altura certa pela razão
   errada, e partia no primeiro rótulo com outro tamanho.

   ⬜ O `text-align:start` E NÃO `left`: o `404.html` tem `text-align:center` no
   `body` e o cabeçalho herdava-o. `start` é o que as outras quatro computam, e
   `left` dava a mesma aparência com um valor computado diferente, o que fazia a
   prova acusar a home sem nada ter mudado no ecrã. */
nav.cnm-barra{
  position:sticky;top:0;z-index:50;
  font-size:16px;line-height:1.6;text-align:start;
  background:#04222ecc;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line,#ffffff1f);
}

/* 🔴 O `::before` É NEUTRALIZADO DE PROPÓSITO, e não por arrumação. Com o
   `content:none` o pseudo-elemento não chega a existir, e é a única forma de
   esta parte ser imune a uma página que decore o `nav` dela por trás do
   conteúdo. O `backdrop-filter:none` vai ao lado porque uma página pode
   declarar o `content` ela própria; então o pseudo existe, mas não desfoca. */
nav.cnm-barra::before{content:none;backdrop-filter:none;-webkit-backdrop-filter:none}
nav.cnm-barra::after{content:none}

/* ⚠️ O `box-sizing` ENTRA PORQUE A ALTURA DEPENDE DELE. As cinco páginas
   declaram `*{box-sizing:border-box}` hoje, e com `content-box` os 64px de
   altura mais os 10 de margem interna davam 84. Uma altura declarada que
   depende de uma regra da página não é uma altura declarada. */
nav.cnm-barra,nav.cnm-barra *{box-sizing:border-box}

/* -------------------------------------------------------------------------- */
/* O CABEÇALHO                                                                 */
/* -------------------------------------------------------------------------- */

/* 🔴 A ALTURA É DECLARADA E NÃO CALCULADA. Os 64px são os que a home media; o
   que mudou é deixarem de ser o resultado do `line-height` do botão mais a
   margem interna, e passarem a ser um número que a página não mexe. */
nav.cnm-barra .cnm-wrap{max-width:1180px;margin:0 auto;padding:10px 20px;height:64px;display:flex;align-items:center;gap:16px}
nav.cnm-barra .cnm-logo{display:flex;align-items:center;flex:0 0 auto}
/* 🔴 O `margin:0` AQUI É A CORRECÇÃO DO 404, e é o terceiro mecanismo da nota
   de cima: a regra `img` da página dava 28px de margem em baixo ao logótipo. */
nav.cnm-barra .cnm-logo img{display:block;height:34px;width:auto;margin:0;max-width:none}
nav.cnm-barra .cnm-menu{display:flex;align-items:center;gap:22px;margin-left:auto}
nav.cnm-barra .cnm-menu a{color:var(--ink2,#c2d6dd);text-decoration:none;font-size:15px;white-space:nowrap}
nav.cnm-barra .cnm-menu a:hover,nav.cnm-barra .cnm-menu a:focus-visible{color:var(--ink,#eaf5f8)}
nav.cnm-barra .cnm-cta{flex:0 0 auto;background:var(--brand,#00d2ff);color:#04222e;font-weight:600;text-decoration:none;padding:10px 16px;border-radius:10px;font-size:15px;white-space:nowrap}
nav.cnm-barra .cnm-cta:hover,nav.cnm-barra .cnm-cta:focus-visible{filter:brightness(1.08)}

/* 🔴 ALVO DE TOQUE DE 44px, que é a régua desta casa. */
nav.cnm-barra .cnm-abrir{display:none;flex:0 0 auto;width:44px;height:44px;align-items:center;justify-content:center;background:transparent;border:1px solid var(--line,#ffffff1f);border-radius:10px;cursor:pointer;padding:0}
nav.cnm-barra .cnm-abrir span{display:block;width:20px}
nav.cnm-barra .cnm-abrir i{display:block;height:2px;margin:4px 0;background:var(--ink,#eaf5f8);border-radius:2px}

/* ⚠️ A GAVETA ABAIXO DOS 900, que é onde a fila deixa de caber ao lado do
   logótipo e do botão. Fecha-se por `display:none` e não por deslocação para
   fora: um elemento fora do ecrã é um elemento que pode fazer a página rolar,
   e as cinco páginas não rolam a 360px. */
@media (max-width:900px){
  nav.cnm-barra .cnm-abrir{display:flex}
  nav.cnm-barra .cnm-menu{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:8px 20px 16px;background:#04222ef2;border-bottom:1px solid var(--line,#ffffff1f)}
  nav.cnm-barra .cnm-menu a{padding:12px 0;min-height:44px;display:flex;align-items:center}
  nav.cnm-barra.cnm-aberta .cnm-menu{display:flex}
  nav.cnm-barra .cnm-wrap{position:relative}
}
@media (max-width:420px){
  nav.cnm-barra .cnm-cta{padding:10px 12px;font-size:14px}
  nav.cnm-barra .cnm-logo img{height:28px}
}