/* =====================================================================
   Fire Base — Arabic (RTL) layer. Loaded ONLY on Arabic pages (body.fb-lang-ar, html[dir=rtl]).
   Layout itself stays in Elementor; this file handles fonts, direction details and the
   hand-coded Fire Base components (header, next-page card, floating buttons, widgets).
   ===================================================================== */

/* ---------- fonts: headings = Noto Kufi Arabic, body text = Cairo (Google Fonts, enqueued in includes/frontend.php) ---------- */

/* Arabic glyphs come from the Arabic fonts; Latin text (brand names, codes, numbers) keeps the site fonts. */
html[dir=rtl]{
	--fb-head:"Noto Kufi Arabic","Oswald","Barlow Condensed",Tahoma,sans-serif;
	--fb-body:"Cairo","Source Sans 3",Tahoma,system-ui,sans-serif;
}
body.fb-lang-ar{font-family:var(--fb-body)}
/* Elementor widgets carry their own font-family settings (Oswald / Source Sans 3, which have no Arabic).
   Put the Arabic font first while keeping icon fonts untouched. */
body.fb-lang-ar :is(h1,h2,h3,h4,h5,h6,.elementor-heading-title,.fb-eyebrow,.fb-btn,.elementor-button,.fb-nav a,.fb-next-page b,.fb-next-page small){font-family:var(--fb-head)!important}
body.fb-lang-ar :is(p,li,dd,dt,td,th,label,input,textarea,select,button,blockquote,figcaption,small,.elementor-text-editor,.elementor-icon-list-text,.elementor-widget-text-editor,.wpforms-field-label,.wpforms-field-sublabel,.wpforms-field-description){font-family:var(--fb-body)!important}

/* Arabic letters must stay connected: no tracking, no forced capitals. */
body.fb-lang-ar *{letter-spacing:0!important}
body.fb-lang-ar :is(h1,h2,h3,h4,h5,h6,.elementor-heading-title){line-height:1.45!important;word-spacing:.02em}
body.fb-lang-ar :is(p,li,dd,.elementor-text-editor){line-height:1.85}
body.fb-lang-ar .fb-next-page b{line-height:1.3}

/* Phone numbers, e-mails, URLs and codes stay left-to-right inside Arabic text. */
body.fb-lang-ar :is(a[href^="tel:"],a[href^="mailto:"],a[href^="https://wa.me"]),
body.fb-lang-ar .fb-ltr{direction:ltr;unicode-bidi:isolate}
body.fb-lang-ar bdi[dir=ltr]{unicode-bidi:isolate;direction:ltr}
body.fb-lang-ar input[type=email],body.fb-lang-ar input[type=tel],body.fb-lang-ar input[type=url]{direction:ltr;text-align:right}
body.fb-lang-ar input[type=email]::placeholder,body.fb-lang-ar input[type=tel]::placeholder{direction:rtl}

/* ---------- header ---------- */
body.fb-lang-ar .fb-nav .menu-item-has-children>a::after{margin:0 8px 3px 0}
body.fb-lang-ar .fb-nav .sub-menu{left:auto;right:0}
body.fb-lang-ar .fb-nav li.fb-has-mega>.sub-menu{left:50%;right:auto}
body.fb-lang-ar .fb-nav a{font-size:15px;padding:10px 12px}
body.fb-lang-ar .fb-nav>li>a,body.fb-lang-ar .fb-hdr .tel,body.fb-lang-ar .fb-hdr .fb-btn{white-space:nowrap}
body.fb-lang-ar .fb-hdr .right{gap:14px}
body.fb-lang-ar.fb-menu-open .fb-hdr .fb-nav .sub-menu{padding:0 18px 0 0}

/* ---------- next-page card: arrow points towards reading direction (left) ---------- */
body.fb-lang-ar .fb-next-page .go svg{transform:scaleX(-1)}
body.fb-lang-ar .fb-next-page a:hover b{transform:translateX(-14px)}
body.fb-lang-ar .fb-next-page a:hover .go{transform:rotate(45deg)}
body.fb-lang-ar .fb-next-page .bar{left:auto;right:0}

