/* Feature Friday Specific Styles */

.featureArticle {
	max-width: 900px;
	margin: 0 auto;
	padding: 20px;
}

.subtitle {
	text-align: center;
	font-size: 1.2em;
	color: #7f8c8d;
	margin: -10px 0 30px 0;
}

/* Category Badge */
.featureCategoryBadge {
	text-align: center;
	margin: 20px 0;
}

.featureCategoryBadge span {
	display: inline-block;
	padding: 8px 20px;
	border-radius: 20px;
	font-size: 0.9em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Category colors and .articleCard/.articleGrid are in public-pages.css */

/* Feature Content */
.featureContent {
	background: white;
	padding: 30px;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	margin: 20px 0;
}

.featureContent h2 {
	color: #2c3e50;
	font-size: 1.6em;
	margin-top: 25px;
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: 2px solid #ecf0f1;
}

.featureContent h2:first-of-type {
	margin-top: 0;
}

/* Category Navigation */
.categoryNav {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 30px 0;
	padding: 20px;
	background: #f8f9fa;
	border-radius: 8px;
}

.categoryNav a {
	padding: 10px 20px;
	background: white;
	color: #495057;
	text-decoration: none;
	border-radius: 20px;
	font-weight: 500;
	transition: all 0.3s ease;
	border: 2px solid transparent;
}

.categoryNav a:hover {
	background: #e9ecef;
	transform: translateY(-2px);
}

.categoryNav a.active {
	background: #007bff;
	color: white;
	border-color: #0056b3;
}

/* Related Features */
.relatedFeatures {
	margin-top: 50px;
	padding-top: 30px;
	border-top: 2px solid #ecf0f1;
}

.relatedFeatures h3 {
	text-align: center;
	color: #2c3e50;
	margin-bottom: 25px;
	font-size: 1.5em;
}

.relatedFeatures h3 i {
	color: #f39c12;
	margin-right: 10px;
}

/* Resource Page Header */
.resourcePageHeader {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 15px;
	margin-bottom: 10px;
}

.resourcePageHeader h1 {
	margin: 0;
}

/* Resource Search Bar */
.resourceSearchBar {
	display: flex;
	align-items: center;
	gap: 0;
	position: relative;
}

.resourceSearchInput {
	padding: 10px 15px;
	border: 2px solid #e0e0e0;
	border-right: none;
	border-radius: 25px 0 0 25px;
	font-size: 0.95em;
	width: 220px;
	outline: none;
	transition: border-color 0.2s ease;
}

.resourceSearchInput:focus {
	border-color: #007bff;
}

.resourceSearchBtn {
	padding: 10px 18px;
	background: #007bff;
	color: white;
	border: 2px solid #007bff;
	border-radius: 0 25px 25px 0;
	cursor: pointer;
	transition: background 0.2s ease;
}

.resourceSearchBtn:hover {
	background: #0056b3;
	border-color: #0056b3;
}

/* Search Results Dropdown */
.resourceSearchResults {
	display: none;
	background: white;
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.15);
	padding: 20px;
	margin-bottom: 30px;
}

.resourceSearchResults.active {
	display: block;
}

.searchResultsHeader {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: 1px solid #ecf0f1;
	color: #7f8c8d;
	font-size: 0.9em;
}

.searchResultsGrid {
	margin: 0;
}

.searchResultsMore {
	text-align: center;
	margin-top: 15px;
	padding-top: 15px;
	border-top: 1px solid #ecf0f1;
}

.searchResultsMore a {
	color: #007bff;
	text-decoration: none;
	font-weight: 500;
}

.searchResultsMore a:hover {
	text-decoration: underline;
}

.searchLoading,
.searchNoResults,
.searchError {
	text-align: center;
	color: #7f8c8d;
	padding: 20px;
	margin: 0;
}

.searchError {
	color: #e74c3c;
}

/* Latest Section */
.latestSection {
	margin-bottom: 40px;
}

.latestSection h2,
.categoryCardsSection h2,
.allArticlesSection h2 {
	color: #2c3e50;
	font-size: 1.6em;
	margin-bottom: 20px;
	padding-bottom: 10px;
	border-bottom: 2px solid #ecf0f1;
}

/* Category Cards Section */
.categoryCardsSection {
	margin: 40px 0;
}

.categoryCardsGrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 25px;
	margin-top: 20px;
}

.categoryCard {
	background: white;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(0,0,0,0.08);
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
}

.categoryCard:hover {
	box-shadow: 0 4px 20px rgba(0,0,0,0.12);
	transform: translateY(-2px);
}

.categoryCardHeader {
	padding: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.categoryCardHeader h3 {
	margin: 0;
	font-size: 1.3em;
	font-weight: 600;
}

.categoryCardHeader.cat-scheduler { background: #e3f2fd; color: #1976d2; }
.categoryCardHeader.cat-tasks { background: #f3e5f5; color: #7b1fa2; }
.categoryCardHeader.cat-brewery { background: #fff3e0; color: #ef6c00; }
.categoryCardHeader.cat-inventory { background: #e8f5e9; color: #2e7d32; }
.categoryCardHeader.cat-customers { background: #fce4ec; color: #c2185b; }
.categoryCardHeader.cat-kitchen { background: #fff9c4; color: #f57f17; }
.categoryCardHeader.cat-accounting { background: #e0f2f1; color: #00695c; }
.categoryCardHeader.cat-docs { background: #e8eaf6; color: #3f51b5; }
.categoryCardHeader.cat-blog { background: #fbe9e7; color: #d84315; }

.categoryCardCount {
	font-size: 0.9em;
	opacity: 0.8;
	font-weight: 500;
}

.categoryCardPreview {
	list-style: none;
	padding: 15px 20px;
	margin: 0;
	flex-grow: 1;
}

.categoryCardPreview li {
	padding: 8px 0;
	border-bottom: 1px solid #f0f0f0;
}

.categoryCardPreview li:last-child {
	border-bottom: none;
}

.categoryCardPreview a {
	color: #34495e;
	text-decoration: none;
	font-size: 0.95em;
	transition: color 0.2s ease;
	display: block;
	line-height: 1.4;
}

.categoryCardPreview a:hover {
	color: #007bff;
}

.categoryCardLink {
	display: block;
	padding: 15px 20px;
	background: #f8f9fa;
	color: #007bff;
	text-decoration: none;
	font-weight: 500;
	text-align: center;
	transition: all 0.2s ease;
	border-top: 1px solid #ecf0f1;
}

.categoryCardLink:hover {
	background: #e9ecef;
	color: #0056b3;
}

/* All Articles Section (Blog) */
.allArticlesSection {
	margin-top: 50px;
	padding-top: 30px;
	border-top: 2px solid #ecf0f1;
}

/* Back Link */
.backLink {
	margin-top: 30px;
	text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
	.featureArticle {
		padding: 10px;
	}

	.featureContent {
		padding: 20px 15px;
	}

	.resourcePageHeader {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.resourcePageHeader h1 {
		text-align: center;
	}

	.resourceSearchBar {
		width: 100%;
	}

	.resourceSearchInput {
		flex: 1;
		width: auto;
	}

	.categoryNav {
		flex-direction: column;
		align-items: stretch;
	}

	.categoryNav a {
		text-align: center;
	}

	.categoryCardsGrid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.categoryCardHeader {
		padding: 15px;
	}

	.categoryCardHeader h3 {
		font-size: 1.1em;
	}
}