/* ==========================================================================
   BFA THEME — RTL Overrides
   --------------------------------------------------------------------------
   Loaded only when is_rtl() is true (see inc/enqueue.php).

   The bulk of the theme already uses CSS Logical Properties
   (margin-inline-*, padding-inline-*, inset-inline-*, border-inline-*,
   text-align: start/end), which auto-flip without any override.

   This file handles the remaining cases that need explicit RTL tuning:
     1. Language-scoped typography (.lang-ar / .lang-en)
     2. Hard-coded directional rules in vendor / plugin CSS we cannot reach
     3. Decorative elements that don't auto-flip (transforms, animations)
     4. Icons & arrows that need horizontal mirroring
     5. Direction-sensitive components (timeline, dropdowns, mobile panel)
   ========================================================================== */


/* ==========================================================================
   1) LANGUAGE-SCOPED TYPOGRAPHY
   ========================================================================== */

body.lang-ar,
html[dir="rtl"] body {
    font-family: "Cairo", "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif;
    line-height: 1.9;
    text-align: right;
    letter-spacing: 0;
}

body.lang-ar h1,
body.lang-ar h2,
body.lang-ar h3,
body.lang-ar h4,
body.lang-ar h5,
body.lang-ar h6 {
    font-family: "Cairo", "Tajawal", system-ui, sans-serif;
    letter-spacing: 0;
    line-height: 1.4;
}

body.lang-en {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    line-height: 1.7;
}

body.lang-en h1,
body.lang-en h2,
body.lang-en h3 {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

body.lang-en h4,
body.lang-en h5,
body.lang-en h6 {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}


/* ==========================================================================
   2) BASE DIRECTION + ALIGNMENT
   ========================================================================== */

html[dir="rtl"] {
    direction: rtl;
}

html[dir="rtl"] body {
    direction: rtl;
}

/* Flip text alignment shorthand utilities (the inverse of LTR meaning). */
html[dir="rtl"] .text-left  { text-align: right !important; }
html[dir="rtl"] .text-right { text-align: left  !important; }

/* Margin auto helpers (so ml-auto/mr-auto still push to the visual edge). */
html[dir="rtl"] .ml-auto { margin-left: 0;    margin-right: auto; }
html[dir="rtl"] .mr-auto { margin-right: 0;   margin-left:  auto; }


/* ==========================================================================
   3) FORMS & INPUTS
   ========================================================================== */

html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    text-align: right;
}

/* Numeric and contact inputs stay LTR for readability. */
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="number"] {
    direction: ltr;
    text-align: right;
}

html[dir="rtl"] .bfa-form-field label {
    text-align: right;
}


/* ==========================================================================
   4) HEADER & MENU
   ========================================================================== */

html[dir="rtl"] .bfa-topbar-inner,
html[dir="rtl"] .bfa-header-inner {
    flex-direction: row; /* logical row already flips visually in RTL */
}

/* Submenu dropdown — open to the right edge in RTL (auto via logical
   properties, but force here to override any plugin LTR styles). */
html[dir="rtl"] .bfa-submenu {
    right: 0;
    left:  auto;
}

/* Nested submenus open to the left edge in RTL (inline-end = left). */
html[dir="rtl"] .bfa-submenu .bfa-submenu {
    right: auto;
    left:  100%;
}

/* Dropdown chevron arrow stays semantic (points down in both). */

/* Active underline already uses inset-inline → no flip needed. */


/* ==========================================================================
   5) MOBILE PANEL — slide-in from RIGHT in RTL
   ========================================================================== */

html[dir="rtl"] .bfa-mobile-panel {
    right: 0;
    left:  auto;
    transform: translateX(100%);
}

body.bfa-menu-open html[dir="rtl"] .bfa-mobile-panel,
html[dir="rtl"] body.bfa-menu-open .bfa-mobile-panel {
    transform: translateX(0);
}


/* ==========================================================================
   6) ICONS & ARROWS — horizontal mirror
   --------------------------------------------------------------------------
   Anything directional (arrow, chevron, caret) inside an interactive
   element needs to be mirrored so the visual cue still points the right
   way for an RTL reader. Diamond/plus/check/info icons stay as-is.
   ========================================================================== */

html[dir="rtl"] .bfa-btn svg.bfa-icon-flip,
html[dir="rtl"] .post-card-readmore svg,
html[dir="rtl"] .service-card-cta svg,
html[dir="rtl"] .footer-services-list a svg,
html[dir="rtl"] .bfa-cta-actions .bfa-btn--gold svg,
html[dir="rtl"] .author-box-link svg,
html[dir="rtl"] .bfa-archive-pagination .prev,
html[dir="rtl"] .bfa-archive-pagination .next {
    transform: scaleX(-1);
}

/* Breadcrumb separator — keep "←" pointing back in RTL too. */
html[dir="rtl"] .bfa-breadcrumb__sep {
    transform: none; /* already correct */
}

/* Scroll hint arrow in hero — vertical, no flip needed. */


/* ==========================================================================
   7) ABOUT SECTION — decorative vertical gold line
   --------------------------------------------------------------------------
   The line uses inset-inline-start: 50% which centers regardless of dir,
   but image-frame corner accents need to flip so the highlighted corners
   read top-right and bottom-left in RTL.
   ========================================================================== */

