/*
Theme Name: Zento Child by Xhesam
Theme URI: https://xhesam.com
Author: Amirhesam Piri
Author URI: https://xhesam.com
Description: Child theme, based on Zento
Template: zento
Version: 2.6.0
*/

/**
 * =============================================================================
 * FONTS
 * =============================================================================
 */

/* Import IranSans font family */
@import url("IranSans/css/fontiran.css");

/* Force IranSans globally with high specificity */
html,
body,
button,
input,
select,
textarea {
	font-family: "IranSans", "IRANSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: inherit !important;
}

/* Improve icon safety */
svg,
svg * {
	font-family: initial !important;
}

/**
 * =============================================================================
 * LAYOUT FIXES
 * =============================================================================
 */

/* Neutralize margin-left: -26px effects on decoration elements */
#footer #single #comments.hosted .comment .bordered.comment-author svg.decoration,
#footer .title.bordered svg.decoration,
#footer .wpcf7 label.bordered svg.decoration,
#single #comments.hosted .comment #footer .bordered.comment-author svg.decoration,
.wpcf7 #footer label.bordered svg.decoration {
	margin-left: 0 !important;
}

/**
 * =============================================================================
 * NEWSLETTER SUBSCRIPTION FORM
 * =============================================================================
 */

.epcl_subscribe_form {
	position: relative;
	overflow: visible;
}

/* Newsletter Form Layout Fix - High Specificity Overrides */
.widget_epcl_subscribe_form .subscribe-form,
.epcl_subscribe_form .subscribe-form,
.epcl-subscribe .subscribe-form,
body .subscribe-form {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 15px !important;
	position: relative !important;
}

.widget_epcl_subscribe_form .form-group,
.epcl_subscribe_form .form-group,
.epcl-subscribe .form-group,
body .subscribe-form .form-group {
	display: flex !important;
	position: relative !important;
	width: 100% !important;
	max-width: 450px !important;
	margin: 0 auto !important;
}

/* Input field styling */
.widget_epcl_subscribe_form .inputbox.large,
.epcl_subscribe_form .inputbox.large,
.epcl-subscribe .inputbox.large,
body .subscribe-form .inputbox.large {
	flex: 1 !important;
	padding: 15px 140px 15px 20px !important;
	border: 2px solid #e0e0e0 !important;
	border-radius: 8px !important;
	font-size: 15px !important;
	height: 54px !important;
	line-height: 1.4 !important;
	background: #fff !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	width: 100% !important;
}

