/* Não é CSS do legado — acabamento pedido pelo Gustavo na sessão de
 * fechamento de 2026-08-22, depois do estado "logado" entrar no menu
 * (`site-header.tsx`): fontes um pouco menores, logo com mais respiro,
 * ícones/dropdown mais cuidados. Mesmo padrão de `header-visible-fix.css`
 * — arquivo à parte em vez de editar o legado vendorizado, carrega DEPOIS
 * dele na mesma página (mesma especificidade, quem vem depois vence).
 *
 * Repaginar tipografia/componentes preservando a arquitetura é decisão já
 * fechada (CLAUDE.md, decisão 3) — nada aqui muda estrutura ou link do
 * menu, só o acabamento visual.
 */

/* Menu/logo selecionáveis como texto (achado do Gustavo, 2026-09-14) —
 * clicar num item de menu ou na logo destacava o texto como seleção
 * (comum em trackpad: um clique sozinho já carrega um micro-arrasto,
 * lido pelo navegador como início de seleção). Nenhum destes elementos
 * precisa ser selecionável — são links de navegação/logo, não conteúdo
 * de leitura. `.noselect` do legado (`atlas.legacy.css`) é o mesmo
 * padrão, mas não chega ao header (não carrega em toda página); regra
 * própria aqui, mesma técnica (todos os prefixos de vendor). */
.header-container {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* Flash cinza/azul translúcido ao tocar/clicar num link — causa
     separada de seleção de texto, `user-select` não cobre. Capturado ao
     vivo depois do primeiro conserto (2026-09-14, revisão do Gustavo). */
  -webkit-tap-highlight-color: transparent;
}

.header-container * {
  -webkit-tap-highlight-color: transparent;
}

/* Achado ao vivo (screenshot do Gustavo, 2026-09-14): o retângulo azul
 * grosso que "fica marcado" ao clicar na logo/qualquer link do menu não
 * era seleção de texto nem tap-highlight (os dois já cobertos acima) —
 * é `a:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:
 * -2px}` do PRÓPRIO Bootstrap (`bootstrap.min.css`), que usa `:focus`
 * simples (dispara em qualquer clique de mouse, não só navegação por
 * teclado) — `.header-container a:focus` (2 classes + pseudo-classe)
 * bate a especificidade do Bootstrap (`a:focus`, 1 elemento +
 * pseudo-classe) mesmo sem depender de ordem de carregamento. Não
 * remove o indicador de foco por completo (regressão de acessibilidade)
 * — troca pra `:focus-visible`, que o próprio Chrome já sabe suprimir
 * em clique de mouse e mostrar em navegação por Tab. */
