@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;500;600;700;800&display=swap");

/* One comfortable, responsive reading system for all NexStepia pages. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: "DM Sans", "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.78;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

html[lang="ar"] body {
  font-family: "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif !important;
  font-size: 19px;
  line-height: 1.95 !important;
  letter-spacing: 0 !important;
}

/* Raise the reading size of copy and controls that page-level styles set too small. */
body p,
body li,
body label,
body input,
body select,
body textarea,
body button,
body summary,
body blockquote {
  font-size: max(17.5px, 1em) !important;
  line-height: 1.78;
}

html[lang="ar"] body p,
html[lang="ar"] body li,
html[lang="ar"] body label,
html[lang="ar"] body input,
html[lang="ar"] body select,
html[lang="ar"] body textarea,
html[lang="ar"] body button,
html[lang="ar"] body summary,
html[lang="ar"] body blockquote {
  font-size: max(18.5px, 1em) !important;
  line-height: 1.95;
}

/* Give comparison tables the same comfortable reading size as article copy. */
body table th,
body table td {
  font-size: max(18px, 1em) !important;
  line-height: 1.85 !important;
  padding-block: 14px !important;
}

body table th *,
body table td * {
  font-size: inherit !important;
  line-height: inherit !important;
}

html[lang="ar"] body table th,
html[lang="ar"] body table td {
  font-size: max(19px, 1em) !important;
  line-height: 1.95 !important;
}

/* These elements often contain direct text rather than a paragraph or list. */
body small,
body .crumb,
body .tag,
body .badge,
body .eyebrow,
body .kicker,
body .meta,
body .foot,
body .muted,
body .notice,
body .panel,
body .step,
body .step b,
body .hint,
body .guide-nav a,
body .guide-nav span,
body .next-step-card,
body .next-step-card span,
body .next-step-card b,
body .search-hint,
body .source-note,
body .source-list a,
body .result-note {
  font-size: max(16.5px, 1em) !important;
  line-height: 1.75;
}

html[lang="ar"] body small,
html[lang="ar"] body .crumb,
html[lang="ar"] body .tag,
html[lang="ar"] body .badge,
html[lang="ar"] body .eyebrow,
html[lang="ar"] body .kicker,
html[lang="ar"] body .meta,
html[lang="ar"] body .foot,
html[lang="ar"] body .muted,
html[lang="ar"] body .notice,
html[lang="ar"] body .panel,
html[lang="ar"] body .step,
html[lang="ar"] body .step b,
html[lang="ar"] body .hint,
html[lang="ar"] body .guide-nav a,
html[lang="ar"] body .guide-nav span,
html[lang="ar"] body .next-step-card,
html[lang="ar"] body .next-step-card span,
html[lang="ar"] body .next-step-card b,
html[lang="ar"] body .search-hint,
html[lang="ar"] body .source-note,
html[lang="ar"] body .source-list a,
html[lang="ar"] body .result-note {
  font-size: max(17.5px, 1em) !important;
  line-height: 1.9;
}

/* Direct-text notices and cards had page-specific 12–13px sizes. */
body .notice,
body .panel,
body .step,
body .next-step-card {
  font-size: max(17.5px, 1em) !important;
  line-height: 1.82 !important;
}

html[lang="ar"] body .notice,
html[lang="ar"] body .panel,
html[lang="ar"] body .step,
html[lang="ar"] body .next-step-card {
  font-size: max(18.5px, 1em) !important;
  line-height: 1.95 !important;
}

