/* Local IBM Plex: the complete files include Arabic and Latin glyphs. */
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root,
html[dir="rtl"],
html[dir="ltr"] {
  --sh-font: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  --amx-font: var(--sh-font);
  --amx-display: var(--sh-font);
  --sh-type-small: 0.875rem;
  --sh-type-body: 1rem;
  --sh-type-card: clamp(1.0625rem, 0.99rem + 0.25vw, 1.1875rem);
  --sh-type-section: clamp(1.5rem, 1.25rem + 0.8vw, 2rem);
  --sh-type-page: clamp(1.875rem, 1.35rem + 1.7vw, 2.75rem);
}

/* Inherit into controls, without touching PDF text layers or icon fonts. */
body.sh-body,
body.sh-body:not(.amx-reels-page),
body.sh-offline,
body.login {
  font-family: var(--sh-font);
  font-size: var(--sh-type-body);
  font-weight: 400;
  line-height: 1.85;
}

.sh-body :is(button, input, select, textarea),
.login :is(input, select, textarea),
.login input[type="submit"] {
  font-family: inherit;
}

body.sh-body :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--sh-font);
  font-weight: 600;
}

html[dir="rtl"] .sh-body :is(h1, h2, h3, h4, h5, h6, .sh-eyebrow, .sh-section-heading__kicker) {
  letter-spacing: 0;
}

.sh-body .sh-hero__title {
  max-width: 570px;
  margin-block: 0 28px;
  font-size: var(--sh-type-page);
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0;
  text-wrap: balance;
}

.sh-body .sh-nav a {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.6;
}

.sh-body :is(.sh-button, .sh-text-link, .sh-section__link, .sh-newsletter button[type="submit"]) {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.65;
}

body.sh-body :is(.sh-section__title, .sh-section-heading h2, .sh-newsletter h2, .amx-section-heading h2) {
  font-size: var(--sh-type-section);
  font-weight: 600;
  line-height: 1.5;
}

body.sh-body :is(.sh-page-hero h1, .sh-article__header h1, .sh-about__content h2, .sh-book-intro h1),
body.sh-body:not(.amx-reels-page) :is(.amx-single-header h1, .amx-library__header h1) {
  font-size: var(--sh-type-page);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
  text-wrap: balance;
}

.sh-body :is(.sh-page-hero p:not(.sh-eyebrow, .sh-page-hero__eyebrow), .sh-biography p, .sh-newsletter p) {
  font-size: 1rem;
  line-height: 1.95;
}

.sh-body :is(.sh-eyebrow, .sh-page-hero__eyebrow, .sh-section-heading__kicker, .amx-section-kicker) {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.8;
}

body.sh-body :is(.sh-episode-card__title, .sh-article-row h3, .sh-short-card h3, .sh-book-card h3, .amx-card-title) {
  font-size: var(--sh-type-card);
  font-weight: 600;
  line-height: 1.65;
}

.sh-body :is(.sh-episode-card__meta, .sh-article-row time, .sh-article__meta, .amx-single-meta, .sh-book-card__meta, .sh-book-card__author) {
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.8;
}

.sh-body :is(.sh-book-card__topic, .sh-book-card__read, .sh-book-metadata dt, .sh-book-reader__hint, .sh-pdf-message p) {
  font-size: var(--sh-type-small);
  line-height: 1.85;
}

.sh-body :is(.sh-books-home__empty h3, .sh-empty-state h2, .sh-empty-state h3) {
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.625rem);
  line-height: 1.6;
}

.sh-body :is(.sh-books-home__empty p, .sh-book-intro__summary, .sh-empty-state p) {
  font-size: 1rem;
  line-height: 1.95;
}

.sh-body .sh-entry-content,
.sh-body .sh-about__content .sh-entry-content,
.sh-body .sh-book-description {
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  line-height: 2;
}

.sh-body .sh-entry-content h2 {
  font-size: clamp(1.5rem, 1.3rem + 0.5vw, 1.875rem);
  line-height: 1.6;
}

.sh-body .sh-entry-content h3 {
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  line-height: 1.6;
}

.sh-body .sh-entry-content h4 {
  font-size: 1.125rem;
  line-height: 1.7;
}

.sh-body .sh-footer__grid h2 {
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.6;
}

.sh-body .sh-footer__grid p {
  font-size: 0.9375rem;
  line-height: 1.95;
}

.sh-body :is(.sh-footer__nav a, .sh-footer__email, .sh-footer__bottom) {
  font-size: var(--sh-type-small);
  line-height: 1.85;
}

.sh-body .sh-footer__nav a {
  font-weight: 500;
}

.sh-body :is(.sh-book-filters input, .sh-book-filters select, .sh-search-form input, .sh-newsletter input, .amx-account-form input) {
  font-size: 1rem;
}

.sh-body :is(.sh-book-filters label, .sh-language-picker__panel p, .sh-language-picker__panel a, .amx-account-form label) {
  font-size: 0.9375rem;
  line-height: 1.8;
}

.sh-body :is(.sh-pdf-controls__pages, .sh-pdf-controls__zoom, .sh-book-reader__controls a, .sh-book-reader__controls button) {
  font-size: var(--sh-type-small);
}

body.sh-body :is(.amx-reel-slide__copy h1, .amx-reel-slide__copy h2, .amx-reel-context h2) {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
  line-height: 1.6;
}

body.sh-body:not(.amx-reels-page) .amx-account__heading h2 {
  font-size: clamp(1.375rem, 1.15rem + 0.75vw, 1.875rem);
  line-height: 1.6;
}

body.login label,
body.login :is(#nav, #backtoblog, .privacy-policy-page-link) {
  font-family: var(--sh-font);
  font-size: 0.9375rem;
  line-height: 1.8;
}

body.login :is(input[type="text"], input[type="email"], input[type="password"]) {
  font-size: 1rem;
  line-height: 1.8;
}

.sh-offline h1 {
  font-size: var(--sh-type-page);
  font-weight: 600;
  line-height: 1.5;
}

.sh-offline button {
  font-family: var(--sh-font);
  font-size: 1rem;
  font-weight: 600;
}

html[lang^="en"] .sh-body .sh-entry-content {
  line-height: 1.9;
}

@media (min-width: 821px) and (max-width: 980px) {
  .sh-body .sh-nav a {
    font-size: 0.875rem;
  }
}

@media (max-width: 640px) {
  .sh-body .sh-hero__title {
    font-size: 1.875rem;
    line-height: 1.6;
    margin-bottom: 24px;
  }
}