/* ============================================================
   RANSOR — RTL (Arabic) overrides. Applied when dir="rtl".
   ============================================================ */

/* Arabic-capable fonts (the Latin display/HUD faces have no Arabic glyphs).
   Headings: Noto Kufi Arabic (squared geometric Kufi, echoes the wordmark).
   Body/UI:  Cairo. Both self-hosted, Arabic subset; Latin glyphs fall through
   to the existing Latin faces (Dameron/Cuyabra/Xolonium). */
@font-face{font-family:'Noto Kufi Arabic';src:url('../fonts/notokufi-ar.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Cairo';src:url('../fonts/cairo-ar.woff2?v=2') format('woff2');font-weight:200 1000;font-display:swap}
[dir="rtl"]{
  --disp:'Noto Kufi Arabic','Dameron','Segoe UI',Tahoma,Arial,sans-serif;
  /* Latin digits are NOT in the Noto Kufi subset, so they fell through to
     Dameron, whose stylised glyphs render "24" as unreadable shapes inside an
     Arabic headline. Route numerals to the Arabic body face instead. */
  --disp-num:'Cairo','Noto Kufi Arabic',Tahoma,Arial,sans-serif;
  --hud:'Cairo','Xolonium','Segoe UI',Tahoma,Arial,sans-serif;
  --body:'Cairo','Cuyabra','Segoe UI',Tahoma,Arial,sans-serif;
}
/* Arabic is a connected (cursive) script — ANY letter-spacing breaks the glyph
   joining, and iOS/iPad Safari renders it badly (letters split apart with gaps).
   The HUD "console" letter-spacing is a Latin-only stylistic device, so neutralise
   it everywhere in RTL. Universal + !important beats the theme's ~108 non-important
   letter-spacing declarations regardless of their selector specificity. */
[dir="rtl"] *{letter-spacing:normal!important}
[dir="rtl"] body{text-align:right}

/* HUD label: line on the other side */
[dir="rtl"] .kicker::before{background:linear-gradient(270deg,transparent,var(--gold))}

/* Buttons: mirror the cut corner. Drive the shared --cut var so the ghost
   button's ::before/::after outline layers mirror in lock-step with the fill. */
[dir="rtl"] .btn{--cut:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}
[dir="rtl"] .woocommerce ul.products li.product .pcard-cta .button,
[dir="rtl"] .woocommerce ul.products li.product .pcard-cta .added_to_cart{--cut:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px))}

/* Utility bar / header stay as flex (auto-mirrors), just fix gaps' text side */
[dir="rtl"] .util .u-right{flex-direction:row-reverse}

/* ---- HERO scrims: move the dark side to the right (text sits right in RTL) ---- */
[dir="rtl"] .hero-media::after{background:linear-gradient(260deg,var(--void) 20%,rgba(10,12,18,.78) 44%,rgba(10,12,18,.45) 64%,rgba(10,12,18,.28) 100%),linear-gradient(0deg,var(--void) 2%,transparent 30%)}
[dir="rtl"] .about-hero-media::after{background:linear-gradient(270deg,var(--void) 14%,rgba(10,12,18,.72) 40%,rgba(10,12,18,.25) 62%,transparent 100%),linear-gradient(0deg,var(--void) 2%,transparent 26%)}
[dir="rtl"] .home-banner::after{background:linear-gradient(270deg,var(--void) 10%,rgba(10,12,18,.72) 42%,rgba(10,12,18,.2) 72%,transparent 100%)}
[dir="rtl"] .notfound::after{background:linear-gradient(270deg,var(--void) 16%,rgba(10,12,18,.7) 44%,rgba(10,12,18,.2) 70%,transparent 100%)}
[dir="rtl"] .cat-hero{background-position:center left}
/* The scrim follows the copy: dark on the right under the Arabic text, clear on the left where the product stands */
[dir="rtl"] .cat-hero::before{background:linear-gradient(270deg,var(--void) 18%,rgba(10,12,18,.7) 44%,transparent 78%)}
@media(max-width:640px){[dir="rtl"] .cat-hero::before{background:linear-gradient(270deg,var(--void) 34%,rgba(10,12,18,.86) 64%,rgba(10,12,18,.74) 100%)}}
/* About lineup: the right-to-left cuts keep the product on the left, so crop from that side */
[dir="rtl"] .al-card{background-position:15% center}
@media(max-width:820px){[dir="rtl"] .about-hero-media::after{background:linear-gradient(180deg,rgba(8,11,18,.5),rgba(8,11,18,.72) 34%,rgba(8,11,18,.78) 72%,rgba(8,11,18,.9))!important}
  [dir="rtl"] .notfound::after{background:linear-gradient(180deg,rgba(8,11,18,.62),rgba(8,11,18,.8) 30%,rgba(8,11,18,.84) 78%,rgba(8,11,18,.94))}}

