@charset "UTF-8";
/* ==========================================================================
   برمجي — Typography System
   Two families, one scale.
     · IBM Plex Sans Arabic — display / headings / UI (600, 700)
     · Cairo               — body copy (variable 200–1000)
     · IBM Plex Mono       — code only (Latin, 400)

   Arabic rules that drive every decision here:
     · Never apply letter-spacing to Arabic — it is a connected script and
       tracking breaks the joins. Tracking is opt-in via .lat for Latin runs.
     · Arabic needs more leading than Latin: body 1.85, display 1.3 minimum.
     · Never let body text fall below 16px.
   ========================================================================== */

/* ---------- Faces ---------- */

/* Cairo — body (variable) */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../fonts/cairo-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
    U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../fonts/cairo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* IBM Plex Sans Arabic — display */
@font-face {
  font-family: 'Plex Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/plex-ar-600.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
    U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Plex Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/plex-lat-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plex Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/plex-ar-700.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
    U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Plex Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/plex-lat-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* IBM Plex Mono — code (Latin only; the code panel is Latin by design) */
@font-face {
  font-family: 'Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plexmono-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212;
}

/* Metric-matched fallbacks: hold the layout still while the webfonts load,
   so swapping in Cairo/Plex does not reflow the page (CLS). */
@font-face {
  font-family: 'Cairo Fallback';
  src: local('Segoe UI'), local('Tahoma'), local('Arial');
  size-adjust: 96%;
  ascent-override: 96%;
  descent-override: 32%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Plex Fallback';
  src: local('Segoe UI'), local('Tahoma'), local('Arial');
  size-adjust: 100%;
  ascent-override: 92%;
  descent-override: 28%;
  line-gap-override: 0%;
}

/* ---------- Tokens ---------- */
:root {
  /* Families */
  --font-display: 'Plex Arabic', 'Plex Fallback', 'Noto Sans Arabic', 'Segoe UI', Tahoma, system-ui, sans-serif;
  --font-body:    'Cairo', 'Cairo Fallback', 'Noto Sans Arabic', 'Segoe UI', Tahoma, system-ui, sans-serif;
  --font-mono:    'Plex Mono', ui-monospace, 'Cascadia Code', Consolas, 'Courier New', monospace;

  /* Fluid scale — 360px → 1440px viewport, major-third at the top end.
     Every size in the theme comes from this ladder. Nothing is hard-coded. */
  --fs-3xs: clamp(0.8125rem, 0.80rem + 0.06vw, 0.8438rem);  /*  13   → 13.5 */
  --fs-2xs: clamp(0.8750rem, 0.86rem + 0.07vw, 0.9063rem);  /*  14   → 14.5 */
  --fs-xs:  clamp(0.9375rem, 0.92rem + 0.09vw, 0.9688rem);  /*  15   → 15.5 */
  --fs-sm:  clamp(1.0000rem, 0.98rem + 0.11vw, 1.0625rem);  /*  16   → 17   */
  --fs-md:  clamp(1.0625rem, 1.03rem + 0.16vw, 1.1250rem);  /*  17   → 18   */
  --fs-lg:  clamp(1.1250rem, 1.05rem + 0.35vw, 1.3125rem);  /*  18   → 21   */
  --fs-xl:  clamp(1.2500rem, 1.13rem + 0.56vw, 1.5625rem);  /*  20   → 25   */
  --fs-2xl: clamp(1.4375rem, 1.24rem + 0.88vw, 1.9375rem);  /*  23   → 31   */
  --fs-3xl: clamp(1.6875rem, 1.36rem + 1.44vw, 2.4375rem);  /*  27   → 39   */
  --fs-4xl: clamp(2.0000rem, 1.51rem + 2.19vw, 3.0625rem);  /*  32   → 49   */
  --fs-5xl: clamp(2.2500rem, 1.53rem + 3.19vw, 4.0000rem);  /*  36   → 64   */

  /* Leading — Arabic runs looser than Latin at every step */
  --lh-display: 1.30;  /* h1 / h2 — tight but never clips Arabic descenders */
  --lh-heading: 1.40;  /* h3 / h4 */
  --lh-ui:      1.55;  /* buttons, nav, labels */
  --lh-body:    1.85;  /* running Arabic copy */
  --lh-code:    1.75;

  /* Weights — capped at 700; Plex ships 600/700, Cairo covers the rest.
     800/900 were indistinguishable from 700 at these sizes. */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Tracking — zero for Arabic, always. .lat opts Latin runs in. */
  --tracking:     0em;
  --tracking-lat: 0.02em;

  /* Measure */
  --measure:       68ch;
  --measure-tight: 52ch;
}

/* ---------- Base ---------- */
body.brmgi {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking);
  font-synthesis-weight: none;   /* never fake a weight we did not ship */
  font-synthesis-style: none;
  font-optical-sizing: auto;
  font-variant-numeric: lining-nums proportional-nums;
  -webkit-font-smoothing: auto;  /* `antialiased` thins Arabic strokes on dark */
  -moz-osx-font-smoothing: auto;
  /* `text-rendering: optimizeLegibility` is deliberately NOT set — it is a
     known source of rendering and performance bugs on long Arabic pages. */
}

