/*
 * Phase 3 RTL (JLRMED-1047) — content-only RTL stylesheet.
 *
 * Gated by the `lang-rtl-content` class added to <body> in
 * jlr_media_preprocess_html() / jlr_media_2024_preprocess_html() when
 * _jlr_rtl_should_apply() returns TRUE (Arabic interface + Arabic translation
 * present + field_rtl_enabled = 1 + non-admin theme).
 *
 * Scope: only the article text inside text-only strips and the news header
 * block (title / date / "Further information" / "Notes to editors").
 * Chrome (header, hamburger, language switcher, footer), forms, buttons,
 * carousels, hero media and the strip-level wrappers themselves are NEVER
 * targeted here.
 */

body.lang-rtl-content .strip-body-copy,
body.lang-rtl-content .text-area-with-editor,
body.lang-rtl-content .title-block-template .title-block,
body.lang-rtl-content .subheading-template,
body.lang-rtl-content .col2-text-template,
body.lang-rtl-content.page-node-type-news .section-title,
body.lang-rtl-content.page-node-type-news .headline,
body.lang-rtl-content.page-node-type-news .bullet-strip,
body.lang-rtl-content.page-node-type-news .blockquote-template,
body.lang-rtl-content.page-node-type-news .panel-body,
body.lang-rtl-content.page-node-type-news .tint-text {
  direction: rtl;
  text-align: right;
  unicode-bidi: plaintext;
}

body.lang-rtl-content.page-node-type-news .page-title,
body.lang-rtl-content.page-node-type-news .date-holder,
body.lang-rtl-content.page-node-type-news .foot-titles,
body.lang-rtl-content.page-node-type-news .upper-title-description,
body.lang-rtl-content.page-node-type-news .additional-information .col-first > div,
body.lang-rtl-content.page-node-type-news .additional-information .notes-to-editors > div {
  direction: rtl;
  text-align: right;
  unicode-bidi: plaintext;
}

body.lang-rtl-content.page-node-type-news .container.wysiwyg {
  direction: rtl;
  text-align: right;
  unicode-bidi: plaintext;
}

/*
 * JLRTR-200: only text that is left aligned flips to the right. Anything the
 * templates deliberately centre stays centred.
 *
 * The wrapper rules above set `text-align: right` on containers, so most
 * centred elements only inherit it and a plain class selector is enough to win.
 * `.page-title` is the exception: it is targeted directly at (0,3,1), so the
 * compound `.page-title.text-center` at (0,4,1) is needed to beat it without
 * reaching for `!important`. Only `text-align` is overridden; `direction: rtl`
 * and the `unicode-bidi` handling still apply.
 *
 * JLRMED-1235: the news date (`p.date-holder`) and summary
 * (`.upper-title-description`) are hit directly by the same (0,3,1) rule and
 * were missed the first time round, so they sat against the right edge while
 * the title above them was centred. Same compound-selector fix, same reasons.
 */
body.lang-rtl-content .blockquote-template :is(.text-center, .central-quote-titles),
body.lang-rtl-content .title-block-template .text-center,
body.lang-rtl-content.page-node-type-news .page-title.text-center,
body.lang-rtl-content.page-node-type-news .date-holder.text-center,
body.lang-rtl-content.page-node-type-news .upper-title-description.text-center {
  text-align: center;
}

/*
 * `.blockquote-template blockquote p` is `display: inline-block` in main.css,
 * so `text-align: center` on the paragraph only centres the glyphs inside its
 * own shrink-to-fit box. Where that box sits is decided by the parent's
 * `text-align`: `start` on most bundles, `right` on news via the wrapper rule
 * above. Short Arabic quotes therefore hugged one edge while the speaker names
 * below, which are full-width blocks, centred correctly. Centre the parent so
 * the box lands in the middle. `text-align` has no physical side, so rtlcss
 * has nothing to flip.
 */
body.lang-rtl-content .blockquote-template blockquote {
  text-align: center;
}

/*
 * JLRTR-200: bullet markers sit on the right, on every bundle.
 *
 * `direction: rtl` puts the `list-style-position: outside` marker on the
 * inline-start side, which is the right, and the logical padding follows it.
 * This was previously chained to `.page-node-type-news .bullet-strip`, so
 * lists on page, feature_article, image_packs and video_pack kept their
 * markers on the left while the text moved.
 */
body.lang-rtl-content .bullet-strip ul,
body.lang-rtl-content .inline-list ul {
  direction: rtl;
  padding-inline-start: 40px;
  padding-inline-end: 0;
}

