/* Base Styles for All Article Types */

.backLink {
	text-align: center;
	padding: 40px 0;
}

.backLink .button {
	display: inline-block;
	padding: 12px 30px;
	background: #4CAF50;
	color: white;
	text-decoration: none;
	border-radius: 4px;
	font-weight: 500;
	transition: background 0.3s ease;
}

.backLink .button:hover {
	background: #45a049;
}

/* Article Content Formatting */

.blogContent h2,
.featureContent h2,
.docBody h2 {
	color: #2c3e50;
	margin-top: 30px;
	margin-bottom: 15px;
	font-size: 1.8em;
	font-weight: 600;
	border-bottom: 2px solid #ecf0f1;
	padding-bottom: 10px;
}

.blogContent h3,
.featureContent h3,
.docBody h3 {
	color: #34495e;
	margin-top: 25px;
	margin-bottom: 12px;
	font-size: 1.4em;
	font-weight: 600;
}

.blogContent p,
.featureContent p,
.docBody p {
	line-height: 1.8;
	margin-bottom: 15px;
	color: #4a4a4a;
}

.blogContent ul,
.blogContent ol,
.featureContent ul,
.featureContent ol,
.docBody ul,
.docBody ol {
	margin: 15px 0;
	padding-left: 30px;
}

.blogContent li,
.featureContent li,
.docBody li {
	margin-bottom: 8px;
	line-height: 1.6;
}

.blogContent strong,
.featureContent strong,
.docBody strong {
	font-weight: 600;
	color: #2c3e50;
}

.blogContent em,
.featureContent em,
.docBody em {
	font-style: italic;
}

.blogContent code,
.featureContent code,
.docBody code {
	background: #f4f4f4;
	padding: 2px 6px;
	border-radius: 3px;
	font-family: 'Courier New', monospace;
	font-size: 0.9em;
	color: #e74c3c;
}

.blogContent a,
.featureContent a,
.docBody a {
	color: #3498db;
	text-decoration: none;
	border-bottom: 1px solid #3498db;
	transition: color 0.2s ease;
}

.blogContent a:hover,
.featureContent a:hover,
.docBody a:hover {
	color: #2980b9;
	border-bottom-color: #2980b9;
}

/* Screenshot placeholders */
.blogContent strong:has-text([SCREENSHOT]),
.featureContent strong:has-text([SCREENSHOT]),
.docBody strong:has-text([SCREENSHOT]) {
	display: block;
	padding: 20px;
	background: #fff3cd;
	border: 2px dashed #ffc107;
	border-radius: 4px;
	margin: 20px 0;
	text-align: center;
	color: #856404;
}

/* Error messages */
.error {
	background: #fee;
	border: 2px solid #f88;
	padding: 20px;
	border-radius: 4px;
	color: #c33;
	text-align: center;
	margin: 40px 20px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.blogContent h2,
	.featureContent h2,
	.docBody h2 {
		font-size: 1.5em;
	}

	.blogContent h3,
	.featureContent h3,
	.docBody h3 {
		font-size: 1.2em;
	}

	.blogContent p,
	.featureContent p,
	.docBody p {
		font-size: 1em;
	}
}