/* Profile Wrapper */
#profile-wrap {
	display: flex;
	justify-content: space-between; /* Ensures there's space between the two columns */
	align-items: flex-start; /* Aligns items to the top */
	gap: 20px; /* Adds space between the columns */
}

/* User Info Section */
#profile-user-info {
	display: flex;
	flex-direction: column;
	width: 20%; /* Adjust width as needed */
	background-color: #1f2127; /* Background color for user info */
	padding: 20px;
	border-radius: 4px;
}

#profile-user-info .avatar {
	width: 150px;
	height: 150px;
	border-radius: 50%;
	margin: 0 auto 20px;

}

.profile-details h2 {
	font-size: 24px;
	color: #fff;
	margin-bottom: 0;
}

#profile-role,
#profile-joined,
#profile-location,
#profile-website {
	font-size: 14px;
	color: #9aa5b1;
	margin: 5px 0;
}

.profile-details i {
	margin-right: 5px; /* Adds space between icon and text */
}

/* User Feed Section */
#profile-user-feed {
	width: 80%; /* Adjust width as needed */
	background-color: #1f2127; /* Background color for feed */
	padding: 20px;
	border-radius: 4px;
	color: #fff;
}

#profile-user-feed h3 {
	font-size: 1.5rem;
	color: #fff;
}

/* Thread/Reply Information */
.profile-user-content li span {
	color: #a1a9b3;
	font-size: 0.85rem;
}

/* General Styling for Recent Replies */
.profile-user-content {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}

.profile-user-content:last-child {
    margin: 0;
}

.profile-user-content li {
    padding: 10px 0;
    border-bottom: 1px solid #333;
}

.profile-user-content li:last-child {
    border-bottom: none;
}

/* Flexbox Container */
.profile-user-content li {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.profile-user-content a {
    color: #89b2e4;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.profile-user-content a:hover {
    color: #fff;
}

/* Text Below Title */
.profile-user-content small,
.profile-user-content em {
    margin-top: 5px;
    font-size: 0.85rem;
    line-height: 1.4;
}

/* Date on the right side */
#profile-user-replies li::after {
    content: attr(data-time);
    color: #8997b5;
    font-size: 0.8rem;
    font-style: italic;
    align-self: flex-end; /* Ensures the date stays aligned to the right */
}

/* Styling for "Read More" link */
#profile-user-replies a.read-more {
    color: #ffa500;
    font-size: 0.85rem;
    margin-left: 5px;
}


/* Styling for "Read More" link */
#profile-user-replies a.read-more {
	color: #ffa500;
	font-size: 0.85rem;
	margin-left: 5px;
}

/* Container Styling */
.profile-section {
	margin-bottom: 2em;
}

.profile-section h3 {
	margin-bottom: 10px;
	font-size: 1.2rem;
	color: #fff;
	border-bottom: 2px solid #89b2e4;
	padding-bottom: 5px;
}


/* Responsive Design */
@media (max-width: 768px) {
	#profile-wrap {
		flex-direction: column; /* Stack columns vertically on mobile */
	}
	#profile-user-info, #profile-user-feed {
		width: 100%; /* Make both sections full width */
	}
}