/* ==========================================================================
   مهربان‌بار — سیستم طراحی پایه (Design System)
   این فایل توسط تمام صفحات سایت به‌صورت مشترک استفاده می‌شود.
   ========================================================================== */

/* ---------- ۱. فونت وزیرمتن (لوکال، بدون وابستگی به گوگل) ---------- */
@font-face{
  font-family:'Vazirmatn';
  src:url('../fonts/vazirmatn/Vazirmatn-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Vazirmatn';
  src:url('../fonts/vazirmatn/Vazirmatn-Medium.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Vazirmatn';
  src:url('../fonts/vazirmatn/Vazirmatn-Bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Vazirmatn';
  src:url('../fonts/vazirmatn/Vazirmatn-Black.woff2') format('woff2');
  font-weight:900; font-style:normal; font-display:swap;
}

/* ---------- ۲. توکن‌های طراحی (رنگ، فاصله، شعاع گوشه) ---------- */
:root{
  /* پالت اصلی برند */
  --c-navy:#1E3A4C;
  --c-navy-light:#2C5169;
  --c-amber:#E0913D;
  --c-amber-light:#F0AD66;
  --c-sage:#6B9C87;
  --c-paper:#F5F6F4;
  --c-charcoal:#2B2E2C;
  --c-mist:#DADFDC;
  --c-white:#FFFFFF;

  /* نقش‌های معنایی */
  --bg-page:var(--c-paper);
  --bg-surface:var(--c-white);
  --text-primary:var(--c-charcoal);
  --text-secondary:#5B615C;
  --text-muted:#8A8F89;
  --text-on-dark:#FFFFFF;
  --text-on-dark-muted:var(--c-mist);
  --border-default:#E4E7E3;
  --border-strong:#C9CFC9;
  --c-amber-deep:#B96F1F; /* نسخه تیره‌تر کهربایی، مخصوص برچسب‌های کوچک؛ چون خودِ پس‌زمینه پویا هم گاهی کهربایی می‌شه */

  /* رنگ متن هوشمند (وابسته به پس‌زمینه پویا) — توسط js/main.js به‌روزرسانی می‌شود.
     مقدار پیش‌فرض همون رنگ‌های عادی سایته، تا قبل از اجرای جاوااسکریپت هم صفحه درست به‌نظر برسه */
  --text-adaptive:var(--c-charcoal);
  --text-adaptive-secondary:#5B615C;
  --text-adaptive-muted:#8A8F89;

  /* تایپوگرافی */
  --font-base:'Vazirmatn', Tahoma, sans-serif;
  --fs-xs:0.75rem;
  --fs-sm:0.875rem;
  --fs-base:1rem;
  --fs-lg:1.125rem;
  --fs-xl:1.375rem;
  --fs-2xl:clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  --fs-3xl:clamp(2.25rem, 1.7rem + 2.5vw, 3.5rem);

  /* فاصله‌گذاری */
  --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem;
  --space-4:1rem; --space-6:1.5rem; --space-8:2rem;
  --space-12:3rem; --space-16:4rem; --space-24:6rem;

  /* اجزای ساختاری */
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:20px;
  --radius-pill:999px;
  --shadow-card:0 2px 16px rgba(30,58,76,0.06);
  --shadow-float:0 8px 28px rgba(30,58,76,0.14);
  --container-w:1120px;
  --transition-fast:0.18s ease;
  --transition-slow:0.5s ease;

  /* پس‌زمینه پویای شبانه‌روزی — مقدار پیش‌فرض، با جاوااسکریپت به‌روزرسانی می‌شود */
  --ambient-now:var(--c-paper);
}

/* ---------- ۳. ریست پایه ---------- */
*,*::before,*::after{box-sizing:border-box;}
*{margin:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;}
}
body{
  font-family:var(--font-base);
  background:var(--ambient-now); /* پس‌زمینه پویا مستقیماً پس‌زمینه خود body است؛ ساده و بدون ابهام در چیدمان لایه‌ها */
  transition:background-color 18s linear, color 18s linear; /* کوتاه‌تر از قبل (۴۰ ثانیه) تا تغییر واقعاً محسوس باشه، ولی همچنان نرم */
  color:var(--text-adaptive); /* رنگ متن پیش‌فرض؛ به‌صورت هوشمند بین تیره/روشن جابجا می‌شه (بخش ۱ در main.js) */
  font-size:var(--fs-base);
  line-height:1.8;
  min-height:100svh;
  direction:rtl;
}
@media (prefers-reduced-motion: reduce){
  body{transition:none;}
}
img,svg,video{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button,input,textarea,select{font-family:inherit;font-size:inherit;color:inherit;}
button{cursor:pointer;background:none;border:none;}
ul,ol{list-style:none;padding:0;}
h1,h2,h3,h4{font-weight:700;line-height:1.4;}

/* ---------- ۴. تایپوگرافی ---------- */
.eyebrow{font-size:var(--fs-sm);color:var(--c-amber-deep);font-weight:700;letter-spacing:0.02em;margin-bottom:var(--space-2);}
h1,.h1{font-size:var(--fs-3xl);font-weight:900;}
h2,.h2{font-size:var(--fs-2xl);font-weight:800;}
h3,.h3{font-size:var(--fs-xl);font-weight:700;}
.text-lead{font-size:var(--fs-lg);color:var(--text-adaptive-secondary);}
.text-secondary{color:var(--text-adaptive-secondary);}
.text-muted{color:var(--text-adaptive-muted);}
.text-center{text-align:center;}

/* ---------- ۵. لایه‌بندی صفحه ---------- */
.container{max-width:var(--container-w);margin-inline:auto;padding-inline:var(--space-4);}
.section{padding-block:var(--space-16);}
.grid-2{display:grid;grid-template-columns:1fr;gap:var(--space-6);}
.grid-3{display:grid;grid-template-columns:1fr;gap:var(--space-6);}
.grid-4{display:grid;grid-template-columns:1fr;gap:var(--space-4);}
.flex-center{display:flex;align-items:center;justify-content:center;}
.flex-between{display:flex;align-items:center;justify-content:space-between;}
@media (min-width:640px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:768px){
  .grid-2{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:repeat(3,1fr);}
}
@media (min-width:1024px){
  .grid-4{grid-template-columns:repeat(4,1fr);}
}

/* ---------- ۶. پس‌زمینه پویای شبانه‌روزی ----------
   نکته: این پس‌زمینه مستقیماً روی خود body اعمال می‌شه (بخش ۳، بالاتر)،
   نه یک لایه جداگانه — این تغییر عمداً انجام شد تا هیچ ابهامی در ترتیب
   نمایش لایه‌ها (z-index) پیش نیاد و پس‌زمینه همیشه واقعاً همون چیزی
   باشه که در js/main.js تنظیم می‌شه. رنگ‌های استفاده‌شده در js/main.js
   هم عمداً به نسخه‌های بسیار روشنِ رنگ‌های برند محدود شدن (نه رنگ کامل
   نیلی یا کهربایی) تا هیچ‌وقت با متن‌های تیره روی صفحه قاطی نشه. */

/* ---------- ۷. دکمه‌ها ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  border-radius:var(--radius-pill);
  padding:0.85rem 1.75rem;
  font-size:var(--fs-sm);
  font-weight:700;
  transition:transform var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
  white-space:nowrap;
}
.btn:active{transform:scale(0.97);}
.btn-primary{background:var(--c-amber);color:var(--c-charcoal);}
.btn-primary:hover{background:var(--c-amber-light);}
.btn-outline{background:transparent;color:var(--text-on-dark);border:1.5px solid rgba(255,255,255,0.4);}
.btn-outline:hover{border-color:#fff;}
.btn-ghost{background:var(--c-white);color:var(--c-navy);border:1.5px solid var(--border-default);}
.btn-ghost:hover{border-color:var(--c-navy);}

/* ---------- ۸. کارت‌ها ---------- */
.card{
  background:var(--bg-surface);
  border:1px solid var(--border-default);
  border-radius:var(--radius-lg);
  padding:var(--space-6);
  box-shadow:var(--shadow-card);
  /* پس‌زمینه کارت همیشه سفید ثابته، پس رنگ متن‌های داخلش هم باید همیشه
     ثابت بمونه؛ این خط، متغیرهای هوشمند رو فقط داخل همین کارت به مقدار
     عادی برمی‌گردونه (بدون اینکه رو بقیه صفحه اثر بذاره) */
  --text-adaptive:var(--c-charcoal);
  --text-adaptive-secondary:#5B615C;
  --text-adaptive-muted:#8A8F89;
}

/* ---------- ۹. نشان اعتماد ---------- */
.badge{
  display:inline-flex;align-items:center;gap:var(--space-2);
  background:rgba(107,156,135,0.12);
  color:var(--c-sage);
  border:1px solid rgba(107,156,135,0.3);
  border-radius:var(--radius-pill);
  padding:0.5rem 1rem;
  font-size:var(--fs-xs);
  font-weight:600;
}

/* ---------- ۱۰. خط‌جداکننده مسیر (موتیف امضادار) ---------- */
.route-divider{width:100%;height:2px;margin-block:var(--space-8);}

/* ---------- ۱۱. هدر و منوی کپسولی (دسکتاپ) ---------- */
.site-header{position:sticky;top:0;z-index:50;padding-block:var(--space-4);transition:padding var(--transition-fast);}
.site-header.is-scrolled{padding-block:var(--space-2);}
.nav-pill{
  display:none;
  align-items:center;justify-content:space-between;
  max-width:920px;margin-inline:auto; /* بزرگ‌تر شد تا برچسب‌های منو هیچ‌وقت مجبور به شکستن به خط دوم نشن */
  background:rgba(255,255,255,0.92);
  border:1px solid var(--border-default);
  border-radius:var(--radius-pill);
  padding:var(--space-2);
  box-shadow:var(--shadow-card);
  --text-adaptive:var(--c-charcoal);
  --text-adaptive-secondary:#5B615C;
  --text-adaptive-muted:#8A8F89;
}
/* این منو فقط از ۱۰۲۴ پیکسل به بالا نمایش داده می‌شه (نه از ۷۶۸)، چون در
   عرض‌های تبلت فضای کافی برای این تعداد لینک بدون فشردگی وجود نداره؛
   تا قبل از ۱۰۲۴ پیکسل، نوار پایین موبایل (بخش ۱۲) این نقش رو ایفا می‌کنه */
@media (min-width:1024px){ .nav-pill{display:flex;} }
.nav-pill .logo{display:flex;align-items:center;gap:var(--space-2);font-weight:800;font-size:var(--fs-base);color:var(--c-navy);padding-inline:var(--space-3);white-space:nowrap;}
.logo-mark{
  height:52px; /* بزرگ‌تر از قبل (بود ۳۸px) تا جزئیات داخل لوگو قابل‌تشخیص باشه */
  width:auto;  /* عرض متناسب با نسبت ابعاد واقعی لوگو، خودکار محاسبه می‌شه */
  max-width:110px; /* سقفی که نمی‌ذاره لوگو خیلی بزرگ بشه و جای بقیه هدر رو بگیره */
  object-fit:contain; /* کل لوگو رو نشون می‌ده، بدون برش هیچ بخشی از طرح */
  flex-shrink:0;
}

/* نوار برند موبایل — چون منوی کپسولی فقط از ۱۰۲۴ پیکسل به بالا دیده می‌شه،
   این نوار ساده (فقط لوگو، بدون لینک ناوبری) لوگو رو در موبایل/تبلت هم
   بالای صفحه نشون می‌ده؛ ناوبری واقعی همون نوار پایین (بخش ۱۲) هست */
.mobile-brand{display:flex;justify-content:center;align-items:center;gap:var(--space-2);padding-block:var(--space-2);}
@media (min-width:1024px){ .mobile-brand{display:none;} }
.mobile-brand a{display:flex;align-items:center;gap:var(--space-2);font-weight:800;color:var(--c-navy);}
.mobile-brand .logo-mark{height:44px;max-width:95px;}
.nav-links{display:flex;gap:2px;}
.nav-link{
  position:relative;
  padding:0.6rem 0.85rem; /* کمی جمع‌وجورتر از قبل */
  border-radius:var(--radius-pill);
  font-size:var(--fs-sm);
  color:var(--text-secondary);
  white-space:nowrap; /* حیاتی: هیچ‌وقت متن لینک به خط دوم نشکنه */
  transition:color var(--transition-fast);
}
.nav-link:hover{color:var(--c-navy);background:var(--c-paper);}
.nav-link.active{color:var(--c-navy);font-weight:700;}
.nav-link.active::after{content:'';position:absolute;bottom:4px;right:0.85rem;left:0.85rem;height:2px;background:var(--c-amber);border-radius:2px;}

/* ---------- ۱۲. نوار پایین موبایل ---------- */
.tabbar{
  display:flex;
  position:fixed;bottom:0;right:0;left:0;z-index:50;
  background:var(--bg-surface);
  border-top:1px solid var(--border-default);
  padding:var(--space-2) var(--space-2) max(var(--space-2), env(safe-area-inset-bottom));
  --text-adaptive:var(--c-charcoal);
  --text-adaptive-secondary:#5B615C;
  --text-adaptive-muted:#8A8F89;
}
@media (min-width:1024px){ .tabbar{display:none;} } /* هماهنگ با breakpoint جدید nav-pill در بخش ۱۱ */
.tabbar-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:var(--space-2) 0;font-size:0.7rem;color:var(--text-muted);}
.tabbar-item.active{color:var(--c-amber);}
.tabbar-item svg{width:22px;height:22px;}

/* دکمه شناور تماس/واتساپ */
.float-contact{
  position:fixed;left:var(--space-4);bottom:calc(72px + var(--space-4));z-index:49;
  width:52px;height:52px;border-radius:50%;
  background:var(--c-sage);color:#fff;
  box-shadow:var(--shadow-float);
  display:flex;align-items:center;justify-content:center;
}
@media (min-width:1024px){ .float-contact{bottom:var(--space-6);} } /* هماهنگ با breakpoint جدید */

/* ---------- ۱۳. فوتر ---------- */
.site-footer{background:var(--c-navy);color:var(--text-on-dark-muted);padding-block:var(--space-16) var(--space-8);margin-top:var(--space-24);}
.site-footer a:hover{color:#fff;}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.12);margin-top:var(--space-8);padding-top:var(--space-6);font-size:var(--fs-xs);}

/* ---------- ۱۴. فرم‌ها ---------- */
.field{margin-bottom:var(--space-4);}
.field label{display:block;font-size:var(--fs-sm);font-weight:600;margin-bottom:var(--space-2);}
.field input,.field textarea,.field select{
  width:100%;padding:0.85rem 1rem;
  border:1.5px solid var(--border-default);
  border-radius:var(--radius-sm);
  background:var(--bg-surface);
  transition:border-color var(--transition-fast);
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--c-amber);}

/* ---------- ۱۵. آکاردئون (خدمات، سوالات متداول) ---------- */
.accordion-item{border-bottom:1px solid var(--border-default);}
.accordion-trigger{width:100%;display:flex;justify-content:space-between;align-items:center;padding:var(--space-6) 0;text-align:right;font-weight:700;font-size:var(--fs-lg);}
.accordion-trigger .icon{transition:transform var(--transition-fast);flex-shrink:0;}
.accordion-item.open .accordion-trigger .icon{transform:rotate(45deg);}
.accordion-panel{max-height:0;overflow:hidden;transition:max-height var(--transition-slow);}
.accordion-item.open .accordion-panel{max-height:600px;}
.accordion-panel-inner{padding-bottom:var(--space-6);color:var(--text-secondary);}

/* ---------- ۱۶. دسترسی‌پذیری ---------- */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
:focus-visible{outline:2.5px solid var(--c-amber);outline-offset:2px;}

/* ---------- ۱۷. بخش هیرو (سربرگ اصلی هر صفحه) ---------- */
.hero{background:var(--c-navy);border-radius:var(--radius-lg);padding:var(--space-16) var(--space-6);color:var(--text-on-dark);position:relative;overflow:hidden;}
.hero .eyebrow{color:var(--c-amber-light);}
.hero h1{color:#fff;max-width:640px;}
.hero .text-lead{color:var(--text-on-dark-muted);max-width:520px;margin-block:var(--space-4) var(--space-8);}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-bottom:var(--space-8);}
.hero-badges{display:flex;flex-wrap:wrap;gap:var(--space-2);}

/* ---------- ۱۸. آیکون دایره‌ای (برای کارت خدمات/مزایا) ---------- */
.icon-circle{
  width:52px;height:52px;border-radius:50%;
  background:rgba(224,145,61,0.12);color:var(--c-amber);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:var(--space-4);
}
.icon-circle svg{width:26px;height:26px;}

/* ---------- ۱۹. کارت خدمت (خلاصه در صفحه اصلی) ---------- */
.service-card{transition:transform var(--transition-fast), box-shadow var(--transition-fast);}
.service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-float);}
.service-card h3{margin-bottom:var(--space-2);font-size:var(--fs-base);}
.service-card p{color:var(--text-secondary);font-size:var(--fs-sm);margin-bottom:var(--space-4);}
.service-card .more-link{color:var(--c-navy);font-weight:700;font-size:var(--fs-sm);}

