/* ═══════════════════════════════════════════════════════════════════════
   RTL (Right-to-Left) Support — Hebrew (HE) & Arabic (AR)
   KiTalent.com
   ═══════════════════════════════════════════════════════════════════════
   Load AFTER common.min.css and mobile-menu-fix.css.
   Activates on html[lang="he"] or html[lang="ar"].
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Base direction & alignment ── */
html[lang="he"],
html[lang="ar"] {
    direction: rtl;
}

html[lang="he"] body,
html[lang="ar"] body {
    text-align: right;
}

/* ── 2. Keep specific elements LTR (numbers, brands, emails, URLs) ── */
html[lang="he"] .ltr-preserve,
html[lang="ar"] .ltr-preserve,
html[lang="he"] a[href^="mailto:"],
html[lang="ar"] a[href^="mailto:"],
html[lang="he"] a[href^="tel:"],
html[lang="ar"] a[href^="tel:"],
html[lang="he"] .site-footer__social-icons,
html[lang="ar"] .site-footer__social-icons {
    unicode-bidi: embed;
    direction: ltr;
}

/* Phone numbers, email addresses, URLs inline */
html[lang="he"] [dir="ltr"],
html[lang="ar"] [dir="ltr"] {
    unicode-bidi: embed;
    direction: ltr;
}

/* ── 3. Header / Navigation ── */

/* Flip the main header flex container (logo left, nav right → logo right, nav left) */
html[lang="he"] .site-header .flex.justify-between,
html[lang="ar"] .site-header .flex.justify-between {
    flex-direction: row-reverse;
}

/* Desktop nav links: reverse order so they read RTL */
@media (min-width: 768px) {
    html[lang="he"] .site-header__nav-list,
    html[lang="ar"] .site-header__nav-list {
        flex-direction: row-reverse;
    }

    /* Flip space-x margins: Tailwind space-x uses margin-left; flip to margin-right */
    html[lang="he"] .site-header__nav-list.md\:space-x-6 > :not([hidden]) ~ :not([hidden]),
    html[lang="ar"] .site-header__nav-list.md\:space-x-6 > :not([hidden]) ~ :not([hidden]) {
        margin-left: 0;
        margin-right: 1.5rem;
    }

    html[lang="he"] .site-header__nav-list.lg\:space-x-8 > :not([hidden]) ~ :not([hidden]),
    html[lang="ar"] .site-header__nav-list.lg\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
        margin-left: 0;
        margin-right: 2rem;
    }

    /* Register button: flip ml-4 to mr-4 */
    html[lang="he"] .site-header__nav .btn,
    html[lang="ar"] .site-header__nav .btn {
        margin-left: 0;
        margin-right: 1rem;
    }
}

/* ── 4. Flip directional margins (ml-* → mr-*, mr-* → ml-*) ── */
html[lang="he"] .ml-1, html[lang="ar"] .ml-1 { margin-left: 0; margin-right: 0.25rem; }
html[lang="he"] .ml-2, html[lang="ar"] .ml-2 { margin-left: 0; margin-right: 0.5rem; }
html[lang="he"] .ml-5, html[lang="ar"] .ml-5 { margin-left: 0; margin-right: 1.25rem; }
html[lang="he"] .mr-1, html[lang="ar"] .mr-1 { margin-right: 0; margin-left: 0.25rem; }
html[lang="he"] .mr-2, html[lang="ar"] .mr-2 { margin-right: 0; margin-left: 0.5rem; }
html[lang="he"] .mr-3, html[lang="ar"] .mr-3 { margin-right: 0; margin-left: 0.75rem; }
html[lang="he"] .mr-4, html[lang="ar"] .mr-4 { margin-right: 0; margin-left: 1rem; }

/* Responsive ml/mr flips */
@media (min-width: 768px) {
    html[lang="he"] .md\:ml-4, html[lang="ar"] .md\:ml-4 { margin-left: 0; margin-right: 1rem; }
}

/* ── 5. Flip directional padding (pl-* → pr-*, pr-* → pl-*) ── */
html[lang="he"] .pl-2, html[lang="ar"] .pl-2 { padding-left: 0; padding-right: 0.5rem; }
html[lang="he"] .pl-4, html[lang="ar"] .pl-4 { padding-left: 0; padding-right: 1rem; }
html[lang="he"] .pr-2, html[lang="ar"] .pr-2 { padding-right: 0; padding-left: 0.5rem; }

/* ── 6. Flip space-x utilities (margin-left → margin-right) ── */
html[lang="he"] .space-x-2 > :not([hidden]) ~ :not([hidden]),
html[lang="ar"] .space-x-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 1;
}

html[lang="he"] .space-x-3 > :not([hidden]) ~ :not([hidden]),
html[lang="ar"] .space-x-3 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 1;
}

html[lang="he"] .space-x-4 > :not([hidden]) ~ :not([hidden]),
html[lang="ar"] .space-x-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 1;
}

@media (min-width: 768px) {
    html[lang="he"] .md\:space-x-6 > :not([hidden]) ~ :not([hidden]),
    html[lang="ar"] .md\:space-x-6 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-x-reverse: 1;
    }
}

