/* ============================================================
   Antra website — RTL layer
   Loaded only when the locale direction is rtl
   (see resources/views/layouts/website.blade.php).
   Physical-direction flips come from the generated
   main-rtl.css / bootstrap-rtl.min.css (rtlcss); this file
   holds what cannot be auto-flipped: Arabic typography,
   icon mirroring and LTR islands (phone numbers, etc.).
   Everything is scoped under [dir="rtl"] so it stays inert
   if ever loaded on an LTR page.
   ============================================================ */

/* Cairo variable font (self-hosted, arabic + latin subsets) */
@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 200 1000;
    font-display: swap;
    src: url('../fonts/Cairo-arabic.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFC, U+0660-0669, U+200C-200D;
}

@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 200 1000;
    font-display: swap;
    src: url('../fonts/Cairo-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+2000-206F, U+20A0-20CF;
}

/* Swap the template fonts for Cairo on Arabic pages */
[dir="rtl"] {
    --tl-ff-heading: 'Cairo', 'Cal Sans', sans-serif;
    --tl-ff-body: 'Cairo', 'Golos Text', sans-serif;
    --tl-ff-p: 'Cairo', 'Golos Text', sans-serif;
}

/* Arabic script breaks visually when letter-spaced — reset it */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6,
[dir="rtl"] .section-heading .sub-heading,
[dir="rtl"] .sub-heading,
[dir="rtl"] .tl-primary-btn,
[dir="rtl"] button,
[dir="rtl"] a {
    letter-spacing: 0 !important;
}

/*
 * Cairo glyph metrics are taller than Cal Sans. The template's tight
 * Latin line-heights (1–1.2) plus overflow:hidden on titles clip Arabic
 * descenders (ر، ع، ل hooks, ي dots, etc.). Decorative watermarks
 * (.service-text, .slider-text, huge counter/gallery text) stay as-is —
 * those are intentionally cropped.
 *
 * Target line-heights so clientHeight covers scrollHeight for Cairo
 * display sizes (≈1.5+); padding-bottom catches ink that still paints
 * outside the em-box.
 */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
    line-height: 1.45;
}

[dir="rtl"] .section-heading .section-title {
    line-height: 1.55;
    overflow: visible !important;
    padding-bottom: 0.25em;
}

[dir="rtl"] .slider-2 .slider-item .slider-content-wrap .section-heading .section-title,
[dir="rtl"] .slider-3 .slider-item .slider-content-wrap .section-heading .section-title,
[dir="rtl"] .slider-content-wrap .section-heading .section-title,
[dir="rtl"] .hero-wrap .hero-content .section-heading .section-title,
[dir="rtl"] .hero-wrap-2 .hero-content-2 .section-heading .section-title,
[dir="rtl"] .hero-wrap-6 .hero-content-6 .section-heading .section-title,
[dir="rtl"] .hero-wrap-7 .hero-content-7 .section-heading .section-title,
[dir="rtl"] .hero-wrap-8 .hero-content-8 .section-heading .section-title {
    line-height: 1.55;
    overflow: visible !important;
    padding-bottom: 0.25em;
}

[dir="rtl"] .service-item-2 .service-content .title,
[dir="rtl"] .service-item-3 .service-content .title,
[dir="rtl"] .project-item .project-content .title,
[dir="rtl"] .project-item-3 .project-content .title,
[dir="rtl"] .team-item-list .team-item .left-content .title,
[dir="rtl"] .award-item-list .award-item .left-content .title,
[dir="rtl"] .counter-item .title,
[dir="rtl"] .counter-item .sub-title,
[dir="rtl"] .side-menu-content .side-menu-item .side-menu-thumb-box .side-menu-info .side-menu-title {
    line-height: 1.4;
    overflow: visible;
}

/* Badges keep overflow for SplitType reveal — give glyphs room instead of clipping */
[dir="rtl"] .section-heading .sub-heading,
[dir="rtl"] .sub-heading {
    line-height: 1.6;
    padding-block: 10px 11px;
    overflow: visible;
}

/* Primary CTAs: overflow:hidden + line-height:1 clips Cairo ink that sits
   low in the em-box. Match template specificity on the header pill. */
[dir="rtl"] .tl-primary-btn,
[dir="rtl"] .header-btn {
    line-height: 1.5;
    overflow: visible;
    padding-block: 17px 21px;
}

[dir="rtl"] .header .primary-header-inner .header-right-wrap .header-btn {
    padding-block: 17px 21px;
}

[dir="rtl"] .tl-primary-btn::before,
[dir="rtl"] .header-btn::before {
    border-radius: inherit;
}

/* Circular slider CTA — fixed 120×120 with line-height 1.2 clips Arabic */
[dir="rtl"] .slider-2 .slider-item .slider-content-wrap .section-heading .slider-btn a {
    line-height: 1.45;
}

[dir="rtl"] [data-text-animation] .line,
[dir="rtl"] [data-text-animation] .word {
    padding-bottom: 0.1em;
}

/* Mirror directional icons (arrows, chevrons, angles) */
[dir="rtl"] .fa-arrow-right,
[dir="rtl"] .fa-arrow-left,
[dir="rtl"] .fa-arrow-right-long,
[dir="rtl"] .fa-arrow-left-long,
[dir="rtl"] .fa-long-arrow-right,
[dir="rtl"] .fa-long-arrow-left,
[dir="rtl"] .fa-angle-right,
[dir="rtl"] .fa-angle-left,
[dir="rtl"] .fa-angles-right,
[dir="rtl"] .fa-angles-left,
[dir="rtl"] .fa-chevron-right,
[dir="rtl"] .fa-chevron-left,
[dir="rtl"] .fa-caret-right,
[dir="rtl"] .fa-caret-left,
[dir="rtl"] .fa-reply,
[dir="rtl"] .fa-share {
    transform: scaleX(-1);
    display: inline-block;
}

/* Keep phone numbers / e-mail addresses readable: LTR islands */
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"],
[dir="rtl"] .header-contact .call-number,
[dir="rtl"] .footer-address .number {
    direction: ltr;
    unicode-bidi: embed;
    display: inline-block;
}

/* Keep Latin brand text (preloader, footer watermark) LTR */
[dir="rtl"] .preloader .site-name,
[dir="rtl"] .footer-text {
    direction: ltr;
}

/* Odometer renders each digit as its own element; RTL layout would
   reverse their visual order (26 → 62), so keep counters LTR */
[dir="rtl"] .odometer {
    direction: ltr;
}