/* 
 * تنسيقات متجاوبة للنصوص
 * Responsive Typography
 */

:root {
  /* أحجام النصوص الأساسية */
  --font-size-base: 16px;
  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-md: 1rem;      /* 16px */
  --font-size-lg: 1.125rem;  /* 18px */
  --font-size-xl: 1.25rem;   /* 20px */
  --font-size-2xl: 1.5rem;   /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
  --font-size-4xl: 2.25rem;  /* 36px */
  --font-size-5xl: 3rem;     /* 48px */
  --font-size-6xl: 3.75rem;  /* 60px */
  
  /* أحجام العناوين */
  --h1-font-size: var(--font-size-5xl);
  --h2-font-size: var(--font-size-4xl);
  --h3-font-size: var(--font-size-3xl);
  --h4-font-size: var(--font-size-2xl);
  --h5-font-size: var(--font-size-xl);
  --h6-font-size: var(--font-size-lg);
  
  /* أحجام النصوص العامة */
  --text-base: var(--font-size-md);
  --text-small: var(--font-size-sm);
  --text-large: var(--font-size-lg);
  
  /* معدل ارتفاع السطر */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-loose: 1.8;
  
  /* المسافات بين الحروف */
  --letter-spacing-tight: -0.05em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.05em;
  
  /* متغيرات متجاوبة بالـ viewport width */
  --responsive-scale: 1;
  --fluid-min: 320px;
  --fluid-max: 1240px;
  --fluid-screen: 100vw;
  --fluid-bp: calc((var(--fluid-screen) - var(--fluid-min)) / (var(--fluid-max) - var(--fluid-min)));
}

/* تطبيق أحجام النصوص على العناصر */
body {
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
}

h1, .h1 {
  font-size: var(--h1-font-size);
  line-height: var(--line-height-tight);
}

h2, .h2 {
  font-size: var(--h2-font-size);
  line-height: var(--line-height-tight);
}

h3, .h3 {
  font-size: var(--h3-font-size);
  line-height: var(--line-height-tight);
}

h4, .h4 {
  font-size: var(--h4-font-size);
  line-height: var(--line-height-tight);
}

h5, .h5 {
  font-size: var(--h5-font-size);
}

h6, .h6 {
  font-size: var(--h6-font-size);
}

p, .text {
  font-size: var(--text-base);
  line-height: var(--line-height-normal);
}

.text-small {
  font-size: var(--text-small);
}

.text-large {
  font-size: var(--text-large);
}

/* تحسين المسافات */
.letter-tight {
  letter-spacing: var(--letter-spacing-tight);
}

.letter-normal {
  letter-spacing: var(--letter-spacing-normal);
}

.letter-wide {
  letter-spacing: var(--letter-spacing-wide);
}

/* تحسين تباعد النصوص للقراءة */
.line-tight {
  line-height: var(--line-height-tight);
}

.line-normal {
  line-height: var(--line-height-normal);
}

.line-loose {
  line-height: var(--line-height-loose);
}

/* الشاشات المتوسطة - الجهاز اللوحي */
@media (max-width: 991.98px) {
  :root {
    --responsive-scale: 0.95;
    --h1-font-size: 2.5rem;     /* 40px */
    --h2-font-size: 2rem;       /* 32px */
    --h3-font-size: 1.75rem;    /* 28px */
    --h4-font-size: 1.375rem;   /* 22px */
    --h5-font-size: 1.125rem;   /* 18px */
    --h6-font-size: 1rem;       /* 16px */
    
    --text-base: 0.9375rem;     /* 15px */
  }
}

/* الشاشات الصغيرة - الهواتف الذكية */
@media (max-width: 767.98px) {
  :root {
    --responsive-scale: 0.9;
    --h1-font-size: 2.25rem;    /* 36px */
    --h2-font-size: 1.75rem;    /* 28px */
    --h3-font-size: 1.5rem;     /* 24px */
    --h4-font-size: 1.25rem;    /* 20px */
    --h5-font-size: 1.125rem;   /* 18px */
    --h6-font-size: 1rem;       /* 16px */
    
    --text-base: 0.9375rem;     /* 15px */
  }
}

/* الشاشات الصغيرة جدًا */
@media (max-width: 575.98px) {
  :root {
    --responsive-scale: 0.85;
    --h1-font-size: 2rem;       /* 32px */
    --h2-font-size: 1.625rem;   /* 26px */
    --h3-font-size: 1.375rem;   /* 22px */
    --h4-font-size: 1.25rem;    /* 20px */
    --h5-font-size: 1.125rem;   /* 18px */
    --h6-font-size: 1rem;       /* 16px */
    
    --text-base: 0.875rem;      /* 14px */
  }
}

