/* ==========================================
   NOWSHERWAN INTERNATIONAL
   ARABIC / RTL STYLES
========================================== */


/* Base RTL */

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


/* Navigation and flex direction */

html[dir="rtl"] .nav-container,
html[dir="rtl"] .top-bar-content,
html[dir="rtl"] .hero-buttons,
html[dir="rtl"] .about-final-cta-content,
html[dir="rtl"] .employer-final-cta-content,
html[dir="rtl"] .services-final-cta-content,
html[dir="rtl"] .industries-final-cta-content,
html[dir="rtl"] .markets-final-cta-content,
html[dir="rtl"] .contact-final-buttons,
html[dir="rtl"] .form-consent {
    direction: rtl;
}


html[dir="rtl"] .nav-menu {
    direction: rtl;
}


/* Arabic typography */

html[dir="rtl"] .eyebrow,
html[dir="rtl"] .hero h1,
html[dir="rtl"] .inner-hero h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3 {
    letter-spacing: 0;
}


/* Buttons */

html[dir="rtl"] .button-secondary {
    margin-left: 0;
    margin-right: 8px;
}


/* Lists */

html[dir="rtl"] .industry-card li::before {
    margin-right: 0;
    margin-left: 8px;
}


/* Cards */

html[dir="rtl"] .licence-row strong,
html[dir="rtl"] .employer-credibility-card strong,
html[dir="rtl"] .contact-company-card strong {
    text-align: left;
}


/* Forms */

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


html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea {
    text-align: right;
}


/* These should still be typed left-to-right */

html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="tel"] {
    direction: ltr;
    text-align: left;
}


/* Phone numbers and emails */

html[dir="rtl"] .top-links,
html[dir="rtl"] .office-contact-links,
html[dir="rtl"] .recruitment-contact-row a {
    direction: ltr;
}


/* Language button */

html[dir="rtl"] .language-button {
    display: inline-flex;
    align-items: center;
}


/* Mobile */

@media (max-width: 600px) {

    html[dir="rtl"] .button-secondary {
        margin-right: 0;
    }

}


/* ==========================================
   RTL ENGLISH / NUMBER DISPLAY FIXES
========================================== */

html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] a[href^="mailto:"] {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}


html[dir="rtl"] .contact-detail p,
html[dir="rtl"] .office-address-card p,
html[dir="rtl"] .contact-info-card p,
html[dir="rtl"] .contact-office-details strong,
html[dir="rtl"] .contact-map-placeholder p {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: left;
}


html[dir="rtl"] .licence-row strong,
html[dir="rtl"] .credential-row strong,
html[dir="rtl"] .footer-licence {
    unicode-bidi: isolate;
}


/* ==========================================
   ARABIC RECRUITMENT — MOBILE SAFEGUARD
========================================== */

@media (max-width: 768px) {

    html[dir="rtl"] body {
        overflow-x: hidden;
    }


    html[dir="rtl"] .recruitment-layout {
        width: 100%;
        max-width: 100%;
        grid-template-columns: minmax(0, 1fr);
    }


    html[dir="rtl"] .recruitment-layout > *,
    html[dir="rtl"] .recruitment-form-wrapper,
    html[dir="rtl"] .recruitment-sidebar,
    html[dir="rtl"] .recruitment-form,
    html[dir="rtl"] .form-section {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }


    html[dir="rtl"] .form-grid {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }


    html[dir="rtl"] .form-field,
    html[dir="rtl"] input,
    html[dir="rtl"] select,
    html[dir="rtl"] textarea {
        max-width: 100%;
        min-width: 0;
    }

}


/* ==========================================
   ARABIC MOBILE VIEWPORT FIX
========================================== */

