body.menu-open {
  overflow: hidden;
}

.site-nav {
  background: transparent;
}

.site-nav.is-scrolled {
  background: color-mix(in oklab, white 90%, transparent);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(1, 45, 87, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.site-nav.is-scrolled .nav-logo-dark {
  display: block;
}

.site-nav.is-scrolled .nav-logo-light {
  display: none;
}

.site-nav:not(.is-scrolled) .nav-logo-dark {
  display: none;
}

.site-nav:not(.is-scrolled) .nav-logo-light {
  display: block;
}

.site-nav .nav-brand,
.site-nav .nav-link,
.site-nav .nav-menu-toggle {
  color: white;
}

.site-nav.is-scrolled .nav-brand,
.site-nav.is-scrolled .nav-link,
.site-nav.is-scrolled .nav-menu-toggle {
  color: var(--foreground);
}

.site-nav .nav-link.is-active {
  color: white;
}

.site-nav.is-scrolled .nav-link.is-active {
  color: var(--primary);
}

.site-nav .nav-link-underline {
  background: white;
}

.site-nav.is-scrolled .nav-link-underline {
  background: var(--primary);
}

.site-nav .ghost-cta {
  color: white;
}

.site-nav.is-scrolled .ghost-cta {
  color: var(--foreground);
}

.site-nav .ghost-cta:hover {
  color: white;
  background: rgba(255, 255, 255, 0.1);
}

.site-nav.is-scrolled .ghost-cta:hover {
  color: var(--primary);
  background: var(--accent);
}

.site-nav .primary-cta {
  background: white;
  color: var(--primary);
}

.site-nav.is-scrolled .primary-cta {
  background: var(--primary);
  color: var(--primary-foreground);
}

.site-nav .mobile-nav-panel {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
}

.flash-success {
  background: color-mix(in oklab, var(--color-green-50) 80%, white);
  color: var(--color-green-700);
  border: 1px solid color-mix(in oklab, var(--color-green-600) 18%, transparent);
}

.flash-error {
  background: color-mix(in oklab, var(--color-red-50) 80%, white);
  color: var(--color-red-700);
  border: 1px solid color-mix(in oklab, var(--color-red-500) 18%, transparent);
}

.flash-info {
  background: color-mix(in oklab, var(--accent) 10%, white);
  color: var(--secondary);
  border: 1px solid color-mix(in oklab, var(--accent) 25%, transparent);
}

.hero-overlay {
  background: linear-gradient(to bottom, rgba(1, 45, 87, 0.8), rgba(1, 45, 87, 0.7), rgba(1, 45, 87, 0.85));
}

.admin-sidebar {
  transition: transform 200ms ease;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.28);
}

.admin-sidebar.is-open {
  transform: translateX(0);
}

@media (min-width: 1024px) {
  .admin-sidebar {
    box-shadow: none;
  }
}