/* Base Styles */
main-one-article-body {
	margin: 0;
	font-family: Arial, sans-serif;
	background-color: #121212;
	color: #ffffff;
	padding: 10px;
}

/* Sidebar */
.sidebar-article-container {
	max-width: 980px;
	margin: 0 auto;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.sidebar {
	flex: 0 0 250px;
	background-color: #2a2a2a;
	border-radius: 8px;
	padding: 10px;
	box-sizing: border-box;
	color: #ffffff;
	min-height: 437px;
	margin-top: 10px;
}

/* Possibly not working look more into it */
.sidebar-text {
	margin: 0;
	margin-top: 2.5px;
	margin-left: 15px;
	font-size: 0.8em;
	color: rgb(107, 145, 250);
}


/* Post */
.article-post {
	flex: 1;
	min-width: 0;
	background-color: #2a2a2a;
	border-radius: 8px;
	padding: 8px;
	box-sizing: border-box;
	margin-top: 10px;
}

.article-post-info {
	display: flex;
	flex-direction: column;
	justify-content: start;
	gap: 5px;
	padding: 5px;
	flex-grow: 1;
}

.article-post-title {
	font-weight: bold;
	font-size: 1.5em;
	color: #ffffff;
}

.article-post-date-cat-tag-row {
	display: flex;
	gap: .2rem; /* Adds spacing between items */
	flex-wrap: wrap; /* Optional: allows wrapping on smaller screens */
	align-items: center;
}

.article-post-date-cat-tag span {
	white-space: nowrap; /* Prevents line breaks inside spans */
}

.article-post-date {
	margin: 0;
	margin-top: 2.5px;
	font-size: 0.8rem;
	color: rgb(107, 250, 119);
}

.article-post-readtime {
	margin: 0;
	margin-top: 2.5px;
	font-size: 0.8rem;
	color: rgb(107, 250, 119);
}


.article-post-author {
	font-size: 0.8rem;
	color: #ffffff;
}

.article-post-author-name {
	font-size: 0.8rem;
	color: rgb(107, 250, 119);
}

.article-post-category {
	margin: 0;
	margin-top: 2.5px;
	font-size: 0.8rem;
	color: rgb(107, 145, 250);
}

.article-posted-tag {
	font-size: 0.8rem;
	text-decoration: none;
	color: rgb(229, 116, 46);
}

	.article-posted-tag a:link {
		color: rgb(229, 116, 46);
		font-size: 0.8rem;
	}

	.article-posted-tag a:visited {
		color: rgb(229, 116, 46);
		font-size: 0.8rem;
	}

	.article-posted-tag a:hover {
		color: orange;
		font-size: 0.8rem;
	}

	.article-posted-tag a:active {
		color: rgb(229, 116, 46);
		font-size: 0.8rem;
	}

	.article-post-date strong,
	.article-post-readtime strong,
	.article-post-category strong,
	.article-posted-tag strong {
		color: #ffffff;
		font-weight: bold;
	}


.article-post-text-hr {
	margin: 0;
	margin-top: 2px;
	height: 2px; /* or whatever thickness you want */
	background-color: rgb(136, 136, 136);
	border: none;
}

.article-post-text {
	margin: 0;
	margin-top: 4px;
	font-size: 0.9em;
	color: #ccc;
}

/* currently not in use */
.article-post-img {
	width: 70%;
	height: 100%;
	border-radius: 4px;
	margin: 0 auto;
	margin-bottom: 5px;
}



/* Responsive behavior */
@media (max-width: 620px) {
	.sidebar-article-container {
		flex-direction: column;
	}

	.article-post {
		min-width: 290px;
	}

	.sidebar {
		flex: 1 0 300px;
		background-color: #2a2a2a;
		border-radius: 8px;
		padding: 10px;
		box-sizing: border-box;
	}
}


/* Bottom Category, Tag and Pages Panels */

.container-banner {
	max-width: 980px;
	margin: 0 auto;
	margin-top: 20px;
}

.bottom-cats-tags-pages-container {
	max-width: 980px;
	margin: 0 auto;
	padding-bottom: 10px;
}

.bottom-cats-tags-pages-banner {
	margin-top: -10px; /* Add spacing above */
	margin-bottom: 10px;
	height: 20px;
	background-color: #2a2a2a;
	border-radius: 7px;
	border-width: 1px;
	border-color: #323232;
	border-style: groove;
}

.bottom-ctp {
	display: flex;
	flex-wrap: wrap;
	flex: 1;
	gap: 10px;
	margin-top: 10px;
}

.bottom-ctp-panel {
	display: flex;
	flex-direction: column;
	flex: 1 1 300px;
	background-color: #2a2a2a;
	color: #ffffff;
	padding: 10px;
	border-radius: 8px;
	overflow: hidden;
}

.box-title {
	color: #ffffff;
	text-align: center;
	padding-bottom: 5px;
	font-weight: bold;
}

.cat-listing {
	padding-left: 5px;
	padding-right: 5px;
	font-size: .8em;
	margin-bottom: -2px;
}

.tag-listing {
	padding-left: 5px;
	padding-right: 5px;
	font-size: .8em;
}

.page-listing {
	padding-left: 5px;
	font-size: .8em;
}