@media (max-width: 768px) {

    html[dir="rtl"],
    html[dir="rtl"] body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }


    html[dir="rtl"] body {
        position: relative;
        margin: 0;
        padding: 0;
    }


    html[dir="rtl"] .site-header,
    html[dir="rtl"] main,
    html[dir="rtl"] .footer {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }


    html[dir="rtl"] .container {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }


    html[dir="rtl"] .recruitment-layout {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
    }


    html[dir="rtl"] .recruitment-form-wrapper,
    html[dir="rtl"] .recruitment-sidebar,
    html[dir="rtl"] .recruitment-form,
    html[dir="rtl"] .form-section,
    html[dir="rtl"] .form-grid,
    html[dir="rtl"] .form-field {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }


    html[dir="rtl"] .form-grid {
        grid-template-columns: 1fr;
    }


    html[dir="rtl"] input,
    html[dir="rtl"] select,
    html[dir="rtl"] textarea {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }


    html[dir="rtl"] .cf-turnstile {
        direction: ltr;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }


    html[dir="rtl"] .cf-turnstile iframe {
        max-width: 100% !important;
    }

}


/* =========================================================
   NOWSHERWAN INTERNATIONAL
   FINAL ARABIC / RTL POLISH
   KEEP THIS AT THE VERY BOTTOM OF arabic.css
========================================================= */


/* ---------------------------------------------------------
   GLOBAL ARABIC TYPOGRAPHY + DIRECTION
--------------------------------------------------------- */

html[dir="rtl"] body {
    direction: rtl;
    text-align: right;

    font-family:
        "Segoe UI",
        Tahoma,
        Arial,
        sans-serif;

    overflow-x: clip;
}


html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] p,
html[dir="rtl"] a,
html[dir="rtl"] label,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea,
html[dir="rtl"] button {
    font-family:
        "Segoe UI",
        Tahoma,
        Arial,
        sans-serif;
}


html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4 {
    letter-spacing: 0;
}



/* ---------------------------------------------------------
   PREVENT RTL TEXT FROM ESCAPING ITS CONTAINER
--------------------------------------------------------- */

html[dir="rtl"] main,
html[dir="rtl"] section,
html[dir="rtl"] .container,
html[dir="rtl"] .recruitment-layout,
html[dir="rtl"] .recruitment-form-wrapper,
html[dir="rtl"] .recruitment-sidebar,
html[dir="rtl"] .form-section,
html[dir="rtl"] .form-grid,
html[dir="rtl"] .form-field,
html[dir="rtl"] .contact-card,
html[dir="rtl"] .footer-grid,
html[dir="rtl"] .footer-grid > div {
    min-width: 0;
}


html[dir="rtl"] p,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] label,
html[dir="rtl"] span {
    max-width: 100%;
}



/* ---------------------------------------------------------
   ENGLISH TEXT / NUMBERS INSIDE ARABIC SITE
--------------------------------------------------------- */

html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] a[href^="mailto:"] {
    direction: ltr;

    unicode-bidi: isolate;

    display: inline-block;
}


html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="url"] {
    direction: ltr;

    text-align: left;

    unicode-bidi: isolate;
}


html[dir="rtl"] .office-address-card p,
html[dir="rtl"] .contact-detail p,
html[dir="rtl"] .contact-info-card p,
html[dir="rtl"] .contact-office-details strong,
html[dir="rtl"] .contact-map-placeholder p {
    direction: ltr;

    unicode-bidi: isolate;

    text-align: right;
}


html[dir="rtl"] .licence-row strong,
html[dir="rtl"] .credential-row strong {
    direction: ltr;

    unicode-bidi: isolate;
}



/* ---------------------------------------------------------
   NAVIGATION
--------------------------------------------------------- */

html[dir="rtl"] .nav-menu {
    direction: rtl;
}


html[dir="rtl"] .language-button {
    direction: ltr;

    unicode-bidi: isolate;
}



/* ---------------------------------------------------------
   ARABIC HERO
--------------------------------------------------------- */

html[dir="rtl"] .hero-text,
html[dir="rtl"] .inner-hero-content {
    direction: rtl;

    text-align: right;

    min-width: 0;
}


html[dir="rtl"] .hero h1,
html[dir="rtl"] .inner-hero h1 {
    line-height: 1.28;
}


html[dir="rtl"] .hero-description,
html[dir="rtl"] .inner-hero-content > p {
    line-height: 1.9;
}



/* ---------------------------------------------------------
   ARABIC FORM — GENERAL
--------------------------------------------------------- */

html[dir="rtl"] .recruitment-form {
    direction: rtl;

    text-align: right;

    width: 100%;

    max-width: 100%;

    min-width: 0;
}