/* ---------- ۲۰. کارت شهر (بخش مناطق تحت پوشش) ---------- */
.city-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3);}
@media (min-width:640px){ .city-grid{grid-template-columns:repeat(3,1fr);} }
@media (min-width:1024px){ .city-grid{grid-template-columns:repeat(5,1fr);} }
.city-card{
  display:flex;align-items:center;gap:var(--space-2);
  background:var(--bg-surface);border:1px solid var(--border-default);
  border-radius:var(--radius-md);padding:var(--space-4);
  font-weight:600;font-size:var(--fs-sm);
  transition:border-color var(--transition-fast);
  --text-adaptive:var(--c-charcoal);
  --text-adaptive-secondary:#5B615C;
  --text-adaptive-muted:#8A8F89;
}
.city-card:hover{border-color:var(--c-amber);}
.city-card svg{width:18px;height:18px;color:var(--c-sage);flex-shrink:0;}

/* ---------- ۲۱. گالری نمونه‌کارها ---------- */
.gallery-filter-bar{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-6);}
.gallery-filter-btn{
  padding:0.55rem 1.1rem;border-radius:var(--radius-pill);
  border:1.5px solid var(--border-default);
  background:var(--bg-surface); /* پس‌زمینه ثابت سفید، حتی در حالت غیرفعال، تا هیچ‌وقت روی پس‌زمینه پویا شفاف نباشه */
  font-size:var(--fs-sm);font-weight:600;color:var(--text-secondary);
  transition:all var(--transition-fast);
}
.gallery-filter-btn.active{background:var(--c-navy);border-color:var(--c-navy);color:#fff;}
.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3);}
@media (min-width:768px){ .gallery-grid{grid-template-columns:repeat(3,1fr);} }
.gallery-item{
  position:relative;aspect-ratio:4/3;border-radius:var(--radius-md);
  overflow:hidden;cursor:pointer;background:var(--c-mist);
}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow);}
.gallery-item:hover img{transform:scale(1.06);}
.gallery-item .label{
  position:absolute;inset-inline:0;bottom:0;
  background:linear-gradient(transparent, rgba(30,58,76,0.85));
  color:#fff;font-size:var(--fs-xs);padding:var(--space-6) var(--space-3) var(--space-2);
}