/* ---------- floating WhatsApp button: move to the reading-start corner is NOT needed; keep position,
   only make sure it does not cover the RTL scrollbar side content ---------- */

/* ---------- generic directional arrows inside Fire Base widgets ---------- */
body.fb-lang-ar :is(.fb-btn,.fb-link,.fb-more,.fb-card) svg.arr,
body.fb-lang-ar .fb-arrow{transform:scaleX(-1)}

/* Lists: bullets and indents on the right. */
body.fb-lang-ar :is(.elementor-widget-text-editor,.fb) :is(ul,ol){padding-right:1.4em;padding-left:0}

/* Prevent horizontal overflow from mirrored off-canvas elements. */
body.fb-lang-ar{overflow-x:clip}

/* ---------- Arabic type scale ----------
   Noto Kufi Arabic is ~35% wider than the condensed Oswald used in English, so Fire Base widget
   headings are scaled down on Arabic pages only (English sizes are untouched). */
body.fb-lang-ar .elementor-widget-fb_hero_slider h1{font-size:clamp(30px,3.9vw,50px)}
body.fb-lang-ar .elementor-widget-fb_hero_slider h1.long{font-size:clamp(26px,3.2vw,42px);max-width:min(100%,14em)}
body.fb-lang-ar .elementor-widget-fb_page_hero h1{font-size:clamp(30px,3.9vw,52px)}
body.fb-lang-ar :is(.elementor-widget-fb_cards,.elementor-widget-fb_tiles,.elementor-widget-fb_split,.elementor-widget-fb_faq,.elementor-widget-firebase_projects,.elementor-widget-fb_rows,.elementor-widget-fb_steps,.elementor-widget-fb_story,.elementor-widget-fb_vmx,.elementor-widget-fb_ol,.elementor-widget-fb_badges,.elementor-widget-fb_text,.elementor-widget-fb_contact_intro) h2{font-size:clamp(26px,3.1vw,42px)}
body.fb-lang-ar .elementor-widget-fb_cta h2{font-size:clamp(30px,3.8vw,52px)}
body.fb-lang-ar .elementor-widget-heading h2.elementor-heading-title{font-size:clamp(26px,3.1vw,42px)}
body.fb-lang-ar :is(.elementor-widget-fb_cards,.elementor-widget-firebase_projects) h3{font-size:clamp(17px,1.45vw,20px)}
body.fb-lang-ar .elementor-widget-fb_tiles h3{font-size:clamp(16px,1.35vw,19px)}
body.fb-lang-ar :is(.elementor-widget-fb_split,.elementor-widget-fb_rows,.elementor-widget-fb_steps,.elementor-widget-fb_ol,.elementor-widget-fb_vmx) h3{font-size:clamp(17px,1.5vw,21px)}
body.fb-lang-ar .fb-next-page b{font-size:clamp(26px,3.4vw,46px)}
/* Card / tile titles: English caps their width in em (sized for condensed Oswald); use the card width instead. */
body.fb-lang-ar .fb .fb-svc h3,body.fb-lang-ar .elementor-widget-fb_tiles h3{max-width:100%}