/*
 * Lists authored in the WYSIWYG inherit `direction: rtl` from their wrapper,
 * so the markers already sit right, but the indent was left to the browser
 * default. Logical properties only, never padding-left/right, so rtlcss has
 * nothing to flip.
 *
 * `.container.wysiwyg` is kept news-scoped to match the wrapper rule above.
 * Widening it would flip lists inside `strip_body_full_width`, which uses a
 * bare `.container.wysiwyg` and is enabled on blog and feature_article, where
 * the surrounding prose gets no direction override. The list would then read
 * right-to-left inside left-to-right body copy.
 */
body.lang-rtl-content .strip-body-copy :is(ul, ol),
body.lang-rtl-content .text-area-with-editor :is(ul, ol),
body.lang-rtl-content.page-node-type-news .container.wysiwyg :is(ul, ol) {
  direction: rtl;
  padding-inline-start: 40px;
  padding-inline-end: 0;
}

/*
 * WYSIWYG bullets are not list markers. main.css sets list-style-type: none on
 * `.wysiwyg li` and draws a 5px square with `li:before` at a physical
 * `left: 0`, with a physical `padding-left: 18px` gutter and, on news and
 * feature pages, `margin-left: 15px`. `direction: rtl` on the list moves the
 * text but none of those, which is why the squares stayed on the left edge
 * while the text sat on the right. Physical properties on purpose: the `li`
 * carries `unicode-bidi: plaintext`, so logical sides could follow a Latin-only
 * item's content direction instead of the list's. This file is on the rtlcss
 * skip list, so nothing inverts them.
 */
body.lang-rtl-content .strip-body-copy li,
body.lang-rtl-content .text-area-with-editor li,
body.lang-rtl-content.page-node-type-news .container.wysiwyg li {
  padding-left: 0;
  padding-right: 18px;
  margin-left: 0;
  margin-right: 15px;
}

body.lang-rtl-content .strip-body-copy li:before,
body.lang-rtl-content .text-area-with-editor li:before,
body.lang-rtl-content.page-node-type-news .container.wysiwyg li:before {
  left: auto;
  right: 0;
}

body.lang-rtl-content .strip-body-copy :is(p, li, h1, h2, h3, h4, h5, h6, blockquote),
body.lang-rtl-content .text-area-with-editor :is(p, li, h1, h2, h3, h4, h5, h6, blockquote) {
  unicode-bidi: plaintext;
}

body.lang-rtl-content .tint-text i.jlrnew-arrow_right {
  display: inline-block;
  transform: scaleX(-1);
}

/*
 * JLRMED-1047 follow-up — image-overlay / inset-text strips on feature_article,
 * page, image_packs, video_pack. The narrow news-only scope above leaves these
 * strips LTR. Targets the text wrapper inside the inset card, not the strip's
 * structural columns (image stays on the original side).
 */
body.lang-rtl-content .image-with-inset-text .inset-text-box .panel-body,
body.lang-rtl-content .image-with-inset-text .inset-text-box .panel-body :is(h1, h2, h3, h4, h5, h6, p, div, li),
body.lang-rtl-content .big-image-left .panel-box .panel-body,
body.lang-rtl-content .big-image-right .panel-box .panel-body,
body.lang-rtl-content .impact-full .tint-block,
body.lang-rtl-content .impact-half .tint-block,
body.lang-rtl-content .impact-full .tint-block :is(h1, h2, h3, h4, h5, h6, p),
body.lang-rtl-content .impact-half .tint-block :is(h1, h2, h3, h4, h5, h6, p),
body.lang-rtl-content .hero-image-strip .hero-text-box,
body.lang-rtl-content .hero-image-strip .hero-text-box :is(h1, h2, h3, h4, h5, h6, p) {
  direction: rtl;
  text-align: right;
  unicode-bidi: plaintext;
}

/*
 * JLRMED-1223 social channel popup. The footer itself is never mirrored, but
 * the popup is a dialog over the page, so on an RTL-applied page the whole
 * container runs right to left: flex and the logical properties in
 * scss/modern-luxury/_social-bar.scss mirror the header, rows and gutters, and
 * only the one-way row chevron needs flipping by hand. The chevron is the
 * nav's down glyph rotated to point right on its ::before, so mirroring the
 * span here leaves that rotation intact.
 */
body.lang-rtl-content .social-popup__container {
  direction: rtl;
  text-align: right;
}

@media (prefers-reduced-motion: no-preference) {
  body.lang-rtl-content .social-popup__row:hover .social-popup__arrow,
  body.lang-rtl-content .social-popup__row:focus-visible .social-popup__arrow {
    transform: translateX(-4px);
  }
}

body.lang-rtl-content .social-popup .social-popup__caret {
  display: inline-block;
  transform: scaleX(-1);
}