/* ==========================================================================
   layout/header.css — Header sticky e marca
   O comportamento de navegação (painel mobile) vive em components/navigation.css.
   ========================================================================== */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--bg-primary) 82%, transparent);
  border-block-end: 1px solid transparent;
  transition: background var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);

  /* Altura VIGENTE do header, incluindo a borda inferior. O painel mobile
     ancora nesta variável em vez de --header-h fixo; sem isso, com o header
     compactado o painel abria 11px abaixo da barra e deixava o conteúdo da
     página aparecendo pela fresta. */
  --header-h-now: var(--header-h);
}

/* backdrop-filter só onde é suportado — sem ele o fundo sólido acima já
   garante legibilidade. */
@supports (backdrop-filter: blur(1px)) {
  .site-header {
    backdrop-filter: saturate(140%) blur(14px);
  }
}

/* Estado aplicado por js/modules/header-scroll.js após sair do topo. */
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--bg-base) 92%, transparent);
  border-block-end-color: var(--border);
  box-shadow: var(--shadow-sm);
  --header-h-now: calc(var(--header-h-compact) + 1px);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  block-size: var(--header-h);
  transition: block-size var(--dur-base) var(--ease-out);
}

.site-header.is-scrolled .header__inner {
  block-size: var(--header-h-compact);
}

/* --------------------------------------------------------------------------
   Marca

   Lockup horizontal compacto (erlenmeyer + LABMÍDIA TECHOPS). A versão
   completa, com as duas linhas de assinatura, vive no rodapé: a 36px de
   altura aquelas linhas viram borrão.
   -------------------------------------------------------------------------- */

.brand {
  display: inline-flex;
  align-items: center;
  margin-inline-end: auto;
  flex: none;
}

.brand__logo {
  block-size: 36px;
  inline-size: auto;
  transition: block-size var(--dur-base) var(--ease-out);
}

.site-header.is-scrolled .brand__logo {
  block-size: 30px;
}

@media (max-width: 26rem) {
  .brand__logo {
    block-size: 30px;
  }
}

/* --------------------------------------------------------------------------
   Sentinela de scroll
   Um alvo de 1px logo abaixo do topo. IntersectionObserver observando esta
   div é mais barato que um listener de scroll e não dispara layout.
   -------------------------------------------------------------------------- */

.scroll-sentinel {
  position: absolute;
  inset-block-start: 0;
  inline-size: 100%;
  block-size: 1px;
  pointer-events: none;
}