/* Purpose: Fixed site header — transparent over the hero, solid vault once scrolled. */

.hdr {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-sticky);
  padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid transparent;
  transition: background var(--duration-medium) var(--ease), border-color var(--duration-medium) var(--ease);
}
.hdr.solid { background: var(--color-vault-solid); border-bottom-color: var(--color-accent-faint); }
.admin-bar .hdr { top: 46px; }

.hdr-in { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: var(--space-6); }

.logo img { height: 22px; width: auto; }

.nav { display: none; gap: var(--space-8); }
.nav a { color: var(--color-ivory-soft); text-decoration: none; font-size: var(--text-sm); transition: color var(--duration-fast); }
.nav a:hover { color: var(--color-ivory); }

.hdr .btn { min-height: 38px; padding: 8px var(--space-4); font-size: var(--text-caption); }

/* md */
@media (min-width: 641px) {
  .logo img { height: 28px; }
  .hdr .btn { min-height: 40px; padding: 8px var(--space-6); font-size: var(--text-sm); }
}

@media (min-width: 783px) {
  .admin-bar .hdr { top: 32px; }
}

/* xl */
@media (min-width: 1081px) {
  .nav { display: flex; }
}