/* ==========================================================================
   RTL Base - Core Foundation for Right-to-Left Languages
   ========================================================================== */

/*
   Core RTL foundation and Tailwind CSS overrides
   - Base RTL setup and typography
   - Tailwind utility class overrides
   - Essential layout utilities
*/

/* ==========================================================================
   1. BASE RTL FOUNDATION
   ========================================================================== */

/* Root RTL setup */
[dir="rtl"] {
    direction: rtl;
}

/* Typography foundation for RTL languages */
[dir="rtl"] {
    font-family: 'Noto Sans Urdu', 'Arabic UI Text', 'Tahoma', system-ui, sans-serif;
    line-height: 1.75; /* Match LTR line-height for consistency */
}

/* ==========================================================================
   2. TAILWIND CSS RTL OVERRIDES
   ========================================================================== */

/* Text Alignment */
[dir="rtl"] .text-left { text-align: right; }
[dir="rtl"] .text-right { text-align: left; }

/* Margins - Horizontal */
[dir="rtl"] .ml-auto { margin-inline-start: auto; margin-inline-end: 0; }
[dir="rtl"] .mr-auto { margin-inline-start: 0; margin-inline-end: auto; }
[dir="rtl"] .ml-1 { margin-inline-start: 0; margin-inline-end: 0.25rem; }
[dir="rtl"] .ml-2 { margin-inline-start: 0; margin-inline-end: 0.5rem; }
[dir="rtl"] .ml-3 { margin-inline-start: 0; margin-inline-end: 0.75rem; }
[dir="rtl"] .ml-4 { margin-inline-start: 0; margin-inline-end: 1rem; }
[dir="rtl"] .ml-6 { margin-inline-start: 0; margin-inline-end: 1.5rem; }
[dir="rtl"] .ml-8 { margin-inline-start: 0; margin-inline-end: 2rem; }
[dir="rtl"] .mr-1 { margin-inline-start: 0.25rem; margin-inline-end: 0; }
[dir="rtl"] .mr-2 { margin-inline-start: 0.5rem; margin-inline-end: 0; }
[dir="rtl"] .mr-3 { margin-inline-start: 0.75rem; margin-inline-end: 0; }
[dir="rtl"] .mr-4 { margin-inline-start: 1rem; margin-inline-end: 0; }
[dir="rtl"] .mr-6 { margin-inline-start: 1.5rem; margin-inline-end: 0; }
[dir="rtl"] .mr-8 { margin-inline-start: 2rem; margin-inline-end: 0; }

/* Padding - Horizontal */
[dir="rtl"] .pl-1 { padding-inline-start: 0; padding-inline-end: 0.25rem; }
[dir="rtl"] .pl-2 { padding-inline-start: 0; padding-inline-end: 0.5rem; }
[dir="rtl"] .pl-3 { padding-inline-start: 0; padding-inline-end: 0.75rem; }
[dir="rtl"] .pl-4 { padding-inline-start: 0; padding-inline-end: 1rem; }
[dir="rtl"] .pl-6 { padding-inline-start: 0; padding-inline-end: 1.5rem; }
[dir="rtl"] .pl-8 { padding-inline-start: 0; padding-inline-end: 2rem; }
[dir="rtl"] .pr-1 { padding-inline-start: 0.25rem; padding-inline-end: 0; }
[dir="rtl"] .pr-2 { padding-inline-start: 0.5rem; padding-inline-end: 0; }
[dir="rtl"] .pr-3 { padding-inline-start: 0.75rem; padding-inline-end: 0; }
[dir="rtl"] .pr-4 { padding-inline-start: 1rem; padding-inline-end: 0; }
[dir="rtl"] .pr-6 { padding-inline-start: 1.5rem; padding-inline-end: 0; }
[dir="rtl"] .pr-8 { padding-inline-start: 2rem; padding-inline-end: 0; }

/* Borders */
[dir="rtl"] .border-l { border-inline-start-width: 0; border-inline-end-width: 1px; }
[dir="rtl"] .border-r { border-inline-start-width: 1px; border-inline-end-width: 0; }

/* Positioning */
[dir="rtl"] .left-0 { inset-inline-start: auto; inset-inline-end: 0; }
[dir="rtl"] .right-0 { inset-inline-start: 0; inset-inline-end: auto; }
[dir="rtl"] .left-2 { inset-inline-start: auto; inset-inline-end: 0.5rem; }
[dir="rtl"] .right-2 { inset-inline-start: 0.5rem; inset-inline-end: auto; }
[dir="rtl"] .left-4 { inset-inline-start: auto; inset-inline-end: 1rem; }
[dir="rtl"] .right-4 { inset-inline-start: 1rem; inset-inline-end: auto; }

