/* Páginas públicas do app (associe-se, eventos, política de privacidade,
   termos) com a mesma identidade do site institucional.

   Elas nascem do CSS do painel, onde a cor principal vira botão. No site quem
   convida à ação é o amarelo de destaque sobre o azul-marinho, e a faixa
   superior tem a assinatura de três cores. Sem estes ajustes, quem sai do site
   para /politica-de-privacidade percebia que mudou de lugar. */

.public-header {
  border-top: 2px solid var(--brand-primary, #07182d);
  border-bottom: 6px solid var(--brand-accent, #ffc928);
  box-shadow: inset 0 -2px 0 var(--brand-secondary, #008fd3);
}

/* A marca do cabeçalho segue o mesmo bloco do site: selo, nome e linha de apoio. */
.public-brand > span { color: var(--brand-primary, #07182d); font-family: Manrope, sans-serif; font-weight: 800; letter-spacing: -.02em; }
.public-brand > span small { display: block; color: var(--muted, #657285); font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0; }
.public-brand > .institution-logo { background: none; padding: 0; }

.public-header nav a { color: var(--muted, #657285); }
.public-header nav a:hover { color: var(--brand-primary, #07182d); }
.public-header nav a.active,
.public-header nav a:first-child { background: color-mix(in srgb, var(--brand-secondary, #008fd3) 11%, #fff); color: var(--brand-secondary, #008fd3); }

/* Chamada principal igual à do site: pílula amarela com texto escuro. */
.public-header nav a.public-nav-join {
  background: var(--brand-accent, #ffc928);
  color: var(--brand-primary, #07182d);
  border-radius: 999px;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.public-header nav a.public-nav-join:hover { filter: brightness(.95); color: var(--brand-primary, #07182d); }