/* ============================================================
   EGYTEK · Arabic / RTL layer
   Loaded after main.css on the Arabic page only.
   Two jobs:
     1. mirror the layout for right-to-left reading
     2. correct the typography, since Arabic is a connected
        script: letter-spacing must be neutralised everywhere,
        and the line-height needs more room than the Latin set
   ============================================================ */

:root {
  --sans-ar: 'IBM Plex Sans Arabic', 'IBM Plex Sans', system-ui, sans-serif;
  --display-ar: 'Cairo', 'IBM Plex Sans Arabic', system-ui, sans-serif;
}

/* ---------- typography ---------- */
/* Arabic needs more room than the Latin scale: the letterforms carry
   more detail per glyph, so it is set a step larger, at regular weight
   rather than the Latin 300, with a slightly brighter body colour. */
body {
  font-family: var(--sans-ar);
  font-size: 17px;
  line-height: 1.9;
}

h1,
h2,
h3 {
  font-family: var(--display-ar);
  line-height: 1.3;
}

/* Arabic is cursive: tracking breaks the joins between glyphs.
   Neutralise every letter-spacing inherited from the Latin design. */
h1,
h2,
h3,
.slabel,
.eyebrow,
.btn,
.nav-menu a,
.readout span,
.readout b,
.stat .cap,
.stat .num,
.ticker-track,
.step .n,
.cell .idx,
.cell .spec,
.contact-card .k,
.contact-card .go,
.rail .mark,
footer h2,
.foot-bottom {
  letter-spacing: normal;
}

/* headline: the Latin version leans on very tight tracking and a
   0.94 line-height, neither of which suit Arabic */
h1 {
  font-size: clamp(38px, 9vw, 118px);
  font-weight: 900;
  line-height: 1.22;
}

h2 {
  font-size: clamp(27px, 4.4vw, 50px);
  line-height: 1.25;
}

.hero-sub {
  font-size: clamp(16px, 1.7vw, 19.5px);
  line-height: 1.95;
  max-width: 50ch;
}

.cell p,
.step p,
.about-body p,
.two-col p {
  line-height: 1.95;
}

.two-col p {
  font-size: 17px;
}

.cell p {
  font-size: 16.5px;
}

.step p {
  font-size: 16px;
}

.about-body p {
  font-size: 17px;
  max-width: 58ch;
}

.contact-card b {
  font-size: 17px;
}

footer li,
.foot-tag {
  font-size: 15px;
}

/* small mono labels: Arabic has no monospace tradition, so the
   label voice comes from size and colour instead of the mono face */
.slabel,
.eyebrow,
.readout span,
.stat .cap,
.step .n,
.cell .spec,
.contact-card .k,
.contact-card .go,
footer h2,
.foot-bottom,
.ticker-track {
  font-family: var(--sans-ar);
}

/* the Latin design sets these labels at 9-10px, which Arabic cannot
   carry legibly: each is raised and given a little more weight */
.slabel,
.stat .cap,
.contact-card .k,
footer h2 {
  font-size: 12.5px;
  font-weight: 500;
}

.readout span,
.foot-bottom,
.cell .spec,
.contact-card .go {
  font-size: 12.5px;
}

.cell .spec em {
  padding: 5px 10px;
}

.step .n {
  font-size: 13px;
  font-weight: 500;
}

.eyebrow {
  font-size: 13.5px;
  font-weight: 500;
}

.btn,
.nav-menu a {
  font-family: var(--sans-ar);
  font-size: 14px;
  font-weight: 500;
}

.ticker-track {
  font-size: 13.5px;
}

/* numerals and Latin fragments stay in the Latin faces */
.readout b,
.stat .num,
.cell .idx {
  font-family: var(--display), var(--display-ar);
}

/* ---------- mirrored layout ---------- */
/* The skip link and the .cell paddings/borders use logical properties,
   so they mirror on their own and need no overrides here. */

/* measurement rail moves to the right edge */
.rail {
  left: auto;
  right: 0;
  border-right: 0;
  border-left: 1px solid var(--line);
}

/* the vertical marks are Latin-only chrome: Arabic does not set
   vertically, so the rail keeps its ticks and drops the text */
.rail .mark {
  display: none;
}

.readout div {
  border-right: 0;
  border-left: 1px solid var(--line);
}

/* the sweep reads better travelling with the text direction */
@keyframes sweep-rtl {
  0% {
    transform: translateX(40vw);
  }

  100% {
    transform: translateX(-140vw);
  }
}

.sweep {
  animation-name: sweep-rtl;
}

/* The marquee duplicates its content and slides by half the track to
   loop seamlessly. In RTL the track is laid out from the right edge,
   so it has to travel the other way or it just empties the strip. */
@keyframes marquee-rtl {
  to {
    transform: translateX(50%);
  }
}

.ticker-track {
  animation-name: marquee-rtl;
}

@media (max-width: 899px) {

  /* drawer enters from the left in RTL */
  .nav-menu {
    right: auto;
    left: 0;
    border-left: 0;
    border-right: 1px solid var(--line);
    transform: translateX(-105%);
  }

  .nav-menu.open {
    transform: translateX(0);
  }
}

@media (min-width: 1024px) {
  .shell {
    padding-left: 0;
    padding-right: var(--rail);
  }

  .nav-inner {
    padding-left: 0;
    padding-right: var(--rail);
  }
}