/*
 * TeamW2S Elastic — right-to-left (Arabic).
 * Flex/grid layouts flip automatically with dir="rtl"; these rules mirror the
 * few absolutely-positioned details and asymmetric paddings from the design.
 * Every rule is scoped to [dir="rtl"], so the file is safe to load on any page.
 */

[dir="rtl"] body { font-family: 'Noto Sans Arabic', 'DM Sans', system-ui, sans-serif; }

/* Arrows point the reading direction */
[dir="rtl"] .tw2s-flip,
[dir="rtl"] .wp-block-button__link > span[aria-hidden="true"] { transform: scaleX(-1); }

/* Pill buttons with the arrow disc */
[dir="rtl"] [style*="padding:8px 8px 8px 22px"] { padding: 8px 22px 8px 8px !important; }
[dir="rtl"] [style*="padding:8px 8px 8px 20px"] { padding: 8px 20px 8px 8px !important; }
[dir="rtl"] [style*="padding:6px 14px 6px 6px"] { padding: 6px 6px 6px 14px !important; }
[dir="rtl"] [style*="padding:0 18px 0 8px"] { padding: 0 8px 0 18px !important; }

/* Corner badges and labels */
[dir="rtl"] [style*="top:14px;left:14px"] { left: auto !important; right: 14px; }
[dir="rtl"] [style*="top:18px;left:18px"] { left: auto !important; right: 18px; }
[dir="rtl"] figcaption[style*="left:18px;bottom:18px"] { left: auto !important; right: 18px; }

/* Hero note sits on the other side of the crew pill */
[dir="rtl"] .tw2s-crew-note { right: auto !important; left: calc(100% + 12px); transform: rotate(6deg) !important; }

/* Floating hero cards swap sides */
[dir="rtl"] .tw2s-float [style*="left:4%"] { left: auto !important; right: 4%; }
[dir="rtl"] .tw2s-float [style*="right:4%"] { right: auto !important; left: 4%; }
[dir="rtl"] .tw2s-float [style*="left:6.5%"] { left: auto !important; right: 6.5%; }
[dir="rtl"] .tw2s-float [style*="right:6.5%"] { right: auto !important; left: 6.5%; }

/* "OG hero" illustration: dot grid and handwritten caption mirror */
[dir="rtl"] .wp-block-media-text__media { padding: 28px 0 0 28px !important; }
[dir="rtl"] .wp-block-media-text__media > [aria-hidden="true"] { right: auto !important; left: 0; -webkit-mask-image: linear-gradient(135deg, #000 20%, transparent 85%) !important; mask-image: linear-gradient(135deg, #000 20%, transparent 85%) !important; }
[dir="rtl"] .wp-block-media-text__media figcaption { left: auto !important; right: -10px; transform: rotate(3deg) !important; }

/* Capability process dots and step padding */
[dir="rtl"] .tw2s-step { padding: 24px 0 0 20px !important; }

/* Mega menu tags, lists and editor content */
[dir="rtl"] .tw2s-prose blockquote { padding: 4px 20px 4px 0; }
[dir="rtl"] .tw2s-mega__item { text-align: right; }

/* Mono / code-like strings stay left-to-right */
[dir="rtl"] pre, [dir="rtl"] code { direction: ltr; text-align: left; }