/*
 Theme Name:   Hello Elementor Child
 Description:  A child theme for Hello Elementor
 Author:       CS
 Template:     hello-elementor
 Version:      1.0.0
*/

/* Force GPU acceleration for all animated elements to reduce Main Thread work */
.elementor-invisible, 
.animated {
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* 1. Main Glass Container (Desktop Submenu + Mobile Main Dropdown) */
/* We target the mobile top-level and the desktop floating menu */
.elementor-nav-menu--main .sub-menu, 
.elementor-nav-menu--dropdown {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
    padding: 20px 10px !important;
    margin-top: 15px !important;
    overflow: hidden !important;
}

/* 2. RESET for Nested Mobile Menus (The "Expansion" fix) */
/* This prevents the 2nd level from becoming another floating glass box on mobile */
.elementor-nav-menu--dropdown .sub-menu {
    background: rgba(0, 0, 0, 0.03) !important; /* Subtle flat tint */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 12px !important;
    margin: 5px 10px !important;
    padding: 5px 0 !important;
    position: relative !important; /* Stacked, not floating */
    width: auto !important;
    top: 0 !important;
}

/* 3. Global Item Styling (Links) */
.elementor-nav-menu--dropdown a,
.elementor-nav-menu--main .sub-menu a {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    padding: 12px 20px !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    border: none !important;
}

/* 4. Indentation for Nested Mobile Links */
.elementor-nav-menu--dropdown .sub-menu a {
    padding-left: 30px !important; /* Pushes text in to show hierarchy */
    font-size: 14px !important;
    font-weight: 500 !important;
    opacity: 0.9;
}

/* 5. Hover & Active State (Signature Purple) */
.elementor-nav-menu--dropdown a:hover,
.elementor-nav-menu--dropdown a.elementor-item-active,
.elementor-nav-menu--main .sub-menu a:hover {
    background: rgba(97, 76, 225, 0.1) !important;
    color: #614CE1 !important;
}

/* 6. Arrow Styling */
.sub-arrow svg {
    width: 12px !important;
    fill: currentColor;
}