/* topbar.css — cabecalho global: logo, busca e botao do assistente.
 *
 * Recorte das linhas 39, 59-64 e 209 do monolito.
 * #topbar agora e <header>; o seletor por id nao muda.
 */

#topbar {
  height: 60px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 28px; gap: 14px;
  background: var(--bg); flex-shrink: 0;
}

/* TAREFA 1.3 — saiu o filter:brightness(0) invert(1).
 * O <img> tambem ganhou src, width e height (tarefa 1.4): antes nao tinha
 * src nenhum, e uma funcao chamada copiarLogo() copiava o src da outra
 * imagem depois que a pagina carregava -- o que causava um pisca. */
#topbar-logo {
  height: 26px; width: auto; object-fit: contain;
  opacity: .85; margin-right: 8px;
}

#search-wrap { position: relative; flex: 1; max-width: 340px }
#search-wrap input {
  width: 100%; background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--rsm); padding: 8px 14px 8px 38px;
  color: var(--text); font-size: 13px; font-family: var(--fonte-corpo);
  outline: none; transition: .2s;
}
#search-wrap input:focus { border-color: var(--petroleo); box-shadow: 0 0 0 3px var(--petroleo-glow) }
#search-wrap .s-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--icone); font-size: 14px; pointer-events: none;
}

.btn-ai {
  background: linear-gradient(135deg, var(--petroleo), var(--petroleo2));
  border: none; border-radius: var(--rsm); padding: 9px 18px;
  color: #fff; cursor: pointer;
  font-family: var(--fonte-corpo); font-size: 13px; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
  margin-left: auto; transition: .2s; white-space: nowrap;
}
.btn-ai:hover { opacity: .88; transform: translateY(-1px) }

/* ------------------------------------------------------- botao de menu

 * NOVO -- nao vem do monolito. Abre a barra lateral no celular, onde ela
 * estava simplesmente escondida sem substituto. Ver sidebar.css.
 *
 * No desktop nao existe: a barra ja esta sempre visivel, e um botao para
 * abrir o que ja esta aberto so confunde. display:none tira do fluxo E do
 * leitor de tela, que e o certo aqui -- o elemento nao tem funcao nenhuma
 * naquela largura, ao contrario do .sr-only, que esconde mas mantem. */
#menu-btn { display: none }

/* ------------------------------------------------------------------- mobile */

@media (max-width: 768px) {
  #menu-btn {
    display: grid; place-items: center;
    width: 40px; height: 40px; flex-shrink: 0;
    margin-left: -8px;              /* alinha o icone com a margem do conteudo */
    background: transparent; border: none; border-radius: var(--rsm);
    color: var(--text); cursor: pointer; padding: 0;
    appearance: none; -webkit-appearance: none;
  }
  #menu-btn:hover { background: var(--bg3) }
  #menu-btn:focus-visible { outline: 2px solid var(--petroleo); outline-offset: 2px }

  /* a mesma marca aparece dentro da gaveta; repetir aqui so rouba largura da
   * busca, que no iPhone ficava exibindo "Busc" e nada mais. */
  #topbar-logo { display: none }

  #topbar { padding: 0 16px; gap: 10px }

  /* 16px para o iOS nao ampliar a pagina ao focar. Ver base.css. */
  #search-wrap input { font-size: 16px }

  /* so o icone; o rotulo sai para caber busca e menu na mesma linha */
  .btn-ai { padding: 9px 12px }
  .btn-ai .rotulo { display: none }
}