/* ---------- ۲۲. لایت‌باکس ---------- */
.lightbox{
  position:fixed;inset:0;z-index:100;
  background:rgba(30,58,76,0.92);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity var(--transition-fast);
  padding:var(--space-6);
}
.lightbox.open{opacity:1;pointer-events:auto;}
.lightbox-img{max-width:min(720px,90vw);max-height:75vh;border-radius:var(--radius-md);}
.lightbox-caption{color:#fff;text-align:center;margin-top:var(--space-4);font-size:var(--fs-sm);}
.lightbox-close{
  position:absolute;top:var(--space-6);left:var(--space-6);
  width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,0.15);color:#fff;font-size:1.25rem;
}

/* ---------- ۲۳. نظرات مشتریان ---------- */
.testimonial-card{position:relative;}
.stars{color:var(--c-amber);font-size:var(--fs-sm);margin-bottom:var(--space-3);letter-spacing:2px;}
.testimonial-card p{color:var(--text-secondary);margin-bottom:var(--space-4);}
.testimonial-name{display:flex;align-items:center;gap:var(--space-3);font-weight:700;font-size:var(--fs-sm);}
.avatar-circle{
  width:38px;height:38px;border-radius:50%;
  background:var(--c-navy);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--fs-sm);flex-shrink:0;
}

/* ---------- ۲۴. بنر نهایی فراخوان به اقدام ---------- */
.final-cta{background:var(--c-navy);border-radius:var(--radius-lg);padding:var(--space-16) var(--space-6);text-align:center;color:#fff;}
.final-cta h2{color:#fff;margin-bottom:var(--space-3);}
.final-cta p{color:var(--text-on-dark-muted);margin-bottom:var(--space-8);}
.final-cta .phone-link{font-size:var(--fs-2xl);font-weight:900;color:var(--c-amber-light);display:block;margin-bottom:var(--space-6);direction:ltr;}