/* ==== DSSA RTL overlay: loaded only when the language is right-to-left ====
   The WP theme rtl.css handles the theme chrome; this file flips our custom
   dssa/ge/wbm/pd/cu/pp/dz/au components. Extend per QA screenshot. */
[dir="rtl"] {
    direction: rtl
}

    [dir="rtl"] .site-content {
        text-align: right
    }

/* breadcrumb separator direction */
html[dir="rtl"] .edublink-breadcrumb ul.breadcrumb li:not(:last-child)::after {
    content: "\f104"
}

/* generic: our left-aligned custom blocks flip */
[dir="rtl"] .cu-info-card, [dir="rtl"] .cu-form-card, [dir="rtl"] .pd-card,
[dir="rtl"] .ge-single-main, [dir="rtl"] .ge-aside-block,
[dir="rtl"] .pp-card, [dir="rtl"] .au-goals-grid, [dir="rtl"] .dz-letter {
    text-align: right
}

/* icon rows keep their gap on the other side */
[dir="rtl"] .cu-info-card {
    flex-direction: row
}

[dir="rtl"] .pd-closing {
    border-left: none;
    border-right: 3px solid #BF9445;
    border-radius: 10px 0 0 10px
}

/* hero copy on custom hero follows direction naturally (flex/grid) */
[dir="rtl"] #dssa-hero .dh-copy {
    text-align: right
}

[dir="rtl"] .dh-cta {
    justify-content: flex-start
}

/* forms */
html[dir="rtl"] #cu-form input, html[dir="rtl"] #cu-form textarea {
    direction: rtl;
    text-align: right
}

/* ==== dropdown rtl: submenu panels + items flip in Arabic ==== */
html[dir="rtl"] li.menu-item-has-children > .edublink-dropdown-menu {
    left: auto !important;
    right: 0 !important;
    text-align: right !important;
    direction: rtl;
}

html[dir="rtl"] .edublink-dropdown-menu li {
    text-align: right !important;
}

    html[dir="rtl"] .edublink-dropdown-menu li a {
        text-align: right !important;
        direction: rtl;
        display: block;
    }
/* mobile menu items */
html[dir="rtl"] .edublink-mobile-menu-item li a {
    text-align: right;
    direction: rtl;
}

html[dir="rtl"] .edublink-mobile-menu-nav-wrapper {
    direction: rtl;
}
/* caret sits on the other side of parent items */
html[dir="rtl"] .edublink-default-header-navbar li.menu-item-has-children > a::after {
    margin-left: 0;
    margin-right: 6px;
}

/* ==== dropdown rtl v2: hard reset of panel geometry in Arabic ====
   body.rtl theme rules re-style the submenu; take full ownership instead. */
html[dir="rtl"] li.menu-item-has-children {
    position: relative !important;
}

    html[dir="rtl"] li.menu-item-has-children > .edublink-dropdown-menu {
        position: absolute !important;
        top: 100% !important;
        right: 0 !important;
        left: auto !important;
        bottom: auto !important;
        width: max-content !important;
        min-width: 230px !important;
        max-width: 320px !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 14px 0 !important;
        background: #fff !important;
        box-shadow: 0 14px 34px rgba(7,44,67,.16) !important;
        border-radius: 0 0 10px 10px !important;
        direction: rtl;
        text-align: right !important;
    }

html[dir="rtl"] .edublink-dropdown-menu > li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

    html[dir="rtl"] .edublink-dropdown-menu > li > a {
        display: block !important;
        width: 100% !important;
        padding: 9px 22px !important;
        margin: 0 !important;
        text-align: right !important;
        direction: rtl;
        line-height: 1.7 !important;
        white-space: nowrap;
    }
/* nothing above the panel may clip it */
html[dir="rtl"] .edublink-header-area,
html[dir="rtl"] .edublink-container-fluid,
html[dir="rtl"] .eb-header-navbar,
html[dir="rtl"] .edublink-theme-header-nav,
html[dir="rtl"] .edublink-navbar-primary-menu {
    overflow: visible !important;
}

/* ==== dropdown rtl v3: the header must stack ABOVE the hero in Arabic too ====
   A body.rtl theme rule un-positions the header, which disables its z-index,
   so the hero's positioned elements (phone image, z-index:2) painted over the
   panel. Reassert the stacking with max force. */
html[dir="rtl"] body header.site-header {
    position: relative !important;
    z-index: 2147483000 !important;
}

    html[dir="rtl"] body header.site-header * {
        z-index: auto;
    }

html[dir="rtl"] body li.menu-item-has-children {
    position: relative !important;
}

    html[dir="rtl"] body li.menu-item-has-children > .edublink-dropdown-menu {
        z-index: 2147483600 !important;
    }
/* and no ancestor between li and header may clip or restack */
html[dir="rtl"] body header.site-header nav,
html[dir="rtl"] body header.site-header ul,
html[dir="rtl"] body #site-navigation,
html[dir="rtl"] body #primary-menu-custom-id {
    overflow: visible !important;
}

