/* Barra do topo do husvord.com: UM componente só, o mesmo na home (/) e no portfólio (/portfolio).
   Markup único em _fonte/barra.html (injetado igual nas duas páginas por _fonte/barra.py; teste compara byte a byte).
   Este arquivo é o único CSS da barra: nenhuma das páginas estiliza .hvb*. As fontes têm nome próprio
   ("HVB ..."), para a barra não depender das @font-face de cada página.
   Ordem: marca, Início, Portfólio, PIXEL/FORMAL, tema (só na formal), ENTRAR, PT/EN/ES.
   Celular (< 960 px), igual nas duas páginas: marca + idioma / navegação + entrar / visual + tema. */
@font-face{font-family:"HVB VGA";src:url(/fonts/IBM-VGA-8x16.woff) format("woff");font-display:swap}
@font-face{font-family:"HVB Mono";font-weight:600;src:url(/fonts/IBMPlexMono-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap}
@font-face{font-family:"HVB Mono";font-weight:600;src:url(/fonts/IBMPlexMono-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:swap}

/* ---------- tokens da barra: FORMAL (faixa escura nos dois temas) ---------- */
.hvb{
  --hvb-bg:#12101c; --hvb-fg:#ece8ff; --hvb-muted:#c9c3e6; --hvb-line:rgba(236,232,255,.16);
  --hvb-seg-line:rgba(236,232,255,.45); --hvb-seg-div:rgba(236,232,255,.25); --hvb-hover:rgba(236,232,255,.08);
  --hvb-on:#2b2f6b; --hvb-mark:#ffd75e; --hvb-cta-bg:#ffd75e; --hvb-cta-fg:#12101c;
  --hvb-font:600 12px/1 "HVB Mono",ui-monospace,monospace; --hvb-ls:1px;
}
:root[data-theme="dark"] .hvb{--hvb-bg:#0b0d22}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hvb{--hvb-bg:#0b0d22}}
/* PIXEL: faixa amarela, VGA 16 px (só múltiplos de 16) */
:root[data-skin="pixel"] .hvb{
  --hvb-bg:#ffd75e; --hvb-fg:#12101c; --hvb-muted:#12101c; --hvb-line:#e9e4ff;
  --hvb-seg-line:#12101c; --hvb-seg-div:transparent; --hvb-hover:rgba(18,16,28,.12);
  --hvb-on:#12101c; --hvb-mark:#12101c; --hvb-cta-bg:#12101c; --hvb-cta-fg:#ffd75e;
  --hvb-font:400 16px/1 "HVB VGA",ui-monospace,monospace; --hvb-ls:1px;
}

/* ---------- estrutura ---------- */
/* camada própria (will-change): a barra é rasterizada sozinha, sem depender do resto da página; sem isso o
   anti-aliasing de um canto arredondado variava 1 ou 2 pixels entre a home e o portfólio */
.hvb{position:sticky;top:0;z-index:20;will-change:transform;background:var(--hvb-bg);color:var(--hvb-fg);border-bottom:1px solid var(--hvb-line);font:var(--hvb-font);letter-spacing:var(--hvb-ls)}
:root[data-skin="pixel"] .hvb{border-bottom:4px solid var(--hvb-line)}
.hvb *,.hvb *::before,.hvb *::after{box-sizing:border-box}
.hvb-wrap{max-width:1180px;margin:0 auto;padding:10px 32px;display:flex;align-items:center;gap:8px 12px;min-height:56px}
.hvb a,.hvb button{font:inherit;letter-spacing:inherit;color:inherit;text-decoration:none}
.hvb :focus-visible{outline:3px solid var(--hvb-fg);outline-offset:2px}

.hvb-marca{display:flex;align-items:center;gap:10px;margin-right:auto;letter-spacing:2px;padding:4px 0}
.hvb-marca svg{width:26px;height:26px;flex:none;display:block}

.hvb-nav{display:flex;gap:4px}
.hvb-nav a{text-transform:uppercase;color:var(--hvb-muted);padding:10px 8px}
.hvb-nav a:hover{color:var(--hvb-fg);box-shadow:inset 0 -2px 0 var(--hvb-seg-line)}
/* página atual: marcada só na nav (pelo data-pagina do <body>, sem JS; o barra.js põe o aria-current) */
body[data-pagina="home"] .hvb-nav a[data-hvb-pag="home"],
body[data-pagina="portfolio"] .hvb-nav a[data-hvb-pag="portfolio"]{color:var(--hvb-fg);box-shadow:inset 0 -2px 0 var(--hvb-mark)}
:root[data-skin="pixel"] body[data-pagina="home"] .hvb-nav a[data-hvb-pag="home"],
:root[data-skin="pixel"] body[data-pagina="portfolio"] .hvb-nav a[data-hvb-pag="portfolio"]{box-shadow:inset 0 -4px 0 var(--hvb-mark)}

.hvb-seg{display:inline-flex;border:1px solid var(--hvb-seg-line);border-radius:6px;overflow:hidden}
.hvb-seg button{all:unset;box-sizing:border-box;cursor:pointer;font:var(--hvb-font);letter-spacing:var(--hvb-ls);color:var(--hvb-muted);padding:0 10px;min-height:32px;display:inline-flex;align-items:center}
.hvb-seg button+button{border-left:1px solid var(--hvb-seg-div)}
.hvb-seg button:hover{background:var(--hvb-hover);color:var(--hvb-fg)}
.hvb-seg button[aria-pressed="true"]{background:var(--hvb-on);color:#fff;box-shadow:inset 0 -2px 0 var(--hvb-mark)}
.hvb-seg button:focus-visible{outline:3px solid var(--hvb-fg);outline-offset:-3px}
:root[data-skin="pixel"] .hvb-seg{border-width:2px;border-radius:0}
:root[data-skin="pixel"] .hvb-seg button{padding:0 9px;min-height:28px}
:root[data-skin="pixel"] .hvb-seg button[aria-pressed="true"]{color:var(--hvb-bg);box-shadow:none}
:root[data-skin="pixel"] .hvb-tema{display:none}

.hvb-entrar{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border-radius:6px;background:var(--hvb-cta-bg);color:var(--hvb-cta-fg)!important;text-transform:uppercase}
.hvb-entrar:hover{filter:brightness(1.08)}
:root[data-skin="pixel"] .hvb-entrar{border-radius:0;border:2px solid var(--hvb-cta-bg);box-shadow:3px 3px 0 #000;min-height:32px;padding:0 12px}
:root[data-skin="pixel"] .hvb-entrar:hover,:root[data-skin="pixel"] .hvb-entrar:focus-visible{background:#5ee0c8;color:#12101c!important;filter:none}
:root[data-skin="pixel"] .hvb-entrar:active{transform:translate(3px,3px);box-shadow:none}

/* ---------- celular e tablet: três linhas, iguais nas duas páginas ---------- */
@media (max-width:959px){
  .hvb{position:static}
  .hvb-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"marca idioma" "nav entrar" "skin tema";gap:10px 8px;padding:10px 16px}
  .hvb-marca{grid-area:marca;margin-right:0}
  .hvb-idioma{grid-area:idioma;justify-self:end}
  .hvb-nav{grid-area:nav;justify-self:start}
  .hvb-entrar{grid-area:entrar;justify-self:end}
  .hvb-skin{grid-area:skin;justify-self:start}
  .hvb-tema{grid-area:tema;justify-self:end}
  .hvb-nav a{padding:10px 6px}
  .hvb-seg button{padding:0 8px}
  :root[data-skin="pixel"] .hvb-seg button{padding:0 6px}
}
@media (prefers-reduced-motion:reduce){.hvb *{transition:none!important;animation:none!important}}