/*
Theme Name: Million Paths Foundation
Theme URI: https://www.cemstudios.com/
Template: hello-elementor
Author: Elementor Team
Author URI: https://www.cemstudios.com/
Description: MillionPaths Child is a custom child theme built on the Hello Elementor framework, designed specifically for the MillionPaths Foundation website. It integrates lightweight performance with a mission-driven design, supporting dynamic content, responsive layouts, and user-friendly customization to showcase social impact, development goals, and community outreach projects.
Tags: non-profit, foundation, charity, elementor, child-theme, responsive-layout, accessibility-ready, custom-logo, featured-images, social-impact, development-goals, clean-design, lightweight, translation-ready, flexible-header, custom-colors, custom-menu
Version: 1.0.0.1749275934
Updated: 2025-06-07 05:58:54

*/

/*--------------------------------------------------------------
# Overlay Pseudo Elements
--------------------------------------------------------------*/
.overlay-before::before, .overlay-after::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
@media (min-width: 768px) {
	.nav-contact {
		display: none !important;
	}
}
.wpr-sub-menu {
	right: -15px;
	text-align: right !important;
}
/*--------------------------------------------------------------
# Blaze - Button
--------------------------------------------------------------*/
.elementor-button {
	background-color: var(--e-global-color-primary) !important;
	color: var(--e-global-color-2e22a0c) !important;
	fill: var(--e-global-color-2e22a0c) !important;
	border-color: var(--e-global-color-primary) !important;
	transition: background-color 0.5s ease, border-color 0.5s ease !important;
}
.elementor-button:hover {
	background-color: var(--e-global-color-dcd920c) !important;
	color: var(--e-global-color-2e22a0c) !important;
	fill: var(--e-global-color-2e22a0c) !important;
	border-color: var(--e-global-color-dcd920c) !important;
}
.elementor-button:active {
	background-color: var(--e-global-color-e466b8e) !important;
	color: var(--e-global-color-2e22a0c) !important;
	fill: var(--e-global-color-2e22a0c) !important;
	border-color: var(--e-global-color-e466b8e) !important;
}
.elementor-button-icon {
	display: flex;
}

/*--------------------------------------------------------------
# Shadow - Button
--------------------------------------------------------------*/
.custom-btn-shadow .elementor-button {
	background-color: var(--e-global-color-5f677a6) !important;
	color: var(--e-global-color-2e22a0c) !important;
	fill: var(--e-global-color-2e22a0c) !important;
	border-color: var(--e-global-color-5f677a6) !important;
	transition: background-color 0.5s ease, border-color 0.5s ease !important;
}
.custom-btn-shadow .elementor-button:hover {
	background-color: var(--e-global-color-dd0471c) !important;
	color: var(--e-global-color-2e22a0c) !important;
	fill: var(--e-global-color-2e22a0c) !important;
	border-color: var(--e-global-color-dd0471c) !important;
}
.custom-btn-shadow .elementor-button:active {
	background-color: var(--e-global-color-3c4a131) !important;
	color: var(--e-global-color-2e22a0c) !important;
	fill: var(--e-global-color-2e22a0c) !important;
	border-color: var(--e-global-color-3c4a131) !important;
}

/*--------------------------------------------------------------
# Ghost - Button
--------------------------------------------------------------*/
.custom-btn-ghost .elementor-button {
	background-color: var(--e-global-color-2e22a0c) !important;
	color: var(--e-global-color-5f677a6) !important;
	fill: var(--e-global-color-5f677a6) !important;
	border-color: var(--e-global-color-2e22a0c) !important;
	transition: background-color 0.5s ease, border-color 0.5s ease !important;
}
.custom-btn-ghost .elementor-button:hover {
	background-color: var(--e-global-color-3849acf) !important;
	color: var(--e-global-color-5f677a6) !important;
	fill: var(--e-global-color-5f677a6) !important;
	border-color: var(--e-global-color-3849acf) !important;
}
.custom-btn-ghost .elementor-button:active {
	background-color: var(--e-global-color-0a54fbd) !important;
	color: var(--e-global-color-5f677a6) !important;
	fill: var(--e-global-color-5f677a6) !important;
	border-color: var(--e-global-color-0a54fbd) !important;
}

/*--------------------------------------------------------------
# Strategy Box
--------------------------------------------------------------*/
.strategy-box {
	display: flex;
	padding: 24px 24px 40px 24px;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	align-self: stretch;

	border-radius: 16px;
	border: 1px solid var(--e-global-color-2e22a0c);
	background: rgba(255, 255, 255, 0.60);
}

