/* ==========================================================================
   ZAIN ARABIC FONT FAMILY (خط زين العربي الرسمي)
   ========================================================================== */

/* Light: 200 - 300 */
@font-face {
  font-family: 'Zain';
  src: url('fonts/zain-200.ttf') format('truetype'),
       url('fonts/ZAIN%20mob%20variable%20200%20.ttf') format('truetype');
  font-weight: 200 300;
  font-style: normal;
  font-display: swap;
}

/* Regular: 400 - 500 */
@font-face {
  font-family: 'Zain';
  src: url('fonts/zain-400.ttf') format('truetype'),
       url('fonts/ZAIN%20mob%20variable%20400%20.ttf') format('truetype');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

/* SemiBold: 600 - 700 */
@font-face {
  font-family: 'Zain';
  src: url('fonts/zain-600.ttf') format('truetype'),
       url('fonts/ZAIN%20mob%20variable%20600.ttf') format('truetype');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

/* Bold / ExtraBold: 800 - 900 */
@font-face {
  font-family: 'Zain';
  src: url('fonts/zain-800.ttf') format('truetype'),
       url('fonts/ZAIN%20mob%20variable%20800.ttf') format('truetype');
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}

/* Decorative Swashes */
@font-face {
  font-family: 'Zain Swashes';
  src: url('fonts/zain-swashes.ttf') format('truetype'),
       url('fonts/zainmobileswashes-VF.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Typography Variables Override for Arabic */
:root {
  --ff-head: 'Zain', 'Alexandria', -apple-system, sans-serif;
  --ff-body: 'Zain', 'Cairo', -apple-system, sans-serif;
  --ff-base: 'Zain', 'Cairo', -apple-system, sans-serif;
}

/* Apply Zain font to all Arabic elements */
html[lang='ar'],
html:not([lang='en']),
body:not(.lang-en),
[dir='rtl'] {
  font-family: var(--ff-body);
}

html[lang='ar'] h1, html[lang='ar'] h2, html[lang='ar'] h3, 
html[lang='ar'] h4, html[lang='ar'] h5, html[lang='ar'] h6,
[dir='rtl'] h1, [dir='rtl'] h2, [dir='rtl'] h3, 
[dir='rtl'] h4, [dir='rtl'] h5, [dir='rtl'] h6,
.sec-title, .hero-title, .v-card-title, .works-group-title,
.about-quote, .stat-num, .nav-logo {
  font-family: var(--ff-head);
}