/* RTL overrides for the Arabic version of the Zeid Alsharif site.
   Loaded after style-v3-araamis.css. Draft: visually spot-checked on a
   subset of pages, not pixel-audited against every breakpoint. */

html {
    direction: rtl;
}

body {
    direction: rtl;
    text-align: right;
}

/* Arabic typeface. Not specified in the brand guide; Tajawal chosen as a
   clean, professional pairing with the Latin headings. Flag for approval. */
body {
    font-family: 'Tajawal', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* style-v3-araamis.css sets h1-h4 to a Latin-only stack (Helvetica Neue,
   Inter, Segoe UI...) with no Arabic glyphs, so the browser silently falls
   back to its own generic font for every heading. Make headings inherit
   the page's Tajawal stack instead. */
h1, h2, h3, h4 {
    font-family: inherit;
}

/* Language switch: a small pill in the header nav, after the booking CTA,
   linking each page to its own English version. */
.nav-item.lang-switch {
    border: 1px solid #C3985E;
    border-radius: 999px;
    padding: 6px 16px !important;
    font-size: 13px;
    letter-spacing: 0.5px;
}

.nav-item.lang-switch:hover {
    background: #F7F4EE;
}

/* Re-point every left-aligned text block to the right, mirroring the
   English version's left alignment (see: text selectors in style-v3-araamis.css) */
.hero-content,
.section-v3.hero-section,
.section-resonance h2,
.resonance-content,
.section-intro,
.services-intro,
.section-philosophy h2,
.philosophy-content,
.philosophy-cta,
#experience-perspective .section-header,
#experience-perspective .section-header h2,
.experience-intro,
.experience-cta,
.section-header,
.founder-card,
.hero-cta,
.step-description {
    text-align: right;
}

.footer-bottom p:first-child {
    text-align: left;
}

/* Header: with dir="rtl" set on <html>, a default (row) flex container
   already flows right to left on its own — the logo (first in the HTML)
   lands on the right, and the nav items keep their HTML order reading
   from the right. Adding flex-direction:row-reverse on top of that flips
   it a second time and puts the logo back on the left, so it's
   deliberately left out here. */

/* Footer grid: direction:rtl on the body already reverses column order;
   align the column text to the right. */
.footer-column,
.footer-column-about {
    text-align: right;
}

/* Arrow / chevron markers (fact-list, area-item) point into the text in
   LTR; mirror them so they still point toward the text in RTL. */
.fact-chev,
.area-arrow,
.area-item svg {
    transform: scaleX(-1);
}

/* Booking page timeline connector: the line and node sit to the right of
   each step's text in LTR; mirror the line position for RTL. */
.bm-step {
    text-align: right;
    padding-right: 0;
    padding-left: 8px;
}

.bm-step::after {
    left: auto;
    right: 44px;
}

@media (max-width: 900px) {
    .bm-step {
        padding-left: 64px;
        padding-right: 0;
    }
    .bm-step::after {
        left: auto;
        right: 21px;
    }
    .bm-node {
        left: auto;
        right: 0;
    }
}

/* Form labels and inputs */
.form-group label {
    text-align: right;
}

/* Hero banners: the photo sits in the right half with a fade on desktop
   (see visual-elements.css); mirror it to the left half, and move the
   copy to the right so it reads next to the fade edge, same as the LTR
   version keeps copy on the left next to its fade edge. */
.hero-content {
    margin-right: 0;
    margin-left: auto;
}

@media (min-width: 769px) {
    .gn-visual--bg-light .gn-visual__media {
        left: 0;
        right: 50%;
        -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 30%);
        mask-image: linear-gradient(270deg, transparent 0, #000 30%);
    }
}

/* Homepage "A Different Kind of Advisory Relationship" section: its three
   intro lines use a CSS-generated icon pinned to the left edge, with the
   text padded away from the left to clear it. Mirror both to the right. */
.philosophy-content p {
    padding-left: 0;
    padding-right: 40px;
}

.philosophy-content p::before {
    left: auto;
    right: 0;
}