/* RTL overrides for ari-v2
   direction: rtl is already cascaded from <html dir="rtl"> added by WPML / language_attributes().
   We do NOT re-set it on body to avoid layout drift; instead we only fix cases that need
   physical overrides on top of what the inherited direction already provides. */

/* RTL scroll origin fix:
   base.css now sets html { overflow-x: clip } and body { overflow-x: clip }
   globally for all locales, which eliminates the BFC scroll-container that
   caused RTL scroll-origin initialisation at the far-right edge.
   The body.rtl rule below is kept as a WPML safety net for edge cases where
   the html[dir] attribute lags behind the body class assignment. */

[dir="rtl"] body,
body.rtl {
  overflow-x: clip;
}

/* ── Directional icons ──────────────────────────────────────────────────────
   Arrows and chevrons that point along the reading direction (next/prev,
   "see all", "read more", back links, the diagonal "go to" arrow) carry
   class="ari-icon-dir" in the markup and are mirrored here.

   Uses the individual `scale` property, not `transform`, so it composes with
   any `transform` the component sets (hover nudges like translateX(3px),
   hover scale(1.2)): the icon stays mirrored on hover and the nudge moves
   toward the reading direction. A `transform: scaleX(-1)` flip would be
   overwritten by those hover rules.

   Do not tag: media controls (play/skip), external-link boxes, up/down
   chevrons (dropdowns, accordions), close/search icons. The selector-based
   flips below also use `scale`, so an icon matched by both is not flipped
   twice. */
[dir="rtl"] .ari-icon-dir,
body.rtl    .ari-icon-dir {
  scale: -1 1;
}
/* Text-glyph arrows (e.g. &larr;) need a box for the scale to apply. */
[dir="rtl"] span.ari-icon-dir,
body.rtl    span.ari-icon-dir {
  display: inline-block;
}

/* Drawer RTL: components.css already handles via [dir="rtl"] and body.rtl selectors.
   We only ensure the open-state transform is explicit here as a safety net. */
.primary-menu-drawer.is-open { transform: translateX(0); }

/* Flip desktop dropdowns */
.primary-nav .sub-menu { left: auto; right: 50%; transform: translateX(50%) translateY(6px); }
.primary-nav li:hover > .sub-menu, .primary-nav li:focus-within > .sub-menu { transform: translateX(50%) translateY(0); }

/* Flip newsletter arrow */
.header-newsletter-cta svg, .header-newsletter-cta--full svg { scale: -1 1; }

/* Newsletter float stays top-right (inset-inline-end): logical props handle it */
.hero-newsletter-float { inset-inline-end: 1.25rem; }

/* Flip sub-menu indent */
.drawer-nav .sub-menu { padding: 0.25rem 1rem 0 0; }

/* ── Drawer submenu toggle: RTL position fix ────────────────────────────
   In RTL flex-direction:row, <a flex:1> fills from the RIGHT and the toggle
   is pushed to the far LEFT edge, creating a large gap from the right-aligned
   text.  order:-1 makes the toggle appear FIRST in RTL flex order = rightmost
   position, placing it directly beside the right-aligned link text.           */
[dir="rtl"] .drawer-submenu-toggle,
body.rtl .drawer-submenu-toggle {
  order: -1;
  margin-inline-start: 0;      /* clear the margin on the right (inline-start) side */
  margin-inline-end: 0.25rem;  /* small gap between toggle and right wall of drawer */
}
/* ── Homepage RTL ───────────────────────────────────────── */

/* Podcast bar arrow flips */
.podcast-bar__all svg { scale: -1 1; }

/* See-all arrow flips */
.see-all-link svg { scale: -1 1; }

/* Event card body: date box appears on the right */
.event-card__body { flex-direction: row-reverse; }

/* Podcast listen arrow */
.podcast-card__listen svg { scale: -1 1; }

/* ── Press Room ─────────────────────────────────────────── */
/* "View All" / "Read the article" / CTA button diagonal arrows */
.press-room__view-all svg,
.media-cov-card__link svg,
.press-cta__btn svg { scale: -1 1; }
/* Gallery prev/next chevrons: flex order already reverses via inline-direction, flip the glyphs too */
.press-gallery__arrow svg { scale: -1 1; }