/* Hero HUD stats + badge border side */
[dir="rtl"] .hero-badge{border-left:1px solid var(--hairline-gold);border-right:3px solid var(--gold)}
[dir="rtl"] .about-split-media img{border-radius:5px}

/* ---- Sections with a left border/line ---- */
[dir="rtl"] .mega-feature{border-left:0;border-right:1px solid var(--hairline);padding-left:0;padding-right:34px}
[dir="rtl"] .faq-a,[dir="rtl"] .contact-form,[dir="rtl"] blockquote,[dir="rtl"] .page-content blockquote{border-left:0}
[dir="rtl"] .page-content blockquote{border-right:3px solid var(--gold);padding-left:0;padding-right:20px}
[dir="rtl"] .cf-badge{left:auto;right:24px}
[dir="rtl"] .sec-link{margin-left:0}
[dir="rtl"] .al-card,[dir="rtl"] .st-card,[dir="rtl"] .pm-card,[dir="rtl"] .av{text-align:right}

/* forms: labels + inputs align right */
[dir="rtl"] .contact-form label span,[dir="rtl"] .woocommerce form .form-row label{text-align:right}
[dir="rtl"] .contact-form input,[dir="rtl"] .contact-form textarea,[dir="rtl"] .woocommerce form .form-row input.input-text,[dir="rtl"] .woocommerce form .form-row textarea{text-align:right}
[dir="rtl"] input#billing_phone.input-text{padding-left:14px!important;padding-right:54px!important;text-align:right}

/* WooCommerce tables + product meta */
[dir="rtl"] .woocommerce table.shop_table th,[dir="rtl"] .woocommerce table.shop_table td{text-align:right}
[dir="rtl"] .woocommerce-checkout-review-order-table .product-total,[dir="rtl"] .woocommerce .product-subtotal,[dir="rtl"] .woocommerce .product-price{text-align:left}
[dir="rtl"] .pdp-trust li,[dir="rtl"] .about-values .av,[dir="rtl"] .support-faq .faq summary{text-align:right}

/* lists: bullet on the right */
[dir="rtl"] .woocommerce-Tabs-panel--description ul li{padding-left:0;padding-right:22px}
[dir="rtl"] .woocommerce-Tabs-panel--description ul li::before{left:auto;right:0}
[dir="rtl"] table.ransor-specs td:first-child{text-align:right}

/* footer + breadcrumb */
[dir="rtl"] .foot-cols,[dir="rtl"] .footer .wrap{text-align:right}
[dir="rtl"] .woocommerce-breadcrumb{text-align:right}

/* scroll cue / misc keep centered */
[dir="rtl"] .about-scroll{left:50%}

/* (Removed the LTR-forcing rule: hero/about h1 are now translated to Arabic → must stay RTL.
   Latin runs inside them still render LTR via the browser's bidi algorithm.) */

/* Arabic display headings need more leading (Noto Kufi marks overlap at tight line-height) */
[dir="rtl"] .disp,[dir="rtl"] h1,[dir="rtl"] .hero-title,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] .about-hero-copy h1,[dir="rtl"] .about-split-body h2{line-height:1.45}

