/* topo.css: a barra branca do topo, fina como a de um canal de vídeo: a marca redonda à esquerda, a busca numa pílula
   cinza no meio e o menu em linha à direita (três tracinhos no telefone, que abrem o menu num modal). No telefone a
   busca desce pra segunda linha da barra. Logo embaixo dela começa a faixa do vídeo (cinema.css). Na ponta fica o
   botão de instalar o app, que dentro do app vira "Atualizar" (o instalar.js decide).
   Nas páginas com o vídeo (.topo--sobre-video), o telefone tem outro desenho, o do site das garotas: a barra fica
   transparente por cima do vídeo, com os três tracinhos à esquerda e a lupa à direita (ver o @media do telefone).
   Depende de: base.css. Telefone nas regras soltas, o telefone com vídeo e o computador nos dois @media do fim. */

.topo {
  position: relative; z-index: 10;
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "marca instalar nav" "busca busca busca";
  align-items: center; gap: 8px 12px; padding: 8px var(--margem) 10px;
  background: var(--branco);
}

/* ------------------------------------------------------------ a marca */

.marca { grid-area: marca; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }

.marca__icone { width: 30px; height: 30px; flex: none; }

.marca__nome { font-size: 18px; font-weight: 800; letter-spacing: -0.03em; white-space: nowrap; }

/* ------------------------------------------------------------ a busca em pílula cinza */

.topo__busca {
  grid-area: busca; display: flex; min-height: 40px; overflow: hidden;
  border: 1px solid transparent; border-radius: 999px; background: var(--bloco);
}
.topo__busca:focus-within { border-color: var(--texto); background: var(--branco); }

.topo__campo { flex: 1 1 auto; min-width: 0; padding: 0 18px; border: 0; background: none; color: var(--texto); font-size: 15px; font-weight: 500; }
.topo__campo:focus { outline: 0; }
.topo__campo::placeholder { color: var(--texto-suave); }

.topo__lupa { display: grid; place-items: center; width: 52px; border: 0; background: none; color: var(--texto); }
.topo__lupa:hover { background: var(--bloco-escuro); }
.topo__lupa svg { width: 22px; height: 22px; }

/* ------------------------------------------------------------ o menu em linha */

.topo__nav { grid-area: nav; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }

.topo__links { display: none; }

.topo__links a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px;
  font-size: 14px; font-weight: 700; color: var(--texto-suave); text-decoration: none;
}
.topo__links a:hover { background: var(--bloco); color: var(--texto); }
.topo__links a[aria-current="page"] { color: var(--texto); }

.topo__menu { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; }
.topo__menu:hover { background: var(--bloco); }
.topo__menu svg { width: 24px; height: 24px; }

/* ------------------------------------------------------------ o botão de instalar */

/* No navegador ele instala o site como app; dentro do app ele vira "Atualizar" (o instalar.js troca o data-modo e
   tira o hidden). No telefone é só o desenho, num círculo como o menu; no computador, uma pílula cinza com o nome. */
.topo__instalar {
  grid-area: instalar; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit;
}
.topo__instalar:hover { background: var(--bloco); }
.topo__instalar svg { width: 22px; height: 22px; flex: none; }

.topo__instalar[data-modo="instalar"] .topo__instalar-atualizar,
.topo__instalar[data-modo="atualizar"] .topo__instalar-baixar { display: none; }

.topo__instalar-texto {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* a janela de como instalar, quando o navegador não oferece o pedido dele */
.como-instalar { display: grid; gap: 12px; }
.como-instalar p { font-size: 15px; line-height: 1.55; }

/* a lupa que abre a busca só existe no telefone, nas páginas com o vídeo */
.topo__abre-busca { display: none; }

/* o menu do telefone, dentro do modal */
.menu-telefone { display: grid; gap: 2px; }
.menu-telefone a {
  display: block; padding: 12px 14px; border-radius: var(--raio-pequeno);
  font-size: 17px; font-weight: 700; text-decoration: none;
}
.menu-telefone a:hover { background: var(--bloco); }

/* No telefone, por cima do vídeo: a marca sai porque o nome já aparece grande no pé do vídeo, e a busca só aparece
   quando se toca na lupa (o cinema.js põe .topo--buscando). A barra não acompanha a rolagem, como antes. */
@media (max-width: 899.98px) {
  .topo--sobre-video {
    position: absolute; inset: 0 0 auto 0;
    grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "nav . instalar lupa" "busca busca busca busca";
    background: none; color: var(--branco);
  }
  .topo--sobre-video .marca,
  .topo--sobre-video .topo__busca { display: none; }
  .topo--sobre-video.topo--buscando .topo__busca { display: flex; background: var(--branco); color: var(--texto); }

  .topo--sobre-video .topo__abre-busca {
    grid-area: lupa; display: grid; place-items: center; width: 40px; height: 40px;
    border: 0; border-radius: 50%; background: none;
  }
  .topo--sobre-video .topo__abre-busca svg { width: 24px; height: 24px; }
  .topo--sobre-video .topo__menu:hover,
  .topo--sobre-video .topo__instalar:hover,
  .topo--sobre-video .topo__abre-busca:hover { background: rgba(255, 255, 255, .14); }
}

@media (min-width: 900px) {
  .topo {
    position: sticky; top: 0;
    grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "marca busca nav instalar";
    gap: 32px; padding-block: 10px;
  }
  .topo__instalar {
    width: auto; height: 36px; padding: 0 14px 0 12px; margin-left: -20px; border-radius: 999px; background: var(--bloco);
    font-size: 14px; font-weight: 700;
  }
  .topo__instalar:hover { background: var(--bloco-escuro); }
  .topo__instalar svg { width: 18px; height: 18px; }
  .topo__instalar-texto { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .topo__busca { width: min(560px, 100%); justify-self: center; }
  .topo__links { display: flex; gap: 2px; }
  .topo__menu { display: none; }
}