/* ============================================================
   LTR overrides - loaded on /en/ only (see inc/enqueue.php)
   ============================================================

   The theme's CSS was written for an RTL page and uses physical properties
   (right/left, padding-right, border-right) rather than logical ones. Most of
   those are direction-neutral once you look at them - an absolutely positioned
   decoration at right: 30px belongs at the right in both languages - so this
   sheet only touches the ones that genuinely read wrong in English.

   Deliberately NOT flipped:

     .scroll-indicator / .desktop-nav a::after / #journey .journey-timeline::before
       transform: translateX(±50%) paired with left/right: 50% is a centring
       idiom, not a direction. Flipping it moves the element off-centre.

     @keyframes shake
       Symmetric by construction.

     #contact .input-wrapper i { left: 20px }
       Paired with padding-left: 50px on the field. Leading-edge icons are the
       convention in LTR too, so this lands correctly without changes.

     #journey desktop timeline
       padding-right: 50% on odd steps pushes content into the left half in
       both directions, and the ::after arrows are physical. The alternating
       layout is already symmetric - only the mobile stack below needs work.

     [data-aos="fade-right|left"]
       AOS 2.3.4's own stylesheet loads after front-page.css and wins, so these
       are already whatever the library says.
   ============================================================ */

/* ---------- Typography ----------
   Tajawal is an Arabic face; its Latin glyphs are an afterthought. Inter is
   enqueued alongside it on the English pages only. */
html[dir="ltr"] body,
html[dir="ltr"] input,
html[dir="ltr"] select,
html[dir="ltr"] textarea,
html[dir="ltr"] button,
html[dir="ltr"] .tab-btn,
html[dir="ltr"] #services .tab-btn,
html[dir="ltr"] .newsletter-form input,
html[dir="ltr"] .newsletter-form button,
html[dir="ltr"] #contact input,
html[dir="ltr"] #contact select,
html[dir="ltr"] #contact textarea,
html[dir="ltr"] #contact .submit-btn,
html[dir="ltr"] #contact .btn-close-modal,
html[dir="ltr"] #contact .btn-secondary-action {
    font-family: 'Inter', sans-serif;
}

/* ---------- Hero ---------- */
html[dir="ltr"] .company-name {
    border-right: none;
    border-left: 3px solid #57c4e5;
    padding-right: 0;
    padding-left: 20px;
}

@media (max-width: 768px) {
    /* Stacked layout: the rule becomes a top border in both languages. */
    html[dir="ltr"] .company-name {
        border-left: none;
        padding-left: 0;
    }
}

/* ---------- Our story: vertical timeline ----------
   The spine, the icons that straddle it and the content indent all hang off
   the right edge. Mirrored wholesale. */
html[dir="ltr"] .story-timeline {
    padding-right: 0;
    padding-left: 40px;
}

html[dir="ltr"] .story-timeline::before {
    right: auto;
    left: 0;
}

html[dir="ltr"] .timeline-icon {
    right: auto;
    left: -20px;
}

html[dir="ltr"] .timeline-content {
    padding-right: 0;
    padding-left: 60px;
}

@media (max-width: 768px) {
    html[dir="ltr"] .timeline-content {
        padding-left: 40px;
    }
}

/* Items slide in from the spine, which is now on the other side. */
html[dir="ltr"] .timeline-item {
    transform: translateX(30px);
}

/* ---------- Directional hover nudges ----------
   Every one of these pairs with an arrow that inc/i18n.php has already flipped
   from fa-arrow-left to fa-arrow-right, so the motion has to follow. */
html[dir="ltr"] .btn-primary:hover i,
html[dir="ltr"] .cta-link:hover,
html[dir="ltr"] #vision .vision-cta-btn:hover i,
html[dir="ltr"] #services .services-cta-btn:hover i,
html[dir="ltr"] #journey .journey-cta-btn:hover i,
html[dir="ltr"] #contact .submit-btn:hover i,
html[dir="ltr"] .footer-column a:hover {
    transform: translateX(5px);
}

html[dir="ltr"] #services .service-link:hover i {
    transform: translateX(3px);
}

html[dir="ltr"] .newsletter-form button:hover {
    transform: translateX(3px);
}

/* Nudges away from the start of the line, mirrored. */
html[dir="ltr"] #vision .goal-item:hover {
    transform: translateX(-10px);
}

/* ---------- Client journey ---------- */
html[dir="ltr"] #journey .step-number {
    right: auto;
    left: -10px;
}

@media (max-width: 768px) {
    /* On mobile the alternating timeline collapses to a single spine pinned to
       the right edge. In English it belongs on the left. */
    html[dir="ltr"] #journey .journey-timeline::before {
        right: auto;
        left: 40px;
    }

    html[dir="ltr"] #journey .journey-step {
        padding-right: 0 !important;
        padding-left: 80px !important;
        text-align: left !important;
    }

    html[dir="ltr"] #journey .step-icon {
        right: auto;
        left: 0;
    }

    /* Every step is left-aligned once stacked, so the tick marks all belong on
       the left - including the odd-numbered steps, which keep the desktop
       right-hand rule otherwise. */
    html[dir="ltr"] #journey .step-details li {
        padding-right: 0;
        padding-left: 20px;
    }

    html[dir="ltr"] #journey .step-details li::before {
        right: auto;
        left: 0;
    }
}

/* ---------- Contact: success modal ---------- */
html[dir="ltr"] #contact .next-steps {
    text-align: left;
}

/* ---------- Footer ---------- */
html[dir="ltr"] .footer-about {
    padding-right: 0;
    padding-left: 30px;
}

@media (max-width: 992px) {
    html[dir="ltr"] .footer-about {
        padding-left: 0;
    }
}