/* responsive.css - تطابق رابط کاربری با سایزهای مختلف صفحه نمایش (Mobile-First) */

/* --- تنظیمات عمومی موبایل (صفحه‌های زیر ۵۷۶ پیکسل) --- */
@media (max-width: 575px) {
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }
  
  .section {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
  }
}

/* --- تنظیمات تبلت و موبایل (صفحه‌های زیر ۹۹۲ پیکسل) --- */
@media (max-width: 991px) {
  /* مخفی کردن منوی افقی هدر و نمایش همبرگر */
  .navmenu {
    display: none; /* پیش‌فرض برای موبایل مخفی است و با کلاس active باز می‌شود */
  }
  
  .mobile-nav-toggle {
    display: block; /* نمایش دکمه همبرگر */
  }
  
  /* استایل منوی کشویی موبایل */
  .mobile-nav-active .navmenu {
    display: block;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    height: calc(100vh - 100%);
    background-color: var(--bg-primary);
    border-top: 1px solid var(--border-color);
    padding: var(--space-6);
    z-index: var(--z-overlay);
    overflow-y: auto;
    animation: fadeInMenu 0.3s ease-out forwards;
  }
  
  .mobile-nav-active .nav-list {
    flex-direction: column;
    gap: var(--space-4);
  }
  
  .mobile-nav-active .nav-link {
    font-size: 1.125rem;
    display: block;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: var(--space-2);
  }
  
  .mobile-nav-active .nav-link::after {
    display: none; /* غیرفعال کردن انیمیشن هاور خط زیر در موبایل */
  }
  
  /* شبکه‌بندی‌ها به صورت یک ستونه */
  .grid-cols-2, .grid-cols-3, .grid-cols-4 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  
  /* تراز وسط برای متون سکشن‌ها */
  .hero-content {
    text-align: center;
    margin-bottom: var(--space-8);
  }
  
  .hero-buttons {
    justify-content: center;
  }
  
  .hero-image img {
    margin: 0 auto;
  }
}

/* --- تنظیمات تبلت‌های بزرگ (صفحه‌های بین ۷۶۸ و ۹۹۲ پیکسل) --- */
@media (min-width: 768px) and (max-width: 991px) {
  .grid-cols-2-md {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  .grid-cols-3-md {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- تنظیمات دسکتاپ‌های متوسط (صفحه‌های بین ۹۹۲ و ۱۲۰۰ پیکسل) --- */
@media (min-width: 992px) {
  .grid-cols-2-lg {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  .grid-cols-3-lg {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  
  .grid-cols-4-lg {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* انیمیشن باز شدن منوی موبایل */
@keyframes fadeInMenu {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}