/* Keep headings easy to scan without letting long titles dominate the page. */
h1 {
  font-size: clamp(1.9rem, 3.3vw, 2.75rem) !important;
  line-height: 1.22 !important;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h2 {
  font-size: max(22px, 1em) !important;
  line-height: 1.38;
}

h3 {
  font-size: max(19px, 1em) !important;
  line-height: 1.45;
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4 {
  letter-spacing: normal !important;
  line-height: 1.55 !important;
}

h1 + p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  line-height: 1.85;
}

@media (max-width: 600px) {
  body {
    font-size: 17.5px;
  }

  html[lang="ar"] body {
    font-size: 18.5px;
  }

  h1 {
    font-size: clamp(1.85rem, 7.2vw, 2.25rem) !important;
    line-height: 1.38 !important;
  }

  body p,
  body li,
  body td,
  body th,
  body label,
  body input,
  body select,
  body textarea,
  body button,
  body small,
  body summary,
  body blockquote,
  body .crumb,
  body .tag,
  body .badge,
  body .eyebrow,
  body .kicker,
  body .meta,
  body .foot,
  body .muted,
  body .notice,
  body .panel,
  body .step,
  body .step b,
  body .hint,
  body .guide-nav a,
  body .guide-nav span,
  body .next-step-card,
  body .search-hint,
  body .source-note,
  body .source-list a,
  body .result-note {
    line-height: 1.75;
  }

  html[lang="ar"] body p,
  html[lang="ar"] body li,
  html[lang="ar"] body label,
  html[lang="ar"] body input,
  html[lang="ar"] body select,
  html[lang="ar"] body textarea,
  html[lang="ar"] body button,
  html[lang="ar"] body small,
  html[lang="ar"] body summary,
  html[lang="ar"] body blockquote,
  html[lang="ar"] body .crumb,
  html[lang="ar"] body .tag,
  html[lang="ar"] body .badge,
  html[lang="ar"] body .eyebrow,
  html[lang="ar"] body .kicker,
  html[lang="ar"] body .meta,
  html[lang="ar"] body .foot,
  html[lang="ar"] body .muted,
  html[lang="ar"] body .notice,
  html[lang="ar"] body .panel,
  html[lang="ar"] body .step,
  html[lang="ar"] body .step b,
  html[lang="ar"] body .hint,
  html[lang="ar"] body .guide-nav a,
  html[lang="ar"] body .guide-nav span,
  html[lang="ar"] body .next-step-card,
  html[lang="ar"] body .search-hint,
  html[lang="ar"] body .source-note,
  html[lang="ar"] body .source-list a,
  html[lang="ar"] body .result-note {
    line-height: 1.9;
  }

  body table th,
  body table td {
    font-size: max(17.5px, 1em) !important;
  }

  html[lang="ar"] body table th,
  html[lang="ar"] body table td {
    font-size: max(18.5px, 1em) !important;
  }
}


/* NexStepia homepage: clear brand lockup and a single-line desktop navigation. */
@media (min-width: 851px) {
  body:has(.hero-art) header { height: 92px; }
  body:has(.hero-art) header .nav {
    width: min(1450px, calc(100% - 64px));
    display: grid;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) auto;
    column-gap: clamp(16px, 1.4vw, 24px);
    justify-content: initial;
  }
  body:has(.hero-art) header .brand { min-width: 0; gap: 12px; }
  body:has(.hero-art) header .brand-copy { min-width: 0; }
  body:has(.hero-art) header .brand-name {
    font-size: 24px !important;
    line-height: 1.05 !important;
    white-space: nowrap;
  }
  body:has(.hero-art) header .brand-tagline {
    margin-top: 4px;
    color: #526259;
    font-size: 12px !important;
    line-height: 1.25 !important;
    letter-spacing: 0;
    white-space: nowrap;
  }
  body:has(.hero-art) header .mark {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    font-size: 21px;
  }
  body:has(.hero-art) header .navlinks {
    min-width: 0;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: clamp(12px, 1.4vw, 22px);
    font-size: 14px;
  }
  body:has(.hero-art) header .navlinks > a { white-space: nowrap; }
  body:has(.hero-art) header .navlinks .pill {
    padding: 10px 15px;
    white-space: nowrap;
  }
  body:has(.hero-art) header .mw-language-toggle {
    justify-self: end;
    margin-inline-start: 0;
  }
}
@media (min-width: 851px) and (max-width: 1250px) {
  body:has(.hero-art) header .nav {
    width: calc(100% - 32px);
    grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) auto;
    column-gap: 12px;
  }
  body:has(.hero-art) header .brand-tagline { font-size: 10px !important; }
  body:has(.hero-art) header .navlinks { gap: 10px; font-size: 12px; }
  body:has(.hero-art) header .navlinks .pill { padding: 8px 10px; }
  body:has(.hero-art) header .mw-language-toggle button { padding-inline: 7px; }
}