/* استخدام Fluid Typography لجعل النصوص تتكيف بسلاسة بدلاً من القفز عند نقاط التوقف */
@media (min-width: 576px) {
  :root {
    --font-size-base: clamp(14px, 0.875rem + 0.5vw, 18px);
    --h1-font-size: clamp(2rem, 1.5rem + 2.5vw, 3rem);
    --h2-font-size: clamp(1.625rem, 1.4rem + 1.2vw, 2.25rem);
    --h3-font-size: clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem);
    --h4-font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --h5-font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
    --h6-font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  }
}

/* فئات مساعدة إضافية لجعل النصوص تستجيب بشكل ديناميكي وأكثر مرونة */
.fluid-text-sm {
  font-size: clamp(0.75rem, 0.7rem + 0.3vw, 0.875rem);
}

.fluid-text-md {
  font-size: clamp(0.875rem, 0.8rem + 0.5vw, 1rem);
}

.fluid-text-lg {
  font-size: clamp(1rem, 0.9rem + 0.7vw, 1.25rem);
}

.fluid-text-xl {
  font-size: clamp(1.25rem, 1.1rem + 1vw, 1.5rem);
}

.fluid-text-2xl {
  font-size: clamp(1.5rem, 1.3rem + 1.3vw, 1.875rem);
}

.fluid-text-3xl {
  font-size: clamp(1.875rem, 1.6rem + 1.5vw, 2.25rem);
}

.fluid-text-4xl {
  font-size: clamp(2.25rem, 1.9rem + 1.8vw, 3rem);
}

/* تنسيق خاص للعناصر المحددة */
.hero-title-gradient {
  font-size: clamp(2rem, 1.6rem + 2vw, 3.2rem);
}

.hero-content h1 {
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3rem);
}

.hero-content p {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.2rem);
}

.section-title {
  font-size: clamp(1.5rem, 1.3rem + 1.2vw, 2rem);
}

.section-subtitle {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.2rem);
}

.testimonial-text {
  font-size: clamp(0.9rem, 0.85rem + 0.3vw, 1.1rem);
}

.footer-title {
  font-size: clamp(1.1rem, 1rem + 0.3vw, 1.3rem);
}

.navbar-nav .nav-link {
  font-size: clamp(0.85rem, 0.8rem + 0.3vw, 1rem);
}

.btn, .btn-custom {
  font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
}

/* تضمين خطوط الشاشة الصغيرة في أزرار الموبايل بشكل أكبر للمسة سهلة */
@media (max-width: 575.98px) {
  .btn, .btn-custom {
    font-size: 0.95rem;
    padding: 0.6rem 1.2rem;
  }

  .navbar-nav .nav-link {
    font-size: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
}

/* تعزيزات إضافية لتناسق النصوص - أهم النصوص في الموقع */
.wavy-title, .water-title {
  font-size: clamp(2rem, 1.6rem + 1.5vw, 3.5rem);
}

.course-card .card-title {
  font-size: clamp(1.1rem, 1rem + 0.3vw, 1.3rem);
}

.course-card .card-text {
  font-size: clamp(0.875rem, 0.85rem + 0.2vw, 1rem);
}

.course-price {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.25rem);
}

.page-title {
  font-size: clamp(1.5rem, 1.3rem + 1.2vw, 2.5rem);
}

.breadcrumb-item {
  font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.9rem);
}

.footer-about p {
  font-size: clamp(0.875rem, 0.85rem + 0.2vw, 1rem);
}

.footer-links a, .footer-contact li {
  font-size: clamp(0.875rem, 0.85rem + 0.15vw, 0.95rem);
}

.copyright {
  font-size: clamp(0.8rem, 0.75rem + 0.15vw, 0.9rem);
}

/* المزيد من تنسيقات النصوص المتقدمة */
.fluid-typography {
  font-size: calc(var(--fluid-bp) * (var(--font-size-max) - var(--font-size-min)) + var(--font-size-min));
}

.responsive-heading {
  --font-size-min: 1.5rem;
  --font-size-max: 3rem;
  font-size: calc(var(--font-size-min) * var(--responsive-scale));
}

@media (min-width: 576px) {
  .responsive-heading {
    font-size: calc(var(--fluid-bp) * (var(--font-size-max) - var(--font-size-min)) + var(--font-size-min));
  }
}

/* تحسين إمكانية القراءة للنصوص الطويلة */
.readable-text {
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.1rem);
  line-height: 1.8;
  max-width: 70ch; /* الحد الأقصى المناسب لسطر النص للقراءة */
  margin-left: auto;
  margin-right: auto;
}

