/* Mega Menu Styles */

.mega-menu-dropdown {
  @apply absolute top-full left-0 mt-2 bg-white shadow-xl border border-gray-200 rounded-lg p-6 z-50 min-w-[600px];
  @apply opacity-0 invisible pointer-events-none transform translate-y-[-10px];
  @apply transition-all duration-200 ease-in-out;
  /* Ensure proper positioning context */
  display: block;
}

.mega-menu-dropdown.active {
  @apply opacity-100 visible pointer-events-auto transform translate-y-0;
}

.mega-menu-overlay {
  @apply fixed inset-0 bg-black bg-opacity-20 z-40;
  @apply opacity-0 invisible pointer-events-none;
  @apply transition-all duration-200 ease-in-out;
}

.mega-menu-overlay.active {
  @apply opacity-100 visible pointer-events-auto;
}

/* Ensure menu items are positioned relatively for absolute positioning of dropdowns */
.menu__item--level-1 {
  @apply relative;
}

/* Also ensure all menu items with children are relatively positioned */
.menu__item--has-children {
  @apply relative;
}

/* Mega menu trigger button styles */
[data-mega-menu-trigger] {
  @apply cursor-pointer;
}

[data-mega-menu-trigger].active svg {
  @apply transform rotate-180;
}

/* Ensure proper button styling for mega menu triggers */
[data-mega-menu-trigger]:hover {
  @apply bg-gray-50;
}

[data-mega-menu-trigger]:focus {
  @apply outline-none ring-2 ring-blue-500 ring-opacity-50;
}

/* Mega menu content styling */
.mega-menu-content {
  @apply max-w-none;
}

.mega-menu-column {
  @apply space-y-2;
}

.mega-menu-column h3 {
  @apply font-semibold text-gray-800 mb-4 text-base pb-2 border-b border-gray-100;
}

.mega-menu-column a {
  @apply text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm block py-2 px-2 hover:bg-gray-50 rounded;
}