.header-container a:focus,
.header-container button:focus {
  outline: none;
}
.header-container a:focus-visible,
.header-container button:focus-visible {
  outline: 2px solid var(--ring, #000);
  outline-offset: 2px;
}

/* Alvo de toque do botão hambúrguer (achado 11, docs/34-AUDITORIA-
 * INTERFACE.md) — media 44×34 em 390px: a largura já batia o mínimo de
 * 44px, só a altura falhava. `padding:9px 10px` (herdado do
 * `.navbar-toggle` do Bootstrap, reforçado sem mudar o valor por
 * `header-footer.legacy.css`) mais `border-box` mais os 12px das três
 * `.icon-bar` somavam 34px. Sobe só o padding vertical (9→15px) — largura
 * e o desenho das três barras não mudam, só a área clicável ao redor:
 * 2×15 + 2×1 (borda) + 12 = 44px, medido. Mesma cadeia de seletor de
 * `header-footer.legacy.css` (sem camada, carrega depois — mesma
 * especificidade, este arquivo vence, ver comentário no topo). */
.header-container .ml-menu .navbar .container-fluid .navbar-header .navbar-toggle {
  padding-top: 15px;
  padding-bottom: 15px;
}

/* Logo com mais respiro: era `left: 10px; padding: 6px` — colado na borda
 * esquerda do header. `container-fluid`/`ul{float:right}` não disputam
 * esse espaço (a logo é `position:absolute`, fora do fluxo), então dá pra
 * abrir sem empurrar nada.
 *
 * Centralização vertical (pedido do Gustavo, 2026-09-14: "o logo pode ser
 * maior e centralizado verticalmente") — o legado usava `top:-17px`,
 * calibrado a olho pro glifo antigo (70px de altura); com o wordmark bem
 * mais fino (proporção 635×44) e maior (abaixo), essa conta fixa não bate
 * mais. `top:50%;transform:translateY(-50%)` centraliza de verdade contra
 * a altura de `.ml-menu` (82px, `.header-container .ml-menu`, o ancestral
 * `position:fixed` que serve de "containing block" pro `position:absolute`
 * do `.logo-header`) — independe da altura exata do logo, não precisa
 * recalibrar se o asset mudar de novo. */
.header-container .ml-menu .logo-header {
  left: 24px;
  padding: 10px 6px;
  top: 50%;
  transform: translateY(-50%);
}

/* Tamanho do `.header-logo` — sessão 2026-09-14, mesmo wordmark horizontal
 * da home (`page.tsx`), aumentado na revisão do mesmo dia ("o logo pode
 * ser maior"). `header-footer.legacy.css` fixa `width`/`height` juntos nos
 * 4 breakpoints (base, ≤991px, ≤360px, ≤310px) — pensado pro glifo antigo
 * (200×70, quase quadrado); o SVG novo é 635×44 (~14:1), então width+height
 * fixos juntos esticariam/achatariam a proporção. Reescreve os 4 com
 * `height: auto` — só `width` controla o tamanho, proporção real
 * preservada em qualquer breakpoint. Mesma cadeia de seletor do legado,
 * carrega depois — mesma especificidade, este arquivo vence. */
.header-container .ml-menu .navigation-item .header-logo {
  width: 260px;
  height: auto;
}
@media (max-width: 991px) {
  .header-container .ml-menu .navigation-item .header-logo {
    width: 210px;
    height: auto;
  }
}
@media (max-width: 360px) {
  .header-container .ml-menu .navigation-item .header-logo {
    width: 160px;
    height: auto;
  }
}
@media (max-width: 310px) {
  .header-container .ml-menu .navigation-item .header-logo {
    width: 130px;
    height: auto;
  }
}

/* Itens do menu, um pouco menores e com mais respiro entre si — 14px
 * (tamanho do legado) ficava pesado ao lado do wordmark fino da logo. */
.header-container .ml-menu .navbar .container-fluid #myNavbar ul.navbar-nav li a,
.header-container .ml-menu .navbar .container-fluid #myNavbar ul.navbar-nav li span {
  font-size: 12.5px;
  letter-spacing: 0.03em;
}
@media (min-width: 990px) {
  .header-container .ml-menu .navbar .container-fluid #myNavbar ul.navbar-nav > li {
    margin-left: 4px;
  }
}

/* Ícones sociais: 20px ficava apertado colado no texto do próximo item;
 * mais espaço ao redor, sem mudar o tamanho do ícone em si. */
.ico-link {
  margin: 0 2px;
}

/* Respiro deliberado entre os ícones sociais e o menu de verdade —
 * padronização de UI, 2026-08-25. Antes os dois grupos tinham o mesmo
 * espaçamento de 4px item a item (regra acima), sem marcar onde um grupo
 * termina e o outro começa. `.menu-primary-start` (site-header.tsx, o
 * <li> de "Atlas" — primeiro item do grupo desde que o achado 1 do
 * docs/34-AUDITORIA-INTERFACE.md inseriu Atlas antes de About) recebe um
 * degrau da escala de ritmo em vez de um valor solto — sai de
 * --space-24 (globals.css), não de um número inventado pra este único
 * lugar. */
@media (min-width: 990px) {
  .header-container .ml-menu .navbar .container-fluid #myNavbar ul.navbar-nav > li.menu-primary-start {
    margin-left: var(--space-24, 24px);
  }
}

/* Ícones de navegação (`lucide-react`, `.nav-icon` em site-header.tsx) —
 * padronização de UI, 2026-08-25. O `<a>` do Bootstrap é inline por
 * padrão; inline-flex alinha ícone e texto no meio da linha em vez de na
 * base do texto (baseline, o default do SVG inline). */
.header-container .ml-menu .navbar .container-fluid #myNavbar ul.navbar-nav li a:has(.nav-icon) {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4, 4px);
}
.nav-icon {
  flex-shrink: 0;
}

/* Sign in / Sign up mais discretos (padronização de UI, 2026-08-25) —
 * ver o comentário em site-header.tsx sobre o motivo. Menores e mais
 * claros que os itens de navegação de verdade (que herdam 12.5px/preto
 * das regras acima); "Sign in" ainda é o link primário do par, só que num
 * peso visual deliberadamente reduzido. */
