/**
 * LTR (English) overrides — loaded only when the active language is EN
 * (body.pll-en, added via inc/ltr-styles.php).
 *
 * The theme is mostly LTR-aware already (logical `inset-inline`/`margin-inline`
 * props + `html[dir]` defaults). These rules ONLY flip the few places that use
 * hard physical left/right with no dir variant in the SCSS.
 * Do NOT add rules for anything the base already mirrors — it double-flips.
 */

/* Mobile off-canvas menu: base slides in from the right (translateX(100%)).
   Flip to slide from the left for LTR. MUST stay inside the mobile query so it
   never touches the desktop inline menu (that bug overlapped the logo). */
@media (max-width: 768px) and (orientation: portrait) {
  body.pll-en .mobile-menu {
    right: auto;
    left: 0;
    transform: translateX(-100%);
  }
  body.pll-en .mobile-menu.isActive {
    transform: translateX(0);
  }
}

/* Projects map — base rounds the right edge (border-radius: 0 30px 30px 0). */
body.pll-en .projects-page__map,
body.pll-en #projects-map {
  border-radius: 1.875rem 0 0 1.875rem;
}

/* Projects map popup */
body.pll-en .projects-page .map-popup__text {
  text-align: left;
}

body.pll-en .projects-page .leaflet-container a.leaflet-popup-close-button {
  left: auto;
  right: 0.1875rem;
}

/* Home content-slider — base puts prev on the right, next on the left. */
@media (orientation: landscape), (min-width: 769px) and (orientation: portrait) {
  body.pll-en .content-slider .btns button.swiper-btn-prev {
    left: auto;
    right: calc(100% + 8.4375rem);
  }
  body.pll-en .content-slider .btns button.swiper-btn-next {
    right: auto;
    left: calc(100% + 8.4375rem);
  }
}

/* Partners / Trainings — close buttons & marker use physical left in the base. */
body.pll-en .partners-page .is-close {
  left: auto !important;
  right: 1.5rem !important;
}

body.pll-en .trainings-page .default-slider .swiper-slide .link::before {
  left: auto;
  right: 1rem;
}

body.pll-en .trainings-page .trainings-page__item .is-close {
  left: auto !important;
  right: 1.5rem !important;
}

/* Standalone arrow icons (e.g. "read more" links) point left in the base glyph;
   flip them to point right for LTR. (Breadcrumb separators are handled by the
   base SCSS and are intentionally NOT touched here.) */
body.pll-en .icon__arrow-left {
  display: inline-block;
  transform: rotate(180deg);
}

/* Content tabs — left-align item text for LTR (base centers it on mobile). */
body.pll-en .content-tabs__item-content {
  text-align: left;
}

body.pll-en .content-tabs__items-nav button {
  font-size: 1.5rem;
  opacity: .5;
  text-align: left;
}

/* Position modal select arrow: the base places it near the top and on the
   inline-end edge (= right in LTR). Vertically center it and move it to the
   left, matching the Hebrew (RTL) layout. Left padding on the select keeps the
   option text clear of the arrow. Scoped by html[dir="ltr"] (set by WP) so it
   applies on the English site without depending on the pll-en body class. */
html[dir="ltr"] .position-modal .select-wrapper {
  position: relative;
}
html[dir="ltr"] .position-modal .select-wrapper i,
html[dir="ltr"] .position-modal .select-wrapper .icon__dropdown {
  top: 50% !important;
  transform: translateY(-50%) !important;
  inset-inline-end: auto !important;
  inset-inline-start: 0 !important;
  right: auto !important;
  left: 0 !important;
}
html[dir="ltr"] .position-modal .select-wrapper select {
  padding-left: 1.75rem !important;
}

/* Accordion "Show more / Show less" toggle (volunteering + career items).
   The EN label is two words and wraps inside the pill that's sized for the
   shorter Hebrew label. Keep it on a single line; the pill grows to fit.
   Broad selector + !important because the live markup nests the label a bit
   differently and the base rules constrain the pill width. */
html[dir="ltr"] .toggle,
html[dir="ltr"] .toggle * {
  white-space: nowrap !important;
}