/*!
 * Mednix Child — RTL extras
 * ---------------------------------------------------------------
 * Hand-written RTL fixes. This file is ONLY loaded when is_rtl() is
 * true, i.e. on the Arabic side of the site. The English side never
 * downloads or applies any of this.
 *
 * The bulk of the RTL work is NOT here — it lives in assets/css/rtl/,
 * which is an automated mirror of the parent theme's stylesheets.
 * This file covers only what an automated mirror cannot know about:
 * font choice, Arabic typography rules, and icon glyph direction.
 *
 * EDIT THIS FILE. Do not edit assets/css/rtl/* — those are regenerated.
 * --------------------------------------------------------------- */


/* ===============================================================
   1. ARABIC TYPEFACE
   ---------------------------------------------------------------
   Mona Sans (the theme's font) has no Arabic glyphs at all, so
   without this the browser silently falls back to a system font and
   Arabic looks cheap next to the English side.

   The theme declares both of its font variables in one :root block
   in theme-style.css, so redefining them here is enough to reach
   almost everything.

   To use a different Arabic font, change --mednix-ar-font below AND
   the font URL in functions.php. Good alternatives:
     "Tajawal"               — warmer, slightly narrower
     "IBM Plex Sans Arabic"  — more corporate/technical
     "Noto Kufi Arabic"      — heavier, more editorial
   =============================================================== */

:root {
    --mednix-ar-font: "Cairo", "Segoe UI", Tahoma, sans-serif;

    /* Overrides the parent theme's two font variables */
    --themeht-typography-body-font-family: var(--mednix-ar-font);
    --themeht-typography-secondary-font-family: var(--mednix-ar-font);
}

/* Elementor's Global Fonts are set on `.elementor-kit-N` (specificity
   0,1,0). The `html[dir="rtl"]` prefix below scores 0,1,2 so it wins
   without needing !important — which matters, because !important here
   would also clobber the icon fonts. Icon elements (<i>) are
   deliberately NOT in this list for the same reason. */
html[dir="rtl"] body,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] p,
html[dir="rtl"] li,
html[dir="rtl"] td,
html[dir="rtl"] th,
html[dir="rtl"] label,
html[dir="rtl"] blockquote,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select,
html[dir="rtl"] button,
html[dir="rtl"] .btn-text,
html[dir="rtl"] .themeht-btn {
    font-family: var(--mednix-ar-font);
}


/* ===============================================================
   2. ARABIC TYPOGRAPHY RULES
   =============================================================== */

/* Letter-spacing BREAKS Arabic. Arabic is a connected script — adding
   tracking pulls the letterforms apart at their joins and produces
   text that reads as broken rather than merely wide. Theme and
   Elementor headings both apply tracking, and Elementor's selectors
   outrank ours, so !important is genuinely warranted here.
   Remove this block only if you are certain nothing sets tracking. */
html[dir="rtl"] body,
html[dir="rtl"] body * {
    letter-spacing: normal !important;
}

/* Arabic sits taller than Latin at the same size — ascenders and
   descenders are longer and diacritics need headroom. Roughly 8-10%
   more leading stops it feeling cramped. Tune to taste. */
html[dir="rtl"] body {
    line-height: 1.85;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
    line-height: 1.45;
}

/* text-transform does nothing in Arabic (no letter case), but it does
   still apply to any Latin words mixed into Arabic copy, which looks
   inconsistent. */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] .themeht-btn {
    text-transform: none;
}


/* ===============================================================
   3. BIDI — MIXED ARABIC AND LATIN TEXT
   ---------------------------------------------------------------
   This is what caused the stray period jumping to the front of a
   sentence. Punctuation is directionally "neutral": it inherits the
   direction of the surrounding paragraph. An Arabic paragraph ending
   in a Latin word plus a full stop therefore renders the stop at the
   far left, which reads as a typo but isn't one.

   The fix is isolation: tell the browser a run of Latin is its own
   directional island so its punctuation stays attached to it.
   =============================================================== */

/* Phone numbers, emails and URLs must render left-to-right even
   inside Arabic copy, or the digits reorder. Very common failure on
   clinic sites — the phone number displays backwards. */
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] a[href^="mailto:"],
html[dir="rtl"] .phone,
html[dir="rtl"] .email {
    direction: ltr;
    unicode-bidi: embed;
    display: inline-block;
}

/* Utility class — wrap any Latin brand name, dosage, product code or
   measurement inside Arabic copy:  <span class="ltr">COVID-19</span>  */
html[dir="rtl"] .ltr {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}

/* And the reverse, for Arabic inside an English page */
html[dir="ltr"] .rtl,
.rtl-text {
    direction: rtl;
    unicode-bidi: isolate;
    display: inline-block;
}

