/* Special styles for Themes Page */
.themes-hero {
	background: linear-gradient(
		135deg,
		var(--serene-blue) 0%,
		var(--deep-blue) 30%
	);
	color: white;
	padding: 3rem 2rem;
	border-radius: 15px;
	margin: 2rem 0;
	text-align: center;
}
.themes-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 2rem;
	margin: 3rem 0;
}
.theme-card {
	background: white;
	padding: 2rem;
	border-radius: 15px;
	text-align: center;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	cursor: pointer;
	border: 2px solid transparent;
}
.theme-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}
.theme-icon {
	font-size: 3.5rem;
	margin-bottom: 1rem;
}
.theme-card h3 {
	color: var(--deep-blue);
	margin-bottom: 1rem;
}
.theme-card p {
	color: var(--soft-gray);
	line-height: 1.6;
}
.theme-cta {
	display: inline-block;
	margin-top: 1rem;
	padding: 0.8rem 1.5rem;
	background: var(--earth-brown);
	color: white;
	text-decoration: none;
	border-radius: 25px;
	transition: all 0.3s ease;
}
.theme-cta:hover {
	background: var(--deep-blue);
	transform: scale(1.05);
}

/* Color coding for each theme */
.hope-card {
	border-color: #4ecdc4;
}
.hope-card:hover {
	border-color: #4ecdc4;
	background: #f0fdfa;
}

.peace-card {
	border-color: #45b7d1;
}
.peace-card:hover {
	border-color: #45b7d1;
	background: #f0f9ff;
}

.forgiveness-card {
	border-color: #96ceb4;
}
.forgiveness-card:hover {
	border-color: #96ceb4;
	background: #f0fdf4;
}

.wisdom-card {
	border-color: #ffeaa7;
}
.wisdom-card:hover {
	border-color: #ffeaa7;
	background: #fffdf0;
}

.gratitude-card {
	border-color: #ff9f89;
}
.gratitude-card:hover {
	border-color: #ff9f89;
	background: #fff5f0;
}

.love-card {
	border-color: #ff6b6b;
}
.love-card:hover {
	border-color: #ff6b6b;
	background: #fff0f0;
}

.prayer-card {
	border-color: #a78bfa;
}
.prayer-card:hover {
	border-color: #a78bfa;
	background: #faf5ff;
}

.archive-card {
	border-color: #94a3b8;
}
.archive-card:hover {
	border-color: #94a3b8;
	background: #f8fafc;
}