html[dir="rtl"] .form-field {
    direction: rtl;

    text-align: right;

    width: 100%;

    max-width: 100%;

    min-width: 0;
}


html[dir="rtl"] .form-field label {
    display: block;

    width: 100%;

    margin-bottom: 9px;

    text-align: right;
}


html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea {
    width: 100%;

    max-width: 100%;

    min-width: 0;

    box-sizing: border-box;
}


html[dir="rtl"] select {
    direction: rtl;

    text-align: right;
}


html[dir="rtl"] textarea {
    direction: rtl;

    text-align: right;

    resize: vertical;
}



/* ---------------------------------------------------------
   FORM SECTION HEADINGS
--------------------------------------------------------- */

html[dir="rtl"] .form-section-heading {
    display: flex;

    flex-direction: row;

    direction: rtl;

    align-items: flex-start;

    gap: 14px;

    width: 100%;

    max-width: 100%;
}


html[dir="rtl"] .form-section-heading > span {
    flex: 0 0 auto;
}


html[dir="rtl"] .form-section-heading > div {
    flex: 1 1 auto;

    min-width: 0;
}


html[dir="rtl"] .form-section-heading h3,
html[dir="rtl"] .form-section-heading p {
    text-align: right;

    width: 100%;
}



/* ---------------------------------------------------------
   CONSENT CHECKBOX
   Fixes the long text being squeezed down the left edge
--------------------------------------------------------- */

html[dir="rtl"] .form-consent {
    display: flex;

    flex-direction: row;

    direction: rtl;

    align-items: flex-start;

    gap: 12px;

    width: 100%;

    max-width: 100%;

    min-width: 0;
}


html[dir="rtl"] .form-consent input[type="checkbox"] {
    flex: 0 0 18px;

    width: 18px !important;

    height: 18px;

    margin: 5px 0 0;

    padding: 0;
}


html[dir="rtl"] .form-consent span {
    display: block;

    flex: 1 1 auto;

    width: auto;

    min-width: 0;

    max-width: 100%;

    white-space: normal;

    overflow-wrap: break-word;

    word-break: normal;

    line-height: 1.8;

    text-align: right;
}



/* ---------------------------------------------------------
   TURNSTILE
--------------------------------------------------------- */

html[dir="rtl"] .cf-turnstile {
    direction: ltr;

    width: 100%;

    max-width: 100%;

    overflow: hidden;
}


html[dir="rtl"] .cf-turnstile iframe {
    max-width: 100% !important;
}



/* ---------------------------------------------------------
   ARABIC FOOTER
--------------------------------------------------------- */

html[dir="rtl"] .footer,
html[dir="rtl"] .footer-grid {
    direction: rtl;

    text-align: right;
}


html[dir="rtl"] .footer-grid > div {
    width: 100%;

    max-width: 100%;
}


html[dir="rtl"] .footer-company h3 {
    direction: ltr;

    unicode-bidi: isolate;

    text-align: right;

    white-space: normal;

    overflow-wrap: break-word;
}


html[dir="rtl"] .footer-company p,
html[dir="rtl"] .footer h4,
html[dir="rtl"] .footer a {
    max-width: 100%;
}


html[dir="rtl"] .footer-licence {
    line-height: 1.8;
}



/* =========================================================
   TABLET + MOBILE
========================================================= */

