/**
 * Arabic Typography - urWave
 * Centralized Arabic font configuration for all Arabic content
 * Using Noto Kufi Arabic as the primary Arabic font
 */

/* ==========================================================================
   Font Import - Noto Kufi Arabic
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* ==========================================================================
   CSS Custom Properties for Arabic Typography
   ========================================================================== */
:root {
  --font-arabic: 'Noto Kufi Arabic', 'Cairo', 'Tahoma', 'Arial', sans-serif;
  --font-arabic-weight-light: 300;
  --font-arabic-weight-regular: 400;
  --font-arabic-weight-medium: 500;
  --font-arabic-weight-semibold: 600;
  --font-arabic-weight-bold: 700;
}

/* ==========================================================================
   Global Arabic Styles - Applied to RTL documents
   ========================================================================== */
html[dir="rtl"],
html[lang="ar"],
[dir="rtl"],
[lang="ar"] {
  font-family: var(--font-arabic);
}

/* Body and main content */
html[dir="rtl"] body,
html[lang="ar"] body {
  font-family: var(--font-arabic);
  font-weight: var(--font-arabic-weight-regular);
  line-height: 1.8;
  letter-spacing: 0;
}

/* ==========================================================================
   Typography Elements
   ========================================================================== */

/* Headings */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] .display-1,
html[dir="rtl"] .display-2,
html[dir="rtl"] .display-3,
html[dir="rtl"] .display-4,
html[dir="rtl"] .display-5,
html[dir="rtl"] .display-6 {
  font-family: var(--font-arabic);
  font-weight: var(--font-arabic-weight-bold);
  line-height: 1.4;
}

/* Paragraphs and text */
html[dir="rtl"] p,
html[dir="rtl"] span,
html[dir="rtl"] a,
html[dir="rtl"] li,
html[dir="rtl"] label,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select,
html[dir="rtl"] button {
  font-family: var(--font-arabic);
}

/* Navigation */
html[dir="rtl"] .nav-link,
html[dir="rtl"] .navbar-nav,
html[dir="rtl"] .dropdown-item {
  font-family: var(--font-arabic);
  font-weight: var(--font-arabic-weight-medium);
}

/* Buttons */
html[dir="rtl"] .btn {
  font-family: var(--font-arabic);
  font-weight: var(--font-arabic-weight-medium);
}

/* Lead text */
html[dir="rtl"] .lead {
  font-family: var(--font-arabic);
  font-weight: var(--font-arabic-weight-regular);
  line-height: 1.9;
}

/* Small text and captions */
html[dir="rtl"] small,
html[dir="rtl"] .small,
html[dir="rtl"] .text-muted,
html[dir="rtl"] figcaption {
  font-family: var(--font-arabic);
  font-weight: var(--font-arabic-weight-light);
}

/* ==========================================================================
   Form Elements
   ========================================================================== */
html[dir="rtl"] .form-control,
html[dir="rtl"] .form-select,
html[dir="rtl"] .form-label,
html[dir="rtl"] .form-text {
  font-family: var(--font-arabic);
}

html[dir="rtl"] input::placeholder,
html[dir="rtl"] textarea::placeholder {
  font-family: var(--font-arabic);
}

/* ==========================================================================
   Footer
   ========================================================================== */
html[dir="rtl"] footer,
html[dir="rtl"] .footer {
  font-family: var(--font-arabic);
}

/* ==========================================================================
   Cards and Components
   ========================================================================== */
html[dir="rtl"] .card,
html[dir="rtl"] .card-title,
html[dir="rtl"] .card-text,
html[dir="rtl"] .card-body {
  font-family: var(--font-arabic);
}

/* ==========================================================================
   Arabic Text Utility Class - For use in LTR contexts
   ========================================================================== */
.arabic-text,
.ar-text {
  font-family: var(--font-arabic) !important;
  font-weight: var(--font-arabic-weight-semibold);
  direction: rtl;
  unicode-bidi: isolate;
}

/* Language switcher Arabic text */
.language-select .arabic-text {
  font-family: var(--font-arabic) !important;
  font-weight: var(--font-arabic-weight-semibold);
  font-size: 0.95rem;
  letter-spacing: 0;
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */
@media (max-width: 767.98px) {
  html[dir="rtl"] body {
    font-size: 0.95rem;
    line-height: 1.7;
  }
  
  html[dir="rtl"] h1,
  html[dir="rtl"] .display-1 {
    font-size: 2rem;
  }
  
  html[dir="rtl"] h2,
  html[dir="rtl"] .display-2 {
    font-size: 1.75rem;
  }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */
@media print {
  html[dir="rtl"] body {
    font-family: var(--font-arabic);
  }
}