/* Base Styles for All Article Types */

/* Resource Wrapper - consistent padding for resource pages */
.resourceWrapper {
	display: block;
	padding: 2em;
}

/* Unified Resource Header - Grid Layout */
.resourceHeader {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"category search"
		"title search"
		"subtitle search";
	gap: 8px 20px;
	align-items: start;
	margin-bottom: 20px;
}

.resourceHeader .rhCategory {
	grid-area: category;
}

.resourceHeader .rhCategory span {
	display: inline-block;
	padding: 6px 16px;
	border-radius: 16px;
	font-size: 0.85em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.resourceHeader .rhTitle {
	grid-area: title;
	margin: 0;
	color: #2c3e50;
	font-size: 2em;
	font-weight: 600;
}

.resourceHeader .rhSubtitle {
	grid-area: subtitle;
	margin: 0;
	color: #7f8c8d;
	font-size: 1.1em;
}

.resourceHeader .rhSearch {
	grid-area: search;
	align-self: center;
}

/* When no category, title takes full left column */
.resourceHeader:not(:has(.rhCategory)) .rhTitle {
	grid-row: 1 / 2;
}

/* When no subtitle, reduce bottom gap */
.resourceHeader:not(:has(.rhSubtitle)) {
	grid-template-areas:
		"category search"
		"title search";
}

/* Responsive: stack on mobile */
@media (max-width: 768px) {
	.resourceHeader {
		grid-template-columns: 1fr;
		grid-template-areas:
			"search"
			"category"
			"title"
			"subtitle";
		gap: 12px;
		text-align: center;
	}

	.resourceHeader .rhSearch {
		justify-self: center;
	}

	.resourceHeader .rhTitle {
		font-size: 1.6em;
	}
}

div.articleGrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
	margin: 30px 0;
}

.articleCard {
	background: white;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	transition: all 0.3s ease;
}

.articleCard:hover {
	box-shadow: 0 4px 16px rgba(0,0,0,0.15);
	transform: translateY(-4px);
}

.articleCard a {
	display: block;
	padding: 20px;
	text-decoration: none;
	color: inherit;
}

.articleCardCat {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 12px;
	font-size: 0.75em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 12px;
}

.articleCard h4 {
	color: #2c3e50;
	font-size: 1.2em;
	margin: 0 0 10px 0;
	line-height: 1.4;
}

.articleCardDesc {
	font-size: 0.9em;
	color: #666;
	line-height: 1.4;
	margin: 0;
}

.articleCardMeta {
	font-size: 0.85em;
	color: #95a5a6;
	margin-top: 10px;
}

/* Category Color Classes */
.cat-scheduler {
	background: #e3f2fd;
	color: #1976d2;
}

.cat-tasks {
	background: #f3e5f5;
	color: #7b1fa2;
}

.cat-brewery {
	background: #fff3e0;
	color: #ef6c00;
}

.cat-inventory {
	background: #e8f5e9;
	color: #2e7d32;
}

.cat-customers {
	background: #fce4ec;
	color: #c2185b;
}

.cat-kitchen {
	background: #fff9c4;
	color: #f57f17;
}

.cat-accounting {
	background: #e0f2f1;
	color: #00695c;
}

.cat-docs {
	background: #e8eaf6;
	color: #3f51b5;
}

.cat-blog {
	background: #fbe9e7;
	color: #d84315;
}

.cat-feature {
	background: #fff8e1;
	color: #ff8f00;
}

@media (max-width: 60rem) {
	.articleGrid {
		grid-template-columns: 1fr;
		gap: 15px;
	}
}

.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;
}

/* Article Badges and Dates */
.artWrapper {
	position: relative;
}

.articleBadge {
	position: absolute;
	top: 10px;
	right: 10px;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	background: #3498db;
	color: white;
	z-index: 10;
}

.articleDate {
	font-size: 12px;
	color: #666;
	margin-top: 8px;
}

/* 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;
	}
}