@media (min-width: 1024px) {
    html[lang="he"] .lg\:space-x-8 > :not([hidden]) ~ :not([hidden]),
    html[lang="ar"] .lg\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-x-reverse: 1;
    }
}

/* ── 7. Text alignment flips ── */
html[lang="he"] .text-left,
html[lang="ar"] .text-left {
    text-align: right;
}

html[lang="he"] .text-right,
html[lang="ar"] .text-right {
    text-align: left;
}

/* text-center stays centered — no change needed */

@media (min-width: 768px) {
    html[lang="he"] .md\:text-left,
    html[lang="ar"] .md\:text-left {
        text-align: right;
    }
}

@media (min-width: 1024px) {
    html[lang="he"] .lg\:text-left,
    html[lang="ar"] .lg\:text-left {
        text-align: right;
    }
}

/* ── 8. Breadcrumb direction ── */
html[lang="he"] .breadcrumb,
html[lang="ar"] .breadcrumb {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

/* Flip the chevron arrow for RTL */
html[lang="he"] .breadcrumb-item:not(:last-child)::after,
html[lang="ar"] .breadcrumb-item:not(:last-child)::after {
    transform: rotate(225deg);
    margin: 0 0.5rem;
}

@media (max-width: 640px) {
    html[lang="he"] .breadcrumb-item:not(:last-child)::after,
    html[lang="ar"] .breadcrumb-item:not(:last-child)::after {
        margin: 0 0.25rem;
    }
}

/* ── 9. Border directional flips ── */
html[lang="he"] .border-l-4,
html[lang="ar"] .border-l-4 {
    border-left-width: 0;
    border-right-width: 4px;
}

/* ── 10. List markers ── */
html[lang="he"] .list-outside,
html[lang="ar"] .list-outside {
    padding-right: 1.5rem;
    padding-left: 0;
}

html[lang="he"] ul.list-disc,
html[lang="ar"] ul.list-disc {
    padding-right: 1.5rem;
    padding-left: 0;
}

/* ── 11. Card grid — no change needed, CSS Grid flows with direction ── */

/* ── 12. Footer link hover animation: flip translate-x direction ── */
html[lang="he"] .site-footer__link.hover\:translate-x-1:hover,
html[lang="ar"] .site-footer__link.hover\:translate-x-1:hover {
    --tw-translate-x: -0.25rem;
}

html[lang="he"] .group:hover .group-hover\:translate-x-1,
html[lang="ar"] .group:hover .group-hover\:translate-x-1 {
    --tw-translate-x: -0.25rem;
}

/* Footer bullet dot: flip mr-3 to ml-3 */
html[lang="he"] .site-footer__link .mr-3,
html[lang="ar"] .site-footer__link .mr-3 {
    margin-right: 0;
    margin-left: 0.75rem;
}

/* ── 13. Process timeline (methodology page) ── */
@media (min-width: 768px) {
    html[lang="he"] .process-timeline__line,
    html[lang="ar"] .process-timeline__line {
        left: auto;
        right: 50%;
        transform: translateX(50%);
    }

    html[lang="he"] .process-timeline__number,
    html[lang="ar"] .process-timeline__number {
        left: auto;
        right: 50%;
        transform: translateX(50%);
    }

    html[lang="he"] .process-timeline__step:nth-child(odd) .process-timeline__content,
    html[lang="ar"] .process-timeline__step:nth-child(odd) .process-timeline__content {
        margin-left: 0;
        margin-right: calc(50% + 40px);
    }

    html[lang="he"] .process-timeline__step:nth-child(2n) .process-timeline__content,
    html[lang="ar"] .process-timeline__step:nth-child(2n) .process-timeline__content {
        margin-right: 0;
        margin-left: calc(50% + 40px);
    }
}

@media (max-width: 767.98px) {
    html[lang="he"] .process-timeline__line,
    html[lang="ar"] .process-timeline__line {
        left: auto;
        right: 25px;
        transform: translateX(0);
    }

    html[lang="he"] .process-timeline__step,
    html[lang="ar"] .process-timeline__step {
        padding-left: 0;
        padding-right: 50px;
    }

    html[lang="he"] .process-timeline__number,
    html[lang="ar"] .process-timeline__number {
        left: auto;
        right: 25px;
        transform: translateX(50%);
    }
}

/* ── 14. Language switcher positioning ── */

/* Desktop panel: open from left instead of right */
html[lang="he"] .lang-switcher__panel,
html[lang="ar"] .lang-switcher__panel {
    right: auto;
    left: 0;
}

/* Search icon in lang switcher */
html[lang="he"] .lang-switcher__search-wrap .fa-search,
html[lang="ar"] .lang-switcher__search-wrap .fa-search {
    left: auto;
    right: 22px;
}

html[lang="he"] .lang-switcher__search,
html[lang="ar"] .lang-switcher__search {
    padding-left: 10px;
    padding-right: 28px;
}

/* Mobile trigger label alignment */
@media (max-width: 767px) {
    html[lang="he"] .lang-switcher__mobile-trigger-label,
    html[lang="ar"] .lang-switcher__mobile-trigger-label {
        text-align: right;
    }

    html[lang="he"] .lang-switcher__mobile-trigger .fa-globe,
    html[lang="ar"] .lang-switcher__mobile-trigger .fa-globe {
        margin-right: 0;
        margin-left: 8px;
    }

    html[lang="he"] .lang-switcher__mobile-panel .lang-switcher__search-wrap .fa-search,
    html[lang="ar"] .lang-switcher__mobile-panel .lang-switcher__search-wrap .fa-search {
        left: auto;
        right: 10px;
    }
}

/* ── 15. Search toggle button ── */
html[lang="he"] .search-toggle-btn,
html[lang="ar"] .search-toggle-btn {
    text-align: right;
}

/* ── 16. Footer search input padding ── */
html[lang="he"] .footer-search-input,
html[lang="ar"] .footer-search-input {
    padding-left: 2.25rem;
    padding-right: 2rem;
}

/* ── 17. Modal close button ── */
html[lang="he"] .modal-overlay__close-btn,
html[lang="ar"] .modal-overlay__close-btn {
    right: auto;
    left: 0.75rem;
}

/* ── 18. Rebranding banner close button ── */
html[lang="he"] .rebranding-banner__close-btn,
html[lang="ar"] .rebranding-banner__close-btn {
    right: auto;
    left: 1rem;
}

html[lang="he"] .rebranding-banner__icon,
html[lang="ar"] .rebranding-banner__icon {
    margin-right: 0;
    margin-left: 0.75rem;
}

html[lang="he"] .rebranding-banner__text-emphasis,
html[lang="ar"] .rebranding-banner__text-emphasis {
    margin-right: 0;
    margin-left: 0.5rem;
}

/* ── 19. Flex row-reverse for md:flex-row-reverse (already RTL-aware sections) ── */
/* On RTL, md:flex-row-reverse should become normal row (cancel the reverse) */
@media (min-width: 768px) {
    html[lang="he"] .md\:flex-row-reverse,
    html[lang="ar"] .md\:flex-row-reverse {
        flex-direction: row;
    }

    /* And normal md:flex-row becomes row-reverse in RTL */
    html[lang="he"] .md\:flex-row,
    html[lang="ar"] .md\:flex-row {
        flex-direction: row-reverse;
    }
}

/* ── 20. Card read-more arrow flip ── */
html[lang="he"] .ki-card__read-more .fas,
html[lang="ar"] .ki-card__read-more .fas {
    margin-left: 0;
    margin-right: 0.25rem;
    transform: scaleX(-1);
}

/* ── 21. HubSpot form required asterisk ── */
html[lang="he"] #hubspot-form-container .hs-form-required,
html[lang="ar"] #hubspot-form-container .hs-form-required {
    margin-left: 0;
    margin-right: 0.25rem;
}