/*--------------------------------------------------------------
# Object Box
--------------------------------------------------------------*/
.object-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	align-self: stretch;
	
	border-radius: 8px;
	box-shadow: 0px 12px 28px 0px rgba(0, 0, 0, 0.15);
}

.object-box .content {
	display: flex;
	height: 100%;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	align-self: stretch;
	padding: 24px 24px 40px 24px;
	border-radius: 0px 0px 8px 8px;
	background: linear-gradient(180deg, rgba(0, 1, 4, 0.00) 0%, rgba(0, 1, 4, 0.62) 20%, rgba(0, 1, 4, 0.90) 62.4%, rgba(0, 1, 4, 0.90) 100%);
}

@media (max-width: 767px) {
	.object-box .content {
		height: auto;
		padding: 16px 16px 32px 16px;
	}
}

/*--------------------------------------------------------------
# Post Archive
--------------------------------------------------------------*/
.loading-posts {
	text-align: center;
	padding: 20px;
	font-style: italic;
	color: #666;
}
.tag-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 20px;
	justify-content: center;
}
/*
.tag-filter {

}
.tag-filter:hover {

}
*/
.tag-filter.active {
	background-color: var(--e-global-color-e466b8e) !important;
	color: var(--e-global-color-2e22a0c) !important;
	fill: var(--e-global-color-2e22a0c) !important;
	border-color: var(--e-global-color-e466b8e) !important;
}

.custom-archive-posts {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

/* Individual Post Item */
.archive-post-item {
	width: calc(33.33% - 10px);
}

.post-inner {
	display: flex;
	flex-direction: column;
	gap: 17px;
	align-items: flex-start;
}

.post-thumbnail-container {
	width: 100%;
	border-radius: 8px;
	position: relative;
	overflow: hidden;
	aspect-ratio: 16/9;
}
.post-thumbnail-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	transition: transform 0.5s ease;
}
.post-thumbnail-link:hover .post-thumbnail-background {
	transform: scale(1.08);
}

.post-thumbnail-link {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-indent: -9999px;
}

.archive-post-item:hover .post-thumbnail img {
	transform: scale(1.03);
}

.post-content {

}

.post-title {
	margin-bottom: 9px;
}

.post-title a {
	color: var( --e-global-color-57cd6c4 ) !important;
	text-decoration: none;
	transition: color 0.2s;
}

.post-title:hover a {
	color: var( --e-global-color-text ) !important;
}

.post-title a:hover {
	color: #0073aa;
}

.post-meta {
	color: #666;
	font-size: 0.9rem;
	margin-bottom: 8px;
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

.post-meta a {
	color: #555;
	text-decoration: none;
	transition: color 0.2s;
}

.post-meta a:hover {
	color: #d54e21;
	text-decoration: underline;
}

.post-excerpt {
	margin-bottom: 8px;
}

.read-more {
	display: flex;
	gap: 8px;
	align-items: center;
}

/* Pagination */
.pagination {
	margin-top: 3rem;
	text-align: center;
}

/* Tablet: 1024px to 768px */
@media (max-width: 1024px) and (min-width: 768px) {
	.archive-post-item {
		width: calc(50% - 12px);
	}
}

/* Mobile: 767px and below */
@media (max-width: 767px) {
	.archive-post-item {
		width: 100%;
	}
	.post-inner {
		flex-direction: column;
	}
	
	.post-thumbnail {
		flex: 0 0 100%;
		width: 100%;
	}
}

/*--------------------------------------------------------------
# Popup Styles
--------------------------------------------------------------*/
.popup-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	justify-content: center;
	align-items: center;
	animation: fadeInUp 0.3s ease-out forwards;
	z-index: 10000;
}
.popup-content {
	background: white;
	padding: 20px;
	border-radius: 12px;
	max-height: 90vh;
	overflow-y: auto;
}
.popup-close {
	color: var(--wp--preset--color--vivid-red);
	font-size: 30px;
	cursor: pointer;
}
.popup-close:hover {
	color: var(--e-global-color-099b52f);
}

@media (min-width: 1367px) {
	.popup-content {
		width: 60%;
	}
}

@media (max-width: 1366px) and (min-width: 1025px) {
	.popup-content {
		width: 70%;
	}
}

@media (max-width: 1024px) and (min-width: 768px) {
	.popup-content {
		width: 90%;
	}
}

@media (max-width: 767px) {
	.popup-content {
		width: 90%;
	}
}

/* Entrance Animation */
@keyframes fadeInUp {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}