/* Video small meta */
.video-small { text-align: right; }

/* Newsletter card text */
.newsletter-card { text-align: right; }
.newsletter-form__btn:after { display: none; }

/* ── Footer RTL ─────────────────────────────────────────── */

/* The CSS grid in .footer-grid reorders columns correctly from inherited direction: rtl.
   Only the arrow SVG needs a physical flip: flex/grid ordering is automatic. */
.footer-newsletter-btn svg { scale: -1 1; }

/* Footer col titles: "Listen to Jalsa Podcast on:" and "Follow us on social
   media:" (footer.php) have no Arabic string yet, so the English fallback
   renders as an LTR run in this RTL block and the trailing ":" lands before
   the text. unicode-bidi: plaintext resolves each title's direction from its
   own first strong character, but also ties "start" alignment to that
   direction, which would left-align the English fallback. The physical
   text-align: right keeps the title anchored right whichever direction
   plaintext detects. */
.footer-col__title {
  unicode-bidi: plaintext;
  text-align: right;
}

/* Contact items (email, phone, address) have dir="ltr" in the HTML because
   their content is Latin/numeric (unicode-bidi: isolate protects that), but
   text-align: left would pin the whole row to the left edge, out of step with
   the other right-aligned footer elements. text-align: right keeps each row's
   internal order intact while hugging the right edge. */
.footer-contact-list__item[dir="ltr"] {
  display: block;
  unicode-bidi: isolate;
  text-align: right;
}
/* Hero slide: flex alignment already follows the inherited direction, so
   flex-start is the RIGHT edge in RTL (flex-end would pin the badge, title
   and meta to the LEFT). Set explicitly so the LTR base can't drift. */
[dir="rtl"] .hero-slide__content,
body.rtl    .hero-slide__content { align-items: flex-start; text-align: start; }
.hero-slide__title   { max-width: 24ch; }

/* Hero arrows: components.css pins prev/next with physical left/right.
   In RTL "previous" belongs on the right and "next" on the left, with the
   chevrons and hover gradients mirrored to match. */
[dir="rtl"] .hero-arrow--prev,
body.rtl    .hero-arrow--prev { left: auto; right: 0; }
[dir="rtl"] .hero-arrow--next,
body.rtl    .hero-arrow--next { right: auto; left: 0; }
[dir="rtl"] .hero-arrow--prev:hover,
body.rtl    .hero-arrow--prev:hover {
  background: linear-gradient(to left, rgba(0,0,0,0.22) 0%, transparent 100%);
}
[dir="rtl"] .hero-arrow--next:hover,
body.rtl    .hero-arrow--next:hover {
  background: linear-gradient(to right, rgba(0,0,0,0.22) 0%, transparent 100%);
}
/* The chevrons themselves are mirrored by .ari-icon-dir (top of this file). */

/* Hero counter: the progress sweep grows from the reading start (right). */
[dir="rtl"] .hero-counter__fill,
body.rtl    .hero-counter__fill { transform-origin: right center; }

/* ── RTL mobile overrides ───────────────────────────────────────────────────
   Rules in this section must live here (after responsive.css in load order)
   so they can override @media-scoped rules from responsive.css without needing
   !important.  Each block mirrors its responsive.css counterpart.           */

/* ── Mobile header brand row ≤980px ─────────────────────────────────────────
   In RTL mobile the flex axis flows right → left.  .site-brand is at
   inline-start (physical right) and has flex-shrink:0 in components.css,
   while .header-actions (search / lang / hamburger) sits at inline-end
   (physical left).  An Arabic site name is often wide enough to leave
   .header-actions insufficient space, causing it to overflow off the left
   viewport edge where overflow-x:clip clips it, hiding the hamburger.
   Removing flex-shrink:0 from .site-brand lets the Arabic name compress
   (truncate with ellipsis) before any action button is pushed off-screen.   */