/* Submit button styling */
.widget_epcl_subscribe_form .submit.absolute,
.epcl_subscribe_form .submit.absolute,
.epcl-subscribe .submit.absolute,
body .subscribe-form .submit.absolute {
	position: absolute !important;
	right: 3px !important;
	top: 3px !important;
	bottom: 3px !important;
	width: 130px !important;
	padding: 0 15px !important;
	border: none !important;
	border-radius: 6px !important;
	background: var(--epcl-main-color, #6a4ee9) !important;
	color: #fff !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	z-index: 100 !important;
	line-height: 1 !important;
	height: auto !important;
	transform: none !important;
	transition: background 0.3s ease !important;
}

.widget_epcl_subscribe_form .submit.absolute:hover,
.epcl_subscribe_form .submit.absolute:hover,
.epcl-subscribe .submit.absolute:hover,
body .subscribe-form .submit.absolute:hover {
	background: var(--epcl-secondary-color, #282424) !important;
	transform: none !important;
}

/* Additional theme-specific overrides */
.epcl-subscribe form .form-group .inputbox.large {
	padding-right: 140px !important;
	margin: 0 !important;
}

.epcl-subscribe form .form-group .submit.absolute {
	right: 3px !important;
	top: 3px !important;
	height: calc(100% - 6px) !important;
	padding: 0 15px !important;
	width: 130px !important;
	border-radius: 6px !important;
}

/* Override plugin-specific styles */
div[class*="subscribe"] .form-group,
section[class*="subscribe"] .form-group,
aside[class*="subscribe"] .form-group {
	position: relative !important;
	display: flex !important;
}

div[class*="subscribe"] .inputbox.large,
section[class*="subscribe"] .inputbox.large,
aside[class*="subscribe"] .inputbox.large {
	padding-right: 140px !important;
	width: 100% !important;
	flex: 1 !important;
}

/* Ultimate fallback with maximum specificity */
html body .subscribe-form .form-group input[type="email"].inputbox.large {
	padding-right: 140px !important;
	border: 2px solid #e0e0e0 !important;
	background: #fff !important;
	position: relative !important;
	z-index: 1 !important;
}

html body .subscribe-form .form-group button[type="submit"].submit.absolute,
html body .subscribe-form .form-group .epcl-button.submit.absolute {
	position: absolute !important;
	right: 3px !important;
	top: 3px !important;
	bottom: 3px !important;
	width: 130px !important;
	z-index: 10 !important;
	background: var(--epcl-main-color, #6a4ee9) !important;
	border: none !important;
	border-radius: 6px !important;
	color: #fff !important;
}

/**
 * =============================================================================
 * WIDGETS
 * =============================================================================
 */

/* Added margin fix for info section */
.widget_epcl_about .info {
	margin: 20px !important;
}

/**
 * =============================================================================
 * NAVIGATION
 * =============================================================================
 */

/* Side Nav: logical text alignment (LTR/RTL safe) */
nav.side-nav ul.menu {
	text-align: start; /* modern logical alignment */
}

/* Fallbacks for older browsers and explicit RTL override */
html[dir="ltr"] nav.side-nav ul.menu {
	text-align: left;
}

html[dir="rtl"] nav.side-nav ul.menu {
	text-align: right;
}

/**
 * =============================================================================
 * HEADER: SEARCH ICON POSITIONING
 * =============================================================================
 */

/* 
 * IMPORTANT: The theme has two search icon systems:
 * 1. Desktop: .search-menu-item in compact header (always visible)
 * 2. Mobile/Tablet: .epcl-search-button with .hide-on-desktop-lg (< 1200px only)
 * 
 * Our fix only targets the mobile search button to prevent wrapping.
 */

/* Desktop (> 1200px): Respect parent theme's hide-on-desktop-lg class */
@media screen and (min-width: 1201px) {
	/* Ensure the mobile search icon stays hidden on desktop */
	#header .epcl-search-button.hide-on-desktop-lg {
		display: none !important;
	}
	
	/* Desktop search in compact header: keep original positioning */
	#header.compact .main-nav {
		order: -1;
		/* Original desktop search icon in main-nav - no additional changes needed */
	}
}

/* Tablet and Mobile (≤ 1200px): Fix the mobile search button layout */
@media screen and (max-width: 1200px) {
	/* Force flex layout for header */
	#header .grid-wrapper .epcl-flex {
		display: flex !important;
		align-items: center;
		flex-wrap: nowrap !important;
	}
	
	/* Override parent theme's absolute positioning for mobile search button */
	#header .epcl-search-button {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		transform: none !important;
		-webkit-transform: none !important;
		-ms-transform: none !important;
		width: auto !important;
		height: auto !important;
		line-height: normal !important;
	}
	
	/* Mobile search icon: position on left with flex order */
	#header .epcl-search-button {
		order: -1;
		margin-right: 10px !important;
		margin-left: 0 !important;
		padding: 8px !important;
		display: flex !important;
		align-items: center;
		flex-shrink: 0;
	}
	
	/* Logo: center */
	#header .site-logo,
	#header .logo {
		order: 0;
		flex-shrink: 0;
		margin: 0 auto !important;
		position: relative !important;
		float: none !important;
	}
	
	/* Main navigation: hidden on mobile anyway */
	#header .navigation,
	#header .main-nav {
		order: 1;
	}
	
	/* Account/Subscribe buttons: right side (hidden on mobile) */
	#header .account {
		order: 2;
		margin-left: auto !important;
	}
	
	/* Mobile menu button: far right */
	#header .open-menu {
		order: 3;
		margin-left: 10px !important;
		position: relative !important;
		top: auto !important;
		right: auto !important;
		transform: none !important;
		-webkit-transform: none !important;
		-ms-transform: none !important;
		flex-shrink: 0;
	}
	
	/* Ensure grid-wrapper uses flex layout */
	#header .grid-wrapper {
		display: flex !important;
		align-items: center !important;
		flex-wrap: nowrap !important;
	}
}

/* Small Mobile (≤ 767px): Tighter spacing */
@media screen and (max-width: 767px) {
	#header .epcl-search-button {
		padding: 6px !important;
		margin-right: 8px !important;
	}
	
	#header .epcl-search-button svg {
		width: 22px !important;
		height: 22px !important;
	}
	
	#header .open-menu {
		margin-left: 8px !important;
	}
	
	/* Reduce logo size for more space */
	#header .logo img {
		max-height: 35px !important;
	}
}

/**
 * =============================================================================
 * HEADER: FIX STICKY JITTER/JUMPING ISSUE
 * =============================================================================
 */

/*
 * Problem: When scrolling back to top, the header "jumps" or "shakes"
 * Cause: Multiple CSS transitions + IntersectionObserver toggling data-stuck attribute
 * Solution: Remove problematic transitions and ensure smooth sticky behavior
 */

/* Remove transitions that cause jitter on header elements */
#header div.menu-wrapper,
#header .grid-container,
#header .grid-wrapper {
	transition: none !important;
	-webkit-transition: none !important;
}

