/* RTL overrides — loaded only on Arabic (dir="rtl") pages.
   dir="rtl" already handles text flow and default alignment; this file flips the
   physical Tailwind utilities + Header inline styles used across the templates.
   !important is used because the article Header injects physical-direction styles. */

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

/* Padding / margin (left↔right) for the utilities actually used in templates */
[dir="rtl"] .pl-2 { padding-left: 0 !important; padding-right: 0.5rem !important; }
[dir="rtl"] .pl-6 { padding-left: 0 !important; padding-right: 1.5rem !important; }
[dir="rtl"] .pr-2 { padding-right: 0 !important; padding-left: 0.5rem !important; }
[dir="rtl"] .ml-1 { margin-left: 0 !important; margin-right: 0.25rem !important; }
[dir="rtl"] .mr-1 { margin-right: 0 !important; margin-left: 0.25rem !important; }

/* Left borders → right borders (definition boxes, callouts) */
[dir="rtl"] .border-l-4 { border-left-width: 0 !important; border-right-width: 4px !important; }
[dir="rtl"] .border-whispieBlue { border-left-width: 0 !important; border-right-width: 3px !important; }
[dir="rtl"] .rounded-r-lg { border-radius: 0.5rem 0 0 0.5rem !important; }

/* Text alignment helpers */
[dir="rtl"] .text-left { text-align: right !important; }
[dir="rtl"] .text-right { text-align: left !important; }

/* Lists: keep markers on the right */
[dir="rtl"] .list-inside { list-style-position: inside; }
[dir="rtl"] ul, [dir="rtl"] ol { padding-right: 0; }

/* space-x-* uses margin-left on children → flip to margin-right in RTL */
[dir="rtl"] .space-x-2 > :not([hidden]) ~ :not([hidden]) { margin-left: 0 !important; margin-right: 0.5rem !important; }

/* Tables: header/cell text to the right */
[dir="rtl"] table th, [dir="rtl"] table td { text-align: right !important; }

/* Header / nav dropdowns: anchor menus to the right edge */
[dir="rtl"] .nav-dropdown__menu { left: auto !important; right: 0 !important; transform: none !important; }
[dir="rtl"] .lang-picker__menu { right: auto !important; left: 0 !important; }

/* Breadcrumb + inline flex separators read naturally under dir=rtl; no flip needed.
   CTA arrows (→) are decorative; flip them visually. */
[dir="rtl"] .arrow { display: inline-block; transform: scaleX(-1); }

/* Reading progress bar fills from the right in RTL */
[dir="rtl"] #art-progress { left: auto !important; right: 0 !important; }

/* Homepage 4-app cards (.hp-card): body text naturally flows to the right in RTL
   block layout, but the phone/polaroid/emoji shot images were pinned with physical
   `right` offsets that don't move with dir — so both landed on the same side and
   the text overlapped the images. Mirror every shot element to the left instead. */
[dir="rtl"] .hp-card__shots { right: auto !important; left: -18px !important; }
[dir="rtl"] .hp-shot--back { right: auto !important; left: 20% !important; }
[dir="rtl"] .hp-shot--front { right: auto !important; left: -2% !important; }
[dir="rtl"] .hp-card__dodo { left: auto !important; right: -36px !important; }
[dir="rtl"] .hp-card__shots--polaroids { right: auto !important; left: 0 !important; }
[dir="rtl"] .hp-pol--1 { right: auto !important; left: 12% !important; }
[dir="rtl"] .hp-pol--2 { right: auto !important; left: 24% !important; }
[dir="rtl"] .hp-pol--3 { right: auto !important; left: 6% !important; }