/* Vertical divider stays centered — uses inset-inline-start: 50% already. */

/* Image frame corner accents — flip orientation in RTL. */
html[dir="rtl"] .bfa-about-image-frame::before {
    /* original: top-left → become top-right */
    inset: -8px -8px auto auto;
    border-top:  3px solid var(--bfa-gold);
    border-right: 3px solid var(--bfa-gold);
    border-left:  0;
    border-radius: 0 var(--bfa-radius-lg) 0 0;
}

html[dir="rtl"] .bfa-about-image-frame::after {
    /* original: bottom-right → become bottom-left */
    inset: auto auto -8px -8px;
    border-bottom: 3px solid var(--bfa-gold);
    border-left:   3px solid var(--bfa-gold);
    border-right:  0;
    border-radius: 0 0 0 var(--bfa-radius-lg);
}


/* ==========================================================================
   8) TIMELINE — reverse alternation in RTL
   --------------------------------------------------------------------------
   Logical inset-inline-* already places items on the correct side, but
   the visual "alternation" (start = right, end = left in RTL) needs
   text-alignment and padding tweaks so the dot and the card meet correctly
   at the central line.
   ========================================================================== */

html[dir="rtl"] .timeline-item--start {
    text-align: left;
    padding-inline-end: 3rem;
    padding-inline-start: 0;
}

html[dir="rtl"] .timeline-item--end {
    text-align: right;
    padding-inline-start: 3rem;
    padding-inline-end: 0;
}

html[dir="rtl"] .timeline-card {
    text-align: right;
}

/* Year stays LTR (numerals). */
html[dir="rtl"] .timeline-year {
    direction: ltr;
    display: inline-block;
}


/* ==========================================================================
   9) FOOTER & CONTACT — keep numeric strings LTR
   ========================================================================== */

html[dir="rtl"] .bfa-contact-info-item a[href^="tel:"],
html[dir="rtl"] .bfa-contact-info-item a[href^="mailto:"],
html[dir="rtl"] .footer-contact-item a[href^="tel:"],
html[dir="rtl"] .footer-contact-item a[href^="mailto:"],
html[dir="rtl"] .bfa-topbar-phone span,
html[dir="rtl"] .bfa-topbar-email span {
    direction: ltr;
    unicode-bidi: embed;
    display: inline-block;
}

/* Footer alignment */
html[dir="rtl"] .bfa-footer {
    text-align: right;
}


/* ==========================================================================
   10) BLOCKQUOTE — gold border on the inline-start (= right in RTL)
   ========================================================================== */

html[dir="rtl"] blockquote,
html[dir="rtl"] .bfa-prose blockquote {
    border-left: 0;
    border-right: 4px solid var(--bfa-gold);
    border-radius: var(--bfa-radius-md) 0 0 var(--bfa-radius-md);
}


/* ==========================================================================
   11) AUTHOR BOX — flip the gold accent border
   ========================================================================== */

html[dir="rtl"] .author-box {
    border-inline-start: 4px solid var(--bfa-gold);
    /* No-op note: logical property already correct. */
}


/* ==========================================================================
   12) PAGINATION — keep numerals visually LTR (so 1, 2, 3 read naturally)
   ========================================================================== */

html[dir="rtl"] .bfa-archive-pagination {
    direction: ltr;
}


/* ==========================================================================
   13) ELEMENTOR & PLUGIN OVERRIDES
   --------------------------------------------------------------------------
   Plugins sometimes ship LTR-hardcoded styles. The selectors below force
   commonly-broken patterns back into RTL.
   ========================================================================== */

html[dir="rtl"] .elementor-section.elementor-section-boxed > .elementor-container {
    direction: rtl;
}

html[dir="rtl"] .elementor-icon-list-item {
    text-align: right;
}

html[dir="rtl"] .wp-block-quote {
    border-left: 0;
    border-right: 4px solid var(--bfa-gold);
}


/* ==========================================================================
   14) WP CORE WIDGETS & COMMENTS
   ========================================================================== */

html[dir="rtl"] .widget ul,
html[dir="rtl"] .widget ol {
    padding-inline-start: 1.25rem;
    padding-inline-end: 0;
}

html[dir="rtl"] .comment-list,
html[dir="rtl"] .comment-list .children {
    padding-inline-start: 1.25rem;
    padding-inline-end: 0;
}

html[dir="rtl"] .comment-respond textarea,
html[dir="rtl"] .comment-respond input[type="text"],
html[dir="rtl"] .comment-respond input[type="email"] {
    text-align: right;
}


/* ==========================================================================
   15) SELECTION & CARET (visual polish)
   ========================================================================== */

html[dir="rtl"] ::selection {
    /* Same gold/black combo — RTL-agnostic. */
    background-color: var(--bfa-gold);
    color: var(--bfa-black);
}


/* ==========================================================================
   16) REDUCED-MOTION SAFETY
   --------------------------------------------------------------------------
   Some directional animations need to be explicitly disabled for users who
   request reduced motion, since they're driven by transform values that
   change direction with dir="rtl".
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    html[dir="rtl"] .bfa-mobile-panel {
        transition: none !important;
    }
    html[dir="rtl"] .bfa-animate,
    html[dir="rtl"] .fade-in,
    html[dir="rtl"] .slide-up {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}