/* القياسات للهواتف الذكية في وضع العرض (Landscape) */
@media (max-height: 480px) and (orientation: landscape) {
  .hero-content h1 {
    font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  }
  
  .hero-title-gradient {
    font-size: clamp(1.7rem, 1.4rem + 1.5vw, 2.7rem);
  }
  
  .hero-content p {
    font-size: clamp(0.85rem, 0.8rem + 0.3vw, 1rem);
  }
  
  .wavy-title, .water-title {
    font-size: clamp(1.5rem, 1.3rem + 1.2vw, 2.5rem);
  }
}

/* تعزيزات للبطاقات والأزرار بشكل خاص */

/* تنسيقات البطاقات */
.card {
  --card-title-size: clamp(1.1rem, 1rem + 0.3vw, 1.3rem);
  --card-text-size: clamp(0.875rem, 0.85rem + 0.2vw, 1rem);
  --card-price-size: clamp(1rem, 0.95rem + 0.3vw, 1.25rem);
  --card-badge-size: clamp(0.7rem, 0.65rem + 0.2vw, 0.85rem);
}

.card-title {
  font-size: var(--card-title-size);
  line-height: 1.4;
  font-weight: 700;
}

.card-text, .card-body p {
  font-size: var(--card-text-size);
  line-height: 1.6;
}

.course-card .course-price, .card .badge, .badge {
  font-size: var(--card-badge-size);
}

.card-footer, .card-header {
  font-size: clamp(0.85rem, 0.8rem + 0.2vw, 0.95rem);
}

/* تنسيقات خاصة لبطاقات السنة الدراسية */
.year-title {
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
}

/* تنسيقات الأزرار */
.btn, .btn-primary, .btn-secondary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-light, .btn-dark, .btn-link, .btn-outline-primary, .btn-outline-secondary, .btn-custom {
  font-size: clamp(0.875rem, 0.85rem + 0.2vw, 1rem);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.btn-lg {
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
}

.btn-sm {
  font-size: clamp(0.75rem, 0.7rem + 0.15vw, 0.875rem);
}

/* تحسين قراءة النصوص في البطاقات للشاشات الصغيرة */
@media (max-width: 575.98px) {
  .card-title {
    font-size: 1.1rem;
  }
  
  .card-text, .card-body p {
    font-size: 0.9rem;
    line-height: 1.5;
  }
  
  .course-price {
    font-size: 1rem;
    font-weight: 700;
  }
  
  .btn {
    font-size: 0.95rem;
    padding: 0.5rem 1rem;
  }
  
  .card .badge {
    font-size: 0.7rem;
    padding: 0.35em 0.65em;
  }
  
  .year-title {
    font-size: 1.2rem;
  }
}

/* تحسين أحجام الخطوط في البطاقات المختلفة */
.course-card .card-title {
  font-size: clamp(1.1rem, 1rem + 0.3vw, 1.3rem);
}

.feature-card .card-title {
  font-size: clamp(1.15rem, 1.05rem + 0.35vw, 1.35rem);
}

.stat-card .card-title {
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
}

.testimonial-card .testimonial-text {
  font-size: clamp(0.9rem, 0.85rem + 0.25vw, 1.1rem);
}

.dashboard-card .card-title {
  font-size: clamp(1.1rem, 1rem + 0.3vw, 1.25rem);
}

/* تحسين ظهور الأزرار في الشاشات الصغيرة جداً */
@media (max-width: 380px) {
  .btn, .btn-primary, .btn-secondary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-light, .btn-dark, .btn-link, .btn-outline-primary, .btn-outline-secondary, .btn-custom {
    font-size: 0.9rem;
    padding: 0.45rem 0.9rem;
  }
  
  .btn-sm {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
  }
  
  .btn-lg {
    font-size: 1rem;
    padding: 0.6rem 1.2rem;
  }
  
  .card-title {
    font-size: 1.05rem;
  }
  
  .card-text, .card-body p {
    font-size: 0.85rem;
  }
  
  .year-title {
    font-size: 1.1rem;
  }
}

/* تنسيقات خاصة للشاشات العريضة */
@media (min-width: 1200px) {
  .card-deck .card {
    margin-left: 15px;
    margin-right: 15px;
  }
  
  .course-card .card-title {
    min-height: 3.2rem; /* لضمان توحيد ارتفاع العناوين */
  }
  
  .course-card .card-text {
    min-height: 4.8rem; /* لضمان توحيد ارتفاع الوصف */
  }
}