/**
 * Aupaire Arabic RTL Direction, Layout & Cairo Font
 * Scoped exclusively to Arabic: html[lang="ar"], html[dir="rtl"], body.rtl, body.translatepress-ar
 * English pages are 100% untouched.
 */

/* ==========================================================================
   1. GLOBAL CAIRO TYPOGRAPHY (ARABIC ONLY)
   ========================================================================== */

/* Elementor global font-family variables override for Arabic */
html[lang="ar"],
html[dir="rtl"],
body.rtl,
body.translatepress-ar {
    --e-global-typography-primary-font-family: 'Cairo', sans-serif !important;
    --e-global-typography-secondary-font-family: 'Cairo', sans-serif !important;
    --e-global-typography-text-font-family: 'Cairo', sans-serif !important;
    --e-global-typography-accent-font-family: 'Cairo', sans-serif !important;
    font-family: 'Cairo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    direction: rtl !important;
    text-align: right;
}

/* Comprehensive font application for all Arabic text elements */
html[lang="ar"] body,
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6,
html[lang="ar"] p,
html[lang="ar"] span,
html[lang="ar"] a,
html[lang="ar"] li,
html[lang="ar"] label,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] select,
html[lang="ar"] textarea,
html[lang="ar"] .elementor-heading-title,
html[lang="ar"] .elementor-button,
html[lang="ar"] .elementor-button-text,
html[lang="ar"] .elementor-icon-box-title,
html[lang="ar"] .elementor-icon-box-description,
html[lang="ar"] .elementor-icon-list-text,
html[lang="ar"] .hfe-infocard-title,
html[lang="ar"] .hfe-infocard-desc,
html[lang="ar"] .wpr-acc-button,
html[lang="ar"] .wpr-acc-title-text,
html[lang="ar"] .wpr-acc-panel-content,
html[lang="ar"] .elementskit-navbar-nav,
html[lang="ar"] .elementskit-menu-item,
html[lang="ar"] .sub-menu,
html[lang="ar"] .entry-title,
html[lang="ar"] .ast-builder-menu {
    font-family: 'Cairo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Typography Weights */
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] .elementor-heading-title {
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6,
html[lang="ar"] .hfe-infocard-title,
html[lang="ar"] .elementor-icon-box-title,
html[lang="ar"] .wpr-acc-title-text {
    font-weight: 600 !important;
    line-height: 1.45 !important;
}

html[lang="ar"] button,
html[lang="ar"] .elementor-button,
html[lang="ar"] .elementor-button-text,
html[lang="ar"] .elementskit-menu-item > a {
    font-weight: 600 !important;
}

html[lang="ar"] p,
html[lang="ar"] li,
html[lang="ar"] .elementor-icon-box-description,
html[lang="ar"] .hfe-infocard-desc,
html[lang="ar"] .wpr-acc-panel-content {
    font-weight: 400;
    line-height: 1.8 !important;
}

/* ==========================================================================
   2. TEXT DIRECTION & ALIGNMENT
   ========================================================================== */

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6,
html[lang="ar"] p,
html[lang="ar"] li,
html[lang="ar"] .elementor-text-editor,
html[lang="ar"] .elementor-widget-heading,
html[lang="ar"] .hfe-infocard-title,
html[lang="ar"] .hfe-infocard-desc,
html[lang="ar"] .wpr-acc-panel-content,
html[lang="ar"] .wpr-acc-title-text {
    text-align: right !important;
    direction: rtl !important;
}

/* Center-aligned elements that are intentionally centered */
html[lang="ar"] .elementor-align-center,
html[lang="ar"] .elementor-align-center .elementor-heading-title,
html[lang="ar"] .elementor-align-center p,
html[lang="ar"] .text-center,
html[lang="ar"] .has-text-align-center {
    text-align: center !important;
}

/* ==========================================================================
   3. HEADER, NAVIGATION & MENU (RTL MIRRORING)
   ========================================================================== */

/* Reverse header flex ordering so Logo is right, Nav is center, CTA is left */
html[lang="ar"] .ehf-header .elementor-container,
html[lang="ar"] .site-header .ast-container,
html[lang="ar"] .main-header-bar {
    direction: rtl !important;
}

/* Submenu dropdown alignment: open from right to left */
html[lang="ar"] .elementskit-submenu-panel,
html[lang="ar"] .sub-menu,
html[lang="ar"] ul.sub-menu {
    right: 0 !important;
    left: auto !important;
    text-align: right !important;
    direction: rtl !important;
}

/* Navigation items spacing */
html[lang="ar"] .elementskit-navbar-nav > li {
    float: right;
}

html[lang="ar"] .elementskit-submenu-indicator {
    margin-right: 6px !important;
    margin-left: 0 !important;
    transform: rotate(0deg);
}

/* Mobile Navigation Toggle & Drawer */
html[lang="ar"] .elementskit-menu-hamburger {
    float: left;
}

html[lang="ar"] .elementskit-menu-container {
    text-align: right !important;
    direction: rtl !important;
}

/* ==========================================================================
   4. ICON BOXES, LISTS & CARDS (RTL FLEX & MARGINS)
   ========================================================================== */

/* Elementor icon box alignment */
html[lang="ar"] .elementor-position-left .elementor-icon-box-wrapper {
    display: flex !important;
    flex-direction: row !important;
    text-align: right !important;
}

html[lang="ar"] .elementor-position-left .elementor-icon-box-icon {
    margin-left: 15px !important;
    margin-right: 0 !important;
    order: 0;
}

html[lang="ar"] .elementor-position-left .elementor-icon-box-content {
    order: 1;
    text-align: right !important;
}

/* Icon Lists (.elementor-icon-list-items) */
html[lang="ar"] .elementor-icon-list-items {
    direction: rtl !important;
    text-align: right !important;
    padding-right: 0 !important;
}

html[lang="ar"] .elementor-icon-list-item {
    display: flex !important;
    align-items: center !important;
    text-align: right !important;
    direction: rtl !important;
}

html[lang="ar"] .elementor-icon-list-icon {
    margin-left: 10px !important;
    margin-right: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

html[lang="ar"] .elementor-icon-list-text {
    text-align: right !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Standard bullet lists */
html[lang="ar"] ul:not(.elementskit-navbar-nav):not(.sub-menu):not(.elementor-icon-list-items) {
    padding-right: 24px !important;
    padding-left: 0 !important;
    margin-right: 0 !important;
    direction: rtl !important;
    list-style-position: outside;
}

html[lang="ar"] ol {
    padding-right: 24px !important;
    padding-left: 0 !important;
    margin-right: 0 !important;
    direction: rtl !important;
}

/* Info Cards (.hfe-infocard) */
html[lang="ar"] .hfe-infocard,
html[lang="ar"] .hfe-infocard-content {
    text-align: right !important;
    direction: rtl !important;
}

html[lang="ar"] .hfe-infocard-title {
    text-align: right !important;
}

/* ==========================================================================
   5. BUTTONS, CTAS & DIRECTIONAL ICONS
   ========================================================================== */

/* Button layout in RTL */
html[lang="ar"] .elementor-button {
    direction: rtl !important;
}

/* Button icon spacing: if icon is after text in LTR (margin-left), in RTL it needs margin-right */
html[lang="ar"] .elementor-button .elementor-align-icon-right {
    margin-right: 8px !important;
    margin-left: 0 !important;
}

html[lang="ar"] .elementor-button .elementor-align-icon-left {
    margin-left: 8px !important;
    margin-right: 0 !important;
}

/* Mirror directional icons (forward arrows / right arrows become left arrows in RTL) */
html[lang="ar"] .elementor-button-icon .fa-arrow-right,
html[lang="ar"] .elementor-button-icon .fa-chevron-right,
html[lang="ar"] .elementor-button-icon .fa-angle-right,
html[lang="ar"] .elementor-button-icon [class*="arrow-right"],
html[lang="ar"] .elementor-button-icon [class*="chevron-right"],
html[lang="ar"] .wpr-button-icon .fa-arrow-right,
html[lang="ar"] .wpr-button-icon .fa-chevron-right {
    transform: scaleX(-1) !important;
    display: inline-block;
}

/* ==========================================================================
   6. FAQ ACCORDIONS (ROYAL ELEMENTOR ADDONS)
   ========================================================================== */

html[lang="ar"] .wpr-advanced-accordion {
    direction: rtl !important;
}

html[lang="ar"] .wpr-acc-button {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    text-align: right !important;
    direction: rtl !important;
    width: 100% !important;
}

html[lang="ar"] .wpr-acc-item-title {
    display: flex !important;
    align-items: center !important;
    text-align: right !important;
    order: 0 !important;
    gap: 10px;
}

html[lang="ar"] .wpr-title-icon {
    margin-left: 10px !important;
    margin-right: 0 !important;
}

html[lang="ar"] .wpr-acc-title-text {
    text-align: right !important;
}

/* Toggle icon (+ / -) should sit cleanly on the left */
html[lang="ar"] .wpr-toggle-icon {
    order: 1 !important;
    margin-right: auto !important;
    margin-left: 0 !important;
}

html[lang="ar"] .wpr-acc-panel-content {
    text-align: right !important;
    direction: rtl !important;
}

html[lang="ar"] .wpr-acc-panel-content p {
    text-align: right !important;
}

html[lang="ar"] .wpr-acc-panel-content ul {
    padding-right: 20px !important;
    padding-left: 0 !important;
    list-style-position: outside;
}

/* Category Filter Tabs (للعائلات / للمتخصصين) */
html[lang="ar"] .e-n-tabs-heading,
html[lang="ar"] .elementor-tabs-wrapper {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 12px;
}

/* ==========================================================================
   7. BIDIRECTIONAL TEXT, PHONES, NUMBERS & EMAILS
   ========================================================================== */

/* Phone Numbers: prevent inversion (must stay LTR) */
html[lang="ar"] a[href^="tel:"],
html[lang="ar"] .elementor-icon-list-item:has(.icon-phone-handset) .elementor-icon-list-text,
html[lang="ar"] .elementor-icon-list-item:has([class*="phone"]) .elementor-icon-list-text,
html[lang="ar"] [class*="phone-number"],
html[lang="ar"] .aupair-phone {
    direction: ltr !important;
    display: inline-block !important;
    unicode-bidi: isolate !important;
    text-align: right !important;
}

/* Email Addresses: prevent bidi corruption */
html[lang="ar"] a[href^="mailto:"],
html[lang="ar"] [class*="email"] {
    direction: ltr !important;
    unicode-bidi: isolate !important;
    display: inline-block !important;
}

/* English brands and acronyms inside Arabic sentences */
html[lang="ar"] .aupair-brand-en,
html[lang="ar"] bdi {
    unicode-bidi: isolate;
}

/* Numbers followed by percent or units */
html[lang="ar"] .elementor-counter-number-wrapper,
html[lang="ar"] .elementor-counter-number-prefix,
html[lang="ar"] .elementor-counter-number-suffix {
    direction: ltr !important;
    display: inline-block !important;
    unicode-bidi: isolate !important;
}

/* ==========================================================================
   8. FORMS & INPUT CONTROLS
   ========================================================================== */

html[lang="ar"] form {
    direction: rtl !important;
    text-align: right !important;
}

html[lang="ar"] .elementor-field-group,
html[lang="ar"] .form-group {
    text-align: right !important;
}

html[lang="ar"] label.elementor-field-label {
    text-align: right !important;
    display: block;
    margin-bottom: 6px;
}

html[lang="ar"] input[type="text"],
html[lang="ar"] input[type="search"],
html[lang="ar"] textarea,
html[lang="ar"] select,
html[lang="ar"] .elementor-field-textual {
    direction: rtl !important;
    text-align: right !important;
    padding-right: 14px !important;
    padding-left: 14px !important;
}

html[lang="ar"] input[type="email"],
html[lang="ar"] input[type="tel"],
html[lang="ar"] input[type="url"],
html[lang="ar"] input[type="number"] {
    direction: ltr !important;
    text-align: right !important;
    unicode-bidi: plaintext;
}

html[lang="ar"] ::placeholder {
    direction: rtl !important;
    text-align: right !important;
    font-family: 'Cairo', sans-serif !important;
}

/* Checkbox and Radio in RTL */
html[lang="ar"] input[type="checkbox"],
html[lang="ar"] input[type="radio"] {
    margin-left: 8px !important;
    margin-right: 0 !important;
}

/* Form submission button */
html[lang="ar"] .elementor-field-type-submit button,
html[lang="ar"] input[type="submit"] {
    font-family: 'Cairo', sans-serif !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   9. FOOTER & GLOBAL LAYOUT
   ========================================================================== */

html[lang="ar"] .site-footer,
html[lang="ar"] .ehf-footer {
    direction: rtl !important;
    text-align: right !important;
}

html[lang="ar"] .site-footer .elementor-widget-heading,
html[lang="ar"] .ehf-footer .elementor-widget-heading {
    text-align: right !important;
}

/* Copyright & bottom bar */
html[lang="ar"] .ast-footer-copyright,
html[lang="ar"] .footer-copyright {
    direction: rtl !important;
    text-align: center;
}

/* ==========================================================================
   10. RESPONSIVE / MOBILE ZERO HORIZONTAL OVERFLOW
   ========================================================================== */

html[lang="ar"],
html[lang="ar"] body {
    max-width: 100vw;
    overflow-x: hidden !important;
}

@media (max-width: 768px) {
    html[lang="ar"] .elementor-section.elementor-section-boxed > .elementor-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    html[lang="ar"] h1,
    html[lang="ar"] .elementor-widget-heading h1.elementor-heading-title {
        font-size: 26px !important;
        line-height: 1.35 !important;
    }

    html[lang="ar"] h2,
    html[lang="ar"] .elementor-widget-heading h2.elementor-heading-title {
        font-size: 22px !important;
        line-height: 1.4 !important;
    }
}