/* Site-wide, the identity face and zero tracking — nothing else.
   Elementor still owns the SIZE and SPACING of its own pages, so imposing the
   scale globally would silently redesign all 101 service pages. */
.brmgi h1, .brmgi h2, .brmgi h3, .brmgi h4, .brmgi h5, .brmgi h6 {
  font-family: var(--font-display);
  letter-spacing: var(--tracking);   /* never negative on Arabic */
}

/* The scale applies only to markup this theme authors: the front page (.bx)
   and the site chrome. */
.bx h1, .bx h2, .bx h3, .bx h4, .bx h5, .bx h6,
.bx-header h1, .bx-header h2, .bx-footer h2, .bx-footer h3 {
  font-weight: var(--fw-bold);
  text-wrap: balance;
  margin: 0;
}
.bx h1 { font-size: var(--fs-5xl); line-height: var(--lh-display); }
.bx h2 { font-size: var(--fs-3xl); line-height: var(--lh-display); }
.bx h3 { font-size: var(--fs-xl);  line-height: var(--lh-heading); }
.bx h4 { font-size: var(--fs-lg);  line-height: var(--lh-heading); }
.bx h5 { font-size: var(--fs-md);  line-height: var(--lh-heading); }
.bx h6 { font-size: var(--fs-sm);  line-height: var(--lh-heading); }

.bx p, .bx-header p, .bx-footer p { margin: 0; text-wrap: pretty; max-width: var(--measure); }

/* Buttons / inputs do not inherit type by default — pin them. */
.brmgi button, .brmgi input, .brmgi select, .brmgi textarea {
  font: inherit;
  letter-spacing: inherit;
}

/* ---------- Utilities ---------- */

/* A run of Latin inside Arabic: switch family and allow tracking. */
.lat, .brmgi [lang="en"], .brmgi code, .brmgi kbd, .brmgi samp {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-lat);
  unicode-bidi: isolate;
}

/* Numeric display — aligns digits in stats, counters and tables. */
.nums {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* Any bidi island (LTR phone numbers, code, tags) must be isolated or the
   surrounding Arabic punctuation jumps to the wrong end of the string. */
.brmgi [dir="ltr"], .brmgi [dir="rtl"] { unicode-bidi: isolate; }

.measure       { max-width: var(--measure); }
.measure-tight { max-width: var(--measure-tight); }

/* Text links inside running copy need a non-colour affordance —
   the palette is monochrome, so colour alone cannot mark a link. */
.brmgi p > a:not([class]),
.brmgi li > a:not([class]) {
  text-decoration: underline;
  text-underline-offset: .22em;
  text-decoration-thickness: from-font;
}
.brmgi p > a:not([class]):hover,
.brmgi li > a:not([class]):hover { text-decoration-thickness: 2px; }

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