/* sm-ar.css: the Arabic display face for sm-proof.html (SM-PAGE fix 11): Pixel AE (CC0, Ahmed Essam).
   Pixel AE has a 10-design-px em (every outline on a 100-unit grid), so it is crisp ONLY at font sizes that are multiples of 10 px.
   Pixel parity with the Latin face (Unixel, 12.5 px per em): EN 25 = AR 20, EN 37.5 = AR 30, EN 50 = AR 40, EN 62.5 = AR 50.
   One family, no unicode-range: Latin words and digits inside Arabic labels render in Pixel AE's own Latin on the same grid,
   never in Unixel at a size that would blur (40 / 12.5 = 3.2 px per design px).
   Pixel AE has no tashkeel and no GPOS: marks are removed from Pixel AE roles by js/sm-hud.js (prose keeps them, in Plex). */

@font-face {
  font-family: 'Pixel AE Full'; src: url('../../fonts/PixelAE-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: block;
  ascent-override: 96%; descent-override: 48%; line-gap-override: 0%; /* Unixel's line box (1920 / 960 of 2000), so mixed lines keep one baseline */
}
@font-face {
  font-family: 'Pixel AE Full'; src: url('../../fonts/PixelAE-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: block;
  ascent-override: 96%; descent-override: 48%; line-gap-override: 0%;
}

.sm { --font-ar-display: 'Pixel AE Full', 'Unixel', sans-serif; }

/* every Arabic display, label, name and button role */
[dir="rtl"] .sm :is(.px-type, .hud-label, .hud-cta, .sm-nav-toggle, .sm-nav-cta) {
  font-family: var(--font-ar-display); font-weight: 400; font-synthesis: none; font-kerning: none;
  -webkit-font-smoothing: none; text-rendering: optimizeSpeed;
}
[dir="rtl"] .sm .ar-bold { font-weight: 700; }

/* sizes by pixel parity with the EN role; leading 1.3 to 1.4 now that the face carries no marks */
[dir="rtl"] .sm .hud-label, [dir="rtl"] .sm .hud-cta, [dir="rtl"] .sm .sm-nav-toggle, [dir="rtl"] .sm .sm-nav-cta, [dir="rtl"] .sm .sm-footer-top { font-size: 20px; line-height: 28px; font-weight: 700; }   /* EN 25 */
[dir="rtl"] .sm .pf-label { font-size: 30px; line-height: 39px; font-weight: 400; }                                                                                       /* EN 37.5 */
[dir="rtl"] .sm .pf-title { font-size: 30px; line-height: 42px; text-wrap: balance; font-weight: 400; }                                                                   /* EN 37.5 */
[dir="rtl"] .sm .hw-title { font-size: 40px; line-height: 52px; font-weight: 400; }                                                                                       /* EN 50 */
[dir="rtl"] .sm .mk-display { font-size: 50px; line-height: 65px; font-weight: 400; }                                                                                     /* EN 62.5 */
[dir="rtl"] .sm .mk-meta { font-size: 20px; line-height: 28px; font-weight: 400; }                                                                                        /* EN 12.5, but 10 px is too small for Arabic */
[dir="rtl"] .sm .mk-bin, [dir="rtl"] .sm .ro-bin { font-size: 20px; font-weight: 700; }
[dir="rtl"] .sm .pf-cell .hud-label { line-height: 28px; }

/* the "·" is a fallback glyph in both faces (neither has U+00B7): it is a pixel square, 2 design px, C1, in both languages */
.sm .mk-sep { display: inline-block; inline-size: 2px; block-size: 2px; background: var(--hud-c1); vertical-align: middle; font-size: 0; margin-inline: 10px; }
[dir="rtl"] .sm .mk-sep { inline-size: 4px; block-size: 4px; }

@media (max-width: 767px) {
  [dir="rtl"] .sm .pf-title { font-size: 30px; line-height: 42px; font-weight: 400; }
  [dir="rtl"] .sm .hw-title { font-size: 30px; line-height: 42px; font-weight: 400; }
  [dir="rtl"] .sm .mk-display { font-size: 30px; line-height: 42px; font-weight: 400; }
  [dir="rtl"] .sm .pf-ro .hud-label { font-size: 20px; line-height: 28px; font-weight: 700; }
  [dir="rtl"] .sm .ro-bin { font-size: 20px; line-height: 22px; }
}

/* weight: Regular is stroke-for-stroke parity with Unixel (1 design px) and ships at 30 px and above. 20 px roles are Bold, because Regular's ink sits in a
   thin rasm band and reads lighter than the EN role; the exception is the hero status line (.mk-meta), which stays Regular so it is as quiet as its EN counterpart. */
[dir="rtl"] .sm .hud-cta { font-weight: 700; }
/* Pixel AE's glyphs carry 2 to 3 px of side bearing on their start edge: the bar and the signal start that much in, so the ink edges line up */
@media (max-width: 767px) { [dir="rtl"] .sm .ro-bar, [dir="rtl"] .sm .ro-sig { margin-inline-start: 2px; inline-size: 62px; } }

/* footer links: Pixel AE Bold at 20 px like every 20 px role */
[dir="rtl"] .sm .sm-footer .sm-footer-link { font-size: 20px; line-height: 28px; font-weight: 700; }