/*
Theme Name: Irdesigns
Theme URI: https://irdesigns.example
Author: Irdesigns
Author URI: https://irdesigns.example
Description: قالب اختصاصی و انیمیشنی شرکت آی‌تی Irdesigns برای معرفی محصولات نرم‌افزاری. رنگ‌بندی سفید و آبی آسمانی، کاملا سئوفرندلی، راست‌چین، ریسپانسیو و سازگار با المنتور.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: irdesigns
Tags: custom-colors, custom-logo, custom-menu, featured-images, translation-ready, right-to-left
*/

/* ==========================================================================
   ۱) متغیرهای کلی طراحی — رنگ‌بندی سفید و آبی آسمانی
   ========================================================================== */
:root {
	--ird-primary: #0ea5e9;       /* آبی آسمانی اصلی */
	--ird-primary-dark: #0284c7;
	--ird-primary-light: #38bdf8;
	--ird-accent: #06b6d4;        /* فیروزه‌ای مکمل */
	--ird-bg: #ffffff;
	--ird-bg-soft: #f4faff;       /* آبی بسیار روشن برای پس‌زمینه بخش‌ها */
	--ird-surface: #ffffff;
	--ird-border: #e3edf7;
	--ird-text: #12203a;
	--ird-text-muted: #5b6b85;
	--ird-radius: 20px;
	--ird-shadow: 0 15px 40px rgba(14, 165, 233, 0.12);
	--ird-shadow-hover: 0 22px 55px rgba(14, 165, 233, 0.22);
	--ird-transition: all 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* ==========================================================================
   ۲) ریست پایه و تنظیمات راست‌به‌چپ
   ========================================================================== */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	font-family: 'Vazirmatn', Tahoma, sans-serif;
	background-color: var(--ird-bg);
	color: var(--ird-text);
	direction: rtl;
	text-align: right;
	margin: 0;
	overflow-x: hidden;
	line-height: 1.9;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

/* ==========================================================================
   ۳) هدر و منو
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 999;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--ird-border);
	padding: 14px 0;
}

.navbar { display: flex; align-items: center; justify-content: space-between; }

/* جایگاه لوگو در هدر — لوگو سمت چپ، منو سمت راست */
.site-branding { display: flex; align-items: center; order: 3; }
.site-branding img { max-height: 112px; width: auto; }
.menu-toggle { order: 2; }
.main-navigation { order: 1; }

.site-title-link {
	display: flex;
	align-items: center;
	gap: 10px;
}

.logo-placeholder {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--ird-primary), var(--ird-accent));
	color: #fff;
	font-weight: 800;
	font-size: 18px;
	flex-shrink: 0;
	box-shadow: 0 8px 20px rgba(14, 165, 233, 0.35);
}

.logo-text {
	font-size: 21px;
	font-weight: 800;
	color: var(--ird-text);
}

.main-navigation { display: flex; align-items: center; gap: 26px; }

.nav-menu { display: flex; gap: 26px; align-items: center; }

.nav-menu a {
	font-weight: 500;
	color: var(--ird-text-muted);
	transition: var(--ird-transition);
	position: relative;
}
.nav-menu a:hover { color: var(--ird-primary); }
.nav-menu a::after {
	content: "";
	position: absolute;
	right: 0; bottom: -6px;
	width: 0; height: 2px;
	background: var(--ird-primary);
	transition: width 0.3s ease;
}
.nav-menu a:hover::after { width: 100%; }

.btn-cta {
	background: linear-gradient(90deg, var(--ird-primary), var(--ird-primary-light));
	padding: 10px 22px;
	border-radius: 999px;
	font-weight: 600;
	color: #fff !important;
	box-shadow: 0 8px 22px rgba(14, 165, 233, 0.35);
	transition: var(--ird-transition);
}
.btn-cta:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(14, 165, 233, 0.5); }

.menu-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 6px;
}
.menu-toggle span {
	width: 24px; height: 2px;
	background: var(--ird-text);
	border-radius: 2px;
	transition: var(--ird-transition);
}

/* ==========================================================================
   ۴) بخش هدر بزرگ لندینگ (Hero)
   ========================================================================== */
