/* Mobile Navigation Positioning and Scrolling Fixes */

/* DEBUG: Test if CSS file is being loaded - REMOVED */

/* iOS Safari zoom prevention for triple-tap functionality */
.no-zoom {
  touch-action: manipulation !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-touch-callout: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Specific rule for mobile header logo to prevent iOS Safari zoom */
#mobile-logo {
  touch-action: manipulation !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-touch-callout: none !important;
  -webkit-tap-highlight-color: transparent !important;
  pointer-events: auto !important;
  /* Additional iOS zoom prevention */
  -webkit-text-size-adjust: none !important;
  -webkit-transform: translateZ(0) !important;
  transform: translateZ(0) !important;
  /* Prevent double-tap zoom specifically */
  touch-action: manipulation !important;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
}

/* Core mobile navigation positioning */
#mobileNav {
  /* Ensure the modal container doesn't interfere with scrolling */
  touch-action: manipulation;
}

/* Left-slide navigation positioning */
#mobileNav.left-slide {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 50;
  opacity: 1;
}

#mobileNav.left-slide .nav-background {
  width: 70vw !important; /* Increased from 50vw to 70vw for better logo display */
  height: 100vh !important;
  transform: translateX(-100%) !important; /* This will move 70vw to the left, completely off-screen */
  transition: transform 300ms ease-out !important; /* Override Tailwind transition */
}

#mobileNav.left-slide.show .nav-background {
  transform: translateX(0) !important;
}

/* More specific rule to ensure it takes precedence */
div#mobileNav.left-slide.show .nav-background {
  transform: translateX(0) !important;
}

/* Even more specific rule with higher specificity */
html body div#mobileNav.left-slide.show .nav-background {
  transform: translateX(0) !important;
}

/* Maximum specificity rule to override everything */
html body div#mobileNav.left-slide.show[style] .nav-background {
  transform: translateX(0) !important;
}

/* Full-screen navigation positioning */
#mobileNav.full-screen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  transform: translateY(100%) !important;
  transition: transform 300ms ease-out !important;
  z-index: 50 !important;
}

#mobileNav.full-screen.show {
  transform: translateY(0) !important;
}

/* Override Tailwind classes with maximum specificity */
#mobileNav.full-screen.translate-y-full {
  transform: translateY(100%) !important;
}

#mobileNav.full-screen.show.translate-y-full {
  transform: translateY(0) !important;
}

/* More specific rule to ensure it takes precedence */
div#mobileNav.full-screen.show {
  transform: translateY(0) !important;
}

/* Even more specific rule with higher specificity */
html body div#mobileNav.full-screen.show {
  transform: translateY(0) !important;
}

/* Maximum specificity rule to override everything */
html body div#mobileNav.full-screen.show[style] {
  transform: translateY(0) !important;
}

/* Backdrop positioning */
.mobile-nav-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 49;
  opacity: 0;
  transition: opacity 300ms ease-out;
}

.mobile-nav-backdrop.show {
  opacity: 1;
}

/* Content areas that should scroll */
.mobile-nav-scrollable {
  flex: 1;
  min-height: 0; /* Allow flex item to shrink below content size */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: 2rem; /* Additional bottom padding for scrollable content */
}

/* Specific rules for full-screen navigation scrolling */
#mobileNav.full-screen .mobile-nav-scrollable {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  max-height: calc(100vh - 120px); /* Account for header height */
  padding-bottom: 2rem; /* Additional bottom padding for scrollable content */
}

/* Fix for iOS Safari scrolling issues */
@supports (-webkit-touch-callout: none) {
  .mobile-nav-scrollable {
    -webkit-overflow-scrolling: touch;
    transform: translateZ(0); /* Force hardware acceleration */
  }
}

/* Debug: Add border to see the scrollable area - DISABLED */
/* .mobile-nav-scrollable {
  border: 2px solid red !important;
  background-color: rgba(255, 0, 0, 0.1) !important;
} */