.header-container .ml-menu .navbar .container-fluid #myNavbar ul.navbar-nav li.menu-auth {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4, 4px);
}
.header-container .ml-menu .navbar .container-fluid #myNavbar ul.navbar-nav li.menu-auth a,
.header-container .ml-menu .navbar .container-fluid #myNavbar ul.navbar-nav li.menu-auth span {
  font-size: var(--text-12, 0.75rem);
  color: var(--foreground-muted, #797979);
}

/* Item de menu ativo (achado 3, docs/34-AUDITORIA-INTERFACE.md,
 * `isActive()`/`aria-current` em site-header.tsx) — borda inferior em vez
 * de reaproveitar o `background-color: #deff02` do `:hover` (regra do
 * legado, `header-footer.legacy.css`): mesmo fundo pros dois estados
 * apagaria o sinal de "página atual" bem no momento em que o mouse passa
 * por cima pra confirmar onde se está. */
.header-container .ml-menu .navbar .container-fluid #myNavbar ul.navbar-nav li.active a {
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--brand-magenta, #e9098c);
}

/* Avatar (círculo com a inicial, `site-header.tsx`) — o botão nativo tem
 * borda/appearance de <button> do navegador que `bg-transparent` sozinho
 * não remove; sem isto sobra um traço reto na esquerda/embaixo do círculo
 * (achado do Gustavo, sessão de fechamento). */
.header-container button.dropdown-toggle {
  appearance: none;
  border: 0;
  outline: none;
}
.header-container button.dropdown-toggle:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

/* Dropdown de conta — mais acabado que o `box-shadow:none` herdado do
 * breakpoint mobile do legado (não deveria pegar em telas largas, mas o
 * Bootstrap 3 empacotado é de 2016 e alguns navegadores atuais aplicam a
 * media query por engano em telas de alto DPI; reforçar aqui é mais barato
 * que investigar). */
@media (min-width: 990px) {
  .header-container .navbar-nav > li > .dropdown-menu {
    border-radius: 10px;
    border: 1px solid #ececec;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
    padding: 6px 0;
    overflow: hidden;
  }
  .header-container .dropdown-menu li > a,
  .header-container .dropdown-menu li > button {
    padding: 10px 20px;
    font-size: 13px;
  }
  .header-container .dropdown-menu .label {
    padding: 10px 20px 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .header-container .dropdown-menu .divider {
    margin: 4px 0;
  }
}

/* Menu mobile em modal — pedido do Gustavo, 2026-09-15: "o menu mobile
 * deve abrir em modal, centralizado na tela, com background escuro
 * translúcido". Só ≤991px (mesmo breakpoint do `.navbar-toggle`) — acima
 * disso o Bootstrap força `display:block!important` incondicional
 * (`header-footer.legacy.css`, comentário no topo deste arquivo), o
 * estado `open`/`.in` nem chega a importar, o backdrop nunca aparece no
 * desktop. `#myNavbar` (o mesmo `.collapse.navbar-collapse` de sempre)
 * VIRA o backdrop de tela inteira quando `.in` — precisa do ID no
 * seletor pra vencer `.collapse.in{display:block!important}` (2 classes,
 * sem ID) do legado: especificidade de ID bate qualquer número de
 * classes, `!important` só empata quando os dois lados usam. `<ul>`
 * dentro vira o cartão branco centralizado (mesmo `onClick`/
 * `stopPropagation` de `site-header.tsx` — clicar fora fecha, clicar
 * dentro não). `inset:0` cobre a faixa do próprio `.ml-menu` (82px) de
 * propósito — "centralizado na tela" é contra o viewport inteiro, não só
 * contra a área abaixo do cabeçalho; o botão hambúrguer fica encoberto
 * enquanto o modal está aberto, mas clicar em qualquer ponto do fundo
 * escuro (inclusive onde ele estaria) já fecha via o `onClick` do
 * backdrop. */
@media (max-width: 991px) {
  .header-container .ml-menu .navbar .container-fluid #myNavbar.navbar-collapse.in {
    display: flex !important;
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    padding: 24px;
    margin: 0;
  }
  .header-container .ml-menu .navbar .container-fluid #myNavbar.navbar-collapse.in ul.navbar-nav {
    background: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 320px;
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    margin: 0;
    padding: 8px 0;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  }
}