/* ==========================================================================
   HEADER.CSS
   ========================================================================== */

.topo {
    position: fixed; inset: 0 0 auto 0; z-index: 50;
    background: linear-gradient(to bottom, rgba(6,10,20,.94), rgba(6,10,20,.55));
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}
.topo__in { display: flex; align-items: center; gap: 2rem; height: 76px; }

.menu { margin-left: auto; font-size: .92rem; }
/* O flex vai na lista, não no <nav>: o nav tem um filho só, então distribuir
   ali não fazia nada e os itens do menu empilhavam em coluna. */
.menu__lista { display: flex; gap: 2rem; align-items: center; }
.menu a { color: var(--text-muted); transition: color var(--dur) var(--ease); }
.menu a:hover, .menu .current-menu-item > a { color: var(--text); }

.topo__acao { flex-shrink: 0; }

/* Botão sanduíche */
.sanduiche { display: none; width: 44px; height: 44px; margin-left: auto; position: relative; }
.sanduiche span {
    position: absolute; left: 11px; width: 22px; height: 2px; background: var(--text);
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.sanduiche span:nth-child(1) { top: 16px; }
.sanduiche span:nth-child(2) { top: 22px; }
.sanduiche span:nth-child(3) { top: 28px; }
.sanduiche[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.sanduiche[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.sanduiche[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.gaveta {
    position: fixed; inset: 76px 0 0 0; z-index: 49;
    background: var(--noite);
    padding: 2.5rem var(--wrap-pad);
    display: grid; align-content: start; gap: 1.5rem;
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.gaveta.is-open { opacity: 1; transform: none; pointer-events: auto; }
.gaveta a {
    font-family: var(--f-display); font-style: italic; font-weight: 700;
    text-transform: uppercase; font-size: 1.8rem;
}

@media (max-width: 900px) {
    .menu, .topo__acao { display: none; }
    .sanduiche { display: block; }
}
@media (min-width: 901px) {
    .gaveta { display: none; }
}

/* ==========================================================================
   BARRA DO WORDPRESS
   --------------------------------------------------------------------------
   Para quem está logado, o WordPress prende uma barra de 32px no topo da
   janela. O cabeçalho do tema também é fixo em top:0, então um cobria o outro.

   O empurrão só vale a partir de 783px porque abaixo disso a barra do
   WordPress deixa de ser fixa e passa a rolar com a página: empurrar o
   cabeçalho ali abriria um vão permanente de 46px assim que a barra saísse da
   tela, que é pior do que a sobreposição momentânea no topo.

   Nada disso aparece para o visitante — sem login não existe barra.
   ========================================================================== */

@media screen and (min-width: 783px) {
    body.admin-bar .topo   { top: 32px; }
    body.admin-bar .gaveta { top: calc(76px + 32px); }

    /* O palco preso precisa descer junto, senão o vídeo do hero começa por
       baixo da barra e a conta da altura fica 32px maior que a tela. */
    body.admin-bar .hero__palco,
    body.admin-bar .camadas__palco {
        top: 32px;
        height: calc(100vh - 32px);
        height: calc(100svh - 32px);
    }
}

/* ==========================================================================
   O CABEÇALHO SÓ VIVE NO HERO
   --------------------------------------------------------------------------
   Passou do hero, recolhe para cima; voltou, desce. Quem liga e desliga a
   classe é app.js.

   A marca fica sempre visível no cabeçalho: é o único lugar do site onde ela
   aparece agora que o hero deixou de repeti-la.
   ========================================================================== */

.topo {
    transition: transform .45s var(--ease);
    will-change: transform;
}
.topo.is-oculto { transform: translateY(-105%); }
body.admin-bar .topo.is-oculto { transform: translateY(calc(-105% - 32px)); }

/* Com o cabeçalho recolhido a gaveta não tem de onde descer. */
.topo.is-oculto + .gaveta { display: none; }

@media (prefers-reduced-motion: reduce) {
    .topo { transition: none; }
}