/* Floats */
[dir="rtl"] .float-left { float: inline-end; }
[dir="rtl"] .float-right { float: inline-start; }

/* ==========================================================================
   3. TYPOGRAPHY & CONTENT
   ========================================================================== */

/* Headings */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
    text-align: start; /* Use logical 'start' instead of 'right' */
    font-weight: 700;
    line-height: 1.25; /* Match LTR heading line-height for consistency */
}

/* Maintain center alignment when explicitly set */
[dir="rtl"] .text-center h1,
[dir="rtl"] .text-center h2,
[dir="rtl"] .text-center h3,
[dir="rtl"] .text-center h4,
[dir="rtl"] .text-center h5,
[dir="rtl"] .text-center h6 {
    text-align: center;
}

/* Paragraph and text content */
[dir="rtl"] p,
[dir="rtl"] .prose {
    text-align: start;
    line-height: 1.75; /* Match LTR paragraph line-height for consistency */
}

/* Lists */
[dir="rtl"] ul,
[dir="rtl"] ol {
    padding-inline-start: 0;
    padding-inline-end: 1.5rem;
}

/* Urdu language overrides: increase line-height to 2.5 when content is marked as Urdu. */
[dir="rtl"] :lang(ur) p,
[dir="rtl"] :lang(ur) h3,
[dir="rtl"] :lang(ur) .prose {
    line-height: 2.5;
}

[dir="rtl"] :lang(ur) ul,
[dir="rtl"] :lang(ur) ol {
    line-height: 2.5;
    /* keep list padding as in base */
    padding-inline-start: 0;
    padding-inline-end: 1.5rem;
}

/* Blockquotes */
[dir="rtl"] blockquote {
    border-inline-start-width: 0;
    border-inline-end-width: 4px;
    padding-inline-start: 0;
    padding-inline-end: 1rem;
    text-align: start;
}

/* ==========================================================================
   4. LAYOUT & FLEXBOX
   ========================================================================== */

/* Flex Direction Reversals */
[dir="rtl"] .flex-row { flex-direction: row-reverse; }
[dir="rtl"] .flex-row-reverse { flex-direction: row; }

/* Flex utility classes */
[dir="rtl"] .justify-start { justify-content: flex-end; }
[dir="rtl"] .justify-end { justify-content: flex-start; }

/* Space utilities - only for non-carousel elements */
[dir="rtl"] .space-x-1 > * + *:not(.carousel-dot) { margin-inline-start: 0.25rem; margin-inline-end: 0; }
[dir="rtl"] .space-x-2 > * + *:not(.carousel-dot) { margin-inline-start: 0.5rem; margin-inline-end: 0; }
[dir="rtl"] .space-x-3 > * + *:not(.carousel-dot) { margin-inline-start: 0.75rem; margin-inline-end: 0; }
[dir="rtl"] .space-x-4 > * + *:not(.carousel-dot) { margin-inline-start: 1rem; margin-inline-end: 0; }
[dir="rtl"] .space-x-6 > * + *:not(.carousel-dot) { margin-inline-start: 1.5rem; margin-inline-end: 0; }

/* ==========================================================================
   5. UTILITY CLASSES
   ========================================================================== */

/* RTL-specific utility classes */
.rtl-text-start { text-align: start; }
.rtl-text-end { text-align: end; }
.rtl-float-start { float: inline-start; }
.rtl-float-end { float: inline-end; }

/* ==========================================================================
   6. RESPONSIVE RTL BASE
   ========================================================================== */

/* Mobile adjustments */
@media (max-width: 768px) {
    /* Only fix mobile menu positioning */
    [dir="rtl"] #mobile-menu {
        inset-inline-start: auto;
        inset-inline-end: 0;
    }

    /* Fix language selector positioning on mobile */
    [dir="rtl"] .language-switcher {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    /* Mobile RTL specific adjustments */
    [dir="rtl"] .language-switcher select {
        max-width: 120px;
        height: 41px;
        text-align: center;
        background-position: left 0.5rem center !important;
        padding-left: 2rem !important;
        padding-right: 0.75rem !important;
    }
}

/* ==========================================================================
   7. ACCESSIBILITY & REDUCED MOTION
   ========================================================================== */

/* High contrast mode */
@media (prefers-contrast: high) {
    [dir="rtl"] a {
        text-decoration-thickness: 2px;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    [dir="rtl"] .slide-in-left,
    [dir="rtl"] .slide-in-right,
    [dir="rtl"] .animate-slide {
        animation: none;
    }
}

/* ==========================================================================
   8. PRINT STYLES
   ========================================================================== */

@media print {
    [dir="rtl"] {
        direction: rtl;
        text-align: start;
    }

    [dir="rtl"] .no-print {
        display: none;
    }
}