@media (max-width: 980px) {
  [dir="rtl"] .site-brand,
  body.rtl    .site-brand {
    flex-shrink: 1;
    min-width: 0;
  }
  [dir="rtl"] .site-brand__logo,
  body.rtl    .site-brand__logo {
    flex-shrink: 1;
    min-width: 0;
    object-fit: contain;
    object-position: right center;
  }
  /* Keep the hamburger at full size: it must never shrink away */
  [dir="rtl"] .header-menu-toggle,
  body.rtl    .header-menu-toggle {
    flex-shrink: 0;
  }
}

/* ── Jobs archive: row hover ≤640px ────────────────────────────────────────
   responsive.css:  .job-row:hover { padding-left: 0.25rem }  (LTR physical)
   RTL fix: shift on the inline-start side (= right in RTL)                 */
@media (max-width: 640px) {
  [dir="rtl"] .job-row:hover,
  body.rtl    .job-row:hover {
    padding-left: 0;
    padding-right: 0.25rem;
  }
}

/* ── Single Job: stacked meta items ≤640px ──────────────────────────────────
   responsive.css uses physical border-right / margin-right / padding.
   In RTL the divider must be on the LEFT (logical inline-end = right → no,
   we stack vertically so use border-bottom only, same as LTR).
   The physical margin-right / padding-right overrides are cleared so the
   logical equivalents from components.css take over.                        */
@media (max-width: 640px) {
  [dir="rtl"] .sjob-meta__item,
  body.rtl    .sjob-meta__item {
    border-right: none;         /* clear LTR physical rule */
    border-bottom: 1px solid var(--ari-light-grey);
    padding: 0 0 1.25rem;
    margin-right: 0;            /* clear LTR physical rule */
  }
  [dir="rtl"] .sjob-meta__item:last-child,
  body.rtl    .sjob-meta__item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
}

/* ── Search overlay: close button position ──────────────────────────────────
   components.css: position: fixed; right: 1.5rem  (LTR physical)
   RTL: button should be at top-LEFT (inline-end = left in RTL)             */
[dir="rtl"] .header-search-overlay__close,
body.rtl    .header-search-overlay__close {
  right: auto;
  left: 1.5rem;
}

/* ── Newsletter popup: close button position ─────────────────────────────────
   components.css: position: absolute; right: 0.9rem  (LTR physical)
   RTL: button should be at top-LEFT (inline-end = left in RTL)             */
[dir="rtl"] .newsletter-popup__close,
body.rtl    .newsletter-popup__close {
  right: auto;
  left: 0.9rem;
}

/* ── Search form: icon margin and submit margin ─────────────────────────────
   components.css uses margin-right on .search-live__icon and margin-left on
   .search-live__submit: these flip to the wrong side in RTL.              */
[dir="rtl"] .search-live__icon,
body.rtl    .search-live__icon {
  margin-right: 0;
  margin-left: 0.65rem;
}
[dir="rtl"] .search-live__submit,
body.rtl    .search-live__submit {
  margin-left: 0;
  margin-right: 0.75rem;
}

/* ── Search overlay: RTL mobile overflow fix ≤640px ───────────────────────
   responsive.css uses width:100vw for fixed overlays on mobile. In RTL mobile
   browsers, 100vw can include browser chrome/scrollbar width and create a
   physical-left overflow. Pin the overlay to the viewport edges instead. */
@media (max-width: 640px) {
  [dir="rtl"] .header-search-overlay[aria-hidden="true"],
  body.rtl    .header-search-overlay[aria-hidden="true"] {
    display: none;
  }

  [dir="rtl"] .header-search-overlay.is-open,
  body.rtl    .header-search-overlay.is-open {
    display: flex;
  }

  [dir="rtl"] .header-search-overlay,
  body.rtl    .header-search-overlay {
    left: 0;
    right: 0;
    inline-size: auto;
    width: auto;
    max-inline-size: 100%;
    max-width: 100%;
    min-inline-size: 0;
    overflow-x: hidden;
    contain: layout paint;
  }

  [dir="rtl"] .header-search-overlay__shell,
  body.rtl    .header-search-overlay__shell {
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
    margin-inline: 0;
    box-sizing: border-box;
  }

  [dir="rtl"] .search-live__form,
  [dir="rtl"] .search-live__bar,
  [dir="rtl"] .search-live__results,
  body.rtl    .search-live__form,
  body.rtl    .search-live__bar,
  body.rtl    .search-live__results {
    min-inline-size: 0;
    max-inline-size: 100%;
    box-sizing: border-box;
  }

  [dir="rtl"] .search-live__pills,
  body.rtl    .search-live__pills {
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
    box-sizing: border-box;
    overscroll-behavior-x: contain;
  }

  [dir="rtl"] .header-search-overlay__close,
  body.rtl    .header-search-overlay__close {
    left: max(0.75rem, env(safe-area-inset-left));
    right: auto;
  }
}

