/* Mobile navigation class-based styles
   - Use .is-open on nav.mobile-nav to show the menu
   - Use .is-visible on .main-overlay.black to show overlay
   - Prefer opacity/transform for transitions; use pointer-events to block interaction when hidden
*/
nav.mobile-nav ul {
  display: block; /* keep in flow but hidden via transform/opacity */
  opacity: 0;
  transform: translateX(-8px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
nav.mobile-nav.is-open ul {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.main-overlay.black {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  z-index: 1050;
}

.main-overlay.black.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Utility: hide overflow on body when nav open */
body.hide-overflow {
  overflow: hidden !important;
}

/* Small touches for menu items when open */
nav.mobile-nav .nav-close a {
  cursor: pointer;
}

@media (min-width: 900px) {
  /* On desktop we don't use the mobile nav; ensure nav is visible */
  nav.mobile-nav ul {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}