/* ==========================================================================
   Raya Developments — Arabic / RTL layer (load after raya.css)
   Fonts: Kufam (heavy geometric Kufi — the face used in Raya's social posts) for display,
          Aref Ruqaa calligraphy for emotive accents (the role of the serif italic),
          Readex Pro for body. Latin wordmarks keep Archivo Expanded.
   ========================================================================== */

html[dir="rtl"] {
  --f-display: "Kufam", "Readex Pro", Tahoma, sans-serif;
  --f-serif: "Aref Ruqaa", "Amiri", serif;
  --f-body: "Readex Pro", Tahoma, sans-serif;
  --f-latin: "Archivo", "Helvetica Neue", Arial, sans-serif;
  /* heavy Arabic display runs wider than Latin caps: scale display sizes down */
  --t-mega: clamp(2.1rem, 0.6rem + 6vw, 7.6rem);
  --t-h1: clamp(1.8rem, 0.8rem + 4.4vw, 5.4rem);
  --t-h2: clamp(1.6rem, 0.9rem + 2.8vw, 3.8rem);
}

/* Arabic letters must stay joined: no tracking, no case transforms */
html[dir="rtl"] body, html[dir="rtl"] body * { letter-spacing: 0 !important; }
html[dir="rtl"] body { font-size: 1.08rem; line-height: 1.85; }

/* display type: expanded Readex, roomier line-height for Arabic ascenders/dots */
html[dir="rtl"] .display, html[dir="rtl"] h1, html[dir="rtl"] h2 {
  font-stretch: normal; font-weight: 800; line-height: 1.3; font-variation-settings: normal;
}
html[dir="rtl"] h3 { font-stretch: normal; font-weight: 700; line-height: 1.45; font-variation-settings: normal; }
html[dir="rtl"] em, html[dir="rtl"] .serif { font-style: normal; font-weight: 700; font-variation-settings: normal; }
html[dir="rtl"] h1 em, html[dir="rtl"] h2 em, html[dir="rtl"] .display em { font-size: 1.22em; line-height: 1; }

/* line / word masks need extra headroom for Arabic marks */
html[dir="rtl"] .line { padding-block: 0.12em 0.18em; margin-block: -0.12em -0.18em; }
html[dir="rtl"] .wm { padding-block: 0.1em 0.2em !important; margin-block: -0.1em -0.2em !important; }

/* small caps-style labels → plain Arabic labels */
html[dir="rtl"] .tag, html[dir="rtl"] .btn, html[dir="rtl"] .link, html[dir="rtl"] .nav__links a,
html[dir="rtl"] .subnav a, html[dir="rtl"] .tab, html[dir="rtl"] .field label, html[dir="rtl"] .field legend,
html[dir="rtl"] .footer h4, html[dir="rtl"] .post__meta, html[dir="rtl"] .crumbs, html[dir="rtl"] .fact span,
html[dir="rtl"] .pcard__meta span, html[dir="rtl"] .media__cap, html[dir="rtl"] .hero__bar, html[dir="rtl"] .cinfo span,
html[dir="rtl"] .fab__label, html[dir="rtl"] .cta__hot span, html[dir="rtl"] .curtain__label, html[dir="rtl"] .slide--ph .media,
html[dir="rtl"] .mp__ph, html[dir="rtl"] .prow .chips span {
  font-stretch: normal; text-transform: none;
  font-family: var(--f-body); /* Kufam is for headlines only; UI labels stay in Readex Pro */
}
html[dir="rtl"] .nav__hotline, html[dir="rtl"] .loc__list strong, html[dir="rtl"] .loc__list em,
html[dir="rtl"] .fact strong, html[dir="rtl"] .cinfo strong, html[dir="rtl"] .form-ok b { font-family: var(--f-body); font-stretch: normal; }
html[dir="rtl"] .tag { font-size: 0.86rem; font-weight: 500; }
html[dir="rtl"] .btn { font-size: 0.98rem; font-weight: 600; }
html[dir="rtl"] .link { font-size: 0.95rem; }
html[dir="rtl"] .nav__links a { font-size: 0.95rem; }
html[dir="rtl"] .subnav a { font-size: 0.92rem; }
html[dir="rtl"] .field label, html[dir="rtl"] .field legend { font-size: 0.88rem; }
html[dir="rtl"] .footer h4 { font-size: 0.9rem; }
html[dir="rtl"] .hero__bar, html[dir="rtl"] .post__meta, html[dir="rtl"] .fact span, html[dir="rtl"] .cinfo span { font-size: 0.88rem; }
html[dir="rtl"] .fab__label { font-size: 0.86rem; }

