/* Header styles scoped to .soh-header */
.soh-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--color-background);
  box-shadow: var(--shadow-base);
}

.header-inner {
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-primary-dark);
}
.brand-link:hover {
  color: var(--color-primary);
}
.brand-text {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
  font-size: var(--font-size-xl);
}

/* Navigation */
.soh-nav {
  display: block;
}
.menu {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.menu-item a {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}
.menu-item a:hover,
.menu-item a:focus-visible {
  color: var(--color-primary);
  background: var(--color-neutral-100);
}
.menu-item.highlight a.btn {
  box-shadow: var(--shadow-gold);
}

/* Mobile toggle */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  color: var(--color-primary);
  background-color: #fff;
}
.nav-toggle:hover,
.nav-toggle:focus-visible {
  background: var(--color-neutral-100);
}

/* Responsive behavior & progressive enhancement */
@media (max-width: 1024px) {
  .nav-toggle { display: inline-flex; }
  .menu { gap: var(--space-4); }
  /* With JS enabled, collapse the menu by default */
  .js-enabled .soh-nav {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--header-height);
    background: var(--color-background);
    box-shadow: var(--shadow-lg);
    border-top: 1px solid var(--color-neutral-200);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-slow);
  }
  .js-enabled .soh-nav.is-open {
    max-height: 80vh;
  }
  .js-enabled .menu {
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-4);
  }
  .js-enabled .menu-item a {
    padding: var(--space-3) var(--space-4);
  }
}

/* Utility when body should not scroll (mobile menu open) */
.no-scroll { overflow: hidden; }