/* ==========================================================================
   09-publico.css — a barra do topo das telas publicas (landing e privacidade)

   POR QUE ESTA CAMADA EXISTE. As duas telas desenhavam a mesma barra duas
   vezes, com nomes diferentes: `.header`/`.header-nav`/`.mobile-menu-btn` na
   landing e `.cabecalho`/`.menu`/`.botao-portal` na privacidade. Nao eram
   variacoes de proposito, era copia que divergiu, e a diferenca que o dono
   viu foi funcional: so a landing tinha hamburguer, entao no celular a
   privacidade empilhava os tres links e gastava duas faixas do topo.

   Carregada SO pelas publicas, depois de 01-tokens, 02-base, 06-interacao e
   07-animacoes, que e o que as duas ja carregavam. O painel nao a usa: la a
   barra e `.topbar` de 03-layout.

   O markup que casa com isto e `views/public/layouts/cabecalho.ejs`, e o par
   nao se separa: classe daqui sem o include (ou o contrario) e meio
   cabecalho.
   ========================================================================== */

/* As duas medidas que o cabecalho define para a pagina inteira. Moravam no
   <style> da landing, e enquanto estavam la a privacidade herdava um
   `var(--topo)` vazio: a barra perdia o `min-height` e media 48px em vez de
   68, com o conteudo nascendo por baixo dela. */
:root {
    /* Respiro lateral unico do cabecalho, hero, features, CTA e rodape: as
       faixas alinham pela mesma margem em qualquer largura. */
    --gutter: clamp(var(--esp-4), 4vw, var(--esp-10));
    /* Altura do cabecalho fixo: 11,5 + 44 + 11,5 + 1px de borda. O 44 do meio
       e o alvo de toque do logo e do botao do menu, e e ele que manda: medido
       antes de travar, a barra saia 68px no celular (botao de 44) e 64 no
       desktop (logo de 40), ou seja o valor usado no respiro e na ancora
       estava errado em 4px justamente onde aperta. */
    --topo: 68px;
}

/* Ancora que nao nasce escondida atras do cabecalho fixo. Vale para as duas
   telas: a privacidade tem um indice inteiro de links para dentro da pagina. */
html { scroll-padding-top: calc(var(--topo) + var(--esp-4)); }

/* A folga que impede o conteudo de nascer POR BAIXO da barra fixa. Na landing
   ela estava embutida no padding do hero; a privacidade nao tinha nenhuma,
   porque o cabecalho dela era estatico. Declarada aqui, as duas recebem. */
body { padding-top: var(--topo); }

/* ...menos a landing, onde o hero ja reserva o espaco no proprio padding e
   somar os dois abriria uma faixa morta de 68px acima do titulo. */
body:has(> .hero) { padding-top: 0; }


.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-sidebar);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-4);
    min-height: var(--topo);
    padding: var(--esp-3) var(--gutter);
    background: rgba(var(--dark-rgb), 0.85);
    /* A BARRA DEFINE A PROPRIA ENTRELINHA, e isso nao e estilo: a pagina de
       privacidade poe `line-height: 1.7` no body porque e um documento longo,
       e a heranca alcança todo descendente daqui. Medido: o logo ia de 24 para
       34px e o botao do portal de 44 para 46,8, e a barra saia 70,8px contra
       os 68 da landing. Corrigir filho por filho nao termina, porque o
       proximo elemento que entrar herda de novo. */
    line-height: 1.2;
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border-bottom: 1px solid var(--gold-a10);
}

.header-logo {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    text-decoration: none;
    min-width: 0;
    /* O logo e link: 40px de icone davam um alvo de 144x40, abaixo dos
       44 que o resto do sistema cumpre. A camada 06 nao alcanca este
       caso (ela mira `.btn`, `.nav-item` e link dentro de celula). */
    min-height: 44px;
}
.header-logo-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    border-radius: var(--raio-md);
    box-shadow: 0 4px 15px var(--gold-a30);
    /* O simbolo usa currentColor: sobre dourado cheio o traco e
       ESCURO (9,42:1), nunca branco, que dava 2,1:1. */
    color: var(--dark);
}
/* 65% da caixa, igual ao painel: a caixa mede 40px aqui e 48 no login,
   entao a medida e proporcional e nao absoluta. */
.header-logo-icon > .icone { width: 65%; height: 65%; }

/* A MARCA, VINDA DO ARQUIVO. A altura e a unica medida declarada: o SVG tem
   proporcao fixa (3,43:1) e a largura sai dela. Declarada aqui porque as
   telas publicas nao carregam `03-layout.css`, que e onde `.logo-img` existe
   para o painel: sem esta regra a imagem sairia no tamanho natural e levaria
   a altura da barra junto. */
.header-logo .logo-img {
    display: block;
    height: 36px;
    width: auto;
    max-width: 100%;
}