/* When header becomes sticky, apply instant changes without animation */
#header[data-stuck] div.menu-wrapper {
	transition: none !important;
	-webkit-transition: none !important;
}

#header[data-stuck] .grid-wrapper {
	transition: none !important;
	-webkit-transition: none !important;
}

#header[data-stuck] .grid-container {
	transition: none !important;
	-webkit-transition: none !important;
}

/* Ensure header maintains consistent height to prevent layout shift */
#header.enable-sticky {
	/* Height is set by JavaScript - ensure it doesn't change during scroll */
	min-height: 80px; /* Fallback in case JS fails */
}

/* Prevent layout shift when data-stuck is applied */
#header[data-stuck] div.menu-wrapper {
	/* Position fixed is applied by parent theme */
	/* Ensure smooth transition without jitter */
	will-change: auto; /* Disable GPU acceleration that can cause jitter */
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* Override parent theme transitions on logo during sticky change */
#header[data-stuck] .logo,
#header .logo {
	transition: none !important;
	-webkit-transition: none !important;
}

/* Ensure sticky header has consistent padding without animation */
#header[data-stuck] .grid-wrapper {
	padding-top: 20px !important;
	padding-bottom: 20px !important;
}

/* Mobile: Remove transitions there too */
@media screen and (max-width: 1200px) {
	#header div.menu-wrapper,
	#header .grid-wrapper,
	#header .grid-container,
	#header[data-stuck] div.menu-wrapper,
	#header[data-stuck] .grid-wrapper,
	#header[data-stuck] .grid-container {
		transition: none !important;
		-webkit-transition: none !important;
	}
}

/**
 * =============================================================================
 * RESPONSIVE DESIGN
 * =============================================================================
 */

/* Mobile responsive adjustments */
@media (max-width: 768px) {
	.widget_epcl_subscribe_form .inputbox.large,
	.epcl_subscribe_form .inputbox.large,
	.epcl-subscribe .inputbox.large,
	body .subscribe-form .inputbox.large,
	.epcl-subscribe form .form-group .inputbox.large {
	padding-right: 110px !important;
	font-size: 14px !important;
	}

	.widget_epcl_subscribe_form .submit.absolute,
	.epcl_subscribe_form .submit.absolute,
	.epcl-subscribe .submit.absolute,
	body .subscribe-form .submit.absolute,
	.epcl-subscribe form .form-group .submit.absolute {
	width: 100px !important;
	font-size: 13px !important;
	padding: 0 10px !important;
	}
}

/* =============================================================================
   SINGLE PORTFOLIO: CENTER ALIGNMENT (Final Override)
   ============================================================================= */

/* --- Single Portfolio: Center header & content (base) --- */
body.single-portfolio .entry-header,
body.single.post-type-portfolio .entry-header {
	margin-block: 8px 24px;
	text-align: center;
}

body.single-portfolio .entry-content,
body.single.post-type-portfolio .entry-content {
	line-height: 1.9;
	text-align: center;
}

/* Inner elements inherit centering and visually center themselves */
body.single-portfolio .entry-header .entry-title,
body.single-portfolio .entry-header .post-meta,
body.single.post-type-portfolio .entry-header .entry-title,
body.single.post-type-portfolio .entry-header .post-meta {
	margin-inline: auto;
}

/* Gutenberg blocks, figures, captions, & classic center helpers */
body.single-portfolio .entry-content figure,
body.single-portfolio .entry-content .wp-block-image,
body.single-portfolio .entry-content .wp-caption,
body.single-portfolio .entry-content .aligncenter,
body.single.post-type-portfolio .entry-content figure,
body.single.post-type-portfolio .entry-content .wp-block-image,
body.single.post-type-portfolio .entry-content .wp-caption,
body.single.post-type-portfolio .entry-content .aligncenter {
	margin-left: auto;
	margin-right: auto;
}

/* If header uses flex, ensure children are centered */
body.single-portfolio .entry-header,
body.single.post-type-portfolio .entry-header {
	display: flex;
	flex-direction: column;
	align-items: center;     /* cross-axis */
	justify-content: center; /* main-axis  */
}

/* Single Portfolio: bold title */
body.single-portfolio .entry-header .entry-title { font-weight: 700; }

/* Single Portfolio: gallery base styles */
body.single-portfolio .portfolio-gallery { margin-block: 16px 24px; }
body.single-portfolio .swiper-slide figure { margin: 0; }
body.single-portfolio .swiper-slide img {
	display: block; width: 100%; height: auto; border-radius: 10px;
}

/* Single Portfolio: breadcrumb navigation */
body.single-portfolio .portfolio-breadcrumb {
	direction: rtl;
	text-align: right;
	font-size: 0.875rem;
	color: #6b7280;
	margin-bottom: 12px;
	line-height: 1.4;
}

