/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */
/* Base menu reset */
#menu-documentation-menu {
    list-style: none; 
    padding-right: 16px;
    margin: 0;
}

/* Main card containers */
#menu-documentation-menu > .menu-item {
    margin-bottom: 6px; /* Tighter spacing between main topics */
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    overflow: hidden; 
    /* The 3D outer shadow */
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

/* All clickable links */
#menu-documentation-menu a {
    display: block;
    padding: 4px 4px; /* Reduced top/bottom padding */
    text-decoration: none;
    color: #334155;
    transition: all 0.2s ease-in-out;
}

/* Parent items (Headers) - 3D Glassy Effect */
#menu-documentation-menu .menu-item-has-children > a {
    /* Gradient for the glassy surface */
    background: linear-gradient(to bottom, #f8fafc 0%, #e2e8f0 100%); 
    /* White inset shadow for the top highlight edge */
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
    font-weight: 600;
    position: relative;
    padding-left: 34px; /* Make room for the left triangle */
    text-shadow: 0 1px 0 rgba(255,255,255,0.7); /* Subtle text pop */
}

/* Hover state for parent items */
#menu-documentation-menu .menu-item-has-children > a:hover {
    background: linear-gradient(to bottom, #ffffff 0%, #e2e8f0 100%);
    color: #2563eb; 
}

/* FORCE HIDE the old +/- indicators */
#menu-documentation-menu .menu-item-has-children > a::after {
    display: none !important;
}

/* The Solid Triangle (Right-pointing default) */
#menu-documentation-menu .menu-item-has-children > a::before {
    content: '\25B6'; /* Unicode for ▶ */
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: #64748b;
    transition: transform 0.2s ease; /* Smooth rotation */
}

/* The Solid Triangle (Down-pointing when expanded) */
#menu-documentation-menu .menu-item-has-children.expanded > a::before {
    content: '\25BC'; /* Unicode for ▼ */
    color: #2563eb; /* Optional: turns blue when open */
}

/* Sub-menus (The drawer that slides down) */
#menu-documentation-menu .sub-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #ffffff;
    border-top: 1px solid #cbd5e1;
    /* Inner shadow to make it look like it sits 'underneath' the 3D header */
    box-shadow: inset 0 3px 5px rgba(0,0,0,0.04); 
}

/* Indent child links */
#menu-documentation-menu .sub-menu .menu-item a {
    padding: 4px 8px 4px 34px; /* Reduced padding here too */
	margin-top: 4px;
	margin-bottom: 4px;
    font-size: 0.95em;
    border-bottom: 1px solid #f1f5f9;
}

#menu-documentation-menu .sub-menu .menu-item:last-child a {
    border-bottom: none;
}

/* Make those nested headers stand out slightly */
#menu-documentation-menu .sub-menu .menu-item-has-children > a {
    font-weight: 600;
    background-color: #f8fafc;
    border-top: 1px solid #f1f5f9;
}


/* Visually highlight the page the user is currently viewing */
#menu-documentation-menu .current-menu-item > a {
    color: #2563eb;
    font-weight: 600;
    background-color: #eff6ff;
    border-left: 4px solid #2563eb;
}