/* =====================================================================
   responsive.css — لایه‌ی ریسپانسیو مشترک
   این فایل باید «آخرین» استایل‌شیت در <head> هر صفحه باشد.
   ===================================================================== */

/* ---------- ۱. پایه‌های عمومی ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 96px;           /* ارتفاع هدر ثابت */
}

body {
  max-width: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, video, svg, canvas, iframe { max-width: 100%; }
video { height: auto; }

/* متن‌های طولانی (عنوان، لینک، کد) صفحه را عریض نکنند */
h1, h2, h3, h4, p, li, a, td, th { overflow-wrap: anywhere; }

pre, code { max-width: 100%; }
pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* جدول‌ها داخل محتوای مقاله/توضیحات: اسکرول افقی داخل خودشان */
.content table, .article-content table, .course-description-section table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* ---------- ۲. فرم‌ها و دکمه‌ها ---------- */
input, select, textarea, button { max-width: 100%; font-family: inherit; }

@media (pointer: coarse) {
  /* هدف لمسی حداقل ~۴۴px */
  button, .btn, [type="submit"], select,
  .profile-btn, .read-more, .btn-submit, .save-btn {
    min-height: 44px;
  }
}

@media (max-width: 768px) {
  /* جلوگیری از زوم خودکار iOS هنگام فوکوس روی فیلد */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ---------- ۳. حرکت کمتر برای کاربرانی که خواسته‌اند ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- ۴. دستگاه‌های لمسی: hover چسبنده نشود ---------- */
@media (hover: none) {
  .course-card:hover,
  .portfolio-item:hover,
  .service:hover,
  .academy-feature:hover,
  .pretty-card:hover,
  .stat-card:hover,
  .course-box:hover,
  .step:hover {
    transform: none !important;
  }
  .course-card:hover .course-image,
  .pretty-card:hover img,
  .portfolio-item:hover .portfolio-image img {
    transform: none !important;
  }
}

/* ---------- ۵. چیدمان داشبوردها (دانشجو / مدرس / تنظیمات / بلاگر) ---------- */
.main-content,
.settings-content { min-width: 0; }

@media (max-width: 900px) {
  .dashboard-container {
    flex-direction: column;
    min-height: auto;
  }

  .dashboard-container > .sidebar {
    width: 100%;
    border-left: 0;
    border-bottom: 3px solid #9333ea;
    padding: 16px;
    gap: 14px;
  }

  /* پروفایل: آیکن + نام کنار هم، فشرده */
  .sidebar .profile-box {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: right;
  }
  .sidebar .profile-box i { font-size: 40px; }
  .sidebar .profile-box h3 { margin: 0; font-size: 16px; }
  .sidebar .profile-box .role { margin-inline-start: auto; font-size: 13px; opacity: .8; }

  /* منو: نوار افقی قابل اسکرول */
  .sidebar nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sidebar nav::-webkit-scrollbar { display: none; }
  .sidebar nav a {
    flex: 0 0 auto;
    white-space: nowrap;
    margin-bottom: 0;
    padding: 10px 16px;
  }
  .sidebar nav a.active { background: rgba(147, 51, 234, .3); color: #fff; }

  .main-content,
  .settings-content {
    width: 100%;
    padding: 24px 16px;
  }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
  .courses-grid { grid-template-columns: 1fr; }
  .main-content h2,
  .settings-content h2 { font-size: 20px; }
  .course-actions { flex-wrap: wrap; }
  .course-actions a { min-width: 90px; }
}

/* ---------- ۶. پس‌زمینه‌ی fixed روی موبایل (iOS آن را بزرگ‌نمایی/خراب می‌کند) ---------- */
@media (max-width: 1100px) {
  html body { background-attachment: scroll; }
}