.hero-section {
	position: relative;
	padding: 120px 0 100px;
	overflow: hidden;
	text-align: center;
	background: linear-gradient(180deg, var(--ird-bg-soft), #ffffff);
}

.hero-badge {
	display: inline-block;
	padding: 8px 18px;
	border-radius: 999px;
	background: #e6f6fe;
	border: 1px solid #c6ebfb;
	color: var(--ird-primary-dark);
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 24px;
}

.hero-title {
	font-size: clamp(32px, 5vw, 58px);
	font-weight: 800;
	line-height: 1.35;
	margin: 0 0 22px;
	color: var(--ird-text);
}
.hero-title { background: none; }

.hero-desc {
	max-width: 680px;
	margin: 0 auto 36px;
	color: var(--ird-text-muted);
	font-size: 18px;
}

.hero-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

.btn-primary-glow {
	background: linear-gradient(90deg, var(--ird-primary), var(--ird-accent));
	padding: 15px 34px;
	border-radius: 999px;
	color: #ffffff !important;
	font-weight: 700;
	box-shadow: 0 14px 35px rgba(14, 165, 233, 0.3);
	transition: var(--ird-transition);
	display: inline-block;
}
.btn-primary-glow:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 18px 45px rgba(14, 165, 233, 0.45); }

.btn-outline-light {
	padding: 15px 34px;
	border-radius: 999px;
	border: 1px solid var(--ird-border);
	background: #fff;
	color: var(--ird-text) !important;
	font-weight: 600;
	transition: var(--ird-transition);
	display: inline-block;
}
.btn-outline-light:hover { background: var(--ird-bg-soft); border-color: var(--ird-primary-light); }

