/* Right-to-left overrides, loaded only on /ar pages after styles.css.
 *
 * The base stylesheet uses physical properties (left/right/margin-left) in a lot of
 * places, so rather than rewriting it this file flips the ones that actually affect
 * reading order. Anything genuinely direction-neutral is left alone.
 */

html[dir="rtl"] body { text-align: right; }

/* Arabic has no italics and no capital letters: faux-italic and letter-spacing
 * both damage the script, and uppercase transforms do nothing but break shaping. */
html[dir="rtl"] em,
html[dir="rtl"] i { font-style: normal; font-weight: 600; }
/* Arabic is a cursive script: letter-spacing pulls the joins apart and makes
 * every word look shattered. Thirty rules in the base stylesheet set it for
 * Latin display copy, so this overrides all of them rather than chasing each.
 * Uppercase does nothing in Arabic either, so it goes too. */
html[dir="rtl"] * { letter-spacing: normal !important; }
html[dir="rtl"] .section-index,
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .crumb,
html[dir="rtl"] .logos__label,
html[dir="rtl"] .fcard__k { text-transform: none; }

/* A font stack that actually has Arabic glyphs.
 *
 * The Latin display and mono faces have none, so the browser falls back glyph by
 * glyph and the cursive joins break apart. This has to cover everything, not just
 * headings: the breadcrumb, section labels and tags all use the mono face.
 * The genuine Latin islands below opt back out. */
html[dir="rtl"] body,
html[dir="rtl"] body * {
  font-family: "Noto Naskh Arabic", "Segoe UI", Tahoma, "Geeza Pro", "Arabic Typesetting", sans-serif;
}
/* Code, URLs and setting identifiers are Latin and keep the mono face. */
html[dir="rtl"] code, html[dir="rtl"] pre, html[dir="rtl"] kbd,
html[dir="rtl"] .browser__url, html[dir="rtl"] .fcard__k, html[dir="rtl"] .cite {
  font-family: var(--f-mono), ui-monospace, monospace;
}
/* Numerals, code and URLs stay left-to-right inside right-to-left text. */
html[dir="rtl"] .cite,
html[dir="rtl"] .browser__url,
html[dir="rtl"] code, html[dir="rtl"] pre, html[dir="rtl"] kbd,
html[dir="rtl"] .fcard__k { direction: ltr; unicode-bidi: embed; text-align: left; }

/* Flip the things that carry reading order. */
html[dir="rtl"] .nav__inner,
html[dir="rtl"] .nav__links,
html[dir="rtl"] .nav__actions,
html[dir="rtl"] .footer__grid,
html[dir="rtl"] .footer__base,
html[dir="rtl"] .hero__inner,
html[dir="rtl"] .grounded__grid,
html[dir="rtl"] .feature__split,
html[dir="rtl"] .faq__grid,
html[dir="rtl"] .section-head--split { direction: rtl; }

html[dir="rtl"] .nav__lang-menu { right: auto; left: 0; }
html[dir="rtl"] .checklist li,
html[dir="rtl"] .feat-list li,
html[dir="rtl"] .qa summary { padding-left: 0; padding-right: 28px; }
html[dir="rtl"] .checklist li::before,
html[dir="rtl"] .feat-list li::before { left: auto; right: 0; }
html[dir="rtl"] .qa__i { left: 0; right: auto; }
html[dir="rtl"] .crumb { direction: rtl; }

/* The rolling word sits in a window exactly one em tall, which fits a Latin cap height
 * but clips Naskh: mid-roll you see the bottom of one word and the top of the next, and
 * they read as one broken word. The window and each word grow together, so one word is
 * still visible at a time and the glyphs render whole. */
html[dir="rtl"] .roll--hero,
html[dir="rtl"] .hero__title .l--roll .roll--hero { height: 1.45em; }
html[dir="rtl"] .roll--hero .roll__track b,
html[dir="rtl"] .hero__title .l--roll .roll--hero .roll__track b { height: 1.45em; line-height: 1.45em; }
html[dir="rtl"] .roll { height: 1.5em; }
html[dir="rtl"] .roll b { height: 1.5em; line-height: 1.5em; }
html[dir="rtl"] .rollbig { height: 1.45em; }
html[dir="rtl"] .rollbig b { height: 1.45em; line-height: 1.45em; }

/* The lime headline underline is tuned to the Latin baseline and grows from the left.
 * Arabic descenders reach further below the baseline, so at that height the bar cuts
 * through the word rather than sitting under it, and it should sweep right to left. */
html[dir="rtl"] .hero__title .mark::after {
  bottom: -0.12em;
  transform-origin: right;
}

/* The typed demo line is sized so the English sentence just fits the composer. The
 * Arabic sentence is longer and ran off the edge, so it is set a little smaller and
 * anchored to the right, with the caret on the trailing (left) side. */
/* min-width:0 lets the flex item shrink below the sentence width instead of pushing
 * out of the card, so a long line clips inside the composer rather than under it. */
html[dir="rtl"] .chat__ph {
  text-align: right; font-size: 13px; min-width: 0; overflow: hidden; white-space: nowrap;
}
html[dir="rtl"] .chat__ph .caret { margin-left: 0; margin-right: 1px; }

/* Chat bubbles: the visitor sits on the right in LTR, so it mirrors to the left. */
html[dir="rtl"] .mini-chat__q { margin-left: 0; margin-right: auto; text-align: right; }
html[dir="rtl"] .mini-chat__a { flex-direction: row-reverse; text-align: right; }
html[dir="rtl"] .mini-chat__av { margin-left: 10px; margin-right: 0; }

/* Arrows point the other way when the text does. */
html[dir="rtl"] .btn svg,
html[dir="rtl"] .indcard__go svg,
html[dir="rtl"] .arrow { transform: scaleX(-1); }
html[dir="rtl"] .indcard__go,
html[dir="rtl"] .link-quiet { direction: rtl; }

/* Anything scrolling sideways starts from the right edge. */
html[dir="rtl"] .logos__row,
html[dir="rtl"] .table-wrap,
html[dir="rtl"] .overflow-x { direction: rtl; }
html[dir="rtl"] table { direction: rtl; }
html[dir="rtl"] th, html[dir="rtl"] td { text-align: right; }

/* The consent banner is pinned to the left, which is the trailing corner in Arabic.
 * It moves to the right so it sits where the reader's eye starts, and the buttons
 * follow the same reading order as the rest of the page. */
html[dir="rtl"] .consent { left: auto; right: 20px; }
html[dir="rtl"] .consent__actions { justify-content: flex-start; }
@media (max-width: 620px) {
  html[dir="rtl"] .consent { left: 12px; right: 12px; }
}