/* ======================
   DARK PUBLIC THEME
====================== */
:root {
	/* THEME COLOR */
	--primary: #1e293b;
	--secondary: #334155;

	/* ARTICLE HERO */
	--theme-hero-start: #0f172a;
	--theme-hero-end: #1e293b;

	--theme-hero-text: #ffffff;
	--theme-hero-subtext: #cbd5e1;

	/* GLOBAL */
	--body-bg: #0f172a;
	--text-color: #e2e8f0;
	--card-bg: #1e293b;
}

/* ======================
   BODY
====================== */
body {
	background: var(--body-bg);
	color: var(--text-color);
}

/* ======================
   NAVBAR
====================== */
.navbar {
	background: #111827 !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.navbar-brand,
.nav-link {
	color: #fff !important;
}

.nav-link:hover {
	color: #cbd5e1 !important;
}

/* ======================
   HERO (HOME)
====================== */
.hero-section {
	background: linear-gradient(135deg, #0f172a, #1e293b) !important;
}

.hero-section h1 {
	color: #fff !important;
	font-weight: 800;
}

.hero-section p {
	color: #cbd5e1 !important;
}

/* ======================
   ARTICLE PAGE CURVE
====================== */
.content-section {
	background: var(--body-bg) !important;
}

/* ======================
   CARD
====================== */
.card,
.article-card,
.sidebar-card,
.blog-card {
	background: var(--card-bg) !important;

	border: 1px solid rgba(255, 255, 255, 0.05);

	color: #fff;

	border-radius: 20px;
}

.card:hover {
	transform: translateY(-4px);
}

/* ======================
   TEXT
====================== */
.text-muted {
	color: #94a3b8 !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: #fff;
}

p,
span,
small {
	color: #cbd5e1;
}

/* ARTICLE DETAIL */
.article-title {
	color: #fff !important;
}

.article-body {
	color: #cbd5e1 !important;
}

.article-excerpt {
	background: #111827;
	color: #cbd5e1;
	border-left: 4px solid #475569;
}

/* CATEGORY */
.article-category,
.category-badge {
	background: rgba(255, 255, 255, 0.08);

	color: #cbd5e1;
}

/* ======================
   INPUT
====================== */
input,
textarea,
.form-control {
	background: #111827 !important;

	color: #fff !important;

	border: 1px solid #334155 !important;
}

.form-control::placeholder {
	color: #94a3b8;
}

/* ======================
   BUTTON
====================== */
.btn-primary {
	background: linear-gradient(135deg, #334155, #475569) !important;

	border: none;
}

.btn-outline-primary {
	border: 1px solid #475569 !important;

	color: #cbd5e1 !important;
}

/* ======================
   LIST GROUP
====================== */
.list-group-item {
	background: transparent !important;

	border-color: rgba(255, 255, 255, 0.05) !important;
}

.list-group-item a {
	color: #cbd5e1;
}

/* ======================
   FOOTER
====================== */
.footer-modern {
	background: #111827;
	color: #fff;
}

.footer-modern h4,
.footer-modern h5 {
	color: #fff;
}

.footer-modern p,
.footer-modern small,
.footer-modern a {
	color: #cbd5e1 !important;
}
/* DARK BRAND */
.site-title {
	color: #ffffff !important;
}

.site-tagline {
	color: #94a3b8 !important;
}
/* ==========================================
   DARK MOBILE NAVBAR FIX
========================================== */

/* hamburger icon */
.navbar-toggler {
	border: none !important;
	box-shadow: none !important;
}

.navbar-toggler i {
	color: #fff !important;
	font-size: 32px;
}

/* mobile menu */
@media (max-width: 991px) {
	.navbar-collapse {
		background: #111827 !important;
		border: 1px solid #1e293b;
		border-radius: 24px;
		padding: 20px !important;
		margin-top: 20px;
		box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
	}

	/* menu text */
	.nav-link {
		color: #e2e8f0 !important;
		padding: 14px 0;
		font-weight: 600;
	}

	.nav-link:hover {
		color: #fff !important;
	}

	/* dropdown */
	.dropdown-menu {
		background: #0f172a !important;
		border: 1px solid #1e293b !important;
		border-radius: 18px;
		padding: 10px;
	}

	.dropdown-item {
		color: #e2e8f0 !important;
		border-radius: 12px;
	}

	.dropdown-item:hover {
		background: #1e293b !important;
		color: #fff !important;
	}

	/* search box */
	.search-box {
		background: #0f172a !important;
		border: 1px solid #1e293b;
	}

	.search-box input {
		color: #fff !important;
	}

	.search-box input::placeholder {
		color: #94a3b8 !important;
	}
}