body.single-portfolio .portfolio-breadcrumb a {
	color: #374151;
	text-decoration: none;
	transition: color 0.2s ease;
}

body.single-portfolio .portfolio-breadcrumb a:hover {
	color: #111827;
	text-decoration: underline;
}

body.single-portfolio .portfolio-breadcrumb .separator {
	margin: 0 6px;
	color: #9ca3af;
}

body.single-portfolio .portfolio-breadcrumb .current {
	color: #111827;
	font-weight: 500;
}

/* =============================================================================
   PORTFOLIO ARCHIVE: FILTERING & INFINITE SCROLL
   ============================================================================= */

/* Portfolio archive container with proper spacing */
.portfolio-archive {
	padding-inline: 2rem;
	padding-block: 2rem;
	max-width: 1200px;
	margin-inline: auto;
}

/* Center and bold archive title */
.portfolio-archive .page-header {
	text-align: center;
	margin-bottom: 32px;
}

.portfolio-archive .page-title {
	font-weight: 700;
	font-size: 2.5rem;
	margin: 0;
	color: #111827;
}

/* Filter buttons positioned to the right */
.portfolio-archive__filter {
	display: flex;
	gap: .75rem;
	flex-wrap: wrap;
	margin-block: 0 2rem;
	justify-content: flex-end;
	direction: rtl;
	padding: 1rem 0;
}

.pf-filter__btn {
	border: 1px solid #ddd;
	padding: .375rem .75rem;
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
	font-size: .875rem;
	color: #374151;
	transition: all 0.2s ease;
	font-family: inherit;
}

.pf-filter__btn:hover {
	border-color: #9ca3af;
	background: #f9fafb;
}

.pf-filter__btn.is-active {
	border-color: #e11d48;
	background: #e11d48;
	color: #fff;
}

.pf-filter__btn:focus {
	outline: 2px solid #3b82f6;
	outline-offset: 2px;
}

.portfolio-archive__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 2rem;
	margin-bottom: 3rem;
	padding: 0;
}

.portfolio-card {
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 6px rgba(0,0,0,0.1);
	transition: all 0.3s ease;
	height: fit-content;
	margin-bottom: 0;
}

.portfolio-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.portfolio-card__thumbnail {
	position: relative;
	overflow: hidden;
}

.portfolio-card__thumbnail img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.portfolio-card:hover .portfolio-card__thumbnail img {
	transform: scale(1.05);
}

.portfolio-card__content {
	padding: 1.25rem;
	direction: rtl;
	text-align: right;
}

.portfolio-card__title {
	margin: 0 0 0.75rem 0;
	font-size: 1.125rem;
	line-height: 1.4;
}

.portfolio-card__title a {
	color: #111827;
	text-decoration: none;
	transition: color 0.2s ease;
}

.portfolio-card__title a:hover {
	color: #e11d48;
}

.portfolio-card__cats {
	list-style: none;
	margin: .5rem 0 0;
	padding: 0;
	display: flex;
	gap: .5rem;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.portfolio-card__cats li a {
	text-decoration: none;
	font-size: .8rem;
	opacity: .85;
	color: #6b7280;
	background: #f3f4f6;
	padding: .25rem .5rem;
	border-radius: 4px;
	transition: all 0.2s ease;
}

.portfolio-card__cats li a:hover {
	opacity: 1;
	background: #e5e7eb;
	color: #374151;
}

.portfolio-loading {
	text-align: center;
	padding: 2rem;
	color: #6b7280;
	font-style: italic;
}

.portfolio-scroll-sentinel {
	height: 10px;
	background: transparent;
}

.no-posts,
.error-message {
	text-align: center;
	padding: 3rem;
	color: #6b7280;
	font-size: 1.125rem;
	grid-column: 1 / -1;
}

.error-message {
	color: #dc2626;
}

/* Responsive Design */
@media (max-width: 768px) {
	.portfolio-archive {
		padding-inline: 1rem;
		padding-block: 1.5rem;
	}
	
	.portfolio-archive__grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	
	.portfolio-archive .page-title {
		font-size: 2rem;
	}
	
	.portfolio-archive__filter {
		justify-content: center;
		gap: 0.5rem;
		padding: 0.5rem 0;
	}
	
	.portfolio-filter-btn {
		padding: 0.5rem 0.75rem;
		font-size: 0.9rem;
	}
}

@media (max-width: 480px) {
	.portfolio-archive {
		padding-inline: 0.75rem;
	}
	
	.portfolio-archive .page-title {
		font-size: 1.75rem;
	}
	
	.portfolio-archive__filter {
		flex-direction: column;
		align-items: center;
		gap: 0.5rem;
	}
	
	.portfolio-card__content {
		padding: 1rem;
	}
}