/* ==========================================================================
   HEADER.CSS — Cabeçalho fixo e navegação
   ========================================================================== */

/* A barra de administração é fixa no topo e passa por cima de qualquer
   elemento fixo do tema. O WordPress expõe a altura dela em
   --wp-admin--admin-bar--height; usar essa variável evita número mágico,
   porque a barra muda de 32px para 46px abaixo de 782px de largura. */
.site-header {
    position: fixed; left: 0; right: 0; z-index: 100;
    top: var(--wp-admin--admin-bar--height, 0px);
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--gap);
    padding: 18px var(--pad-x);
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
    border-bottom: 1px solid transparent;
}
/* Fundo só aparece depois que a página rola — no topo o header flutua
   sobre o herói sem cortar a imagem. */
.site-header.rolado {
    background: color-mix(in srgb, var(--void) 92%, transparent);
    backdrop-filter: blur(14px);
    border-bottom-color: var(--line);
}

.marca { display: flex; align-items: center; gap: 12px; }
.marca__img { max-height: 42px; width: auto; }
.marca__hex { width: 28px; height: 25px; flex: 0 0 auto; }
.marca__hex polygon { fill: none; stroke: var(--accent); stroke-width: 6; }
.marca__txt {
    font-family: var(--font-display); font-size: 13px; font-weight: 300;
    letter-spacing: var(--tracking-brand);
}
.marca__txt b { font-weight: 500; }
.marca__sub {
    display: block; font-size: 8.5px; letter-spacing: .3em;
    color: var(--text-dim); margin-top: 2px;
}

.nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); }
.nav a {
    font-family: var(--font-display); font-size: 11.5px; font-weight: 300;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--text-muted);
    transition: color var(--dur) var(--ease);
}
.nav a:hover, .nav .current-menu-item > a { color: var(--accent); }

.nav-toggle { display: none; width: 34px; height: 34px; position: relative; }
.nav-toggle span {
    position: absolute; left: 5px; right: 5px; height: 1px;
    background: var(--text);
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle span:nth-child(1) { top: 12px; }
.nav-toggle span:nth-child(2) { top: 18px; }
.nav-toggle span:nth-child(3) { top: 24px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
    .nav-toggle { display: block; }
    .nav {
        position: fixed; inset: 0; z-index: 99;
        flex-direction: column; justify-content: center;
        background: var(--void);
        transform: translateX(100%);
        transition: transform var(--dur) var(--ease);
    }
    .nav.aberto { transform: none; }
    .nav a { font-size: 16px; letter-spacing: .12em; }
}


/* ---------- Convivência com a barra de administração ----------
   Sem isto, o menu fica escondido atrás da barra do WordPress para quem
   está logado, e todo elemento preso ao topo desalinha na mesma medida.
   O visitante comum não tem a barra, então nada muda para ele. */
body.admin-bar .reveal__palco,
body.admin-bar .porta-sec__palco,
body.admin-bar .scrub__palco {
    top: var(--wp-admin--admin-bar--height, 32px);
    height: calc(100svh - var(--wp-admin--admin-bar--height, 32px));
}

body.admin-bar .nav {
    top: var(--wp-admin--admin-bar--height, 32px);
    height: calc(100% - var(--wp-admin--admin-bar--height, 32px));
}

/* Abaixo de 600px a barra do WordPress deixa de ser fixa e rola junto
   com a página. Aí o deslocamento precisa sair, senão sobra um vão. */
@media screen and (max-width: 600px) {
    body.admin-bar .site-header { top: 0; }
    body.admin-bar .reveal__palco,
    body.admin-bar .porta-sec__palco,
    body.admin-bar .scrub__palco {
        top: 0; height: 100svh;
    }
    body.admin-bar .nav { top: 0; height: 100%; }
}