/* ═══════════════════════════════════════════
   Right-to-left overrides — loaded only by the Arabic page.
   Kept separate from styles.css so the English site is untouched by it.
   Only rules with a genuine left/right bias are flipped here; anything already
   using logical properties (margin-inline, inset, flex/grid order) flips by itself.
   ═══════════════════════════════════════════ */

body { font-family: "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif; }

/* Arabic script has taller ascenders and no capitals; a little extra leading and a
   slightly smaller display size keeps the headline from feeling cramped. */
h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); line-height: 1.28; letter-spacing: 0; }
h2 { line-height: 1.34; letter-spacing: 0; }
h3 { letter-spacing: 0; }
body { line-height: 1.85; }

/* Latin fragments inside Arabic text (brand name, "2030") keep the Latin face. */
.lat { font-family: "Inter", sans-serif; }

/* The skip link needs no flip — styles.css positions it with inset-inline-start. */

/* ── Header ───────────────────────────────── */
.nav a:not(.btn)::after { transform-origin: right; }
.brand-text { align-items: flex-start; }

/* ── Hero ─────────────────────────────────── */
/* The headline moves to the right, so the scrim's dark end must move with it.
   The photo itself is NOT mirrored — flipping a real photograph of a real place
   produces a subtly wrong image of a landmark people recognise. */
.hero-scrim {
  background:
    linear-gradient(270deg, rgba(6,20,48,.90) 0%, rgba(6,20,48,.72) 38%, rgba(6,20,48,.34) 62%, rgba(6,20,48,.12) 100%),
    linear-gradient(180deg, rgba(6,20,48,.50) 0%, rgba(6,20,48,0) 30%, rgba(6,20,48,0) 62%, rgba(8,24,56,.62) 100%);
}
.hero-bg { inset: -10% auto auto -5%; transform: scaleX(-1); }

.eyebrow { letter-spacing: .04em; }

/* ── Section furniture ────────────────────── */
.kicker { letter-spacing: .06em; }

/* ── Tiles ────────────────────────────────── */
.tile { padding: 26px 58px 26px 26px; }
.tile::before { left: auto; right: 26px; }

/* ── Steps ────────────────────────────────── */
.step { grid-template-columns: 74px 1fr; }

/* ── Dark value section ───────────────────── */
.section-dark::after { right: auto; left: -8%; }

/* ── Contact ──────────────────────────────── */
.field input, .field select, .field textarea { text-align: right; }

/* Email and URLs must stay left-to-right even inside an RTL page, or the punctuation
   jumps to the wrong end (".sa@info" instead of "info@...sa"). */
.contact-details dd a[href^="mailto"],
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* ── Footer ───────────────────────────────── */
.footer-tag span { color: var(--gold-light); }

/* ── Language switch ──────────────────────── */
.lang-switch { font-family: "Inter", sans-serif; }

@media (max-width: 640px) {
  h1 { line-height: 1.32; }
}