/* ── Hero audio bar: mobile clip-path mirror ≤640px ────────────────────────
   responsive.css applies a right-to-left diagonal cut on .hap-featured
   (clip-path: polygon(0% 0%, 100% 0%, calc(100% - 18px) 100%, 0% 100%)).
   In RTL the diagonal must cut from the LEFT: mirror it horizontally.      */
@media (max-width: 640px) {
  [dir="rtl"] .hap-featured,
  body.rtl    .hap-featured {
    /* Mirror: right edge is straight, left edge cuts inward */
    clip-path: polygon(18px 0%, 100% 0%, 100% 100%, 0% 100%);
    /* Reverse the padding so text clears the left diagonal instead of right */
    padding: 0.55rem 1rem 0.5rem 1.5rem;
  }
}

/* ── Homepage mobile carousels: RTL overflow containment ≤640px ───────────
   In RTL, off-screen snap slides can extend into the physical left side of the
   page if the scroll container is also part of the page's overflow geometry.
   Keep the sections/wrappers as the clipping viewport, while preserving the
   carousel's own horizontal scrolling. */
@media (max-width: 640px) {
  [dir="rtl"] #publications,
  [dir="rtl"] #events,
  [dir="rtl"] #podcasts,
  [dir="rtl"] #videos,
  body.rtl #publications,
  body.rtl #events,
  body.rtl #podcasts,
  body.rtl #videos {
    overflow-x: hidden;
    overflow-x: clip;
    max-width: 100vw;
  }

  [dir="rtl"] #publications .u-container,
  [dir="rtl"] #events .u-container,
  [dir="rtl"] #podcasts .u-container,
  [dir="rtl"] #videos .u-container,
  body.rtl #publications .u-container,
  body.rtl #events .u-container,
  body.rtl #podcasts .u-container,
  body.rtl #videos .u-container {
    min-width: 0;
    overflow-x: hidden;
    overflow-x: clip;
  }

  [dir="rtl"] #events .events-carousel-wrap,
  body.rtl #events .events-carousel-wrap {
    overflow: hidden;
    max-width: 100%;
    contain: paint;
  }

  [dir="rtl"] #publications .pub2-layout,
  [dir="rtl"] #events .events-grid,
  [dir="rtl"] #podcasts .pcast-grid,
  [dir="rtl"] #videos .videos-layout,
  body.rtl #publications .pub2-layout,
  body.rtl #events .events-grid,
  body.rtl #podcasts .pcast-grid,
  body.rtl #videos .videos-layout {
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
    box-sizing: border-box;
    contain: layout paint;
    direction: ltr;
  }

  [dir="rtl"] #publications .pub2-layout > .pub2-feat,
  [dir="rtl"] #publications .pub2-layout > .pub2-item,
  [dir="rtl"] #events .events-grid > .event-card,
  [dir="rtl"] #podcasts .pcast-grid > .pcast-card,
  [dir="rtl"] #videos .videos-layout > .video-featured,
  [dir="rtl"] #videos .videos-layout > .video-small,
  body.rtl #publications .pub2-layout > .pub2-feat,
  body.rtl #publications .pub2-layout > .pub2-item,
  body.rtl #events .events-grid > .event-card,
  body.rtl #podcasts .pcast-grid > .pcast-card,
  body.rtl #videos .videos-layout > .video-featured,
  body.rtl #videos .videos-layout > .video-small {
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
    box-sizing: border-box;
    direction: rtl;
  }
}