/* As duas classes abaixo ficaram sem uso no cabecalho quando a marca virou
   imagem, e continuam declaradas porque `views/public/blacklist.ejs` (tela
   orfa, rota comentada) e as telas de auth do portal ainda tem elementos com
   esses nomes. */
.header-logo-text {
    font-size: var(--txt-titulo-g);
    font-weight: var(--peso-max);
    color: var(--gold);
    letter-spacing: -0.01em;
    white-space: nowrap;
    /* Declarado, nunca herdado: a pagina de privacidade poe `line-height: 1.7`
       no body (ela e um documento longo para ler), e com isso o texto do logo
       ia de 24 para 34px e a barra de 68 para 70,8. Tres pixels bastam para
       virar degrau contra qualquer coisa alinhada a ela. */
    line-height: 1.2;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: var(--esp-8);
}
.header-nav a {
    /* 44px de altura em QUALQUER largura, nao so no celular. Entre 901
       e 1024px o menu ja esta na barra (meu corte e 900) e o dedo
       ainda e o apontador: medido, os tres links saiam com 17px de
       altura. A camada 06 nao cobre, porque ali o seletor e
       `.nav-item`, que e a gaveta do painel. */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: var(--txt-corpo);
    font-weight: var(--peso-normal);
    transition: color var(--dur-rapida) var(--curva);
}
.header-nav a:hover { color: var(--gold); }

/* Sobre dourado cheio o texto e ESCURO. Precisa da especificidade de
   `.header-nav a.header-btn` para vencer a cor da regra acima, e o
   :hover vem junto senao o texto clareia ao passar o mouse. */
.header-nav a.header-btn,
.header-nav a.header-btn:hover { color: var(--dark); }

.header-btn {
    /* Centra o rotulo quando o botao ocupa a linha inteira na gaveta:
       com `display: inline-flex` herdado de `.header-nav a`, quem
       centra e o justify-content, nunca o `text-align`. */
    justify-content: center;
    padding: var(--esp-3) var(--esp-6);
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    border: none;
    border-radius: var(--raio);
    font-size: var(--txt-corpo);
    font-weight: var(--peso-forte);
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 4px 14px var(--gold-a20);
    /* Realce sem MOVIMENTO: brilho e sombra, nunca translateY. Assim
       a regra vale igual para quem pediu "reduzir movimento", sem
       precisar de excecao. E a mesma escolha que o painel fez nos
       tres `.btn-*:hover` de gradiente. */
    transition: box-shadow var(--dur-rapida) var(--curva),
                filter var(--dur-rapida) var(--curva);
}
.header-btn:hover {
    filter: brightness(1.08);
    box-shadow: 0 8px 22px var(--gold-a40);
}

.mobile-menu-btn {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    background: var(--gold-a08);
    border: 1px solid var(--gold-a20);
    border-radius: var(--raio);
    color: var(--gold);
    cursor: pointer;
    transition: background-color var(--dur-rapida) var(--curva);
}
.mobile-menu-btn:hover { background: var(--gold-a15); }
/* Tamanho de icone e width/height no `.icone`, nunca `font-size`:
   aquela era a regua do Font Awesome, que saiu do sistema. */
.mobile-menu-btn .icone { width: 20px; height: 20px; }

/* ── Celular ────────────────────────────────────────────────────── */
/* 900px e nao 768: com os quatro itens do menu (um deles de 23
   caracteres) a barra ja fica apertada bem antes dos 768. */
@media (max-width: 900px) {
    .mobile-menu-btn { display: inline-flex; }

    .header-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: var(--esp-2);
        padding: var(--esp-4) var(--gutter) var(--esp-5);
        background: rgba(var(--dark-rgb), 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--dark-border);
        box-shadow: 0 20px 40px var(--preto-a50);
        /* AS DUAS PECAS DA ANIMACAO DE `display`, as mesmas dos sete
           modais do painel, e nenhuma serve sozinha:
             `allow-discrete` deixa `display` entrar na transicao. Sem
             ele por `transition` aqui nao faz nada, porque `display` e
             propriedade discreta e o elemento vai de none a flex num
             quadro so.
             `@starting-style` diz de ONDE a entrada parte. Sem ele so
             a SAIDA anima, porque na entrada nao existe estilo
             anterior de onde interpolar. */
        display: none;
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity var(--dur-rapida) var(--curva),
                    transform var(--dur-rapida) var(--curva),
                    display var(--dur-rapida) var(--curva) allow-discrete;
    }
    .header-nav.open {
        display: flex;
        opacity: 1;
        transform: translateY(0);
    }
    @starting-style {
        .header-nav.open { opacity: 0; transform: translateY(-8px); }
    }

    .header-nav a {
        padding: var(--esp-3) var(--esp-2);
        font-size: var(--txt-destaque);
    }
    .header-nav a.header-btn {
        padding: var(--esp-3) var(--esp-5);
        margin-top: var(--esp-2);
    }
}