/* ============================================================
   BlueMint — RTL / Arabic overrides
   Loaded only on ar.html, after styles.css. Everything is scoped to
   [dir="rtl"] so it is inert anywhere else. Goal: mirror direction
   without disturbing the JS-driven flower canvas or the work rail.
   ============================================================ */

/* The brand mono face (Source Code Pro) has no Arabic glyphs, and
   uppercase + wide letter-spacing break Arabic's joined script. For any
   label that now carries Arabic, use the bilingual Dubai face and drop the
   Latin-only treatments. Numeric labels (.service-no, .diff-no, .stat-num,
   .lightbox-count) are left as designed. */
[dir="rtl"] .eyebrow,
[dir="rtl"] .diff-tag,
[dir="rtl"] .post-meta,
[dir="rtl"] .post-foot,
[dir="rtl"] .filter,
[dir="rtl"] .work-cat,
[dir="rtl"] .portal-kicker,
[dir="rtl"] .footer-col h4,
[dir="rtl"] .field label,
[dir="rtl"] .arrow-link,
[dir="rtl"] .service-price,
[dir="rtl"] .add-later,
[dir="rtl"] .footer-bottom .mono {
  font-family: var(--font-display);
  text-transform: none;
  letter-spacing: 0;
}

/* Navigation */
[dir="rtl"] .nav-link::after { left: auto; right: 0; }
[dir="rtl"] .nav-cta { margin-left: 0; margin-inline-start: 8px; }

/* Buttons / arrows point the other way in RTL */
[dir="rtl"] .btn:hover .btn-arrow { transform: translateX(-4px); }
[dir="rtl"] .about-portal:hover .portal-arrow { transform: translateX(-4px); }

/* Services */
[dir="rtl"] .service-head { text-align: right; }
[dir="rtl"] .service-price { text-align: left; }
[dir="rtl"] .service:hover .service-name { transform: translateX(-10px); }

/* About: keep the two columns in their designed order (portal left, copy
   right) so the flower canvas in site.js — which bleeds the bloom to the
   viewport's left edge — renders exactly as designed. Only the text reads RTL. */
[dir="rtl"] .about-grid { direction: ltr; }
[dir="rtl"] .about-portal,
[dir="rtl"] .about-col { direction: rtl; text-align: right; }
[dir="rtl"] .portal-foot {
  border-radius: clamp(16px,1.6vw,22px) 0 clamp(16px,1.6vw,22px) clamp(16px,1.6vw,22px);
}

/* Work rail: site.js animates scrollLeft with LTR-positive loop math that
   inverts under RTL. Pin the rail LTR; card labels still read RTL. */
[dir="rtl"] .work-rail { direction: ltr; }
[dir="rtl"] .work-overlay { direction: rtl; text-align: right; }

/* Latin-only inline values (email, phone, @handle) stay LTR so they don't
   get reordered by the bidi algorithm, while still hugging the right edge. */
[dir="rtl"] .cdetail .v { direction: ltr; text-align: right; unicode-bidi: plaintext; }

/* Contact: Arabic glyphs are taller, so give the heading room below the
   eyebrow (they nearly touch with the heading's tight line-height). */
[dir="rtl"] .contact-title { margin-top: 0.5em; }

/* Blog / article pages — swap the Latin mono labels to the bilingual Dubai
   face (Source Code Pro has no Arabic) and drop the Latin-only treatments. */
[dir="rtl"] .breadcrumb,
[dir="rtl"] .article-eyebrow,
[dir="rtl"] .copy-btn { font-family: var(--font-display); text-transform: none; letter-spacing: 0; }
[dir="rtl"] .codeblock pre,
[dir="rtl"] .codeblock code { font-family: var(--font-display); white-space: pre-wrap; }