/* ===========================================================================
   WCS - RTL corrections
   ---------------------------------------------------------------------------
   Loaded by functions.php ONLY when is_rtl() is true, so an English/LTR
   version of the site is completely unaffected by anything in this file.

   Every rule below answers something measured on the live install
   (wbit.co.il, demo imported, viewport 1425px), not a guess.

   The parent theme's own RTL support is genuinely good - it ships
   style-rtl.css (2,020 rules), elementor-rtl.css (1,189 rules) and
   gutenberg-blocks-rtl.css (185 rules), and the addon pack adds another
   4,578. The page has NO horizontal overflow and only four stray alignment
   classes. This file is deliberately small because most of the work is
   already done upstream - do not duplicate it here.
   =========================================================================== */


/* ---------------------------------------------------------------------------
   1. CRITICAL - CONTACT FORM 7
   ---------------------------------------------------------------------------
   Measured: the ENTIRE form computes direction:ltr - wrapper, form element,
   text inputs, email input, textarea, select and label alike.

   On a Hebrew lead form this puts punctuation in the wrong place, makes the
   caret jump, and pushes the select arrow to the wrong side. It is the one
   issue on this list with a direct commercial cost, so it is first.
   --------------------------------------------------------------------------- */

body.rtl .wpcf7,
body.rtl .wpcf7-form,
body.rtl .wpcf7 input,
body.rtl .wpcf7 textarea,
body.rtl .wpcf7 select,
body.rtl .wpcf7 label,
body.rtl .wpcf7-form-control,
body.rtl .wpcf7-form-control-wrap,
body.rtl .wpcf7 p {
    direction: rtl;
    text-align: right;
}

body.rtl .wpcf7 input::placeholder,
body.rtl .wpcf7 textarea::placeholder {
    direction: rtl;
    text-align: right;
}

/* Checkbox / radio rows read right-to-left too. */
body.rtl .wpcf7-list-item {
    margin-left: 1em;
    margin-right: 0;
}

/* Validation messages and the response line. */
body.rtl .wpcf7-not-valid-tip,
body.rtl .wpcf7-response-output {
    direction: rtl;
    text-align: right;
}

/* The submit button and its spinner sit on the correct side. */
body.rtl .wpcf7 .wpcf7-spinner {
    margin-left: 0;
    margin-right: 8px;
}


/* ---------------------------------------------------------------------------
   2. SLIDER LAYERS
   ---------------------------------------------------------------------------
   Measured: 3 sr7-txt layers compute text-align:left while the page is rtl.
   The remaining 17 .sr7-layer elements are already "start" and are left alone.

   Note: the slider plugin loads its full engine on EVERY page even when a
   slider appears on one. If the hero is ever rebuilt as a native Elementor
   section, this block and the plugin can both go.
   --------------------------------------------------------------------------- */

body.rtl sr7-txt.sr7-layer,
body.rtl .sr7-layer.sr7-txt {
    text-align: right;
}

/* Arrows point the other way in RTL. */
body.rtl .sr7-arrow-left,
body.rtl .sr7-arrow-right {
    transform: scaleX(-1);
}


/* ---------------------------------------------------------------------------
   3. ALIGNMENT CLASSES INHERITED FROM THE LTR BUILD
   ---------------------------------------------------------------------------
   The demo was authored left-to-right, so a few widgets carry an explicit
   "left" alignment class. Measured on the homepage: elementor-align-left x2,
   elementor-tablet-align-left x1, e-grid-align-left x1.

   Only "left" is flipped. Centre stays centre, and anything explicitly set
   to right is already correct.
   --------------------------------------------------------------------------- */

body.rtl .elementor-align-left,
body.rtl .elementor-align-left .elementor-button-wrapper,
body.rtl .e-grid-align-left,
body.rtl .elementor-tablet-align-left {
    text-align: right;
}

@media (max-width: 1024px) {
    body.rtl .elementor-tablet-align-left { text-align: right; }
}


/* ---------------------------------------------------------------------------
   4. STRAY LEFT-ALIGNED BLOCKS
   ---------------------------------------------------------------------------
   Measured: 2 h2.elementor-heading-title and 2 bare spans still computed
   text-align:left. Kept narrow on purpose - a blanket rule would override
   headings that are centred by design.
   --------------------------------------------------------------------------- */

body.rtl .elementor-heading-title[style*="text-align: left"],
body.rtl .elementor-widget-heading .elementor-heading-title.elementor-size-default {
    text-align: right;
}


/* ---------------------------------------------------------------------------
   5. LATIN TERMS INSIDE HEBREW TEXT
   ---------------------------------------------------------------------------
   Without isolation, "IT", "Microsoft 365" or "Windows 11" reorder inside an
   RTL sentence - the same mechanism that turned "Services" into "secivreS"
   on the previous build's slider.

   Wrap such terms in <span class="ltr"> when writing content.
   --------------------------------------------------------------------------- */

body.rtl .ltr {
    direction: ltr;
    unicode-bidi: isolate;
}

/* Numbers, phone numbers, emails and URLs must stay LTR inside Hebrew text. */
body.rtl a[href^="tel:"],
body.rtl a[href^="mailto:"],
body.rtl .wcs-phone,
body.rtl .wcs-email {
    direction: ltr;
    unicode-bidi: embed;
    display: inline-block;
}


/* ---------------------------------------------------------------------------
   6. LISTS AND ICON LISTS
   ---------------------------------------------------------------------------
   Bullets and list icons belong on the right in RTL. Elementor's own RTL
   build covers most of this; these are the leftovers.
   --------------------------------------------------------------------------- */

body.rtl .elementor-icon-list-item,
body.rtl .elementor-icon-list-text {
    text-align: right;
}

body.rtl .elementor-icon-list-icon {
    margin-left: 8px;
    margin-right: 0;
}

body.rtl ul,
body.rtl ol {
    padding-right: 1.2em;
    padding-left: 0;
}


/* ---------------------------------------------------------------------------
   7. FORMS BUILT WITH ELEMENTOR
   ---------------------------------------------------------------------------
   Elementor's own form widget is already correct, but its select arrow and
   field padding are positioned for LTR.
   --------------------------------------------------------------------------- */

body.rtl .elementor-field-group .elementor-field,
body.rtl .elementor-field-group label {
    direction: rtl;
    text-align: right;
}

body.rtl .elementor-field-type-select select {
    background-position: left 12px center;
    padding-right: 14px;
    padding-left: 34px;
}