/* ═══════════════════════════════════════════════════════════
   Whitefield — Arabic (AR) RTL Stylesheet
   Loaded ONLY when app locale = 'ar'  |  Zero impact on EN / FR
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Base font & direction ── */
html[lang="ar"],
html[lang="ar"] body {
    font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif !important;
    direction: rtl;
}

/* ── 2. Global typography ── */

/* Headings → Cairo (modern, bold, law-firm feel) */
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6 {
    font-family: 'Cairo', sans-serif;
    direction: rtl;
    text-align: right;
}

/* ── Arabic heading scale ──────────────────────────────────────
   Arabic characters are optically larger than Latin at the same
   CSS size. These values keep the visual weight matching EN/FR
   while creating a clear H2 → H3 → H4 → body hierarchy.
   Applied site-wide — consistent across every Arabic page.
   ────────────────────────────────────────────────────────────── */
html[lang="ar"] h2 {
    font-size: 1.7rem !important;
    font-weight: 700;
    line-height: 1.5;
}

html[lang="ar"] h3 {
    font-size: 1.35rem !important;
    font-weight: 600;
    line-height: 1.5;
}

html[lang="ar"] h4 {
    font-size: 1.1rem !important;
    font-weight: 600;
    line-height: 1.5;
}

/* Page banner H1 keeps its own sizing set separately in master.blade.php */

/* Body text → Noto Naskh Arabic (traditional Naskh, optimised for readability) */
html[lang="ar"] p,
html[lang="ar"] li,
html[lang="ar"] td,
html[lang="ar"] th,
html[lang="ar"] label,
html[lang="ar"] .entry-content,
html[lang="ar"] .entry-content p,
html[lang="ar"] .entry-content li {
    font-family: 'Noto Naskh Arabic', serif;
    font-size: 1.05rem;
    line-height: 1.9;
    text-align: justify !important;
    text-justify: inter-word;
    direction: rtl;
}

/* Links & spans follow their parent (heading = Cairo, body = Naskh) */
html[lang="ar"] a,
html[lang="ar"] span {
    font-family: inherit;
}

/* Nav & UI elements stay Cairo */
html[lang="ar"] .menuzord-menu li a,
html[lang="ar"] .megamenu li a,
html[lang="ar"] .wf-menu-col-title,
html[lang="ar"] .dropdown-item,
html[lang="ar"] .btn,
html[lang="ar"] .widget-title,
html[lang="ar"] .footer h4,
html[lang="ar"] .footer li a,
html[lang="ar"] .breadcrumbs,
html[lang="ar"] .page-title h1,
html[lang="ar"] .icon-box-content .title {
    font-family: 'Cairo', sans-serif;
}

/* ── 3. Bootstrap grid & flex RTL ── */
html[lang="ar"] .row {
    flex-direction: row-reverse;
}

html[lang="ar"] .text-left     { text-align: right !important; }
html[lang="ar"] .text-right    { text-align: left  !important; }
html[lang="ar"] .text-sm-start { text-align: right !important; }
html[lang="ar"] .float-left    { float: right !important; }
html[lang="ar"] .float-right   { float: left  !important; }
html[lang="ar"] .ms-auto       { margin-right: auto !important; margin-left: 0    !important; }
html[lang="ar"] .me-auto       { margin-left:  auto !important; margin-right: 0   !important; }
html[lang="ar"] .ml-auto       { margin-right: auto !important; margin-left: 0    !important; }
html[lang="ar"] .mr-auto       { margin-left:  auto !important; margin-right: 0   !important; }
html[lang="ar"] .ps-0          { padding-right: 0   !important; }
html[lang="ar"] .pe-0          { padding-left:  0   !important; }

/* ── 4. Navigation menu ── */
html[lang="ar"] #main-nav > li > a,
html[lang="ar"] .menuzord-menu > li > a {
    font-family: 'Cairo', sans-serif;
}

