/**
 * Need Help? Menu Item - Blue Pulse/Heartbeat Animation
 * Creates a pulsing blue effect on the "Need Help?" menu item
 *
 * Author: Claude Code
 * Date: November 5, 2025
 */

/* Water Wave/Ripple Effect - EXTREMELY Slow */
@keyframes helpWaveEffect {
    0% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
    }
    50% {
        box-shadow: 0 0 0 15px rgba(59, 130, 246, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
}

/* Icon pulse removed - icon stays static, only outline pulses */
/* Menu background removed - stays static, no pulse */

/* Apply ONLY wave animation to Need Help menu item */
.menu-item-help-pulse > .menu-link {
    position: relative;
    animation: helpWaveEffect 15s ease-in-out infinite !important;
    border-radius: 8px !important;
    background: rgba(59, 130, 246, 0.12) !important;
    will-change: box-shadow !important;
    transform: none !important;
}

/* Ultra high specificity for background - STATIC, NO PULSE */
li.menu-item.menu-item-help-pulse > a.menu-link,
li.menu-item-help-pulse > a.menu-link,
.layout-menu .menu-item.menu-item-help-pulse > .menu-link,
.menu-inner > .menu-item.menu-item-help-pulse > .menu-link,
.menu-item-help-pulse > .menu-link {
    background: rgba(59, 130, 246, 0.12) !important;
    transform: none !important;
}

/* Prevent any inherited animations on all children */
.menu-item-help-pulse > .menu-link * {
    animation: none !important;
    transform: none !important;
}

/* Icon style - NO ANIMATION, stays static blue */
.menu-item-help-pulse > .menu-link .menu-icon {
    display: inline-block;
    color: #3b82f6 !important;
    animation: none !important;
    transform: none !important;
}

/* Text color - NO ANIMATION */
.menu-item-help-pulse > .menu-link div {
    transition: none !important;
    animation: none !important;
    transform: none !important;
}

/* Enhanced hover effect */
.menu-item-help-pulse > .menu-link:hover {
    background: rgba(59, 130, 246, 0.18) !important;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.3) !important;
}

.menu-item-help-pulse > .menu-link:hover .menu-icon {
    color: #3b82f6 !important;
    transform: scale(1.15) !important;
}

.menu-item-help-pulse > .menu-link:hover div {
    color: #3b82f6 !important;
}

/* Blue glow effect when menu is open/active */
.menu-item-help-pulse.active > .menu-link,
.menu-item-help-pulse.open > .menu-link {
    background: rgba(59, 130, 246, 0.18) !important;
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.4) !important;
}

.menu-item-help-pulse.active > .menu-link .menu-icon,
.menu-item-help-pulse.open > .menu-link .menu-icon {
    color: #3b82f6 !important;
}

.menu-item-help-pulse.active > .menu-link div,
.menu-item-help-pulse.open > .menu-link div {
    color: #3b82f6 !important;
}

/* Light/Dark mode adjustments */
.layout-menu-dark .menu-item-help-pulse > .menu-link,
.layout-navbar-dark .menu-item-help-pulse > .menu-link,
[data-theme="dark"] .menu-item-help-pulse > .menu-link {
    background: rgba(59, 130, 246, 0.18) !important;
}

.layout-menu-dark li.menu-item.menu-item-help-pulse > a.menu-link,
.layout-menu-dark .menu-item-help-pulse > .menu-link,
[data-theme="dark"] li.menu-item.menu-item-help-pulse > a.menu-link,
[data-theme="dark"] .menu-item-help-pulse > .menu-link {
    background: rgba(59, 130, 246, 0.18) !important;
}

.layout-menu-dark .menu-item-help-pulse > .menu-link:hover,
[data-theme="dark"] .menu-item-help-pulse > .menu-link:hover {
    background: rgba(59, 130, 246, 0.25) !important;
}

/* Reduce animation on reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .menu-item-help-pulse > .menu-link {
        animation: none !important;
    }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .menu-item-help-pulse > .menu-link {
        animation: helpWaveEffect 18s ease-in-out infinite !important;
    }
}