/* ==== testimonials intro rtl: quote glyph + text mirror ==== */
html[dir="rtl"] .edublink-section-heading .sub-heading blockquote,
html[dir="rtl"] .sub-heading blockquote {
    text-align: right !important;
    direction: rtl;
}

/* ==== rtl arrows: mirror every directional glyph in Arabic ==== */
html[dir="rtl"] i.fa-arrow-right,
html[dir="rtl"] i.fa-arrow-left,
html[dir="rtl"] i.fa-chevron-right,
html[dir="rtl"] i.fa-chevron-left,
html[dir="rtl"] i.fa-paper-plane,
html[dir="rtl"] i[class*="ri-arrow-right"],
html[dir="rtl"] i[class*="ri-arrow-left"],
html[dir="rtl"] i.icon-4 {
    display: inline-block;
    transform: scaleX(-1);
}
/* hover slides reverse direction and keep the mirror */
html[dir="rtl"] .wbm-join-btn:hover i {
    transform: translateX(-4px) scaleX(-1);
}

html[dir="rtl"] .cu-submit:hover i {
    transform: scaleX(-1);
}

html[dir="rtl"] .wbm-partner-card:hover .wbm-partner-cta {
    gap: 10px;
}

/* nav caret: spacing flips sides (the glyph itself is symmetric) */
html[dir="rtl"] li.menu-item-has-children > a::after {
    margin-left: 0 !important;
    margin-right: 5px !important;
}

html[dir="rtl"] li.menu-item-has-children:hover > a::after {
    transform: rotate(180deg);
}

/* ==== numbers stay ltr in Arabic: phone numbers, dates, counters ====
   Digits with +, commas or Latin text get scrambled by bidi in RTL context;
   isolate them as LTR islands. */
html[dir="rtl"] a[href^="tel:"]:not(.cta-card),
html[dir="rtl"] .cc-body b,
html[dir="rtl"] .blog-meta li,
html[dir="rtl"] .ge-card-exp,
html[dir="rtl"] .ge-hero-exp,
html[dir="rtl"] .dz-count,
html[dir="rtl"] .dssa-num {
    direction: ltr !important;
    unicode-bidi: isolate;
    display: inline-block;
}

/* ==== Arabic typography: Tajawal everywhere in RTL mode ====
   The theme reads fonts from variables -> override once. Our custom components
   hardcode Kanit/Russo One/Poppins -> element-level overrides. <i> elements are
   deliberately untouched so the icon fonts keep working. */
html[dir="rtl"] body {
    --edublink-font-primary: 'Tajawal', sans-serif;
    --edublink-font-secondary: 'Tajawal', sans-serif;
    font-family: 'Tajawal', sans-serif;
}

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"] a, html[dir="rtl"] li,
html[dir="rtl"] blockquote, html[dir="rtl"] label,
html[dir="rtl"] button, html[dir="rtl"] input, html[dir="rtl"] textarea,
html[dir="rtl"] .dh-title, html[dir="rtl"] .dh-lead, html[dir="rtl"] .dh-small,
html[dir="rtl"] .dh-btn, html[dir="rtl"] .dh-chip p,
html[dir="rtl"] .cta-title, html[dir="rtl"] .cta-sub, html[dir="rtl"] .cta-btn,
html[dir="rtl"] .cta-eyebrow, html[dir="rtl"] .cu-pre, html[dir="rtl"] .cu-form-pre,
html[dir="rtl"] .pd-label, html[dir="rtl"] .pre-heading, html[dir="rtl"] .wbm-pre-title,
html[dir="rtl"] .ge-pre-title, html[dir="rtl"] .pp-eyebrow, html[dir="rtl"] .dh-label {
    font-family: 'Tajawal', sans-serif !important;
}
/* slightly stronger weights: Tajawal reads lighter than Kanit at same weight */
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] .dh-title, html[dir="rtl"] .cta-title {
    font-weight: 800;
}
/* letter-spacing designed for Latin eyebrows looks broken in Arabic */
html[dir="rtl"] .cu-pre, html[dir="rtl"] .cta-eyebrow, html[dir="rtl"] .pre-heading,
html[dir="rtl"] .wbm-pre-title, html[dir="rtl"] .ge-pre-title, html[dir="rtl"] .pd-label {
    letter-spacing: 0 !important;
}

/* ==== arabic size bump: small text reads ~1-2px larger in RTL ====
   Arabic script has a smaller visual x-height than Latin at equal px. */
html[dir="rtl"] body {
    --edublink-font-size-b1: 16px; /* was 15px */
    --edublink-font-size-b2: 14.5px; /* was 13px */
    --edublink-font-size-b3: 15px; /* was 14px */
    --edublink-font-size-b4: 13.5px; /* was 12px */
    --edublink-line-height-b1: 1.85;
}
/* custom components' smallest text */
html[dir="rtl"] .cu-pre, html[dir="rtl"] .cta-eyebrow, html[dir="rtl"] .pre-heading,
html[dir="rtl"] .wbm-pre-title, html[dir="rtl"] .ge-pre-title,
html[dir="rtl"] .pp-eyebrow, html[dir="rtl"] .pd-label {
    font-size: 14px !important;
}