html[lang="ar"] .megamenu,
html[lang="ar"] .megamenu .megamenu-row {
    direction: rtl;
}

html[lang="ar"] .megamenu ul,
html[lang="ar"] .megamenu li,
html[lang="ar"] .megamenu li a,
html[lang="ar"] .wf-menu-col-title {
    font-family: 'Cairo', sans-serif;
    text-align: right;
    direction: rtl;
}

/* About dropdown */
html[lang="ar"] ul.dropdown {
    direction: rtl;
    text-align: right;
}

html[lang="ar"] ul.dropdown li a {
    font-family: 'Cairo', sans-serif;
}

/* Megamenu active item: flip gold bar indicator from left to right */
html[lang="ar"] .megamenu li.wf-submenu-active > a,
html[lang="ar"] .menuzord-menu .dropdown li.wf-submenu-active > a {
    padding-left: 0   !important;
    padding-right: 18px !important;
}

html[lang="ar"] .megamenu li.wf-submenu-active > a::before,
html[lang="ar"] .menuzord-menu .dropdown li.wf-submenu-active > a::before {
    left: auto;
    right: 6px;
}

/* Language button: absolutely position the Bootstrap caret on the RIGHT.
   Bidi/direction overrides don't reliably move ::after in an RTL document,
   so we pull it out of flow and pin it to the right edge instead. */
html[lang="ar"] .btn_lang {
    position: relative  !important;
    padding-left: 4px   !important;
    padding-right: 20px !important;
}

html[lang="ar"] .btn_lang::after {
    position: absolute !important;
    right: 5px         !important;
    left: auto         !important;
    top: 50%           !important;
    transform: translateY(-50%) !important;
    margin: 0          !important;
}

/* Language switcher dropdown — anchor to right edge; disable Popper.js transform */
html[lang="ar"] .lang-switcher .dropdown-menu {
    left: auto       !important;
    right: 0         !important;
    top: 100%        !important;
    transform: none  !important;
    text-align: right;
    direction: rtl;
}

/* Keep flag always on the LEFT of every language name (flag + text = LTR order) */
html[lang="ar"] .lang-switcher .dropdown-menu .dropdown-item {
    direction: ltr;
    text-align: left;
}

/* ── 5. Page title banner ── */
html[lang="ar"] .page-title .col-md-12,
html[lang="ar"] .page-title .section-content {
    text-align: right !important;
}

html[lang="ar"] .page-title h1,
html[lang="ar"] .page-title .title {
    text-align: right !important;
}

/* ── 6. Hero slider text ── */
html[lang="ar"] .wf-rs-h1 {
    left: auto;
    right: 45px;
    text-align: right;
}

html[lang="ar"] .wf-hero-content {
    text-align: right;
}

/* ── 7. Footer ── */
html[lang="ar"] .footer,
html[lang="ar"] .footer-widget-area {
    direction: rtl;
}

html[lang="ar"] .footer .widget-title,
html[lang="ar"] .footer h4 {
    text-align: right;
    font-family: 'Cairo', sans-serif;
}

html[lang="ar"] .footer ul {
    text-align: right;
    padding-right: 0;
    padding-left: 0;
}

html[lang="ar"] .footer li a,
html[lang="ar"] .footer .description a,
html[lang="ar"] .footer .description span {
    font-family: 'Cairo', sans-serif;
}

/* Chevrons: move to right side and flip to face left for RTL */
html[lang="ar"] .widget.widget_nav_menu ul > li {
    padding-left: 0;
    padding-right: 25px;
}

html[lang="ar"] .widget.widget_nav_menu ul > li::before {
    content: "\f104"; /* fa-angle-left */
    left: auto;
    right: 0;
}

/* Footer H4 widget-title underlines: move ::before/::after bars to the right */
html[lang="ar"] .footer .widget-title.widget-title-line-bottom::before,
html[lang="ar"] .footer .widget-title.widget-title-line-bottom::after {
    left: auto;
    right: 0;
}