@media (max-width: 768px) {


    /* -----------------------------------------------------
       WHOLE PAGE
    ----------------------------------------------------- */

    html[dir="rtl"],
    html[dir="rtl"] body {
        width: 100%;

        max-width: 100%;

        margin: 0;

        overflow-x: clip;
    }


    html[dir="rtl"] .site-header,
    html[dir="rtl"] main,
    html[dir="rtl"] .footer {
        width: 100%;

        max-width: 100%;

        margin: 0;
    }



    /* -----------------------------------------------------
       CONTAINERS
    ----------------------------------------------------- */

    html[dir="rtl"] .container {
        width: 100%;

        max-width: 100%;

        min-width: 0;

        padding-left: 20px;

        padding-right: 20px;

        box-sizing: border-box;
    }



    /* -----------------------------------------------------
       HERO
    ----------------------------------------------------- */

    html[dir="rtl"] .hero-text,
    html[dir="rtl"] .inner-hero-content {
        width: 100%;

        max-width: 100%;

        min-width: 0;

        text-align: right;
    }


    html[dir="rtl"] .hero h1 {
        font-size: clamp(
            2.15rem,
            10vw,
            3.1rem
        );

        line-height: 1.28;
    }


    html[dir="rtl"] .inner-hero h1 {
        font-size: clamp(
            2rem,
            9vw,
            2.8rem
        );

        line-height: 1.3;
    }


    html[dir="rtl"] .hero-description {
        line-height: 1.95;
    }



    /* -----------------------------------------------------
       RECRUITMENT LAYOUT
    ----------------------------------------------------- */

    html[dir="rtl"] .recruitment-layout {
        display: block;

        width: 100%;

        max-width: 100%;

        min-width: 0;

        overflow: visible;
    }


    html[dir="rtl"] .recruitment-form-wrapper,
    html[dir="rtl"] .recruitment-sidebar {
        display: block;

        width: 100%;

        max-width: 100%;

        min-width: 0;

        margin-left: 0;

        margin-right: 0;
    }



    /* -----------------------------------------------------
       FORM GRID
    ----------------------------------------------------- */

    html[dir="rtl"] .form-grid {
        display: grid;

        grid-template-columns:
            minmax(0, 1fr) !important;

        width: 100%;

        max-width: 100%;

        min-width: 0;
    }


    html[dir="rtl"] .form-field-full {
        grid-column: auto !important;
    }



    /* -----------------------------------------------------
       FORM SECTIONS
    ----------------------------------------------------- */

    html[dir="rtl"] .form-section {
        width: 100%;

        max-width: 100%;

        min-width: 0;

        padding-left: 22px;

        padding-right: 22px;

        box-sizing: border-box;
    }


    html[dir="rtl"] .form-section-heading {
        margin-bottom: 28px;
    }



    /* -----------------------------------------------------
       FORM FIELDS
    ----------------------------------------------------- */

    html[dir="rtl"] .form-field {
        width: 100%;

        max-width: 100%;

        min-width: 0;
    }


    html[dir="rtl"] input,
    html[dir="rtl"] select,
    html[dir="rtl"] textarea {
        display: block;

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        box-sizing: border-box;
    }



    /* -----------------------------------------------------
       CONSENT
    ----------------------------------------------------- */

    html[dir="rtl"] .form-consent {
        margin-top: 22px;

        margin-bottom: 24px;
    }


    html[dir="rtl"] .form-consent span {
        font-size: 0.9rem;

        line-height: 1.8;
    }



    /* -----------------------------------------------------
       SUBMIT BUTTON
    ----------------------------------------------------- */

    html[dir="rtl"] .recruitment-submit {
        width: 100%;

        max-width: 100%;

        display: flex;

        align-items: center;

        justify-content: center;

        text-align: center;
    }



    /* -----------------------------------------------------
       SIDEBAR
    ----------------------------------------------------- */

    html[dir="rtl"] .recruitment-sidebar {
        margin-top: 28px;
    }


    html[dir="rtl"] .recruitment-sidebar-card {
        width: 100%;

        max-width: 100%;

        min-width: 0;

        box-sizing: border-box;
    }



    /* -----------------------------------------------------
       FOOTER
    ----------------------------------------------------- */

    html[dir="rtl"] .footer-grid {
        width: 100%;

        max-width: 100%;

        min-width: 0;

        gap: 34px;

        text-align: right;
    }


    html[dir="rtl"] .footer-company h3 {
        font-size: 1.2rem;

        line-height: 1.4;
    }

}



/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 480px) {


    html[dir="rtl"] .container {
        padding-left: 16px;

        padding-right: 16px;
    }


    html[dir="rtl"] .form-section {
        padding-left: 18px;

        padding-right: 18px;
    }


    html[dir="rtl"] .form-section-heading {
        gap: 11px;
    }


    html[dir="rtl"] .hero h1 {
        font-size: clamp(
            2rem,
            10vw,
            2.65rem
        );
    }


    html[dir="rtl"] .form-consent span {
        font-size: 0.86rem;
    }


    html[dir="rtl"] .footer-company h3 {
        font-size: 1.08rem;
    }

}