/* ---------- Mirrors of direction-specific rules in firebase-motion/motion.css ---------- */
/* story: no Latin drop cap in Arabic text; quote bar and mark on the reading-start side */
body.fb-lang-ar .fb-story .prose .dropcap::first-letter{font:inherit;float:none;margin:0;color:inherit}
body.fb-lang-ar .fb-quote{padding:8px 36px 8px 0;border-left:0;border-right:3px solid var(--fb-red)}
body.fb-lang-ar .fb-quote span{left:auto;right:-6px;transform:scaleX(-1)}
body.fb-lang-ar .fb-note{border-left:0;border-right:3px solid var(--fb-red)}
/* stats band dividers */
body.fb-lang-ar .fb-band .cell{border-left:0;border-right:1px solid rgba(255,255,255,.22)}
body.fb-lang-ar .fb-band .cell:first-child,body.fb-lang-ar .fb-band .cell:nth-child(3){border-right:0;padding-right:0}
/* rows (hover indent) and steps */
body.fb-lang-ar .fb-row:hover{padding-left:0;padding-right:24px}
body.fb-lang-ar .fb-row:not(a):hover{padding-right:0}
body.fb-lang-ar .fb-light .fb-row:hover,body.fb-lang-ar .fb-white .fb-row:hover{padding-left:0!important;padding-right:34px!important}
body.fb-lang-ar .fb-step{padding:32px 0 0 24px}
body.fb-lang-ar .fb .fb-step::before{left:auto;right:24px}
body.fb-lang-ar .fb .fb-step small{margin-left:0;margin-right:24px}
/* decorative corner shapes and badges */
body.fb-lang-ar .fb-weare .photo .tag{right:auto;left:18px}
body.fb-lang-ar .fb-tile::after{right:auto;left:-40px}
body.fb-lang-ar .fb-cta::after{right:auto;left:-8%}
body.fb-lang-ar .fb-vm-item .k{right:auto;left:24px}
/* growing bars start from the reading side */
body.fb-lang-ar :is(.fb-card .ph i,.fb-slider .dots button::after,.fb-slider .fb-next .bar i,.fb-slider .side .dots button::after){transform-origin:right center}
/* hero slider: text side, dots spacing, prev/next arrows point the RTL way */
body.fb-lang-ar .fb-slider .slide .fb-wide{text-align:right}
body.fb-lang-ar .fb-slider .dots{margin-left:0;margin-right:10px}
body.fb-lang-ar .fb-slider .ctrls button svg{transform:scaleX(-1)}
body.fb-lang-ar .fb-slider .ctrls button.prev svg{transform:rotate(180deg) scaleX(-1)}
/* ticker: keep the marquee track LTR (seamless loop), items read RTL */
body.fb-lang-ar .fb-ticker{direction:ltr}
body.fb-lang-ar .fb-ticker .track{direction:ltr;padding-right:56px;font-family:var(--fb-body);font-weight:600}
body.fb-lang-ar .fb-ticker .track>*{direction:rtl;unicode-bidi:isolate}
body.fb-lang-ar .fb-ticker .track span::before{margin-right:0;margin-left:18px}
/* services mega list */
body.fb-lang-ar .fb-svc-list a{border-left:0;border-right:3px solid transparent;padding:10px 14px 10px 0}
body.fb-lang-ar .fb-hdr .fb-social{margin-right:0;margin-left:6px}
/* ElementsKit boxes forced left in English */
body.fb-lang-ar.fb-design :is(.elementor-widget-elementskit-icon-box .elementskit-info-box-title,.elementor-widget-elementskit-icon-box .box-body--text,.elementor-widget-elementskit-icon-box .elementskit-box-header,.elementor-widget-elementskit-image-box .elementskit-image-box,.elementor-widget-elementskit-image-box .elementskit-image-box p){text-align:right!important}
/* Menu items whose Arabic page is not published yet (they link to the English page). */
body.fb-lang-ar .fb-en-tag{display:inline-block;margin-inline-start:6px;padding:1px 4px;border:1px solid currentColor;border-radius:3px;font:600 9px/1.3 var(--fb-body);letter-spacing:.04em!important;opacity:.7;vertical-align:middle;direction:ltr}

/* Stats band: Arabic words are wider than the English numbers/words; keep two equal columns on phones. */
@media (max-width:767px){body.fb-lang-ar .fb-band .fb-wide{grid-template-columns:repeat(2,minmax(0,1fr))}body.fb-lang-ar .fb-band .n{font-size:clamp(26px,8.5vw,44px);overflow-wrap:anywhere}}

/* Service hero (HTML widget) titles on phones */
@media(max-width:767px){body.fb-lang-ar .fb-project-hero h1{font-size:clamp(28px,8vw,40px);line-height:1.3}}