/* ============================================================
   Al Awsat — Typography system (Cairo + IBM Plex Mono)
   Loaded last — hierarchy & Arabic/Latin rules only
   ============================================================ */

/* ── Cairo everywhere (public site) ──────────────────────── */
html {
  font-family: var(--font-ar);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html[dir="ltr"] {
  font-family: var(--font-en);
}

body {
  font-family: inherit;
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
}

/* Brand: IBM Plex Mono for meta, timestamps, UI labels.
   Arabic glyphs fall back to Cairo (Plex Mono is Latin-only). */
.meta,
.timestamp,
.ui-label,
.card-meta,
.card-date,
.news-card-meta,
.widget-news-meta,
.article-meta,
.article-meta-item,
.article-meta-bar,
.article-updated-line,
.topbar-date,
.topbar-weather__temp {
  font-family: var(--font-mono);
}

button,
input,
textarea,
select,
optgroup,
.btn,
.nav-quick-link,
.nav-link,
.drawer-nav-link,
.card-title,
.article-title,
.sec-label-text,
.footer-brand-link,
.footer-brand__desc,
.topbar-lang-btn,
.form-control,
.drawer-search-input,
.nav-search-input,
.nav-search-dialog-input {
  font-family: inherit;
}

/* ── Hierarchy: Bold 700 — main headlines ───────────────── */
.article-title,
.search-hero-title,
.event-detail-title,
.event-modal-title,
.weather-city-name,
.weather-big-temp,
.weather-w-temp,
.logo-wordmark,
.team-roster-head__title,
.author-profile__name {
  font-weight: var(--fw-bold);
}

/* ── Hierarchy: SemiBold 600 — sections & cards ───────────── */
.sec-label-text,
.widget-header-text,
.widget-header,
.sidebar-widget .widget-header,
.card-title,
.card-title--lg,
.hero-headline,
.home-news-card__title,
.home-featured-side-title,
.home-featured-side-body .card-title,
.home-block--breaking .home-news-card__title,
.home-poll__title,
.home-subcat-pill,
.nav-quick-link,
.nav-link,
.nav-spotlight-pill,
.drawer-nav-link,
.drawer-lang-btn,
.btn,
.page-btn,
.footer-brand-subscribe-btn,
.footer-brand-subscribe-title,
.breaking-label,
.card-opinion-name,
.card-opinion-title,
.event-info-title,
.event-detail-articles__title,
.article-poll__question,
.poll-list-item__title,
.team-roster-card__name,
.author-article-list__title,
.article-body h2,
.article-body h3,
.exchange-code,
.rate-value,
.city-card-name,
.calendar-month-title,
.weather-stat-val,
.weather-w-detail-val,
.weather-hero-stat__val,
.weather-widget-pro__stat-val {
  font-weight: var(--fw-semibold);
}

/* ── Hierarchy: Medium 500 — navigation & labels ────────── */
.card-cat-badge,
.article-kicker,
.hero-cat-pill,
.widget-news-meta,
.card-meta,
.card-date,
.article-meta-item,
.article-meta-bar,
.article-author-name,
.topbar-date,
.topbar-weather__temp,
.topbar-lang-btn,
.footer-brand-link,
.footer-brand__desc,
.footer-brand-apps-title,
.author-profile__role,
.cat-tab,
.drawer-section-title,
.nav-search-toggle,
.sec-label-more,
.team-roster-card__role {
  font-weight: var(--fw-medium);
}

/* ── Hierarchy: Regular 400 — body & metadata ─────────────── */
.article-body,
.article-subtitle,
.article-standfirst,
.card-summary,
.card-excerpt,
.footer-brand__copy,
.footer-brand-wordmark,
.footer-brand-subscribe-hint,
.widget-news-item,
.trending-card,
.exchange-chg-up,
.exchange-chg-down,
.article-updated-line,
.breadcrumb,
.pagination {
  font-weight: var(--fw-regular);
}

/* ── Line-height refinements ─────────────────────────────── */
.article-title,
.hero-headline,
.search-hero-title {
  line-height: var(--lh-heading);
}

.card-title,
.home-news-card__title {
  line-height: var(--lh-ui);
}

.sec-label-text,
.widget-header-text {
  line-height: var(--lh-tight);
}

/* ── Arabic: primary script rules ────────────────────────── */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6,
[dir="rtl"] .article-title,
[dir="rtl"] .hero-headline,
[dir="rtl"] .card-title,
[dir="rtl"] .sec-label-text,
[dir="rtl"] .widget-header-text,
[dir="rtl"] .breaking-label,
[dir="rtl"] .nav-quick-link,
[dir="rtl"] .card-cat-badge,
[dir="rtl"] .article-kicker,
[dir="rtl"] .hero-cat-pill,
[dir="rtl"] .widget-header,
[dir="rtl"] .event-month,
[dir="rtl"] .logo-wordmark,
[dir="rtl"] .footer-brand-wordmark,
[dir="rtl"] .team-roster-card__name,
[dir="rtl"] .author-profile__name,
[dir="rtl"] .author-profile__role {
  font-style: normal;
  letter-spacing: normal;
  text-transform: none;
}

[dir="rtl"] .article-body blockquote {
  font-style: normal;
}

/* ── Latin: do not overpower Arabic ────────────────────────── */
html[dir="ltr"] .article-title,
html[dir="ltr"] .hero-headline,
html[dir="ltr"] .sec-label-text,
html[dir="ltr"] .card-title {
  letter-spacing: -0.01em;
}

html[dir="ltr"] .breaking-label,
html[dir="ltr"] .hero-cat-pill,
html[dir="ltr"] .event-month {
  letter-spacing: 0.03em;
}

/* ── Responsive readability (minimal scaling) ─────────────── */
@media (max-width: 768px) {
  body {
    font-size: 15px;
    line-height: 1.6;
  }

  .article-title {
    line-height: 1.3;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 14.5px;
  }

  .hero-headline {
    line-height: 1.28;
  }

  .card-title {
    line-height: 1.42;
  }
}

@media (min-width: 1440px) {
  body {
    font-size: 15px;
  }
}