/* Form fields — alignment baseline.
   -----------------------------------------------------------------
   A browser's default for an input is `text-align: start`, which
   SHOULD resolve to the right edge under dir="rtl" with no help from
   us. In practice it does not survive: Elementor and Contact Form 7
   both emit their own alignment for form controls, and that beats the
   default — so Arabic placeholders end up hard against the left edge.

   Nothing in the parent theme or the mirrors sets this, so it has to
   be stated here explicitly rather than left to the cascade.

   !important is used only on text-align. Form fields are effectively
   never intentionally centre-aligned, so the risk is negligible, and
   without it the rule loses to any upstream !important. If you would
   rather not carry it, removing it is safe as long as whatever is
   setting the left alignment does not use !important itself. */
html[dir="rtl"] .wpcf7-form-control,
html[dir="rtl"] .wpcf7 input,
html[dir="rtl"] .wpcf7 textarea,
html[dir="rtl"] .wpcf7 select,
html[dir="rtl"] .subscribe-form input,
html[dir="rtl"] .search-form input,
html[dir="rtl"] input[type="text"],
html[dir="rtl"] input[type="search"],
html[dir="rtl"] input[type="password"],
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    direction: rtl;
    text-align: right !important;
}

/* Fields whose CONTENT is inherently Latin or numeric stay LTR
   internally — otherwise an email reverses as it is typed and a phone
   number reorders — but still sit against the RTL edge so the form
   reads as one column. */
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] input[type="date"] {
    direction: ltr;
    text-align: right !important;
}

/* Firefox in particular does not always inherit alignment into the
   placeholder pseudo-element. */
html[dir="rtl"] input::placeholder,
html[dir="rtl"] textarea::placeholder {
    direction: rtl;
    text-align: right;
}


/* ===============================================================
   4. ICON GLYPH DIRECTION
   ---------------------------------------------------------------
   An automated mirror can flip CSS, but it cannot flip a glyph baked
   into an icon font. `flaticon-right-arrow-1` still points right in
   Arabic, where it should point left. It is used in 43 places across
   the theme and the widgets plugin, so this is a global rule plus
   explicit handling for the few places that animate it.

   NOTE ON TRANSFORM ORDER: where an arrow animates, we cannot simply
   add scaleX(-1) — `transform` is a single property, so we would wipe
   the animation. Instead each animated case below restates the
   ORIGINAL left-to-right translate value with scaleX(-1) in front of
   it. Pre-multiplying by scaleX(-1) means the translate is then
   measured in mirrored space, so a "move right" becomes a "move left"
   — an exact mirror of the English behaviour, in one declaration.
   =============================================================== */

/* Static arrows — the common case. inline-block is required because
   transforms do not apply to plain inline elements. */
