.header {
  position: fixed;
  top: var(--spacing-sm);
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  max-width: calc(100% - var(--spacing-sm) * 2);
  background-color: var(--color-header-bg);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  z-index: 1000;
  border: 1px solid var(--color-header-border);
  border-radius: 40px;
  transition: var(--transition-normal);
  transition-property: background-color, box-shadow, border-color, padding;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  padding: 0.25rem 2rem;
  anchor-name: --header;
}

@media (min-width: 768px) {
  .header {
    max-width: calc(100% - var(--spacing-xl) * 2);
  }
}

@media (min-width: 1200px) {
  .header {
    max-width: calc(100% - 10vw);
  }
}

/* Estado do header após rolar a página */
.header--scrolled {
  background-color: var(--color-header-bg-scrolled);
  box-shadow: var(--color-header-shadow-scrolled);
  border-color: var(--color-header-border-scrolled);
  padding: 0rem 1.5rem;
}

/* Marcador invisível a 50px do topo: o nav.js observa quando ele sai da tela (header--scrolled) */
.header-sentinel {
  position: absolute;
  top: 50px;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.nav {
  position: relative; /* referência do canvas de faíscas */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xxl);
  padding: 0.5rem 0;
  width: auto;
}

/* Celulares estreitos (< 375px): o espaçamento padrão não cabe no header */
@media (max-width: 374px) {
  .nav {
    gap: var(--spacing-xl);
  }
}

/* Menu: no celular é um popover nativo (abre pelo botão; Escape e clique fora fecham sem JS).
   .nav-list--open é o fallback para navegadores sem Popover API */
.nav-list {
  display: none;
}

.nav-list:is(:popover-open, .nav-list--open) {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  position: fixed;
  inset: calc(var(--spacing-sm) * 2 + 3.625rem) var(--spacing-md) auto;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  color: inherit;
  background: var(--color-menu-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--color-menu-border);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-lg);
  z-index: 999;
  --slide-from: -8px;
  animation: fade-slide-in 0.2s ease-out;
}

/* Com ancoragem CSS nativa, o menu acompanha exatamente a posição e a largura do header */
@supports (anchor-name: --header) {
  .nav-list:is(:popover-open, .nav-list--open) {
    position-anchor: --header;
    top: calc(anchor(bottom) + var(--spacing-sm));
    left: anchor(left);
    right: anchor(right);
  }
}

/* Desktop: menu sempre em linha (desfaz o estilo padrão de popover do navegador) */
@media (min-width: 768px) {
  .nav-list {
    display: flex;
    gap: var(--spacing-lg);
    position: static;
    inset: auto;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: visible;
    color: inherit;
    background: none;
  }
}

.nav-link {
  font-size: 0.9rem;
  color: var(--color-text-main);
  font-weight: 500;
  padding: var(--spacing-xs) 0;
  opacity: 0.8;
  transition: opacity var(--transition-fast), color var(--transition-fast);
}

.nav-link:hover {
  opacity: 1;
}

.nav-toggle {
  display: block;
  width: 30px;
  height: 24px;
  position: relative;
  z-index: 1001;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .nav-toggle {
    display: none;
  }
}

.nav-toggle-icon {
  width: 24px;
  height: 24px;
  fill: var(--color-text-main);
}

/* Botão de tema (dark/light toggle) */
.theme-toggle {
  display: flex;
  width: 32px;
  height: 32px;
  color: var(--color-text-muted);
  transition: color var(--transition-fast), background-color var(--transition-fast);
  flex-shrink: 0;
}

.theme-toggle:hover {
  color: var(--color-primary-ink);
  background-color: var(--color-glow-faint);
}

.theme-toggle-icon {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  flex-shrink: 0;
}

/* Em dark mode: mostrar ícone de sol (clicar vai para claro) */
.theme-toggle-icon--moon { display: none; }
.theme-toggle-icon--sun  { display: block; }

/* Em light mode: mostrar ícone de lua (clicar vai para escuro) */
[data-theme="light"] .theme-toggle-icon--moon { display: block; }
[data-theme="light"] .theme-toggle-icon--sun  { display: none; }