html[dir="rtl"] .dh-small {
    font-size: 1.28rem !important;
    line-height: 1.9 !important;
}

html[dir="rtl"] .dh-chip p {
    font-size: 1.18rem !important;
    line-height: 1.8 !important;
}

html[dir="rtl"] .cta-sub {
    font-size: 16px !important;
    line-height: 1.85 !important;
}

html[dir="rtl"] .wbm-header-sub, html[dir="rtl"] .cu-sub, html[dir="rtl"] .pp-sub {
    font-size: 16px !important;
}

html[dir="rtl"] .wbm-partner-category {
    font-size: 11.5px !important;
}

html[dir="rtl"] .wbm-partner-cta {
    font-size: 13px !important;
}

html[dir="rtl"] .ge-card-position {
    font-size: 14.5px !important;
}

html[dir="rtl"] .blog-meta li {
    font-size: 14px !important;
}

html[dir="rtl"] .footer-navigation-menu a {
    font-size: 15px !important;
}

html[dir="rtl"] .cu-info-body p, html[dir="rtl"] .cu-form-sub {
    font-size: 15.5px !important;
}
/* compensate: laptop hero compact mode keeps its discipline */
@media (max-height:900px) {
    html[dir="rtl"] .dh-small {
        font-size: 1.08rem !important;
    }

    html[dir="rtl"] .dh-chip p {
        font-size: 1rem !important;
    }
}

/* ==== contact rtl geometry ==== */
/* dir=rtl already mirrors flex rows - icons naturally sit right with plain row */
html[dir="rtl"] .cu-info-card {
    flex-direction: row !important;
}

html[dir="rtl"] .cu-info-body {
    text-align: right;
}

html[dir="rtl"] .cu-socials {
    text-align: right;
}

html[dir="rtl"] .cu-socials-row {
    justify-content: flex-start;
}

html[dir="rtl"] #cu-form {
    text-align: right;
}

html[dir="rtl"] .cu-form-card {
    text-align: right;
}

/* ==== breadcrumb rtl spacing: separator breathes on both sides ==== */
html[dir="rtl"] .edublink-breadcrumb ul.breadcrumb li {
    margin: 0 0 0 4px;
}

    html[dir="rtl"] .edublink-breadcrumb ul.breadcrumb li:not(:last-child)::after {
        margin: 0 8px !important;
        display: inline-block;
    }

/* ==== nav no-wrap: exempt the nav from the Arabic size bump; keep theme spacing ==== */
html[dir="rtl"] .edublink-default-header-navbar {
    flex-wrap: nowrap !important;
}

    html[dir="rtl"] .edublink-default-header-navbar > li {
        white-space: nowrap;
    }

        html[dir="rtl"] .edublink-default-header-navbar > li > a.nav-link {
            font-size: 15px !important;
        }

/* ==== home CTA cards rtl: auto-margin flips sides; hover slide reverses ====
   (the tel: LTR-island rule above deliberately excludes .cta-card - the whole
   call-us card is an <a href="tel:..."> and must keep its flex layout) */
html[dir="rtl"] .cc-go {
    margin-left: 0 !important;
    margin-right: auto !important;
}

html[dir="rtl"] .cta-card:hover .cc-go {
    transform: translateX(-5px);
}

/* ==== auth rtl: logout icon points out of the door in Arabic too ==== */
html[dir="rtl"] i.fa-sign-out-alt {
    display: inline-block;
    transform: scaleX(-1);
}

/* ==== newsletter subscribe rtl: keep the gold identity on hover ====
   a body.rtl theme rule out-specifies our button styling ONLY in Arabic and
   painted it navy on hover; re-assert with max specificity, loaded last. */
html[dir="rtl"] body button.edublink-mailchimp-subscribe-btn:hover,
html[dir="rtl"] body button.edublink-mailchimp-subscribe-btn:focus {
    background: linear-gradient(120deg,#ffb606,#bf9445) !important;
    color: #2a2205 !important;
    border: 0 !important;
    box-shadow: 0 12px 26px rgba(255,182,6,.45) !important;
}
/* the icon nudge travels the reading direction */
html[dir="rtl"] button.edublink-mailchimp-subscribe-btn:hover .edublink-mailchimp-subscribe-btn-icon {
    transform: translateX(-4px);
}

/* ==== hero arrows rtl: edge arrows always point OUTWARD ====
   the global chevron mirror flips them inward in Arabic; the buttons are
   physically positioned (left/right), so their glyphs must stay physical. */
html[dir="rtl"] #dssa-hero .dh-nav i {
    transform: none !important;
}

/* ==== header rtl: the logo-to-nav breathing room is a physical margin in the
   theme and does not flip; mirror it so Arabic gets the same gap as English ==== */
html[dir="rtl"] .site-branding {
    margin-left: 55px !important;
    margin-right: 0 !important;
}