/**
 * Mobile Menu Styles for VieOn 2025 Theme
 * Expandable/Collapsible submenu functionality
 */

/* Mobile Menu Item Styles */
.mobile-menu-item {
    @apply space-y-1;
}

/* Mobile Menu Toggle Button */
.mobile-menu-toggle {
    @apply flex-shrink-0;
    transition: all 0.3s ease;
}

.mobile-menu-toggle:hover {
    transform: scale(1.1);
}

.mobile-menu-toggle:active {
    transform: scale(0.95);
}

/* Chevron Icon Animation */
.mobile-menu-toggle[aria-expanded="true"] [data-chevron-icon] {
    transform: rotate(180deg);
}

.mobile-menu-toggle[aria-expanded="false"] [data-chevron-icon] {
    transform: rotate(0deg);
}

/* Simple Submenu Styles - Let JavaScript handle everything */
.mobile-submenu {
    /* JavaScript will handle all states */
}

/* Submenu Items */
.mobile-submenu a {
    transform: translateX(-10px);
    opacity: 0;
    transition: all 0.3s ease;
}

.mobile-submenu[aria-hidden="false"] a {
    transform: translateX(0);
    opacity: 1;
}

/* Staggered Animation for Submenu Items */
.mobile-submenu[aria-hidden="false"] a:nth-child(1) { transition-delay: 0.1s; }
.mobile-submenu[aria-hidden="false"] a:nth-child(2) { transition-delay: 0.15s; }
.mobile-submenu[aria-hidden="false"] a:nth-child(3) { transition-delay: 0.2s; }
.mobile-submenu[aria-hidden="false"] a:nth-child(4) { transition-delay: 0.25s; }
.mobile-submenu[aria-hidden="false"] a:nth-child(5) { transition-delay: 0.3s; }
.mobile-submenu[aria-hidden="false"] a:nth-child(6) { transition-delay: 0.35s; }
.mobile-submenu[aria-hidden="false"] a:nth-child(7) { transition-delay: 0.4s; }
.mobile-submenu[aria-hidden="false"] a:nth-child(8) { transition-delay: 0.45s; }

/* Focus States for Accessibility */
.mobile-menu-toggle:focus {
    @apply outline-none ring-2 ring-main ring-opacity-50;
}

.mobile-submenu a:focus {
    @apply outline-none ring-2 ring-main ring-opacity-50;
}

/* Loading State */
.mobile-menu-toggle.loading {
    @apply opacity-50 cursor-wait;
}

.mobile-menu-toggle.loading [data-chevron-icon] {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Responsive Adjustments */
@media (max-width: 640px) {
    .mobile-submenu {
        @apply ml-6;
    }
}

/* Dark Mode Enhancements */
@media (prefers-color-scheme: dark) {
    .mobile-menu-toggle {
        @apply text-gray-300;
    }

    .mobile-menu-toggle:hover {
        @apply text-white;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .mobile-menu-toggle {
        @apply border border-current;
    }

    .mobile-submenu a {
        @apply border-l-2 border-current border-opacity-30;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .mobile-menu-toggle,
    .mobile-submenu,
    .mobile-submenu a,
    [data-chevron-icon] {
        transition: none !important;
        animation: none !important;
    }

    .mobile-submenu[aria-hidden="false"] a {
        transition-delay: 0s !important;
    }
}