/* ========================================================================== HCP Chamber Theme — LTR Overrides Loaded AFTER main.css, only on English pages (body.ghorfa-ltr, html[dir=ltr]). Mirrors every physical left/right rule from main.css that assumes RTL. ========================================================================== */ /* ---------- Base ---------- */ /* The base stylesheet forces `direction: rtl` on , which overrides the html[dir=ltr] attribute and keeps the whole page flowing right-to-left. Flip it here so flex rows, list markers, and logical properties mirror natively for English; the rules below only patch PHYSICAL left/right values that `direction` does not affect. */ body.ghorfa-ltr { direction: ltr; text-align: left; } /* ---------- Skip link ---------- */ body.ghorfa-ltr .skip-link { right: auto; left: 1rem; } /* ---------- Header / nav dropdown ---------- */ body.ghorfa-ltr .primary-menu .sub-menu { right: auto; left: 0; } /* Mobile off-canvas nav panel is full-width (inset left:0 right:0), so its translateX slide is direction-agnostic and needs no flip. Only the sub-menu's indent padding is a physical left/right value that must mirror. */ @media (max-width: 1100px) { body.ghorfa-ltr .primary-menu .sub-menu { padding: 0 1rem 0 0; } } /* ---------- Hero ---------- */ body.ghorfa-ltr .hero__badge { padding: .45rem .85rem .45rem 1rem; } body.ghorfa-ltr .hero__image { inset: 6% 0 6% 12%; border-radius: 28px 28px 90px 28px; } body.ghorfa-ltr .hero__shape--mint { inset: 0 auto auto 0; border-radius: 28px 90px 28px 28px; } body.ghorfa-ltr .hero__shape--ring { inset: auto 4% 8% auto; } body.ghorfa-ltr .hero__stat--top { right: auto; left: 0; } body.ghorfa-ltr .hero__stat--bottom { left: auto; right: -2%; } body.ghorfa-ltr .hero__stat--mid { right: auto; left: -4%; } /* ---------- Stats ---------- */ body.ghorfa-ltr .stat { border-left: none; border-right: 1px solid var(--c-border); } body.ghorfa-ltr .stat:first-child { border-right: none; } @media (max-width: 720px) { body.ghorfa-ltr .stat:nth-child(odd) { border-left: none; border-right: 1px solid var(--c-border); } body.ghorfa-ltr .stat:nth-child(2n) { border-right: none; } } /* ---------- Service card ---------- */ body.ghorfa-ltr .service-card__num { left: auto; right: 0; } /* ---------- Vision/Mission/Values card accent border ---------- */ body.ghorfa-ltr .vmv-card::before { right: auto; left: 0; } /* ---------- Objectives list ---------- */ body.ghorfa-ltr .objective-item:hover { transform: translateX(4px); } /* ---------- Page hero decorative blobs ---------- */ body.ghorfa-ltr .page-hero__bg .blob-1 { right: auto; left: -8%; } body.ghorfa-ltr .page-hero__bg .blob-2 { left: auto; right: -5%; } /* ---------- Chairman block ---------- */ body.ghorfa-ltr .chairman__quote { padding-right: 0; padding-left: 2rem; } body.ghorfa-ltr .chairman__quote::before { right: auto; left: 0; } @media (max-width: 720px) { body.ghorfa-ltr .chairman__quote { padding-left: 0; } } /* ---------- Single training page ---------- */ body.ghorfa-ltr .course-strategic { border-right: none; border-left: 4px solid var(--c-primary); } /* ---------- Footer ---------- */ body.ghorfa-ltr .footer-menu a:hover { padding-right: 0; padding-left: .25rem; } /* ---------- Membership steps ---------- */ body.ghorfa-ltr .step-item { padding-right: 1.5rem; padding-left: 3.5rem; } body.ghorfa-ltr .step-item::before { right: auto; left: 1rem; } /* ---------- Prose blockquote ---------- */ body.ghorfa-ltr .prose blockquote { border-right: none; border-left: 4px solid var(--c-mint-500); } /* ---------- Contact info decorative glow ---------- */ body.ghorfa-ltr .contact-info::before { inset: -50% auto auto -50%; } /* Directional CTA arrows: the theme uses arrow-left as the RTL "forward" cue. Mirror them so they point right (forward) in LTR. */ body.ghorfa-ltr .icon-arrow-left { transform: scaleX(-1); } body.ghorfa-ltr .icon-arrow-right { transform: scaleX(-1); } /* ---------- Header nav fit (English labels are wider than Arabic) ---------- */ @media (min-width: 1101px) { /* Override main.css's >=1280 padding growth; keep the menu tight so 10 English items + CTA never collide. */ body.ghorfa-ltr .primary-menu a { padding: .5rem .48rem; font-size: .8rem; } body.ghorfa-ltr .lang-switcher--desktop { margin-inline-end: .15rem; } body.ghorfa-ltr .site-header__inner { gap: .6rem; } }