/* Arabic hero wordmark = the bespoke رانسور logo (brand consistency), gold, scales with the heading */
[dir="rtl"] .hero-wordmark-ar{height:.92em;width:auto;display:inline-block;margin-top:.14em;vertical-align:top}

/* About/contact/support heroes: native -rtl images served by ransor_dir_asset() — no CSS mirroring (it flips the Bahrain flag + RANSOR marks). */

/* Homepage hero: native -rtl posters/videos served by helpers — no CSS mirroring. */

/* Full-width story band: RTL uses a natively-left-composed image (correct flag, no flip); scrim dark on the RIGHT for the right-aligned text. */
[dir="rtl"] .asb-media::after{background:linear-gradient(270deg,var(--void) 6%,rgba(10,12,18,.86) 34%,rgba(10,12,18,.42) 60%,transparent 100%),linear-gradient(0deg,var(--void) 2%,transparent 34%)}

/* Category tiles: art is composed product-right / space-left, so in RTL keep
   the copy in the empty left zone instead of over the subject. */
/* The RTL tile art is MIRRORED (product left, space right) — measured, not assumed.
   Forcing the copy left therefore lands the Arabic label ON the product, which is the
   opposite of what this rule was written to prevent. RTL text belongs right, over the
   empty half, exactly as the LTR tile puts it left. */
[dir="rtl"] .cat.has-img{text-align:right}

/* Trademarks page: native RTL hero art (map LEFT — never mirror geography);
   scrim dark side follows the right-aligned text. */
[dir="rtl"] .tm-hero-media{background-image:url('../img/trademarks/tm-hero-rtl.jpg');background-position:center left}
[dir="rtl"] .tm-hero-media::after{background:linear-gradient(270deg,var(--void) 24%,rgba(10,12,18,.82) 46%,rgba(10,12,18,.3) 68%,rgba(10,12,18,.12) 100%),linear-gradient(0deg,var(--void) 2%,transparent 24%)}
[dir="rtl"] .tm-table thead th,[dir="rtl"] .tm-table tbody th,[dir="rtl"] .tm-table tbody td{text-align:right}
@media(max-width:760px){[dir="rtl"] .tm-table tbody th,[dir="rtl"] .tm-table tbody td{text-align:left}[dir="rtl"] .tm-table tbody th::before,[dir="rtl"] .tm-table tbody td::before{text-align:right}}

/* Native RTL hero art: subject sits LEFT, so favor the left crop; mobile uses the -rtl mobile posters. */
[dir="rtl"] .hero-media{background-position:center left}
@media(max-width:820px){
[dir="rtl"] .hero-slide--race .hero-media{background-image:url(../img/race-poster-mobile-rtl.jpg?v=23)!important;background-position:center left}


}

/* Contact: in RTL the primary action (form) leads — it takes the RIGHT column, info/image second. */
[dir="rtl"] .comms-grid .comms-left{order:2}
[dir="rtl"] .comms-grid .contact-form{order:1}
[dir="rtl"] .foot-news input{text-align:right;direction:rtl}
[dir="rtl"] .foot-news input:focus,[dir="rtl"] .foot-news input:not(:placeholder-shown){direction:ltr;text-align:left}

[dir="rtl"] h1 .num,[dir="rtl"] h2 .num,[dir="rtl"] .disp .num{font-family:var(--disp-num);font-weight:700}

/* inset-inline-start/end already swap the buttons' physical sides in RTL, so
   "previous" lands on the right — correct for Arabic reading order. Only the
   chevron glyphs need mirroring so each still points the way it travels. */
[dir="rtl"] .hero-prev::before{transform:translate(-60%,-50%) rotate(-135deg)}
[dir="rtl"] .hero-next::before{transform:translate(-40%,-50%) rotate(45deg)}

/* The captcha scale uses transform-origin:left center, which in RTL pushes the
   widget out of its frame and clips the left edge ("Success!" -> "ccess!").
   Anchor it to the right instead, and start the flex row from the right. */