.hero-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	opacity: 0.5;
	z-index: -1;
	animation: floatBlob 10s ease-in-out infinite;
}
.blob-1 { width: 380px; height: 380px; background: #bae6fd; top: -100px; left: -80px; }
.blob-2 { width: 320px; height: 320px; background: #a5f3fc; bottom: -120px; right: -60px; animation-delay: 2s; }

@keyframes floatBlob {
	0%, 100% { transform: translateY(0) scale(1); }
	50% { transform: translateY(-30px) scale(1.08); }
}

/* ==========================================================================
   ۵) عنوان بخش‌ها
   ========================================================================== */
.section-heading { text-align: center; max-width: 640px; margin: 0 auto 50px; }
.section-tag {
	display: inline-block;
	color: var(--ird-primary-dark);
	font-weight: 700;
	font-size: 14px;
	margin-bottom: 12px;
	letter-spacing: 1px;
}
.section-heading h2 { font-size: clamp(26px, 4vw, 38px); margin: 0 0 14px; font-weight: 800; color: var(--ird-text); }
.section-heading p { color: var(--ird-text-muted); font-size: 16px; }

/* ==========================================================================
   ۶) بخش آمار (استاتس) لندینگ پیج
   ========================================================================== */
.stats-section { padding: 60px 0; background: var(--ird-bg-soft); border-top: 1px solid var(--ird-border); border-bottom: 1px solid var(--ird-border); }
.stat-card { text-align: center; }
.stat-number {
	font-size: clamp(32px, 5vw, 46px);
	font-weight: 800;
	color: var(--ird-primary);
}
.stat-suffix { font-size: clamp(24px, 4vw, 34px); font-weight: 800; color: var(--ird-primary); }
.stat-card p { color: var(--ird-text-muted); margin: 6px 0 0; font-size: 15px; }

/* ==========================================================================
   ۷) بخش محصولات و کارت‌های انیمیشنی
   ========================================================================== */
.products-section { padding: 90px 0; }

.row { display: flex; flex-wrap: wrap; margin: 0 -12px; }
.row.g-4 > [class^="col-"] { padding: 12px; }
.col-md-6 { width: 50%; }
.col-md-4 { width: 33.3333%; }
.col-lg-4 { width: 33.3333%; }
.col-md-3 { width: 25%; }
.col-6 { width: 50%; }

.product-card {
	position: relative;
	background: var(--ird-surface);
	border: 1px solid var(--ird-border);
	border-radius: var(--ird-radius);
	padding: 34px 28px;
	height: 100%;
	overflow: hidden;
	box-shadow: var(--ird-shadow);
	transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
}

.product-card:hover {
	transform: translateY(-10px) scale(1.015);
	border-color: var(--ird-primary-light);
	box-shadow: var(--ird-shadow-hover);
}

.card-glow {
	position: absolute;
	inset: -40% -40% auto auto;
	width: 220px; height: 220px;
	background: radial-gradient(circle, rgba(14,165,233,0.18), transparent 70%);
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}
.product-card:hover .card-glow { opacity: 1; }

.product-card-icon {
	width: 58px; height: 58px;
	border-radius: 16px;
	background: linear-gradient(135deg, var(--ird-primary), var(--ird-accent));
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 20px;
	overflow: hidden;
	transition: var(--ird-transition);
}
.product-card:hover .product-card-icon { transform: rotate(-6deg) scale(1.08); }
.product-card-icon img { width: 100%; height: 100%; object-fit: cover; }
.product-card-icon .dashicons { font-size: 28px; color: #fff; width: auto; height: auto; }

.product-card-tag {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	color: var(--ird-primary-dark);
	background: var(--ird-bg-soft);
	border: 1px solid #c6ebfb;
	padding: 4px 12px;
	border-radius: 999px;
	margin-bottom: 14px;
}

.product-card-title { font-size: 20px; font-weight: 700; margin: 0 0 10px; color: var(--ird-text); }
.product-card-desc { color: var(--ird-text-muted); font-size: 15px; margin: 0 0 18px; }

.product-card-link {
	font-weight: 600;
	color: var(--ird-primary-dark);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.product-card-link .arrow { transition: transform 0.3s ease; }
.product-card-link:hover .arrow { transform: translateX(-6px); }

.products-hint { text-align: center; color: var(--ird-text-muted); font-size: 13px; margin-top: 40px; }

/* ==========================================================================
   ۸) بخش ویژگی‌ها
   ========================================================================== */
.features-section { padding: 60px 0 100px; background: var(--ird-bg-soft); }

.feature-card {
	background: var(--ird-surface);
	border: 1px solid var(--ird-border);
	border-radius: var(--ird-radius);
	padding: 34px 28px;
	text-align: center;
	height: 100%;
	box-shadow: var(--ird-shadow);
	transition: var(--ird-transition);
}
.feature-card:hover { transform: translateY(-6px); border-color: var(--ird-primary-light); box-shadow: var(--ird-shadow-hover); }
.feature-icon { font-size: 34px; margin-bottom: 16px; }
.feature-card h3 { font-size: 19px; margin: 0 0 10px; color: var(--ird-text); }
.feature-card p { color: var(--ird-text-muted); font-size: 15px; margin: 0; }

/* ==========================================================================
   ۹) بخش تماس (CTA)
   ========================================================================== */
.cta-section { padding: 40px 0 110px; }
.cta-box {
	text-align: center;
	background: linear-gradient(135deg, var(--ird-primary), var(--ird-accent));
	border-radius: 28px;
	padding: 70px 30px;
}
.cta-box h2 { font-size: clamp(24px, 4vw, 34px); margin: 0 0 16px; font-weight: 800; color: #fff; }
.cta-box p { color: rgba(255,255,255,0.9); max-width: 560px; margin: 0 auto 30px; }
.cta-box .btn-primary-glow { background: #fff; color: var(--ird-primary-dark) !important; box-shadow: 0 14px 35px rgba(0,0,0,0.15); }
.cta-box .btn-primary-glow:hover { box-shadow: 0 18px 45px rgba(0,0,0,0.22); }

/* ==========================================================================
   ۱۰) صفحات عادی و تک‌پست‌ها
   ========================================================================== */
.page-container { padding: 70px 0; }
.page-header { margin-bottom: 30px; }
.page-title { font-size: clamp(26px, 4vw, 40px); font-weight: 800; color: var(--ird-text); }
.page-content { color: var(--ird-text-muted); font-size: 17px; }
.page-content img { border-radius: var(--ird-radius); margin: 20px 0; }
.single-thumbnail { border-radius: var(--ird-radius); overflow: hidden; margin-bottom: 30px; box-shadow: var(--ird-shadow); }
.pagination-wrap { text-align: center; margin-top: 40px; }

/* ==========================================================================
   ۱۱) دیدگاه‌ها
   ========================================================================== */
.comments-area { margin-top: 60px; border-top: 1px solid var(--ird-border); padding-top: 40px; }
.comment-list { margin-top: 20px; }
.comment-form input, .comment-form textarea {
	width: 100%;
	background: var(--ird-bg-soft);
	border: 1px solid var(--ird-border);
	border-radius: 12px;
	padding: 12px 16px;
	color: var(--ird-text);
	margin-bottom: 14px;
	font-family: inherit;
}

/* ==========================================================================
   ۱۲) فوتر تکمیلی
   ========================================================================== */
.site-footer { background: #0b2540; color: #cfe4f5; margin-top: 60px; }
.footer-top { padding: 70px 0 40px; }

.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 40px;
}

.footer-col h4, .footer-widget-title { font-size: 16px; margin: 0 0 18px; color: #fff; }

.footer-brand { font-size: 22px; font-weight: 800; color: #fff; margin: 0 0 14px; }
.footer-logo img { max-height: 92px; width: auto; max-width: 100%; margin-bottom: 14px; }
.footer-about p { color: #a9c3da; font-size: 14px; line-height: 1.9; margin: 0 0 20px; }

.footer-social { display: flex; gap: 10px; }
.social-icon {
	width: 38px; height: 38px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 10px;
	background: rgba(255,255,255,0.08);
	transition: var(--ird-transition);
}
.social-icon .dashicons { color: #cfe4f5; font-size: 18px; }
.social-icon:hover { background: var(--ird-primary); transform: translateY(-3px); }
.social-icon:hover .dashicons { color: #fff; }

.footer-menu { display: flex; flex-direction: column; gap: 12px; }
.footer-menu a, .footer-links a { color: #a9c3da; transition: var(--ird-transition); font-size: 14px; }
.footer-menu a:hover, .footer-links a:hover { color: var(--ird-primary-light); }

.contact-list { display: flex; flex-direction: column; gap: 14px; }
.contact-list li { display: flex; align-items: flex-start; gap: 10px; color: #a9c3da; font-size: 14px; }
.contact-list .dashicons { color: var(--ird-primary-light); font-size: 18px; margin-top: 2px; }
.contact-list a { color: #a9c3da; }
.contact-list a:hover { color: var(--ird-primary-light); }

.footer-widget-area .footer-widget { color: #a9c3da; font-size: 14px; }
.footer-widget-area a { color: #a9c3da; }
.footer-widget-area a:hover { color: var(--ird-primary-light); }

.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding: 20px 0; }
.footer-bottom-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
}
.footer-bottom p { margin: 0; color: #93aec6; font-size: 13px; }

.back-to-top {
	width: 42px; height: 42px;
	border-radius: 50%;
	border: none;
	background: var(--ird-primary);
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: var(--ird-transition);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--ird-primary-dark); }

/* ==========================================================================
   ۱۳) انیمیشن ورود عناصر هنگام اسکرول
   ========================================================================== */
.reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   ۱۴) واکنش‌گرایی (ریسپانسیو)
   ========================================================================== */
@media (max-width: 991px) {
	.col-md-6, .col-md-4, .col-lg-4, .col-md-3 { width: 50%; }
	.menu-toggle { display: flex; }
	.main-navigation {
		position: absolute;
		top: 100%;
		right: 0; left: 0;
		background: #fff;
		flex-direction: column;
		align-items: flex-start;
		padding: 20px;
		gap: 16px;
		border-bottom: 1px solid var(--ird-border);
		box-shadow: 0 15px 30px rgba(0,0,0,0.06);
		display: none;
	}
	.main-navigation.is-open { display: flex; }
	.nav-menu { flex-direction: column; align-items: flex-start; gap: 14px; }
	.footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
	.col-md-6, .col-md-4, .col-lg-4, .col-md-3 { width: 100%; }
	.col-6 { width: 50%; }
	.hero-section { padding: 90px 0 70px; }
	.footer-grid { grid-template-columns: 1fr; }
	.footer-bottom-inner { flex-direction: column; text-align: center; }
}

/* احترام به کاربرانی که کاهش حرکت را ترجیح می‌دهند */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}