/* ==========================================================================
   COMPONENTS / HEADER
   Cabeçalho fixo no topo — usado pela landing (logo-imagem) e pelas páginas
   legais (mesmo logo-imagem). A página link-bio usa a mesma estrutura
   .site-header/.site-header__inner, mas com um logo em texto próprio
   (.site-header__logo-text) — isso fica em pages/link-bio.css, não aqui,
   porque só existe naquela página.
   ========================================================================== */

/* Altura conforme planilha, linha "NAVEGAÇÃO → Altura header":
   64px (mobile/tablet) → 72px (768) → 80px (1024, igual em 1280/1440).
   min-height (não height fixo) pra não travar se o conteúdo precisar crescer. */
.site-header {
  min-height: 64px;
  display: flex;
  align-items: center; /* centraliza o conteúdo verticalmente na altura do header */
  background: #fff;
  border-bottom: 1px solid #eee;
}

@media (min-width: 768px) {
  .site-header {
    min-height: 72px;
  }
}

@media (min-width: 1024px) {
  .site-header {
    min-height: 80px;
  }
}

.site-header__inner {
  display: flex;
  justify-content: center; /* logo centralizado, não à esquerda */
}

.site-header__logo {
  width: 254px; /* logo-rotulo-simples.svg — dimensão nativa do SVG (254x30), medida
    no PNG de referência: renderiza próxima da escala 1:1, cabe tranquilo nos
    280px úteis do container em 320px de viewport (regra: cenário de teste
    mínimo, não breakpoint) */
  height: 30px;
}