/* Latin wordmarks, numbers, phone numbers keep the expanded Latin face */
html[dir="rtl"] .latin, html[dir="rtl"] .pword, html[dir="rtl"] .pcard__word, html[dir="rtl"] .stat__n,
html[dir="rtl"] .cta__hot a, html[dir="rtl"] .footer__hot, html[dir="rtl"] .cinfo .big, html[dir="rtl"] .curtain__count,
html[dir="rtl"] .why-card__n, html[dir="rtl"] .prow__idx, html[dir="rtl"] .pcard__idx, html[dir="rtl"] .feat span,
html[dir="rtl"] .footer__giant, html[dir="rtl"] .badge text, html[dir="rtl"] .menu__list small {
  font-family: var(--f-latin); font-variation-settings: normal;
}
html[dir="rtl"] .pword, html[dir="rtl"] .pcard__word { font-stretch: 125%; direction: ltr; text-align: right; line-height: 0.95; }
html[dir="rtl"] .pword { justify-self: start; }
html[dir="rtl"] .latin { direction: ltr; unicode-bidi: isolate; display: inline-block; }
html[dir="rtl"] .stat__n { direction: ltr; justify-content: flex-end; }
html[dir="rtl"] .stat__n sup { margin-left: 4px; }

/* hero: text sits on the right, so darken from the right */
html[dir="rtl"] .hero::after {
  background:
    linear-gradient(270deg, rgba(5, 7, 15, 0.85) 0%, rgba(5, 7, 15, 0.35) 55%, rgba(5, 7, 15, 0.1) 100%),
    linear-gradient(0deg, rgba(5, 7, 15, 0.95) 0%, transparent 45%);
}
html[dir="rtl"] .hero__media img { object-position: 40% 40%; } /* uses a mirrored photo so the dancer faces the text */
html[dir="rtl"] .hero h1 { line-height: 1.18; }
html[dir="rtl"] .menu__list a { font-weight: 800; line-height: 1.4; font-variation-settings: normal; }

/* arrows & directional motion */
html[dir="rtl"] .btn:hover .arrow { transform: translateX(-4px) rotate(45deg); }
html[dir="rtl"] .link::after { transform-origin: left; }
html[dir="rtl"] .feat::after, html[dir="rtl"] .field::after { transform-origin: right; }
html[dir="rtl"] .hs__progress i { transform-origin: right; }
html[dir="rtl"] .pcard__logo { object-position: right; }
html[dir="rtl"] .pcard__go svg { transform: scaleX(-1); }
html[dir="rtl"] .fab__label { transform: translate(-10px, -50%); }
html[dir="rtl"] .fab__btn:hover .fab__label, html[dir="rtl"] .fab__btn:focus-visible .fab__label { transform: translate(0, -50%); }
html[dir="rtl"] .field select { background-position: left center; }
html[dir="rtl"] .field input[type="tel"], html[dir="rtl"] .field input[type="email"] { direction: ltr; text-align: right; }
html[dir="rtl"] .promise li { text-transform: none; font-stretch: normal; font-weight: 800; font-variation-settings: normal; line-height: 1.45; }
html[dir="rtl"] .statement, html[dir="rtl"] .ov__text { font-stretch: normal; line-height: 1.6; font-variation-settings: normal; font-weight: 600; }
html[dir="rtl"] .pcard h3, html[dir="rtl"] .prow h3, html[dir="rtl"] .post--feature h3 { font-stretch: normal; font-weight: 800; line-height: 1.35; font-variation-settings: normal; }
html[dir="rtl"] .vm__card h2 { line-height: 1.2; }
html[dir="rtl"] .band__title { line-height: 1.15; font-size: clamp(2.4rem, 0.8rem + 6vw, 7.4rem); }
html[dir="rtl"] .band__title em { font-size: 1.05em; line-height: 1.1; }
html[dir="rtl"] .cta h2 em { line-height: 1.1; }
html[dir="rtl"] .badge svg.ring { direction: ltr; }
html[dir="rtl"] .hero h1 em { font-size: 1.2em; }
html[dir="rtl"] .menu__list a { font-size: clamp(1.6rem, 7vw, 4rem); }