/* =====================================================================
   ASH GAMES STUDIO , Arabic / RTL overlay
   Loaded AFTER style.css on /ar/ pages.

   Font stack
   ----------
   Primary: Madani Arabic (self-hosted woff2, see @font-face below).
   Fallback: Almarai (loaded via Google Fonts on every AR page).
   Final fallback: Noto Kufi Arabic.
   ===================================================================== */

@font-face {
  font-family: 'Madani Arabic';
  src: url('fonts/madani/MadaniArabic-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Madani Arabic';
  src: url('fonts/madani/MadaniArabic-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Madani Arabic';
  src: url('fonts/madani/MadaniArabic-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Madani Arabic';
  src: url('fonts/madani/MadaniArabic-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* No Black 900 file in our license set; map 800/900 to Bold so heavy display text still resolves. */
@font-face {
  font-family: 'Madani Arabic';
  src: url('fonts/madani/MadaniArabic-Bold.woff2') format('woff2');
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}

/* Alias Archivo Black -> Madani Bold for Arabic codepoints only.
   Many display classes (.heroMetaNum, .studioOath, .bigQuoteText, etc.)
   hardcode 'Archivo Black', which has no Arabic glyphs and falls through
   to the OS sans-serif for Arabic text. This font-face redirects just
   the Arabic ranges to Madani Bold, leaving Latin on Archivo Black. */
@font-face {
  font-family: 'Archivo Black';
  src: url('fonts/madani/MadaniArabic-Bold.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

:root {
  --ar-stack: 'Madani Arabic', 'Almarai', 'Noto Kufi Arabic', 'Tajawal', system-ui, sans-serif;
  --ar-display: 'Madani Arabic', 'Almarai', 'Noto Kufi Arabic', sans-serif;
}

html[lang="ar"], html[dir="rtl"] {
  direction: rtl;
}

html[lang="ar"] body,
html[dir="rtl"] body {
  font-family: var(--ar-stack);
}

html[lang="ar"] .root,
html[dir="rtl"] .root {
  font-family: var(--ar-stack);
  line-height: 1.7;
}

/* Display headings , drop Archivo Black, use heavier Arabic weight */
html[lang="ar"] .display,
html[lang="ar"] .displayBig,
html[lang="ar"] .displayHero,
html[lang="ar"] .heroTitle,
html[lang="ar"] .postTitle,
html[lang="ar"] .subTitle,
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4 {
  font-family: var(--ar-display);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.15;
  text-transform: none;
}

/* All-caps display blocks , Arabic has no uppercase, kill text-transform */
html[lang="ar"] .eyebrow,
html[lang="ar"] .btnPrimary,
html[lang="ar"] .btnGhost,
html[lang="ar"] .navCta,
html[lang="ar"] .tickerItem,
html[lang="ar"] .heroStudioTag,
html[lang="ar"] .heroTagline,
html[lang="ar"] .heroMetaLabel,
html[lang="ar"] .blockLabel,
html[lang="ar"] .roleApply,
html[lang="ar"] .roleMore,
html[lang="ar"] .navLink,
html[lang="ar"] .footerCol h4,
html[lang="ar"] .footerBadge,
html[lang="ar"] .blogChip,
html[lang="ar"] .blogRowCat,
html[lang="ar"] .newsCardCat,
html[lang="ar"] .postCat,
html[lang="ar"] .subBack {
  font-family: var(--ar-stack);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

/* Eyebrow rule line , move to right side in RTL */
html[lang="ar"] .eyebrow::before {
  margin-right: 0;
  margin-left: 12px;
}

/* Buttons , flip the hover translate so it goes the other way */
html[lang="ar"] .btnPrimary:hover {
  transform: translate(3px, -3px);
  box-shadow: -6px 6px 0 0 var(--text);
}

/* Nav , flip the row order so logo sits on the right in RTL */
html[lang="ar"] .navInner { direction: rtl; }
html[lang="ar"] .navLinks { direction: rtl; }

/* Hero left/right are explicit grid columns , flip them */
html[lang="ar"] .heroInner { direction: rtl; }
html[lang="ar"] .heroLeft { text-align: right; }
html[lang="ar"] .heroMeta { direction: rtl; }
html[lang="ar"] .heroButtons { direction: rtl; }

/* Ticker , Arabic reads RTL but ticker animation is fine, just kill letter-spacing */
html[lang="ar"] .tickerItem { letter-spacing: 0; }

/* Cards / lists , default text alignment */
html[lang="ar"] .newsCardBody,
html[lang="ar"] .blogRowBody,
html[lang="ar"] .teamCardBody,
html[lang="ar"] .roleRow,
html[lang="ar"] .jobBody,
html[lang="ar"] .postBody { text-align: right; }

/* Block labels are flex rows , flip */
html[lang="ar"] .blockLabel { direction: rtl; }

/* Footer grid + cols , already grid, just flip text */
html[lang="ar"] .footer,
html[lang="ar"] .footerGrid,
html[lang="ar"] .footerCol,
html[lang="ar"] .footerBottom { direction: rtl; text-align: right; }

html[lang="ar"] .footerCol a,
html[lang="ar"] .footerCol button { text-align: right; }

/* Arrows , in RTL, "forward" arrow points left, "back" arrow points right.
   We rely on the source HTML using the right entity (← for forward in AR pages),
   but we also kill any inline transform on .roleArrow, .blogRowArrow, .ltCoverArrow if needed. */
html[lang="ar"] .blogRowArrow { transform: scaleX(-1); }

/* Job page layout , grid columns fine, just RTL the body */
html[lang="ar"] .jobLayout { direction: rtl; }
html[lang="ar"] .jobSidebar { direction: rtl; text-align: right; }
html[lang="ar"] .jobBodyList { padding-right: 24px; padding-left: 0; }

/* Generic body text */
html[lang="ar"] p,
html[lang="ar"] li,
html[lang="ar"] blockquote { text-align: right; }

/* Language switcher , small toggle visible in nav and footer */
.langSwitch {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted, #888);
  text-decoration: none;
  padding: 6px 10px;
  border: 1px solid var(--line-2, #2a2a2a);
  transition: color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}
.langSwitch:hover { color: #fff; border-color: #fff; }

html[lang="ar"] .langSwitch {
  font-family: var(--ar-stack);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 700;
}

/* Body letter-spacing reset , Arabic does not benefit from tight tracking */
html[lang="ar"] * { letter-spacing: 0 !important; }

/* Numerals stay LTR (years, prices, counts) */
html[lang="ar"] .num,
html[lang="ar"] .heroMetaNum,
html[lang="ar"] .blogChipCount,
html[lang="ar"] time { direction: ltr; unicode-bidi: isolate; }

/* Display divs (not h1-h4) that hardcode Archivo Black in style.css.
   Force Madani Arabic + heavy weight so Arabic content actually renders
   on the brand display stack instead of the OS sans-serif. */
html[lang="ar"] .heroMetaNum,
html[lang="ar"] .studioOath,
html[lang="ar"] .studioLabel h3,
html[lang="ar"] .bigQuoteText,
html[lang="ar"] .quoteLine,
html[lang="ar"] .pillarNum,
html[lang="ar"] .pillarTitle,
html[lang="ar"] .pillarsTitle,
html[lang="ar"] .momentTitle,
html[lang="ar"] .momentsTitle,
html[lang="ar"] .momentTag,
html[lang="ar"] .momentsLink,
html[lang="ar"] .statNum,
html[lang="ar"] .gameTitle,
html[lang="ar"] .gameTagline,
html[lang="ar"] .gameNumber,
html[lang="ar"] .gameSpacerText,
html[lang="ar"] .gamesIntroTitle,
html[lang="ar"] .ctaTitle,
html[lang="ar"] .newsTitle,
html[lang="ar"] .newsDate,
html[lang="ar"] .newsReadMore,
html[lang="ar"] .newsCardTitle,
html[lang="ar"] .newsFeaturedTitle,
html[lang="ar"] .blogFeaturedTitle,
html[lang="ar"] .blogFeaturedDate,
html[lang="ar"] .blogFeaturedRead,
html[lang="ar"] .blogRowTitle,
html[lang="ar"] .postLede,
html[lang="ar"] .postNavDir,
html[lang="ar"] .postNavTitle,
html[lang="ar"] .postTeamSign,
html[lang="ar"] .pressQuoteBlock p,
html[lang="ar"] .teamName,
html[lang="ar"] .teamRole,
html[lang="ar"] .teamFeatureTag,
html[lang="ar"] .teamDiscCard h4,
html[lang="ar"] .timelineDate,
html[lang="ar"] .timelineTitle,
html[lang="ar"] .timelineEvent,
html[lang="ar"] .roleTitle,
html[lang="ar"] .hiringLabel,
html[lang="ar"] .hiringTitle,
html[lang="ar"] .jobBodyH2,
html[lang="ar"] .jobBodyH3,
html[lang="ar"] .jobApplyFoot h3,
html[lang="ar"] .jobFact span,
html[lang="ar"] .factGrid dt,
html[lang="ar"] .applyCtaBtn,
html[lang="ar"] .applyModalTitle,
html[lang="ar"] .applyModalEyebrow,
html[lang="ar"] .careersEthos h3,
html[lang="ar"] .logoDownloadBtn,
html[lang="ar"] .assetLabel a,
html[lang="ar"] .socialLink,
html[lang="ar"] .studioPhotoLabel span:first-child,
html[lang="ar"] .nomadMeta .v,
html[lang="ar"] .azHeroTag,
html[lang="ar"] .azHeroMetaNum,
html[lang="ar"] .azSectionTitle,
html[lang="ar"] .azMissionNum,
html[lang="ar"] .azMissionTitle,
html[lang="ar"] .azAccoladeNum,
html[lang="ar"] .azCtaTitle,
html[lang="ar"] .azQuoteText,
html[lang="ar"] .azQuoteMark,
html[lang="ar"] .azSetupLede,
html[lang="ar"] .azTag,
html[lang="ar"] .azTickerItem {
  font-family: var(--ar-display);
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

/* Inter-based pills/labels with Arabic content — Inter has no Arabic glyphs,
   so these would fall through to system sans. Force Arabic stack. */
html[lang="ar"] .gameAccolade,
html[lang="ar"] .heroMetaLabel,
html[lang="ar"] .statLabel,
html[lang="ar"] .timelineDesc,
html[lang="ar"] .nomadMeta .k,
html[lang="ar"] .azHeroMetaLabel,
html[lang="ar"] .azAccoladeLabel,
html[lang="ar"] .azMissionBody,
html[lang="ar"] .azCtaSub,
html[lang="ar"] .pillarCopy,
html[lang="ar"] .momentExcerpt,
html[lang="ar"] .gameTagline,
html[lang="ar"] .ctaSub,
html[lang="ar"] .newsCardExcerpt,
html[lang="ar"] .blogFeaturedExcerpt,
html[lang="ar"] .blogRowExcerpt,
html[lang="ar"] .postBody,
html[lang="ar"] .teamCardBody,
html[lang="ar"] .roleSummary,
html[lang="ar"] .jobBody p,
html[lang="ar"] .jobBodyList li {
  font-family: var(--ar-stack);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}