@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap'); /* Brand logo / title wordmark. Latin display face; Arabic falls back to the * body stack since Montserrat has no Arabic glyphs. */ .brand-logo { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: 0.01em; } [dir="rtl"] .brand-logo { font-family: 'Tajawal', 'Cairo', 'Inter', system-ui, sans-serif; } /* Minimal RTL layout flips. Activated only when is set * (Arabic). Everything else in Tailwind keeps working in LTR mode. * * Strategy: we don't aim for a perfect mirror of every component on day * one. We flip the things that produce the strongest "this looks broken * in Arabic" impression: text alignment, padding/margin direction on the * most common helpers, and the order of flex rows that contained logical * "start/end" relationships. */ /* Always reserve space for the vertical scrollbar so page content doesn't * shift horizontally between short and tall pages. */ html { scrollbar-gutter: stable; } [dir="rtl"] body { font-family: 'Tajawal', 'Cairo', 'Inter', system-ui, sans-serif; } /* Reserve the nav height before nav.js fills #main-nav, so the page below * doesn't jump when the header paints. Two stacked bars: brand strip + nav. */ #main-nav:empty { min-height: 93px; } @media (max-width: 767px) { #main-nav:empty { min-height: 89px; } } /* Default text alignment */ [dir="rtl"] { text-align: right; } /* Flip Tailwind's text-{left,right,start,end} utilities */ [dir="rtl"] .text-left { text-align: right; } [dir="rtl"] .text-right { text-align: left; } /* Margin-left / margin-right ⇄ swap (most common Tailwind values) */ [dir="rtl"] .ml-1 { margin-left: 0; margin-right: 0.25rem; } [dir="rtl"] .ml-2 { margin-left: 0; margin-right: 0.5rem; } [dir="rtl"] .ml-3 { margin-left: 0; margin-right: 0.75rem; } [dir="rtl"] .ml-4 { margin-left: 0; margin-right: 1rem; } [dir="rtl"] .ml-6 { margin-left: 0; margin-right: 1.5rem; } [dir="rtl"] .ml-auto { margin-left: 0; margin-right: auto; } [dir="rtl"] .mr-1 { margin-right: 0; margin-left: 0.25rem; } [dir="rtl"] .mr-2 { margin-right: 0; margin-left: 0.5rem; } [dir="rtl"] .mr-3 { margin-right: 0; margin-left: 0.75rem; } [dir="rtl"] .mr-4 { margin-right: 0; margin-left: 1rem; } [dir="rtl"] .mr-6 { margin-right: 0; margin-left: 1.5rem; } [dir="rtl"] .mr-auto { margin-right: 0; margin-left: auto; } /* Padding-left / padding-right ⇄ swap */ [dir="rtl"] .pl-1 { padding-left: 0; padding-right: 0.25rem; } [dir="rtl"] .pl-2 { padding-left: 0; padding-right: 0.5rem; } [dir="rtl"] .pl-3 { padding-left: 0; padding-right: 0.75rem; } [dir="rtl"] .pl-4 { padding-left: 0; padding-right: 1rem; } [dir="rtl"] .pl-6 { padding-left: 0; padding-right: 1.5rem; } [dir="rtl"] .pl-10 { padding-left: 0; padding-right: 2.5rem; } [dir="rtl"] .pr-1 { padding-right: 0; padding-left: 0.25rem; } [dir="rtl"] .pr-2 { padding-right: 0; padding-left: 0.5rem; } [dir="rtl"] .pr-3 { padding-right: 0; padding-left: 0.75rem; } [dir="rtl"] .pr-4 { padding-right: 0; padding-left: 1rem; } [dir="rtl"] .pr-6 { padding-right: 0; padding-left: 1.5rem; } /* Border-left / border-right swap for tab/card accents */ [dir="rtl"] .border-l { border-left: 0; border-right: 1px solid; } [dir="rtl"] .border-l-2 { border-left: 0; border-right: 2px solid; } [dir="rtl"] .border-l-3 { border-left: 0; border-right: 3px solid; } [dir="rtl"] .border-l-4 { border-left: 0; border-right: 4px solid; } [dir="rtl"] .border-r { border-right: 0; border-left: 1px solid; } [dir="rtl"] .border-r-2 { border-right: 0; border-left: 2px solid; } /* SVG icons that point "forward" stay forward — flip arrow-pointing icons */ [dir="rtl"] svg.flip-rtl { transform: scaleX(-1); } /* Absolute positioning: Tailwind's left-0/right-0 are physical edges; in RTL * they should swap so dropdowns and tooltips appear on the "near" side * of the trigger from the reader's perspective. Limited to absolute / * fixed elements so we don't move flow content. */ [dir="rtl"] .absolute.left-0, [dir="rtl"] .fixed.left-0 { left: auto; right: 0; } [dir="rtl"] .absolute.right-0, [dir="rtl"] .fixed.right-0 { right: auto; left: 0; } [dir="rtl"] .absolute.left-auto { left: 0; } [dir="rtl"] .absolute.right-auto { right: 0; } [dir="rtl"] .-left-1 { left: auto; right: -0.25rem; } [dir="rtl"] .-right-1 { right: auto; left: -0.25rem; } [dir="rtl"] .-left-2 { left: auto; right: -0.5rem; } [dir="rtl"] .-right-2 { right: auto; left: -0.5rem; }