/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
	display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
	-ms-overflow-style: none;
	/* IE and Edge */
	scrollbar-width: none;
	/* Firefox */
}

/* Two Column Layout - Content Left, Sidebar Right */
.two-column-layout {
	display: flex;
	gap: 2rem;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1rem;
	min-height: 600px;
	/* Minimum height untuk alignment */
	align-items: flex-start;
	/* Align items to top */
}

.content-left {
	flex: 1;
	background: #ffffff;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	min-height: 600px;
	padding: 2rem;
}

.sidebar-right {
	width: 320px;
	flex-shrink: 0;
	background: #f8f9fa;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	min-height: 600px;
}

/* Responsive Design */
@media (max-width: 768px) {
	.two-column-layout {
		flex-direction: column;
		gap: 1rem;
		padding: 0 1rem;
		max-width: 100%;
		width: 100%;
	}

	.sidebar-right {
		width: 100%;
		min-height: auto;
		max-width: 100%;
		box-sizing: border-box;
	}

	.content-left {
		min-height: auto;
		padding: 1rem;
		width: 100%;
		max-width: 100%;
		overflow-x: hidden;
		box-sizing: border-box;
	}

	/* Ensure all children respect container width */
	.content-left>* {
		max-width: 100%;
		box-sizing: border-box;
	}
}

/* Article Cards Styling */
.article-card {
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	overflow: hidden;
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

.article-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Widget Styling */
.widget {
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 1.5rem;
	margin-bottom: 1.5rem;
}

.widget:last-child {
	margin-bottom: 0;
}

.widget h3 {
	color: #1f2937;
	font-weight: 600;
	margin-bottom: 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid #3b82f6;
}

/* Ad Widget */
.ad-widget {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	text-align: center;
	min-height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
}

/* Category Links */
.category-link {
	display: block;
	padding: 0.5rem 0;
	color: #4b5563;
	text-decoration: none;
	border-bottom: 1px solid #f3f4f6;
	transition: color 0.2s ease;
}

.category-link:hover {
	color: #3b82f6;
}

.category-link:last-child {
	border-bottom: none;
}

/* Pagination Styling */
.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	margin-top: 2rem;
}

.pagination a,
.pagination span {
	padding: 0.5rem 0.75rem;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	text-decoration: none;
	color: #374151;
	transition: all 0.2s;
}

.pagination a:hover {
	background-color: #f3f4f6;
	color: #1f2937;
}

.pagination .current {
	background-color: #2563eb;
	color: white;
	border-color: #2563eb;
}

/* Section Title Border - 20% Red, 80% Blue */
.section-title-border {
	position: relative;
	padding-bottom: 0.75rem;
	margin-bottom: 1.5rem;
}

.section-title-border::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: linear-gradient(to right, #ef4444 20%, #3b82f6 20%);
	border-radius: 2px;
}

/* Variant untuk teks putih di background gelap */
.text-white.section-title-border::after {
	background: linear-gradient(to right, #fca5a5 20%, #93c5fd 20%);
}

/* WordPress Pagination List Styling */
.page-numbers {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.page-numbers li {
	list-style: none;
}

.page-numbers a,
.page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 0.75rem;
	min-width: 2.5rem;
	height: 2.5rem;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	text-decoration: none;
	color: #374151;
	font-size: 0.875rem;
	font-weight: 500;
	transition: all 0.2s ease-in-out;
	background-color: white;
}

.page-numbers a:hover {
	background-color: #f3f4f6;
	color: #1f2937;
	border-color: #d1d5db;
}

.page-numbers .current {
	background-color: #2563eb;
	color: white;
	border-color: #2563eb;
}

.page-numbers .prev,
.page-numbers .next {
	padding: 0.5rem 1rem;
	min-width: auto;
}

.page-numbers .dots {
	border: none;
	background: none;
	color: #9ca3af;
	cursor: default;
}

.page-numbers .dots:hover {
	background: none;
	color: #9ca3af;
	border: none;
}

/* =========================================================================
   DARK MODE OVERRIDES
   Maps Tailwind utility classes to dark mode equivalent properties
   when the <html> element has the .dark class (toggled via JS).
========================================================================= */

/* Base Background and Text */
html.dark body {
	background-color: #111827;
	/* bg-gray-900 */
	color: #e5e7eb;
	/* text-gray-200 */
}

/* Background Color Overrides */
html.dark .bg-white {
	background-color: #1f2937 !important;
	/* bg-gray-800 */
}

html.dark .bg-gray-50,
html.dark .bg-gray-100 {
	background-color: #111827 !important;
	/* bg-gray-900 */
}

html.dark .bg-gray-200 {
	background-color: #374151 !important;
	/* bg-gray-700 */
}

html.dark .hover\:bg-gray-50:hover,
html.dark .hover\:bg-gray-100:hover {
	background-color: #374151 !important;
	/* hover:bg-gray-700 */
}

html.dark .hover\:bg-gray-200:hover {
	background-color: #4b5563 !important;
	/* hover:bg-gray-600 */
}

/* Text Color Overrides */
html.dark .text-gray-900,
html.dark .text-gray-800 {
	color: #f3f4f6 !important;
	/* text-gray-100 */
}

html.dark .text-gray-700,
html.dark .text-gray-600 {
	color: #d1d5db !important;
	/* text-gray-300 */
}

html.dark .text-gray-500 {
	color: #9ca3af !important;
	/* text-gray-400 */
}

/* Border Color Overrides */
html.dark .border-gray-200,
html.dark .border-gray-300 {
	border-color: #374151 !important;
	/* border-gray-700 */
}

html.dark .border-gray-100 {
	border-color: #4b5563 !important;
	/* border-gray-600 */
}

/* Specific Element Overrides for Dark Mode */
html.dark .article-card,
html.dark .widget,
html.dark .category-card,
html.dark .editor-card {
	background-color: #1f2937 !important;
	border-color: #374151 !important;
}

html.dark .widget h3 {
	color: #f3f4f6 !important;
}

html.dark .category-link {
	color: #d1d5db !important;
	border-color: #374151 !important;
}

html.dark .sidebar-right,
html.dark .content-left,
html.dark .trending-tags {
	background-color: #111827 !important;
	border-color: #374151 !important;
}

/* Inputs / Search */
html.dark input[type="search"],
html.dark select,
html.dark input[type="text"],
html.dark input[type="email"],
html.dark textarea {
	background-color: #374151 !important;
	color: #f3f4f6 !important;
	border-color: #4b5563 !important;
}

html.dark input[type="search"]::placeholder,
html.dark input[type="text"]::placeholder,
html.dark textarea::placeholder {
	color: #9ca3af !important;
}

/* Pagination Overrides */
html.dark .page-numbers a,
html.dark .page-numbers span,
html.dark .pagination a,
html.dark .pagination span {
	background-color: #1f2937 !important;
	border-color: #4b5563 !important;
	color: #d1d5db !important;
}

html.dark .page-numbers a:hover,
html.dark .pagination a:hover {
	background-color: #374151 !important;
	border-color: #6b7280 !important;
	color: #f3f4f6 !important;
}

html.dark .page-numbers .current,
html.dark .pagination .current {
	background-color: #2563eb !important;
	/* Keep primary blue */
	border-color: #2563eb !important;
	color: #ffffff !important;
}

html.dark .page-numbers .dots {
	background-color: transparent !important;
	border-color: transparent !important;
}