/* =================================================
   APEX DEVELOPER — MAIN STYLES (BASE)
   ================================================= */

/* ---------- CSS Variables ---------- */
:root {
	--apex-primary: #0f172a;
	--apex-primary-dark: #020617;
	--apex-primary-hover: #1e293b;
	--apex-accent: #3b82f6;
	--apex-accent-hover: #2563eb;
	--apex-accent-light: rgba(59, 130, 246, 0.1);
	--apex-bg: #f8fafc;
	--apex-bg-hero: linear-gradient(135deg, #e0e7ff 0%, #f5f3ff 50%, #fce7f3 100%);
	--apex-bg-bundle: linear-gradient(135deg, #e0e7ff 0%, #ddd6fe 100%);
	--apex-text: #1e293b;
	--apex-text-light: #64748b;
	--apex-border: #e2e8f0;
	--apex-border-light: #f1f5f9;
	--apex-white: #ffffff;
	--apex-yellow: #fbbf24;
	--apex-success: #10b981;
	--apex-danger: #ef4444;
	--apex-radius: 12px;
	--apex-radius-sm: 8px;
	--apex-radius-lg: 16px;
	--apex-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
	--apex-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	--apex-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.1);
	--apex-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.12);
	--apex-font-display: 'Poppins', system-ui, -apple-system, sans-serif;
	--apex-font-body: 'Inter', system-ui, -apple-system, sans-serif;
	--apex-transition: all 0.25s ease;
}

/* ---------- Global Overrides ---------- */
body.apex-child-theme {
	font-family: var(--apex-font-body);
	color: var(--apex-text);
	background: var(--apex-white);
	line-height: 1.5;
	margin: 0;
	padding: 0;
}

body.apex-child-theme * {
	box-sizing: border-box;
}

body.apex-child-theme h1,
body.apex-child-theme h2,
body.apex-child-theme h3,
body.apex-child-theme h4,
body.apex-child-theme h5,
body.apex-child-theme h6 {
	font-family: var(--apex-font-display);
	color: var(--apex-primary);
	letter-spacing: -0.01em;
}

body.apex-child-theme a {
	color: var(--apex-accent);
	text-decoration: none;
	transition: var(--apex-transition);
}

body.apex-child-theme a:hover {
	color: var(--apex-accent-hover);
}

body.apex-child-theme img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Container */
.apex-container {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 20px;
	width: 100%;
}

/* ---------- Buttons ---------- */
.apex-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	font-size: 15px;
	font-weight: 600;
	border-radius: var(--apex-radius-sm);
	transition: var(--apex-transition);
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
	font-family: var(--apex-font-body);
	line-height: 1;
}

.apex-btn-primary {
	background: var(--apex-primary);
	color: var(--apex-white) !important;
}

.apex-btn-primary:hover {
	background: var(--apex-primary-hover);
	color: var(--apex-white) !important;
	transform: translateY(-2px);
	box-shadow: var(--apex-shadow-lg);
}

.apex-btn-secondary {
	background: var(--apex-white);
	color: var(--apex-primary) !important;
	border-color: var(--apex-border);
}

.apex-btn-secondary:hover {
	border-color: var(--apex-primary);
	color: var(--apex-primary) !important;
	transform: translateY(-2px);
}

/* ---------- Section Title ---------- */
.apex-section-title {
	font-family: var(--apex-font-display);
	font-size: 32px;
	font-weight: 700;
	color: var(--apex-primary);
	text-align: center;
	margin: 0 0 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	letter-spacing: -0.01em;
}

.apex-title-line {
	display: inline-block;
	width: 60px;
	height: 1px;
	background: var(--apex-border);
}

/* ---------- Scroll to top button ---------- */
.apex-scroll-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--apex-primary);
	color: var(--apex-white);
	border: none;
	cursor: pointer;
	z-index: 99;
	display: none;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	box-shadow: var(--apex-shadow-lg);
	transition: var(--apex-transition);
}

.apex-scroll-top.apex-visible {
	display: flex;
}

.apex-scroll-top:hover {
	background: var(--apex-accent);
	transform: translateY(-3px);
}

/* ---------- No items message ---------- */
.apex-no-items {
	grid-column: 1 / -1;
	text-align: center;
	color: var(--apex-text-light);
	padding: 40px;
	background: var(--apex-bg);
	border-radius: var(--apex-radius);
	font-size: 14px;
}

/* ---------- Main content wrapper ---------- */
.apex-main {
	min-height: 50vh;
}

/* ---------- Page / Article ---------- */
.apex-page-main,
.apex-single-main {
	padding: 50px 0 70px;
	background: var(--apex-bg);
}

.apex-page-content {
	max-width: 900px;
	margin: 0 auto;
	background: var(--apex-white);
	padding: 40px;
	border-radius: var(--apex-radius);
	border: 1px solid var(--apex-border);
}

.apex-page-header {
	margin-bottom: 30px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--apex-border);
}

.apex-page-title {
	font-family: var(--apex-font-display);
	font-size: 32px;
	font-weight: 700;
	color: var(--apex-primary);
	margin: 0 0 10px;
	letter-spacing: -0.01em;
}

.apex-post-meta {
	display: flex;
	gap: 20px;
	color: var(--apex-text-light);
	font-size: 14px;
}

.apex-post-meta i {
	margin-right: 6px;
	color: var(--apex-accent);
}

.apex-post-thumbnail {
	margin: -40px -40px 30px;
	overflow: hidden;
}

.apex-post-thumbnail img {
	width: 100%;
	height: auto;
	display: block;
}

.apex-page-body {
	color: var(--apex-text);
	line-height: 1.7;
	font-size: 16px;
}

.apex-page-body h2 {
	font-size: 24px;
	margin: 30px 0 14px;
}

.apex-page-body h3 {
	font-size: 20px;
	margin: 24px 0 12px;
}

.apex-page-body p {
	margin-bottom: 18px;
}

.apex-page-body ul,
.apex-page-body ol {
	margin-bottom: 18px;
	padding-left: 24px;
}

.apex-page-body li {
	margin-bottom: 8px;
}

.apex-article {
	margin-bottom: 30px;
	background: var(--apex-white);
	padding: 24px;
	border-radius: var(--apex-radius);
	border: 1px solid var(--apex-border);
}

.apex-article-title a {
	color: var(--apex-primary);
	text-decoration: none;
}

.apex-article-title a:hover {
	color: var(--apex-accent);
}

@media (max-width: 768px) {
	.apex-page-content {
		padding: 24px;
	}
	.apex-page-title {
		font-size: 24px;
	}
	.apex-post-thumbnail {
		margin: -24px -24px 20px;
	}
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
	.apex-section-title {
		font-size: 24px;
		margin-bottom: 30px;
	}
	.apex-title-line {
		width: 30px;
	}
	.apex-btn {
		padding: 12px 22px;
		font-size: 14px;
	}
}