/* Force vertical display of dropdown menu items */
nav ul.submenu,
nav .submenu,
nav ul.submenu {
    display: none !important; /* Hidden by default */
    overflow: hidden !important; /* Prevent content from overflowing */
}

/* When displayed, use block not flex */
nav ul li.has-children:hover > ul.submenu,
nav ul li.has-children.open > ul.submenu {
    display: block !important;
    flex: none !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
    box-sizing: border-box !important;
    width: auto !important;
}

/* Complete reset of flex on main nav */
nav > ul {
    display: flex;
}

/* Complete reset of flex on submenus */
nav > ul > ul,
nav ul ul,
nav .submenu {
    display: none;
    flex: none !important;
    flex-direction: unset !important;
}

/* Override display for all submenu list items */
nav ul.submenu li,
nav .submenu li {
    display: block !important;
    width: 100% !important;
    float: none !important;
    clear: both !important;
    box-sizing: border-box !important;
    background-color: #10131b !important; /* Match parent background */
}

/* Force block display on links */
nav ul.submenu li a,
nav .submenu li a {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    padding: 0.7rem 1rem !important;
}

/* Properly contain submenu boundaries */
nav ul.submenu {
    border: 1px solid #23293a !important;
    border-radius: 0 0 8px 8px !important;
    overflow: hidden !important;
    width: auto !important;
    box-sizing: border-box !important;
}

/* Clearer mobile view indicators for expandable menus */
@media (max-width: 700px) {
    /* Add visual indicator for expandable items */
    nav ul li.has-children > a:after {
        content: '\25BC' !important; /* Down-pointing triangle */
        margin-left: 8px !important;
        display: inline-block !important;
        font-size: 0.8em !important;
        color: #ffb347 !important; /* Highlight color */
        transition: transform 0.3s ease !important;
    }
    
    /* Rotate arrow when open */
    nav ul li.has-children.open > a:after {
        transform: rotate(180deg) !important;
    }
    
    /* Style for parent items with children */
    nav ul li.has-children > a {
        padding-right: 30px !important; /* Make space for indicator */
        background: rgba(255, 179, 71, 0.1) !important; /* Subtle highlight */
        position: relative !important;
    }
    
    /* Add button-like appearance */
    nav ul li.has-children > a:before {
        content: '';
        position: absolute !important;
        right: 8px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 20px !important;
        height: 20px !important;
        background: rgba(255, 179, 71, 0.2) !important;
        border-radius: 50% !important;
        z-index: -1 !important;
    }
}

/* Style for menu items with children */
nav ul li.has-children > a:after {
    content: '▼';
    font-size: 0.7em;
    margin-left: 6px;
    display: inline-block;
    vertical-align: middle;
    transition: transform 0.2s ease;
}

nav ul .submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: #10131b;
    border: 1px solid #23293a;
    border-radius: 0 0 8px 8px;
    padding: 0.5rem 0;
    z-index: 100;
    list-style: none;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    /* Override the flex display from parent styles */
    display: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s, transform 0.3s;
    overflow: hidden; /* Prevent content from overflowing */
}