/* Bappy mobile nav overrides — injected globally */

/* Proper touch target for burger (44x44 min) */
.mobile-toggle {
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: background 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.mobile-toggle:hover,
.mobile-toggle:focus-visible {
  background: rgba(157, 78, 221, 0.12);
  outline: none;
}
.mobile-toggle:focus-visible {
  box-shadow: 0 0 0 2px var(--neon-purple, #C77DFF);
}

/* Burger icon spans — animate to X when open */
.mobile-toggle span {
  transform-origin: center;
  transition: transform 0.28s ease, opacity 0.2s ease;
}
.mobile-toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.mobile-toggle.is-open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.mobile-toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Prevent body scroll while mobile menu open */
body.nav-locked {
  overflow: hidden;
  touch-action: none;
}

/* Ensure nav-links.open is above sticky elements */
@media (max-width: 768px) {
  .nav-links.open {
    z-index: 999;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Larger tap targets for nav links */
  .nav-links a,
  .nav-dropdown-trigger {
    padding: 0.7rem 0.2rem !important;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Nav CTA on mobile — ensure 44px tall and full-width feel */
  .nav-cta {
    min-height: 44px;
    padding: 0.7rem 1rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Avoid horizontal scroll from long content on mobile */
@media (max-width: 640px) {
  html, body { overflow-x: hidden; }
  img, video, iframe { max-width: 100%; height: auto; }
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Code blocks need horizontal scroll */
  pre, .code-block, .code-window {
    overflow-x: auto;
    max-width: 100%;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mobile-toggle span,
  .nav-links.open,
  .nav-dropdown-menu {
    transition: none !important;
    animation: none !important;
  }
}