/* Mobile Navigation Fixes - Phase 1 UX Improvements */

/* Fix mobile navigation overlaps */
@media (width <= 768px) {
  /* Ensure content doesn't get hidden behind fixed navigation */
  body {
    padding-bottom: 100px; /* Space for fixed bottom navigation */
  }
  
  /* Fix overlapping navigation */
  .chapter-nav {
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
    padding: 10px;
    border-radius: 0;
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -2px 10px rgb(0 0 0 / 0.1);
    background: var(--bg-primary, #fff);
    z-index: 1000;
  }
  
  /* Ensure enhanced navigation doesn't overlap */
  .enhanced-nav {
    bottom: 0;
    transform: translateY(0);
    z-index: 1001;
  }
  
  /* Prevent navigation from covering content */
  .site-content {
    padding-bottom: 120px; /* Extra space for navigation */
  }
  
  /* Fix menu overlay on mobile */
  .nav-menu-overlay,
  .chapter-menu-overlay {
    z-index: 2000;
  }
  
  .nav-menu-content,
  .chapter-menu-content {
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100vw;
    margin: 0;
    border-radius: 0;
  }
  
  /* Ensure proper touch targets (44x44 minimum) */
  .nav-btn,
  .nav-action-btn,
  .nav-touch-target {
    min-height: 44px;
    min-width: 44px;
    padding: 12px;
  }
  
  /* Hide text on very small screens */
  .nav-text,
  .nav-btn-text {
    display: none;
  }
  
  /* Fix progress bar visibility */
  .nav-progress {
    font-size: 12px;
  }
  
  /* Improve spacing */
  .nav-container {
    padding: 8px;
    gap: 8px;
  }
  
  /* Fix breadcrumbs on mobile */
  .breadcrumbs {
    display: none; /* Hide on mobile to save space */
  }
  
  /* Ensure footer doesn't overlap */
  .site-footer {
    margin-bottom: 100px;
  }
}

/* Very small screens (< 375px) */
@media (width <= 374px) {
  .chapter-nav {
    padding: 8px;
  }
  
  .nav-btn {
    padding: 8px;
    font-size: 12px;
  }
  
  .nav-progress-indicator {
    display: none;
  }
}

/* Landscape mobile */
@media (width <= 768px) and (orientation: landscape) {
  .chapter-nav,
  .enhanced-nav {
    padding: 5px 10px;
  }
  
  .nav-btn {
    padding: 5px 10px;
  }
  
  body {
    padding-bottom: 80px;
  }
  
  .site-content {
    padding-bottom: 100px;
  }
}

/* Fix for iOS Safari bottom bar */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .chapter-nav,
  .enhanced-nav {
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
  
  body {
    padding-bottom: calc(100px + env(safe-area-inset-bottom));
  }
}

/* Fix edge crowding - ensure proper content spacing */
@media (width <= 768px) {
  /* Add horizontal padding to prevent content touching edges */
  .container,
  .chapter-content,
  .site-content {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  
  /* Ensure code blocks have proper spacing */
  .code-block,
  .interactive-block {
    margin-left: 8px;
    margin-right: 8px;
  }
  
  /* Fix navigation button spacing */
  .chapter-nav {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  
  /* Prevent text from touching edges */
  p, h1, h2, h3, h4, h5, h6 {
    margin-left: 8px;
    margin-right: 8px;
  }
  
  /* Fix share modal on mobile */
  .share-modal-content {
    margin: 16px;
    width: calc(100% - 32px);
  }
  
  /* Update banner positioning */
  .update-banner {
    left: 16px;
    right: 16px;
    width: auto;
  }
}

/* Ensure navigation is always visible on scroll */
.chapter-nav.nav-hidden,
.enhanced-nav.nav-hidden {
  transform: translateY(0) !important;
}

/* Fix z-index issues */
.pyodide-repl-container {
  position: relative;
  z-index: 1;
}

.code-output {
  position: relative;
  z-index: 1;
}

/* Prevent navigation from covering interactive elements */
.interactive-block {
  margin-bottom: 20px;
}

/* Fix sticky header on mobile */
@media (width <= 768px) {
  .site-header {
    position: relative; /* Disable sticky on mobile to save space */
  }
}

/* Update banner for new Service Worker */
.update-banner {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary, #2563eb);
  color: white;
  padding: 16px 24px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgb(0 0 0 / 0.2);
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 2001; /* Above navigation */
  animation: slide-up 0.3s ease;
}

.update-banner p {
  margin: 0;
  font-weight: 500;
}

.update-banner button {
  background: white;
  color: var(--color-primary, #2563eb);
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  transition: opacity 0.2s;
}

.update-banner button:hover {
  opacity: 0.9;
}

@keyframes slide-up {
  from {
    transform: translateX(-50%) translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

/* Adjust update banner position on mobile */
@media (width <= 768px) {
  .update-banner {
    bottom: 120px; /* Above bottom navigation */
    left: 10px;
    right: 10px;
    transform: none;
    width: auto;
  }
}