/* ── 22. Positioned elements: flip left/right ── */
html[lang="he"] .right-0,
html[lang="ar"] .right-0 {
    right: auto;
    left: 0;
}

html[lang="he"] .left-0,
html[lang="ar"] .left-0 {
    left: auto;
    right: 0;
}

html[lang="he"] .right-4,
html[lang="ar"] .right-4 {
    right: auto;
    left: 1rem;
}

/* ── 23. Gradient direction flip ── */
html[lang="he"] .bg-gradient-to-r,
html[lang="ar"] .bg-gradient-to-r {
    background-image: linear-gradient(to left, var(--tw-gradient-stops));
}

/* ── 24. HubSpot checkbox margin ── */
html[lang="he"] #hubspot-form-container .hs-form-field.hs-fieldtype-checkbox label input[type=checkbox],
html[lang="ar"] #hubspot-form-container .hs-form-field.hs-fieldtype-checkbox label input[type=checkbox] {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}

/* ── 25. Footer bottom text alignment on desktop ── */
@media (min-width: 1024px) {
    html[lang="he"] .site-footer__bottom .lg\:text-left,
    html[lang="ar"] .site-footer__bottom .lg\:text-left {
        text-align: right;
    }
}

/* ── 26. Handshake icon and similar inline icons ── */
html[lang="he"] .fas.mr-2,
html[lang="ar"] .fas.mr-2 {
    margin-right: 0;
    margin-left: 0.5rem;
}

html[lang="he"] .fas.mr-3,
html[lang="ar"] .fas.mr-3 {
    margin-right: 0;
    margin-left: 0.75rem;
}

/* ── 27. Fix order utilities for RTL two-column layouts ── */
@media (min-width: 768px) {
    html[lang="he"] .md\:order-1,
    html[lang="ar"] .md\:order-1 {
        order: 2;
    }

    html[lang="he"] .md\:order-2,
    html[lang="ar"] .md\:order-2 {
        order: 1;
    }
}

/* ── 28. Reduced motion: no change needed for RTL ── */

/* ── 29. Print: maintain RTL direction ── */
@media print {
    html[lang="he"],
    html[lang="ar"] {
        direction: rtl;
    }
}