/**
 * Cabeçalho + navegação do site institucional público — Fase 3
 * ================================================================
 * Compartilhado entre as páginas públicas do site (Home, Quem Somos e as
 * próximas: Nossos Produtos, Sustentabilidade, Blog, Contato). Depende das
 * variáveis de assets/css/design-system.css (--verde-marca, --fonte-corpo) —
 * inclua os dois arquivos, nessa ordem, em qualquer página que use esta nav.
 *
 * Reaproveita a técnica de centralização já usada no resto do projeto
 * (grid 1fr auto 1fr: nav à esquerda, logo centralizada, CTA à direita).
 */

header.site{
  background:var(--white); border-bottom:1px solid var(--line);
  padding:16px 0; position:sticky; top:0; z-index:50;
}
header.site .wrap{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px;
}
header.site .brand-link{ display:contents; }
header.site .brand-mark{ height:38px; width:auto; justify-self:center; }

.cm-site-nav{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.cm-site-nav a{
  font-family:var(--fonte-corpo); font-size:14px; font-weight:600; color:var(--ink);
  text-decoration:none; white-space:nowrap;
}
.cm-site-nav a:hover{ color:var(--verde-marca); }

header.site .header-cta{ justify-self:end; white-space:nowrap; }

@media (max-width:900px){
  header.site .wrap{ grid-template-columns:1fr; justify-items:center; gap:14px; }
  header.site .brand-mark{ order:-1; }
  .cm-site-nav{ justify-content:center; }
  header.site .header-cta{ justify-self:center; }
}