/* Fonts Configuration for WLIF App - Arabic & English Support */

/* Font Variables */
:root {
  /* Arabic Fonts */
  --font-arabic-headings: 'IBM Plex Sans Arabic', Arial, sans-serif;
  --font-arabic-content: 'IBM Plex Sans Arabic', Arial, sans-serif;
  
  /* English Fonts */
  --font-english-headings: 'Inter', 'Degular Display', Arial, sans-serif;
  --font-english-content: 'Plus Jakarta Sans', Arial, sans-serif;
  
  /* Default Fonts */
  --font-headings: var(--font-arabic-headings);
  --font-content: var(--font-arabic-content);
  
  /* Fallback Fonts */
  --font-fallback: Arial, sans-serif;
}

/* Language-specific font application */
[lang="ar"], 
[dir="rtl"],
.arabic-text {
  --font-headings: var(--font-arabic-headings);
  --font-content: var(--font-arabic-content);
}

[lang="en"],
[dir="ltr"],
.english-text {
  --font-headings: var(--font-english-headings);
  --font-content: var(--font-english-content);
}

/* Apply fonts to different elements */

/* Main headings (h1, h2, h3, h4, h5, h6) */
h1, h2, h3, h4, h5, h6,
.hero-title,
.hero-sub-title,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.navbar-brand,
.footer-title,
.section-title,
.badge,
.card-title,
.modal-title {
  font-family: var(--font-headings) !important;
}

/* Content text */
body,
p,
span,
div,
.availability-badge,
.availability-text,
.app-text,
.text-content,
.nav-link,
.btn,
.footer-text,
.footer-link,
.form-control,
label,
small,
.landing-footer,
.footer-logo-description {
  font-family: var(--font-content) !important;
}

/* Specific styling for hero section */
.hero-title {
  font-family: var(--font-headings) !important;
  font-weight: 700;
  line-height: 1.2;
}

.hero-sub-title {
  font-family: var(--font-content) !important;
  font-weight: 400;
  line-height: 1.6;
}

/* Availability badge styling */
.availability-badge h2 {
  font-family: var(--font-headings) !important;
  font-weight: 600;
  margin: 0;
  font-size: 1.2rem;
}

/* App download buttons text */
.app-text {
  font-family: var(--font-content) !important;
  font-weight: 500;
}

/* App download button text alignment */
.app-text-small,
.app-text-large {
  font-family: var(--font-content) !important;
  text-align: center;
  display: block;
  line-height: 1.2;
}

/* RTL support for app buttons */
[dir="rtl"] .app-text-small,
[dir="rtl"] .app-text-large {
  text-align: center;
  direction: ltr; /* Keep English text LTR even in RTL layout */
}

/* LTR support for app buttons */
[dir="ltr"] .app-text-small,
[dir="ltr"] .app-text-large {
  text-align: center;
  direction: ltr;
}

/* RTL Support */
[dir="rtl"] {
  font-family: var(--font-content) !important;
}

[dir="rtl"] h1, 
[dir="rtl"] h2, 
[dir="rtl"] h3, 
[dir="rtl"] h4, 
[dir="rtl"] h5, 
[dir="rtl"] h6 {
  font-family: var(--font-headings) !important;
}

/* LTR Support */
[dir="ltr"] {
  font-family: var(--font-content) !important;
}

[dir="ltr"] h1, 
[dir="ltr"] h2, 
[dir="ltr"] h3, 
[dir="ltr"] h4, 
[dir="ltr"] h5, 
[dir="ltr"] h6 {
  font-family: var(--font-headings) !important;
}

/* Global font application */
* {
  font-family: var(--font-content) !important;
}

/* Override for headings */
h1, h2, h3, h4, h5, h6,
.hero-title,
.hero-sub-title,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.navbar-brand,
.footer-title,
.section-title,
.badge,
.card-title,
.modal-title {
  font-family: var(--font-headings) !important;
}

/* Specific overrides for common elements */
.navbar-nav .nav-link,
.btn,
.form-control,
.form-label,
.alert,
.breadcrumb,
.pagination,
.dropdown-menu,
.tooltip,
.popover {
  font-family: var(--font-content) !important;
}

/* App download buttons specific styling */
.app-download-btn {
  font-family: var(--font-content) !important;
  text-align: center;
}

.app-download-btn .app-text {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.app-download-btn .app-text-small {
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 2px;
}

.app-download-btn .app-text-large {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
}

/* Responsive font sizes */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2rem;
  }
  
  .hero-sub-title {
    font-size: 1rem;
  }
  
  .availability-badge h2 {
    font-size: 1rem;
  }
}

@media (min-width: 769px) {
  .hero-title {
    font-size: 3rem;
  }
  
  .hero-sub-title {
    font-size: 1.1rem;
  }
  
  .availability-badge h2 {
    font-size: 1.2rem;
  }
}