/* Tailwind CSS CDN and Mobile Menu Styles */
@import url('https://cdn.tailwindcss.com');

/* Custom Tailwind components for mobile menu */
@layer components {
  /* Mobile menu button styling */
  .mobile-menu-btn {
    @apply fixed top-4 right-4 z-50 p-3 bg-gray-800 text-white rounded-lg shadow-lg hover:bg-gray-700 transition-colors duration-200 md:hidden;
  }
  
  /* Mobile menu overlay */
  .mobile-menu-overlay {
    @apply fixed inset-0 bg-black bg-opacity-50 z-40 transition-opacity duration-300;
  }
  
  .mobile-menu-overlay.hidden {
    @apply opacity-0 pointer-events-none;
  }
  
  .mobile-menu-overlay.visible {
    @apply opacity-100;
  }
  
  /* Mobile menu panel */
  .mobile-menu-panel {
    @apply fixed top-0 right-0 h-full w-80 max-w-full bg-white shadow-xl z-50 transform transition-transform duration-300 ease-in-out;
  }
  
  .mobile-menu-panel.closed {
    @apply translate-x-full;
  }
  
  .mobile-menu-panel.open {
    @apply translate-x-0;
  }
  
  /* Mobile menu header */
  .mobile-menu-header {
    @apply flex items-center justify-between p-4 border-b border-gray-200;
  }
  
  /* Mobile menu close button */
  .mobile-menu-close {
    @apply p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition-colors duration-200;
  }
  
  /* Mobile menu navigation */
  .mobile-menu-nav {
    @apply flex flex-col p-4 space-y-2;
  }
  
  /* Mobile menu links */
  .mobile-menu-link {
    @apply flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100 hover:text-blue-600 rounded-lg transition-colors duration-200;
  }
  
  .mobile-menu-link.active {
    @apply bg-blue-50 text-blue-600 border-l-4 border-blue-600;
  }
  
  /* Mobile menu icons */
  .mobile-menu-icon {
    @apply w-5 h-5 mr-3 text-current;
  }
}

/* HTMega specific overrides with Tailwind classes */
.htmobile-aside-button {
  @apply mobile-menu-btn;
}

.htbody-overlay {
  @apply mobile-menu-overlay;
}

.htoverlay-active .htbody-overlay {
  @apply visible;
}

.htmobile-menu-wrap {
  @apply mobile-menu-panel;
}

.htmobile-menu-wrap.active {
  @apply open;
}

.htmobile-aside-close {
  @apply mobile-menu-close;
}

.htmobile-navigation {
  @apply mobile-menu-nav;
}

.htmobile-navigation .menu-link {
  @apply mobile-menu-link;
}

.htmobile-navigation .menu-link.current-menu-item {
  @apply active;
}

.htmobile-navigation .menu-link .icon {
  @apply mobile-menu-icon;
}

/* Responsive utilities */
@media (min-width: 768px) {
  .htmobile-aside-button {
    @apply hidden;
  }
  
  .htmobile-menu-wrap {
    @apply hidden;
  }
}

/* Animation improvements */
.htmobile-aside-button {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Touch improvements for mobile */
@media (max-width: 767px) {
  .htmobile-aside-button,
  .htmobile-aside-close,
  .mobile-menu-link {
    @apply select-none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
}