/* Address block: force LTR text order so "167 bis, Avenue Victor Hugo"
   renders correctly, then align the block to the right margin */
html[lang="ar"] .footer .description a span {
    direction: ltr;
    unicode-bidi: embed;
    text-align: right;
}

/* Phone link: isolate bidi so parentheses are not mirrored */
html[lang="ar"] .footer .description a[href^="tel"] {
    direction: ltr;
    unicode-bidi: embed;
    display: block;
    text-align: right;
}

/* Copyright row: expand col to full width and push text to the right */
html[lang="ar"] .footer-bottom .col-sm-6 {
    flex: 0 0 100%   !important;
    max-width: 100%  !important;
    text-align: right !important;
}

html[lang="ar"] .footer-bottom .footer-paragraph {
    text-align: right !important;
}

html[lang="ar"] .footer-bottom .text-sm-start {
    text-align: right !important;
}

/* ── 8. Article / blog content ── */
html[lang="ar"] .entry-content h2,
html[lang="ar"] .entry-content h3 {
    font-family: 'Cairo', sans-serif;
    direction: rtl;
    text-align: right;
}

html[lang="ar"] .entry-content ul,
html[lang="ar"] .entry-content ol {
    direction: rtl;
    text-align: right;
    padding-right: 20px;
    padding-left: 0;
}

html[lang="ar"] .blog-posts.single-post {
    direction: rtl;
}

/* ── 9. Lists ── */
html[lang="ar"] ul,
html[lang="ar"] ol {
    padding-right: 20px;
    padding-left:  0;
}

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

/* ── 10. Gold dot marker (wf-fundtype headings) ── */
html[lang="ar"] h3.wf-fundtype {
    padding-left: 0;
    padding-right: 1.3em;
}

html[lang="ar"] h3.wf-fundtype::before {
    left:  auto;
    right: 0;
}

/* ── 11. Article share bar ── */
html[lang="ar"] .article-share {
    direction: rtl;
    flex-direction: row-reverse;
}

html[lang="ar"] .share-label {
    margin-right: 0;
    margin-left: 8px;
}

/* ── 12. Accordion (homepage "Why Choose Whitefield") ── */
html[lang="ar"] #accordion900 .accordion-button,
html[lang="ar"] #accordion900 .accordion-body,
html[lang="ar"] #accordion900 .accordion-body p {
    font-family: 'Cairo', sans-serif;
    text-align: right;
    direction: rtl;
}

/* ── 13. Forms ── */
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select,
html[lang="ar"] .form-control {
    direction: rtl;
    text-align: right;
}

/* ── 14. Icon box titles (home services grid) ── */
html[lang="ar"] .icon-box-content .title {
    font-family: 'Cairo', sans-serif;
}

/* ── 15. Breadcrumbs ── */
html[lang="ar"] .page-title .breadcrumbs,
html[lang="ar"] .page-title .breadcrumbs a,
html[lang="ar"] .page-title .breadcrumbs span {
    direction: rtl;
    padding-right: 2px;
    padding-left: 0;
}

/* ── 16. Hero title & theme font-class overrides ── */

/* The theme assigns Poppins/Raleway via .font-current-theme1/.font-current-theme2
   Override both to Cairo for all Arabic text */
html[lang="ar"] .font-current-theme1,
html[lang="ar"] .font-current-theme2 {
    font-family: 'Cairo', sans-serif !important;
}

/* Hero H1 — Cairo, same visual weight as EN but slightly tighter size
   because the Arabic text is longer and wraps gracefully */
html[lang="ar"] .wf-hero-title {
    font-family: 'Cairo', sans-serif !important;
    font-size: 56px;
    font-weight: 700 !important;
    line-height: 1.25;
}

@media (min-width: 1600px) {
    html[lang="ar"] .wf-hero-title { font-size: 76px; }
}

