/* =========================================================
   Kanz Knowledge Typography V2
   Arabic Cross-Device Font System
========================================================= */

:root{
  --kanz-font-arabic:
    "Cairo",
    "Noto Sans Arabic",
    "Segoe UI",
    Tahoma,
    Arial,
    sans-serif;

  --kanz-font-system:
    "Segoe UI",
    Tahoma,
    Arial,
    sans-serif;
}

/* =========================================================
   Main Font Stack
========================================================= */

html,
body,
button,
input,
select,
textarea,
optgroup,
option{
  font-family:var(--kanz-font-arabic) !important;
}

/*
  نترك تنعيم الخط على الوضع الطبيعي للمتصفح.
  إجبار antialiased قد يجعل الخط باهتًا على بعض أجهزة Windows.
*/

html{
  text-rendering:auto;
  -webkit-font-smoothing:auto;
  -moz-osx-font-smoothing:auto;
}

body{
  font-synthesis:none;
}

/* =========================================================
   Headings
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6{
  font-family:var(--kanz-font-arabic) !important;
  font-weight:800;
  line-height:1.45;
  text-rendering:optimizeLegibility;
}

/* =========================================================
   Paragraphs and General Text
========================================================= */

p,
li,
label,
a,
button,
input,
select,
textarea{
  line-height:1.8;
}

p,
li{
  font-weight:500;
}

/* =========================================================
   Small Text Clarity
========================================================= */

small,
.desc,
.sectionHint,
.statLabel,
.thumbLabel,
.courseProgressText,
.progressInlineText,
.dashboardEyebrow,
.coursesEyebrow,
.field-error,
.back-login,
.toolbarField label{
  font-family:var(--kanz-font-arabic) !important;
  font-weight:700;
  line-height:1.85;
}

/* منع النصوص الصغيرة جدًا */

small,
.field-error,
.sectionHint,
.statLabel,
.thumbLabel,
.courseProgressText{
  font-size:max(.82rem,13px);
}

/* =========================================================
   Inputs and Buttons
========================================================= */

button,
input,
select,
textarea{
  font-weight:600;
}

input::placeholder,
textarea::placeholder{
  font-family:var(--kanz-font-arabic) !important;
  font-weight:500;
  opacity:.82;
}

button,
.primaryBtn,
.secondaryBtn,
.topDashboardBtn,
.submit-btn{
  font-weight:800;
}

/* =========================================================
   Strong and Bold
========================================================= */

strong,
b{
  font-weight:800;
}

/* =========================================================
   Windows / Microsoft Improvements
========================================================= */

@supports (-ms-ime-align:auto){
  html,
  body,
  button,
  input,
  select,
  textarea{
    font-family:
      "Cairo",
      "Noto Sans Arabic",
      "Segoe UI",
      Tahoma,
      Arial,
      sans-serif !important;
  }
}

/* High-resolution and modern displays */

@media (min-resolution:1.25dppx){
  body{
    text-rendering:optimizeLegibility;
  }
}

/* =========================================================
   Mobile
========================================================= */

@media(max-width:768px){
  body{
    line-height:1.75;
  }

  p,
  li,
  label,
  input,
  select,
  textarea,
  button{
    line-height:1.75;
  }
}

/* =========================================================
   Accessibility
========================================================= */

@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }
}