/* ── RTL mobile drawer: display:none when closed to prevent right-side overflow ──
   In RTL the closed drawer sits at inset-inline-start:0 (physical right:0) and
   is hidden with translateX(100%), pushing it 340px past the right viewport
   edge. Mobile browsers do not clip that with overflow-x:clip on html/body,
   because the RTL scroll origin is on the right.
   Fix: display:none on the aria-hidden="true" state (set by openMenu/closeMenu
   in theme.js) removes the drawer from layout. A @keyframes animation restores
   the slide-in open effect; keyframes replay after display:none, transitions
   do not. */
@media (max-width: 980px) {
  [dir="rtl"] .primary-menu-drawer[aria-hidden="true"],
  body.rtl    .primary-menu-drawer[aria-hidden="true"] {
    display: none;
  }

  [dir="rtl"] .primary-menu-drawer.is-open,
  body.rtl    .primary-menu-drawer.is-open {
    display: flex;
    animation: ari-rtl-drawer-in 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
  }
}

@keyframes ari-rtl-drawer-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

/* ── RTL mobile site-overlay: display:none when inactive ───────────────────
   A second guard against physical-right overflow, alongside left:0 + right:0 +
   width:auto in responsive.css. Uses :not(.is-active) so it does not depend on
   aria-hidden timing (JS removes aria-hidden and adds is-active in one tick). */
@media (max-width: 980px) {
  [dir="rtl"] .site-overlay:not(.is-active),
  body.rtl    .site-overlay:not(.is-active) {
    display: none;
  }
}

/* ── RTL mobile search overlay: extend display:none fix to ≤980px ──────────
   The existing fix below (≤640px) only covers the breakpoint where the drawer
   is used on-screen.  responsive.css applied width:100vw at ≤980px, so RTL
   overflow was possible at 641–980px too.  This block extends coverage and
   mirrors the ≤640px approach exactly. */
@media (max-width: 980px) {
  [dir="rtl"] .header-search-overlay[aria-hidden="true"],
  body.rtl    .header-search-overlay[aria-hidden="true"] {
    display: none;
  }

  [dir="rtl"] .header-search-overlay,
  body.rtl    .header-search-overlay {
    left: 0;
    right: 0;
    width: auto;
    max-width: 100%;
    inline-size: auto;
    max-inline-size: 100%;
  }
}

/* ── RTL site-header: defensive visibility enforcement ─────────────────────
   The header has position:fixed; z-index:205 and should always paint above
   page content.  These rules guard against three failure modes seen in RTL
   mobile:
   1. Any inherited or plugin CSS accidentally collapsing display/visibility.
   2. Internal brand-row content overflowing outside the header element and
      being clipped by the viewport: overflow-x:hidden clips it at the
      header boundary instead, keeping the background bar full-width.
   3. header-search-overlay backdrop-filter:blur bleeding through opacity:0
      in older WebKit/Blink builds: backdrop-filter:none on the closed
      state makes the blur categorically impossible regardless of opacity. */
@media (max-width: 980px) {
  [dir="rtl"] .site-header,
  body.rtl    .site-header {
    display: block;
    visibility: visible;
    opacity: 1;
    overflow-x: hidden;
  }

  [dir="rtl"] .site-header__brand-row,
  body.rtl    .site-header__brand-row {
    display: block;
  }

  [dir="rtl"] .site-header__brand-inner,
  body.rtl    .site-header__brand-inner {
    display: flex;
  }

  /* Remove the blur entirely when the overlay is closed: prevents any
     stacking-context or compositor interaction from obscuring the header. */
  [dir="rtl"] .header-search-overlay[aria-hidden="true"],
  body.rtl    .header-search-overlay[aria-hidden="true"] {
    backdrop-filter: none;
  }
}

/* About Us (Our Vision): mirror the directional quote-mark glyph for RTL */
[dir="rtl"] .about-vision__mark,
body.rtl    .about-vision__mark {
  transform: scaleX(-1);
}