html[dir="rtl"] i.flaticon-right-arrow-1,
html[dir="rtl"] i.flaticon-right-up,
html[dir="rtl"] i.bi-arrow-right,
html[dir="rtl"] i.bi-arrow-left {
    display: inline-block;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

/* --- The global button (themeht-btn) -------------------------
   Markup is:  <a class="themeht-btn"><span class="btn-icon">
                 <i/><i/></span><span class="btn-text">…</span></a>
   Two stacked arrows slide across on hover. The automated mirror
   already flipped the padding and the fill origin; these four rules
   flip the glyphs and restore the correct slide direction. */
html[dir="rtl"] .themeht-btn .btn-icon i:first-child {
    -webkit-transform: scaleX(-1) translateX(12px);
    transform: scaleX(-1) translateX(12px);
}

html[dir="rtl"] .themeht-btn .btn-icon i:last-child {
    -webkit-transform: scaleX(-1) translateX(-100px);
    transform: scaleX(-1) translateX(-100px);
}

html[dir="rtl"] .themeht-btn:hover .btn-icon i:first-child {
    -webkit-transform: scaleX(-1) translateX(100px);
    transform: scaleX(-1) translateX(100px);
}

html[dir="rtl"] .themeht-btn:hover .btn-icon i:last-child {
    -webkit-transform: scaleX(-1) translateX(-11px);
    transform: scaleX(-1) translateX(-11px);
}

/* --- Inline text links with a trailing arrow (a.link-btn) ----- */
html[dir="rtl"] a.link-btn i {
    display: inline-block;
    -webkit-transform: scaleX(-1) translateX(0);
    transform: scaleX(-1) translateX(0);
}

html[dir="rtl"] a.link-btn:hover i {
    -webkit-transform: scaleX(-1) translateX(5px);
    transform: scaleX(-1) translateX(5px);
}

/* --- Diagonal arrow tiles (shape-item-icon) ------------------
   These icons are display:block, which the global arrow rule above
   would otherwise override — so it is restated here. */
html[dir="rtl"] .shape-item-icon .shape-item-icon-link i {
    display: block;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

html[dir="rtl"] .shape-item-icon .shape-item-icon-link i:last-child {
    -webkit-transform: scaleX(-1) translateX(-200%) translateY(200%);
    transform: scaleX(-1) translateX(-200%) translateY(200%);
}

html[dir="rtl"] .shape-item-icon .shape-item-icon-link:hover i:first-child {
    -webkit-transform: scaleX(-1) translateX(200%) translateY(-200%);
    transform: scaleX(-1) translateX(200%) translateY(-200%);
}

html[dir="rtl"] .shape-item-icon .shape-item-icon-link:hover i:last-child {
    -webkit-transform: scaleX(-1) translateX(0);
    transform: scaleX(-1) translateX(0);
}


/* ===============================================================
   5. LISTS AND MISC
   =============================================================== */

/* NOTE: list indentation is deliberately NOT handled here. Bootstrap's
   own RTL build is swapped in on Arabic pages (see functions.php), and
   it already moves `ol, ul { padding-left: 2rem }` to the start side.
   Adding a competing rule here only fights it and produces inconsistent
   indents between editor content and widget lists. */

/* Numbers stay Western Arabic (1234). If the client prefers Eastern
   Arabic numerals (١٢٣٤), uncomment this. Note it affects rendered
   digits only, not stored data, and can look wrong in prices/phones.

html[dir="rtl"] body {
    font-feature-settings: "anum" 1;
}
*/


/* ===============================================================
   6. COMPONENT AUDIT FIXES
   ---------------------------------------------------------------
   Everything below came out of a component-by-component audit of the
   theme and the widgets plugin. Each of these is something neither
   the automated CSS mirror nor Bootstrap's RTL build can reach:
   a glyph baked into an icon font, artwork with hardcoded geometry,
   a value written inline by PHP, or a bidi reordering problem.

   Grouped by section so you can find things when a client reports
   a specific page looking wrong.
   =============================================================== */

/* --- Navigation -------------------------------------------------
   theme-script.js injects <i class="bi bi-chevron-right"> into every
   menu item that has a submenu. The mirror moved the toggle box to
   the correct side, but the caret still points away from the panel
   it opens. Only the closed state is directional — the open state
   (bi-chevron-up) is symmetric and is left alone. */
html[dir="rtl"] .sub-menu-toggle i.bi-chevron-right {
    display: inline-block;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}


/* --- Sliders: Swiper prev/next arrows ---------------------------
   These arrows are bootstrap-icons code points drawn through
   `content:` on a ::after, so the generic i.bi-arrow-* rule in
   section 4 cannot reach them and rtlcss cannot flip a code point.
   The mirror already swapped the buttons' physical positions, which
   left both arrows pointing inward. Swapping the two code points
   points them outward again.
       \F12F = bi-arrow-left      \F138 = bi-arrow-right           */
html[dir="rtl"] .swiper .swiper-button-prev:after {
    content: '\F138';
}

html[dir="rtl"] .swiper .swiper-button-next:after {
    content: '\F12F';
}

/* The hero/banner slider is the exception: its nav block is rotated
   90deg and both buttons draw the SAME glyph (\f13f), with the theme
   turning one of them around via rotate(180deg). rtlcss rewrote that
   as rotate(-180deg) — an identical half-turn, so a no-op — leaving
   both arrows in their English orientation. Moving the flip from prev
   to next corrects it.
   `content` is restated so the code points above cannot leak into
   these buttons, which use a different icon font entirely. */
html[dir="rtl"] .swiper.banner-slider .swiper-button-prev:after {
    content: "\f13f";
    -webkit-transform: none;
    transform: none;
}

html[dir="rtl"] .swiper.banner-slider .swiper-button-next:after {
    content: "\f13f";
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

/* Hero background focal point is written inline by the slide template
   (style="background-position: …"), so nothing in a stylesheet can
   reach it without !important. These are the six directional values
   the widget can emit; the three "center …" values need no change. */
html[dir="rtl"] .slider-img[style*="background-position: left top"]     { background-position: right top !important; }
html[dir="rtl"] .slider-img[style*="background-position: left center"]  { background-position: right center !important; }
html[dir="rtl"] .slider-img[style*="background-position: left bottom"]  { background-position: right bottom !important; }
html[dir="rtl"] .slider-img[style*="background-position: right top"]    { background-position: left top !important; }
html[dir="rtl"] .slider-img[style*="background-position: right center"] { background-position: left center !important; }
html[dir="rtl"] .slider-img[style*="background-position: right bottom"] { background-position: left bottom !important; }

/* Banner "style-two" description panel wipes in via clip-path, which
   rtlcss does not mirror — so it wiped open against the reading
   direction. BOTH rules are required: the collapsed rule outranks the
   theme's own active-state rule, so without the second block the
   description would stay clipped and never appear at all. */
html[dir="rtl"] .banner-slider.style-two .slider-desc {
    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}

html[dir="rtl"] .banner-slider.style-two .swiper-slide-active .slider-desc {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}


/* --- Services ---------------------------------------------------
   The corner notch on service cards (styles 1 and 5) is an inline SVG
   with hardcoded path geometry — a flush edge on one side and a
   concave sweep on the other. The card and its arrow button already
   moved to the opposite corner, so the wedge has to follow or it
   cuts into the card from the wrong side. */
html[dir="rtl"] .shape-item-icon > svg {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}


/* --- Counters ---------------------------------------------------
   Odometer replaces the number with one inline-block box per digit.
   Under dir=rtl those boxes are reordered right-to-left, so 500
   renders as 005. Numerals are always written left-to-right in
   Arabic, so the number must be its own LTR run. The element still
   sits wherever the RTL layout puts it — only its contents are
   pinned. */
html[dir="rtl"] .count-number,
html[dir="rtl"] .odometer,
html[dir="rtl"] .odometer .odometer-inside {
    direction: ltr;
    unicode-bidi: isolate;
}


/* --- Testimonials -----------------------------------------------
   Ratings keep RTL reading order, so the first star sits on the
   right and the half-star's filled side must face right. bi-star-half
   is filled on its left, so mirror that ONE glyph. bi-star-fill and
   bi-star are symmetric and must not be touched. */
html[dir="rtl"] i.bi-star-half {
    display: inline-block;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}


/* --- Working hours / contact details ----------------------------
   Opening times and phone numbers are Latin/numeric runs sitting in
   an RTL context, so without isolation "9:00 AM - 5:00 PM" reorders
   to "AM - 5:00 PM 9:00" and "+20 100 123 4567" reverses.

   `plaintext` rather than a hard `direction: ltr`: it resolves each
   element from its own first strong character, so a genuinely Arabic
   string (٩:٠٠ ص) still lays out right-to-left while a digits-only
   range falls back to LTR. Covers the Contact List widget's non-link
   branch, which the tel:/mailto: rule in section 3 does not match. */
html[dir="rtl"] .working-hours-item .working-time,
html[dir="rtl"] .contact-info li p.contact-text {
    unicode-bidi: plaintext;
}


/* --- Blog and comments ------------------------------------------
   The post-navigation "previous" arrow is turned around by the theme
   with rotate(180deg); rtlcss could only rewrite that to
   rotate(-180deg), which is the same half-turn and therefore changed
   nothing. In Arabic "previous" points the other way, so the base
   glyph is already correct — just clear the rotation. This selector
   also outranks the global arrow rule in section 4, which is why the
   arrow could not be fixed there. */
html[dir="rtl"] .site-main .comment-navigation .nav-links .nav-previous .nav-subtitle-arrow i,
html[dir="rtl"] .site-main .posts-navigation .nav-links .nav-previous .nav-subtitle-arrow i,
html[dir="rtl"] .site-main .post-navigation .nav-links .nav-previous .nav-subtitle-arrow i {
    -webkit-transform: none;
    transform: none;
}

/* bi-reply (\f520) is a curved arrow with a left-pointing head. The
   mirror moved it to the start side but cannot flip the glyph, so it
   pointed back across its own label. Covers the classic and block
   comment templates. */
html[dir="rtl"] .comment-reply-link:before {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

/* bi-chat-right-text (\f25c) — the speech bubble's tail is baked into
   the glyph and pointed away from the text once the bullet moved. */
html[dir="rtl"] .widget.widget_recent_comments ul li:before {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}


/* --- Before/after comparison slider -----------------------------
   The widget's click and keyboard target is an invisible full-size
   <input type="range"> overlay. Browsers put a range input's minimum
   on the RIGHT under dir=rtl, but the widget's own JavaScript is
   hard-wired to physical left (it sets handle.style.left and derives
   drag position from clientX - rect.left). The two then disagree and
   the handle jumps. Pinning the input to LTR re-aligns it with the
   maths the widget actually uses. */
html[dir="rtl"] .before-after-slider input[type="range"].slider {
    direction: ltr;
}


/* --- Preloader --------------------------------------------------
   The preloader spells the brand name one <span> per letter inside a
   flex row. Under dir=rtl the flex axis reverses and the name renders
   backwards. A logotype is not mirrorable content, so pin it to LTR.
   Remove this only if the loader text is rewritten in Arabic. */
html[dir="rtl"] #ht-preloader .loader-wrapper {
    direction: ltr;
}