/* ============================================================
   Arabic typography — leading and small-text floor.

   Cairo's Arabic glyphs carry dots below the baseline and marks above it, so at
   the leading tuned for Latin (body line-height 1.6) descenders of one line sit
   against the marks of the next. Arabic also has no case, so the size cues that
   Latin gets from capitals have to come from the size itself: the theme's HUD
   micro-labels are 9–11px, which is legible as "RANSOR®" in Xolonium and is not
   legible as connected Arabic script.

   Leading is raised across body copy, and the smallest labels get a floor. This
   is deliberately modest — it must read better, not look like a different site.
   ============================================================ */
[dir="rtl"] body{line-height:1.85}
[dir="rtl"] p,[dir="rtl"] li,[dir="rtl"] dd,[dir="rtl"] .lede,
[dir="rtl"] .faq-a,[dir="rtl"] .tm-body,[dir="rtl"] .tm-note,
[dir="rtl"] .tm-disclaimer,[dir="rtl"] .page-content,
[dir="rtl"] .site-footer .co p{line-height:1.95}

/* Micro-labels: raise the floor, and give each one room for the extra leading. */
[dir="rtl"] .kicker{font-size:.82rem;line-height:1.8}
[dir="rtl"] .util .wrap{font-size:.76rem}
[dir="rtl"] .nav-list>li>a{font-size:.88rem}
/* transform-origin has no logical keyword, so the scaled hover rules need an
   explicit flip or they grow away from the text in RTL. */
[dir="rtl"] .nav-list>li>a::after,
[dir="rtl"] .about-metrics .am::before{transform-origin:right center}
[dir="rtl"] .site-footer .foot-h,[dir="rtl"] .site-footer h6{font-size:.8rem;line-height:1.7}
[dir="rtl"] .fbar,[dir="rtl"] .foot-legal a{font-size:.76rem;line-height:1.9}
[dir="rtl"] .foot-tm{font-size:.8rem;line-height:1.95}
[dir="rtl"] .cat-t,[dir="rtl"] .sr-type,[dir="rtl"] .tm-card-l,
[dir="rtl"] .comms-info .ci-t em,[dir="rtl"] .market-label,
[dir="rtl"] .mc-count,[dir="rtl"] .cf-badge,[dir="rtl"] .foot-news-l,
[dir="rtl"] .tm-us-grid dt,[dir="rtl"] .tm-badge,
[dir="rtl"] .contact-form label span{font-size:.76rem;line-height:1.75}
[dir="rtl"] .pcard .stock,[dir="rtl"] .pcard .sig-warn,
[dir="rtl"] .woocommerce ul.products li.product .stock,
[dir="rtl"] .sr-stock{font-size:.76rem;line-height:1.6}
/* Same floor where a woo.css rule out-ranks the plain selector above. */
[dir="rtl"] .woocommerce ul.products li.product .cat-t,
[dir="rtl"] .single-product .sku_wrapper,[dir="rtl"] .single-product .product_meta,
[dir="rtl"] table.ransor-specs td:first-child,[dir="rtl"] .al-body p,
[dir="rtl"] .woocommerce-breadcrumb,[dir="rtl"] .woocommerce .woocommerce-breadcrumb{font-size:.76rem;line-height:1.75}
[dir="rtl"] .btn{font-size:.86rem}
[dir="rtl"] .btn.sm{font-size:.78rem}
/* Buttons grew a little, so give the clipped corners the same padding ratio. */
[dir="rtl"] .btn{padding-block:14px}

/* Category tile scrim follows the text side */
[dir="rtl"] .cat.has-img::before{background:linear-gradient(to left,rgba(8,10,16,.86),rgba(8,10,16,.5) 48%,rgba(8,10,16,.06) 78%)}
[dir="rtl"] .cat.has-img:hover::before{background:linear-gradient(to left,rgba(8,10,16,.78),rgba(8,10,16,.4) 48%,rgba(8,10,16,0) 78%)}