/* Mobile Menu Styles */
#mobile-menu {
  background: rgba(17, 24, 39, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  height: 0;
  opacity: 0;
  visibility: hidden;
  transition: height 0.3s ease-in-out, opacity 0.3s ease-in-out;
  overflow-y: auto;
  max-height: calc(100vh - 70px);
}

.mobile-nav-link {
  position: relative;
  isolation: isolate;
}

.mobile-nav-link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(46, 182, 44, 0.1), rgba(131, 212, 117, 0.1));
  border-radius: 0.375rem;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  z-index: -1;
}

.mobile-nav-link:active::before {
  opacity: 1;
}

#mobile-menu .pt-2.pb-4 {
  opacity: 1;
  transition: opacity 0.2s ease-in-out;
}

#mobile-menu-button span {
  transition: all 0.3s ease-in-out;
  transform-origin: center;
}

/* Mobile Menu */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
  background: rgba(17, 24, 39, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

#mobile-menu.show-menu {
  max-height: calc(100vh - 70px);
}

.mobile-nav-link {
  display: block;
  padding: 0.75rem 1rem;
  color: #9ca3af;
  transition: all 0.2s ease-in-out;
}

.mobile-nav-link:hover {
  background: rgba(46, 182, 44, 0.1);
  color: #2eb62c;
}

/* Mobile-first approach */
@media screen and (max-width: 640px) {
  html, body {
    width: 100%;
    overflow-x: hidden;
  }

  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  /* Matrix text effect mobile styles */
  h1 .container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    width: 100%;
    padding: 0;
  }
  
  h1 .text,
  h1 .text2 {
    font-size: 50px !important;
    white-space: wrap;
    display: inline;
    line-height: 1;
  }
  
  .nav-link {
    padding: 0.5rem;
  }
  
  .text-xl {
    font-size: 1.125rem;
  }

  /* Mobile spacing adjustments */
  .p-4 {
    padding: 0.75rem;
  }

  /* Improved touch targets */
  button, 
  a {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Touch device optimizations */
@media (hover: none) {
  .hover\:bg-gray-800 {
    background: transparent;
  }
  
  .nav-link:active {
    background-color: rgba(31, 41, 55, 0.5);
  }

  /* Improved touch feedback */
  button:active,
  a:active {
    opacity: 0.7;
  }
}

/* Ensure proper spacing on small devices */
@media screen and (max-width: 480px) {
  .gap-4 {
    gap: 0.75rem;
  }

  .space-y-4 > * + * {
    margin-top: 0.75rem;
  }
  
  /* Even smaller text for very small screens */
  h1 .text,
  h1 .text2 {
    font-size: 20px !important;
  }
}

/* Extra small screens */
@media screen and (max-width: 320px) {
  h1 .text,
  h1 .text2 {
    font-size: 18px !important;
  }
}

/* Landscape mode adjustments */
@media screen and (max-height: 480px) {
  .h-\[80vh\] {
    height: 70vh;
  }
}

/* Tablet optimizations */
@media screen and (min-width: 641px) and (max-width: 1024px) {
  .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}