@media (min-width: 2560px) {
    html[lang="ar"] .wf-hero-title { font-size: 100px; }
}

@media (min-width: 768px) and (max-width: 1199px) {
    html[lang="ar"] .wf-hero-title { font-size: 38px; }
}

@media (max-width: 767px) {
    html[lang="ar"] .wf-hero-title { font-size: 28px; }
}

/* "Why Choose Us?" label — h6 with text-uppercase has no effect on Arabic, harmless */
html[lang="ar"] h6.font-current-theme1 {
    font-family: 'Cairo', sans-serif !important;
    text-transform: none; /* uppercase irrelevant for Arabic script */
}

/* Accordion "Why Choose" buttons — Cairo at same 1rem as EN Poppins */
html[lang="ar"] #accordion900 .accordion-button {
    font-family: 'Cairo', sans-serif !important;
    font-size: 1rem;
}

/* Home intro paragraph — consistent with site-wide AR body text */
html[lang="ar"] section.home_text_1 p {
    font-family: 'Noto Naskh Arabic', serif;
    font-size: 1.05rem;
    line-height: 1.9;
}

/* Service box h4 titles (img-iconbox) — Cairo, same weight as EN */
html[lang="ar"] .img-iconbox .icon-box-content .title,
html[lang="ar"] .img-iconbox h4.title {
    font-family: 'Cairo', sans-serif !important;
    font-size: 1rem;
}

/* ── 17. Analysis / counter section ── */
html[lang="ar"] .funfact-style2 .funfact-content {
    direction: rtl;
}

/* ── 17. Contact form section ── */
html[lang="ar"] .form-check {
    padding-right: 1.5em;
    padding-left: 0;
}

html[lang="ar"] .form-check-input {
    margin-right: -1.5em;
    margin-left: 0;
    float: right;
}

/* ── 18. Mobile overrides ── */
@media (max-width: 767px) {
    html[lang="ar"] .wf-rs-h1 {
        right: 0;
        left: 0;
        text-align: center;
    }
}

@media (max-width: 1199px) {
    html[lang="ar"] .menuzord-responsive .menuzord-menu > li > .megamenu,
    html[lang="ar"] .menuzord-responsive .menuzord-menu > li > .megamenu li {
        direction: rtl;
        text-align: right;
    }
    html[lang="ar"] .menuzord-responsive .menuzord-menu > li > .megamenu li a {
        font-family: 'Cairo', sans-serif;
    }
}

/* ── LTR override: English content displayed in AR locale ─────────────
   Pages with dir="ltr" on their container (legal-notice, cookie-management,
   privacy-policy, terms-conditions) must render exactly like the EN version.
   These rules override the RTL rules above for any [dir="ltr"] container.  */
html[lang="ar"] [dir="ltr"],
html[lang="ar"] [dir="ltr"] h1,
html[lang="ar"] [dir="ltr"] h2,
html[lang="ar"] [dir="ltr"] h3,
html[lang="ar"] [dir="ltr"] h4,
html[lang="ar"] [dir="ltr"] h5,
html[lang="ar"] [dir="ltr"] h6,
html[lang="ar"] [dir="ltr"] p,
html[lang="ar"] [dir="ltr"] li,
html[lang="ar"] [dir="ltr"] td,
html[lang="ar"] [dir="ltr"] th,
html[lang="ar"] [dir="ltr"] label,
html[lang="ar"] [dir="ltr"] span,
html[lang="ar"] [dir="ltr"] strong,
html[lang="ar"] [dir="ltr"] a,
html[lang="ar"] [dir="ltr"] input,
html[lang="ar"] [dir="ltr"] select,
html[lang="ar"] [dir="ltr"] textarea {
    direction: ltr !important;
    text-align: left !important;
}
html[lang="ar"] [dir="ltr"] .row {
    flex-direction: row !important;
}