/* ==========================================================================
   Elementor Nav Menu - Gradient Underline to Box (Bottom to Top)
   ========================================================================== */

/* 1. Setup the link container */
.elementor-nav-menu a {
    position: relative !important;
    display: inline-block !important; /* CRITICAL: Prevents Elementor flexbox from breaking the height animation */
    z-index: 1 !important;
    padding: 10px 24px !important;
    transition: color 0.3s ease !important;
    background: transparent !important; 
}

/* 2. The full-width underline */
.elementor-nav-menu a::before {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    
    /* Start as a full-width underline */
    width: 100% !important;
    height: 3px !important; 
    
    /* THE GRADIENT */
    background: linear-gradient(90deg, #ff8a00, #e52e71, #8e2de2) !important;
    background-size: 200% auto !important; 
    
    border-radius: 30px !important;
    transition: all 0.4s cubic-bezier(0.86, 0, 0.07, 1) !important;
    z-index: -1 !important;
    
    box-shadow: 0 0 10px rgba(229, 46, 113, 0.3) !important; 
}

/* 3. The hover state: Grow UPWARDS into a full box */
.elementor-nav-menu a:hover::before {
    /* The width is already 100%, we only expand the height */
    height: 100% !important; 
    
    background-position: right center !important; 
    box-shadow: 0 4px 15px rgba(229, 46, 113, 0.5) !important; 
}

/* 4. Change the text color so it's readable against the gradient */
.elementor-nav-menu a:hover {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.2) !important; 
}