/**
 * Responsive Menu CSS
 * Styles for handling menu transition between main and sidebar
 */

/* Hide main menu on small viewports */
@media (max-width: 1024px) {
    .ob25-menu-container:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
        display: none !important;
    }
}

/* Show hamburger menu on small viewports */
@media (max-width: 1024px) {
    .custom-sidebar-container:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
        display: block;
    }
}

/* Hide hamburger menu on larger viewports if desired */
@media (min-width: 1024px) {
    .custom-sidebar-container.mobile-only:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
        display: none;
    }
}

/* Style for submenu items in sidebar */
.menu-items .sidebar-submenu:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
    list-style: none !important;
    margin: 0 !important;
    display: none; /* Hidden by default */
    background-color: #fff;
}

.menu-items .sidebar-submenu li:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
    border-bottom: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.menu-items .sidebar-submenu a:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
    font-size: 0.95em !important;
    padding: 10px 20px 10px 60px !important;
}

/* Indicator for items with submenus */
.menu-items a.has-submenu:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
    position: relative;
}

.menu-items a.has-submenu:not(:where([data-ob-chrome],[data-ob-chrome] *)):after {
    content: '▼';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7em;
    transition: transform 0.3s ease;
}

.menu-items a.has-submenu.open:not(:where([data-ob-chrome],[data-ob-chrome] *)):after {
    transform: translateY(-50%) rotate(180deg);
}

/* Animation adjustments for transferred menu items */
.sidebar.active .menu-items li:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
    opacity: 0;
    transform: translateX(30px);
    animation: slideInBounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

/* Use a more generic animation delay approach */
.sidebar.active .menu-items li:not(:where([data-ob-chrome],[data-ob-chrome] *)) {
    animation-delay: calc(0.1s * var(--item-index, 0));
}

/* Assign index variables to each item using JS */
/* The script will handle this dynamically, but this remains as fallback */
.sidebar.active .menu-items li:nth-child(1):not(:where([data-ob-chrome],[data-ob-chrome] *)) { --item-index: 1; }
.sidebar.active .menu-items li:nth-child(2):not(:where([data-ob-chrome],[data-ob-chrome] *)) { --item-index: 2; }
.sidebar.active .menu-items li:nth-child(3):not(:where([data-ob-chrome],[data-ob-chrome] *)) { --item-index: 3; }
.sidebar.active .menu-items li:nth-child(4):not(:where([data-ob-chrome],[data-ob-chrome] *)) { --item-index: 4; }
.sidebar.active .menu-items li:nth-child(5):not(:where([data-ob-chrome],[data-ob-chrome] *)) { --item-index: 5; }
.sidebar.active .menu-items li:nth-child(6):not(:where([data-ob-chrome],[data-ob-chrome] *)) { --item-index: 6; }
.sidebar.active .menu-items li:nth-child(7):not(:where([data-ob-chrome],[data-ob-chrome] *)) { --item-index: 7; }
.sidebar.active .menu-items li:nth-child(8):not(:where([data-ob-chrome],[data-ob-chrome] *)) { --item-index: 8; }
.sidebar.active .menu-items li:nth-child(9):not(:where([data-ob-chrome],[data-ob-chrome] *)) { --item-index: 9; }
.sidebar.active .menu-items li:nth-child(10):not(:where([data-ob-chrome],[data-ob-chrome] *)) { --item-index: 10; }