/* ============================================================
   MOBILE NAVIGATION & STABILITY FIXES
   ============================================================ */

/* Security Headers for Mobile */
html {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

/* Additional Security Protections */
body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

/* Prevent context menu on long press */
* {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Prevent horizontal scrolling on all devices */
html, body {
  overflow-x: hidden !important;
  width: 100% !important;
  position: relative;
}

/* Ensure all elements respect viewport width */
* {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Mobile Navigation Fixes */
@media (max-width: 860px) {
  
  /* Ensure toggle button is visible and functional */
  .toggle {
    display: flex !important;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    border: none;
    cursor: pointer;
    position: relative;
    z-index: 1000;
  }

  /* Toggle button spans for hamburger menu */
  .toggle span {
    position: absolute;
    left: 12px;
    right: 12px;
    height: 2px;
    background: var(--white);
    transition: all .25s ease;
    border-radius: 1px;
  }

  .toggle span:nth-child(1) {
    top: 15px;
  }

  .toggle span:nth-child(2) {
    top: 21px;
  }

  .toggle span:nth-child(3) {
    top: 27px;
  }

  /* Animated hamburger to X */
  .toggle.open span:nth-child(1) {
    top: 21px;
    transform: rotate(45deg);
  }

  .toggle.open span:nth-child(2) {
    opacity: 0;
  }

  .toggle.open span:nth-child(3) {
    top: 21px;
    transform: rotate(-45deg);
  }

  /* Hide desktop navigation */
  .navlinks,
  .navcta {
    display: none !important;
  }

  /* Mobile menu styling */
  .mobile {
    display: none;
    position: fixed;
    top: 80px;
    left: 16px;
    right: 16px;
    background: rgba(16, 36, 23, .96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 24px;
    padding: 28px 24px;
    flex-direction: column;
    gap: 6px;
    z-index: 999;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
  }

  .mobile.show {
    display: flex !important;
    animation: slideDown 0.3s ease;
  }

  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Mobile menu links */
  .mobile a {
    display: block;
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .78);
    padding: 14px 16px;
    border-radius: 16px;
    transition: all .3s ease;
    text-decoration: none;
  }

  .mobile a:hover,
  .mobile a.active {
    color: var(--white);
    background: rgba(255, 255, 255, .06);
  }

  .mobile .pill {
    margin-top: 10px;
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* Navigation container fixes */
  .navbox {
    width: min(calc(100% - 32px), 100%);
    margin: 0 auto;
    padding: 10px 16px;
  }

  /* Prevent content from shifting */
  .wrap {
    width: min(calc(100% - 40px), 100%);
    margin: 0 auto;
  }

  /* Fix page stability */
  body {
    position: relative;
    overflow-x: hidden;
  }

  /* Prevent horizontal scroll on specific elements */
  .hero,
  .section,
  .page-hero,
  .footer {
    overflow-x: hidden;
    width: 100%;
  }

  /* Grid fixes for mobile */
  .grid2,
  .grid3,
  .grid4,
  .blog-grid,
  .news-grid,
  .proj-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  /* Image container fixes */
  .media,
  .article-image,
  .blog-card .media {
    width: 100%;
    overflow: hidden;
  }

  /* Text content fixes */
  h1, h2, h3, h4, h5, h6,
  .headline,
  .hero h1 {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  /* Button fixes */
  .btn,
  .pill,
  .filter-btn {
    width: auto;
    min-width: auto;
    flex-shrink: 1;
  }

  /* Form fixes */
  .form-grid {
    grid-template-columns: 1fr !important;
  }

  .field input,
  .field textarea,
  .field select {
    width: 100%;
    max-width: 100%;
  }
}

/* Extra small devices (phones in portrait) */
@media (max-width: 480px) {
  
  .wrap {
    width: min(calc(100% - 28px), 100%);
  }

  .navbox {
    padding: 8px 12px;
  }

  .mobile {
    left: 12px;
    right: 12px;
    padding: 20px 16px;
  }

  .toggle {
    width: 40px;
    height: 40px;
  }

  .toggle span {
    left: 10px;
    right: 10px;
  }

  /* Smaller text on very small screens */
  .mobile a {
    font-size: .8rem;
    padding: 12px 14px;
  }
}

/* Landscape orientation fixes */
@media (max-width: 860px) and (orientation: landscape) {
  
  .mobile {
    max-height: calc(100vh - 100px);
    top: 70px;
  }

  .page-hero {
    min-height: 60vh;
    padding: 100px 0 40px;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  
  /* Larger touch targets */
  .mobile a {
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  .toggle {
    min-width: 48px;
    min-height: 48px;
  }

  /* Remove hover effects on touch devices */
  .mobile a:hover {
    background: transparent;
  }

  .mobile a:active,
  .mobile a.active {
    background: rgba(255, 255, 255, .06);
  }
}

/* High DPI display fixes */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  
  .toggle span {
    height: 1px;
    transform: scale(1, 2);
  }

  .toggle.open span:nth-child(1),
  .toggle.open span:nth-child(3) {
    transform: scale(1, 2) rotate(45deg);
  }

  .toggle.open span:nth-child(3) {
    transform: scale(1, 2) rotate(-45deg);
  }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  
  .toggle span,
  .mobile,
  .mobile a {
    transition: none !important;
    animation: none !important;
  }
}

/* Dark mode support for mobile */
@media (prefers-color-scheme: dark) and (max-width: 860px) {
  
  .mobile {
    background: rgba(0, 0, 0, .96);
    border-color: rgba(255, 255, 255, .1);
  }

  .toggle {
    background: rgba(255, 255, 255, .1);
  }
}

/* Print styles - hide mobile navigation */
@media print {
  
  .nav,
  .mobile,
  .toggle {
    display: none !important;
  }
}