/* Mobile Navigation Fixes for Clickable Links */

.mobile-nav-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    gap: 7px;
}

.mobile-dropdown-toggle {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    height: 100%;
    width: -webkit-fill-available;
    justify-content: flex-start;
}

.mobile-dropdown-toggle:hover {
    color: var(--accent-color);
    background: transparent;
}

.mobile-dropdown-toggle:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* Update existing mobile nav styles */
.mobile-nav-link {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    padding: 15px 0;
    font-size: 16px;
    transition: all 0.3s ease;
    text-wrap: nowrap;
}

.mobile-dropdown-link {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 12px 0;
    font-size: 15px;
    text-wrap-mode: nowrap;
}

.btns-group {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

/* Ensure proper styling for mobile dropdowns */
.mobile-dropdown-item.has-children {
    padding: 0;
    display: flex;
    flex-direction: column;
}

.mobile-dropdown-item.has-children .mobile-nav-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Remove the data-toggle functionality styling since we're using buttons now */
.mobile-nav-link:not([data-toggle]),
.mobile-dropdown-link:not([data-toggle]) {
    cursor: pointer;
}

.mobile-nav-link:not([data-toggle]):hover,
.mobile-dropdown-link:not([data-toggle]):hover {
    color: var(--accent-color);
    text-decoration: none;
}

.mobile-dropdown-toggle.active .mobile-dropdown-icon,
.mobile-dropdown-toggle.active .mobile-child-icon {
    transform: rotate(180deg);
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .mobile-nav-header {
        min-height: 44px;
    }

    .mobile-dropdown-toggle {
        min-width: 40px;
    }
}

@media (max-width: 768px) {
    .mobile-nav-header {
        min-height: 44px;
    }
}