/*
 * NUCLEAR FIX: Mobile Menu Visibility
 * This file MUST be loaded LAST after all other CSS
 * Uses maximum specificity to override everything
 *
 * VISUAL DEBUG: Uncomment the section at bottom to see menu boundaries
 */

/* Force hamburger to be visible on mobile - NUCLEAR option */
@media screen and (max-width: 992px) {
  /* Hamburger button - force visible */
  header.header .navbar .hamburger,
  .header .navbar .hamburger,
  .navbar .hamburger,
  .hamburger {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 9999 !important;
    position: relative !important;
    pointer-events: auto !important;
  }

  /* Nav container - make it not interfere */
  header.header .navbar .nav-container,
  .header .navbar .nav-container,
  .navbar .nav-container,
  .nav-container {
    position: static !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    overflow: visible !important;
    pointer-events: none !important;
  }

  /* Nav menu - force to fixed position and initially hidden */
  header.header .navbar .nav-container .nav-menu,
  .header .navbar .nav-container .nav-menu,
  .navbar .nav-container .nav-menu,
  .nav-container .nav-menu,
  ul.nav-menu,
  .nav-menu {
    position: fixed !important;
    top: 70px !important;
    left: -100vw !important;
    right: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: calc(100vh - 70px) !important;
    max-height: calc(100vh - 70px) !important;
    background-color: #ffffff !important;
    z-index: 9998 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transition: left 0.35s ease-in-out !important;
    box-shadow: 2px 0 15px rgba(0, 0, 0, 0.2) !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
  }

  /* When active - slide in from left */
  header.header .navbar .nav-container .nav-menu.active,
  .header .navbar .nav-container .nav-menu.active,
  .navbar .nav-container .nav-menu.active,
  .nav-container .nav-menu.active,
  ul.nav-menu.active,
  .nav-menu.active {
    left: 0 !important;
    transform: translateX(0) !important;
    visibility: visible !important;
    display: flex !important;
  }

  /* Menu items - ensure visible */
  .nav-menu .nav-item,
  .nav-menu li {
    display: block !important;
    width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  }

  /* Menu links */
  .nav-menu .nav-link {
    display: flex !important;
    padding: 1.2rem 1.5rem !important;
    width: 100% !important;
    color: #333 !important;
    text-decoration: none !important;
  }

  /* Hamburger animation when active */
  .hamburger.active .bar:nth-child(1) {
    transform: translateY(9px) rotate(45deg) !important;
  }

  .hamburger.active .bar:nth-child(2) {
    opacity: 0 !important;
    transform: scale(0) !important;
  }

  .hamburger.active .bar:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg) !important;
  }

  /* Prevent body scroll when menu is open */
  body.menu-open {
    overflow: hidden !important;
  }

  /* EXTRA SAFETY: Ensure nav-menu children are also visible */
  .nav-menu > * {
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Force remove any transforms that might hide the menu */
  .nav-menu:not(.active) {
    transform: translateX(0) !important;
  }
}

/* Desktop - hide hamburger, show normal nav */
@media screen and (min-width: 993px) {
  .hamburger {
    display: none !important;
  }

  .nav-menu {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
  }
}