/* Right to left (Hebrew). Loaded only when is_rtl(). The browser already
   flips flex and grid order, inline text and logical properties; this file
   covers the physical left/right rules of site.css, the page stylesheets and
   the pii-site CSS. Every selector starts with html[dir="rtl"] so it outranks
   the Breakdance files, which print after the enqueued styles. */

/* ==========================================================================
   Type: Archivo and IBM Plex Mono have no Hebrew glyphs, so Hebrew falls
   through to Heebo while Latin words keep the brand faces
   ========================================================================== */

html[lang^="he"] {
  --pi-font: "Archivo", "Heebo", sans-serif;
  --pi-mono: "IBM Plex Mono", "Heebo", monospace;
  --bde-body-font-family: "Archivo", "Heebo", sans-serif;
  --bde-heading-font-family: "Archivo", "Heebo", sans-serif;
}

html[lang^="he"] body,
html[lang^="he"] .pi-hero-video__toggle {
  font-family: "Archivo", "Heebo", sans-serif;
}

/* Wide tracking suits uppercase Latin mono labels, not Hebrew letters. */
html[lang^="he"] .pi-eyebrow,
html[lang^="he"] .pi-label,
html[lang^="he"] .pi-card__tag,
html[lang^="he"] .pi-card__place,
html[lang^="he"] .pi-feature__num,
html[lang^="he"] .pi-filter__count,
html[lang^="he"] .pi-footer__title,
html[lang^="he"] .pi-header__panel-contact,
html[lang^="he"] .pi-infolist__label,
html[lang^="he"] .pi-ph__caption,
html[lang^="he"] .pi-search__label,
html[lang^="he"] .pi-search__title,
html[lang^="he"] .pi-stat__label,
html[lang^="he"] .pi-topbar__info,
html[lang^="he"] .pi-form .breakdance-form .breakdance-form-field__label,
html[lang^="he"] .pi-job__team,
html[lang^="he"] .pi-dept__area,
html[lang^="he"] .pi-map__caption,
html[lang^="he"] .pi-phero__place,
html[lang^="he"] .pi-phero__status,
html[lang^="he"] .pi-phero__tag,
html[lang^="he"] .pi-ploc__caption,
html[lang^="he"] .pi-showcase__tag,
html[lang^="he"] .pi-pp-group__title,
html[lang^="he"] .pi-pp-plan__zoom,
html[lang^="he"] .pi-pp-sheets__chip,
html[lang^="he"] .pi-pp-units__plan,
html[lang^="he"] .pi-pp-units__row--head,
html[lang^="he"] .pi-hero-video__toggle {
  letter-spacing: 0.02em;
}

/* Phone numbers and addresses typed in Latin keep their own order. */
html[dir="rtl"] a[href^="tel:"] {
  direction: ltr;
  unicode-bidi: isolate;
}

html[dir="rtl"] .pi-form .breakdance-form input[type="tel"],
html[dir="rtl"] .pi-form .breakdance-form input[type="email"] {
  direction: ltr;
  text-align: right;
}

/* ==========================================================================
   Arrows: point toward the reading direction
   ========================================================================== */

html[dir="rtl"] .pi-link::after {
  content: "\2190";
}

html[dir="rtl"] .pi-link:hover::after {
  transform: translateX(-3px);
}

html[dir="rtl"] .pi-link--back::after {
  content: none;
}

html[dir="rtl"] .pi-link--back::before {
  content: "\2192";
}

html[dir="rtl"] .pi-link--back:hover::before {
  transform: translateX(3px);
}

html[dir="rtl"] .pi-header__panel-link::after {
  content: "\2190";
}

html[dir="rtl"] .pi-header__panel-link:hover::after {
  transform: translateX(-3px);
}

/* Inline "opens elsewhere" arrows printed by pii-site */
html[dir="rtl"] .pi-pp-news__arrow,
html[dir="rtl"] .pi-pp-navigator .pi-btn > span[aria-hidden="true"],
html[dir="rtl"] .pi-pp-navigator__chip > span[aria-hidden="true"] {
  display: inline-block;
  transform: scaleX(-1);
}

/* ==========================================================================
   Hover motion: fills, underlines and the card stroke start at the right
   ========================================================================== */

html[dir="rtl"] .pi-btn,
html[dir="rtl"] .pi-search__submit,
html[dir="rtl"] .pi-doc {
  background-position: left center;
}

html[dir="rtl"] .pi-btn:hover,
html[dir="rtl"] .pi-search__submit:hover,
html[dir="rtl"] .pi-doc:hover {
  background-position: right center;
}

html[dir="rtl"] .pi-nav__link::after {
  transform-origin: left center;
}

html[dir="rtl"] .pi-nav__link:hover::after {
  transform-origin: right center;
}

/* Mirror of scroll-motion.css: from the top right corner, counter clockwise. */
html[dir="rtl"] .pi-card::after,
html[dir="rtl"] .pi-line::after,
html[dir="rtl"] .pi-pp-plan::after,
html[dir="rtl"] .pi-pp-sheets__chip::after,
html[dir="rtl"] .pi-contactcard::after {
  background:
    linear-gradient(var(--pi-ink), var(--pi-ink)) right top / calc(clamp(0, var(--pi-sweep), 1) * 100%) 1px no-repeat,
    linear-gradient(var(--pi-ink), var(--pi-ink)) left top / 1px calc(clamp(0, var(--pi-sweep) - 1, 1) * 100%) no-repeat,
    linear-gradient(var(--pi-ink), var(--pi-ink)) left bottom / calc(clamp(0, var(--pi-sweep) - 2, 1) * 100%) 1px no-repeat,
    linear-gradient(var(--pi-ink), var(--pi-ink)) right bottom / 1px calc(clamp(0, var(--pi-sweep) - 3, 1) * 100%) no-repeat;
}

/* ==========================================================================
   Design system (site.css)
   ========================================================================== */

html[dir="rtl"] .pi-prose ul,
html[dir="rtl"] .pi-prose ol {
  padding-left: 0;
  padding-right: 22px;
}

html[dir="rtl"] .pi-prose li {
  padding-left: 0;
  padding-right: 4px;
}

html[dir="rtl"] .pi-stat {
  padding-left: 0;
  padding-right: 30px;
}

html[dir="rtl"] .pi-stat:first-child {
  padding-right: 0;
}

html[dir="rtl"] .pi-company__cell:first-child {
  padding-left: 24px;
  padding-right: 0;
}

html[dir="rtl"] .pi-company__cell:last-child {
  padding-left: 0;
  padding-right: 24px;
}

html[dir="rtl"] .pi-contactpanel__form {
  border-left: 0;
  border-right: 1px solid var(--pi-border);
}

html[dir="rtl"] .pi-card__tag {
  left: auto;
  right: 16px;
}

html[dir="rtl"] .pi-header__toggle {
  margin-left: -10px;
  margin-right: 0;
}

html[dir="rtl"] .pi-hero-video__toggle {
  left: 16px;
  right: auto;
}

html[dir="rtl"] .pi-hero__media .pi-hero-video__toggle {
  left: var(--pi-gutter);
  right: auto;
}

html[dir="rtl"] .pi-search__select {
  padding: 0 0 0 22px;
  background-position: left 0 center;
}

html[dir="rtl"] .pi-form .breakdance-form select.breakdance-form-field__input {
  padding: 9px 0 9px 28px;
  background-position: left 0 center;
}

html[dir="rtl"] .pi-form .breakdance-form .breakdance-form-field__required {
  padding-left: 0;
  padding-right: 3px;
}

html[dir="rtl"] .pi-form .breakdance-form .breakdance-form-message {
  border-left: 0;
  border-right: 2px solid var(--pi-success);
}

html[dir="rtl"] .pi-form .breakdance-form .breakdance-form-message--error {
  border-right-color: var(--pi-error);
}

/* ==========================================================================
   Page stylesheets (Home, Projects, Contact, Sustainability, project page)
   ========================================================================== */

html[dir="rtl"] .pi-mission {
  padding-left: 0;
  padding-right: 18px;
  border-left: 0;
  border-right: 2px solid var(--pi-green-bright);
}

html[dir="rtl"] .pi-ecomission {
  padding: 4px 20px 4px 0;
  border-left: 0;
  border-right: 2px solid var(--pi-green-bright);
}

html[dir="rtl"] .pi-card--listing .pi-card__status {
  text-align: left;
}

html[dir="rtl"] .pi-map__caption {
  left: 20px;
  right: auto;
}

html[dir="rtl"] .pi-showcase__tag {
  left: auto;
  right: 20px;
}

html[dir="rtl"] .pi-showcase__body {
  border-left: 0;
  border-right: 1px solid var(--pi-border);
}

/* Key facts: the grid's start edge and every cell's end edge carry the line. */
html[dir="rtl"] .pi-keyfacts__grid {
  border-left: 0;
  border-right: 1px solid var(--pi-divider);
}

html[dir="rtl"] .pi-keyfact {
  border-left: 1px solid var(--pi-divider);
  border-right: 0;
}

html[dir="rtl"] .pi-ploc__caption {
  left: 18px;
  right: auto;
}

/* ==========================================================================
   Project page sections (project-page.css)
   ========================================================================== */

html[dir="rtl"] .pi-pp-group__item {
  padding-left: 0;
  padding-right: 22px;
}

html[dir="rtl"] .pi-pp-group__item::before {
  left: auto;
  right: 0;
}

html[dir="rtl"] .pi-pp-diary__updated {
  text-align: left;
}

html[dir="rtl"] .pi-pp-distances__value {
  text-align: left;
}

html[dir="rtl"] .pi-pp-faq__button {
  text-align: right;
}

html[dir="rtl"] .pi-pp-faq__answer {
  padding: 0 0 24px 56px;
}

/* ==========================================================================
   Breakpoints (the same four as Breakdance)
   ========================================================================== */

@media (max-width: 1023px) {
  html[dir="rtl"] .pi-stat:nth-child(odd) {
    padding-right: 0;
  }

  html[dir="rtl"] .pi-contactpanel__form {
    border-right: 0;
  }

  html[dir="rtl"] .pi-showcase__body {
    border-right: 0;
  }
}

@media (max-width: 767px) {
  html[dir="rtl"] .pi-stat {
    padding-right: 20px;
  }

  html[dir="rtl"] .pi-company__cell:first-child,
  html[dir="rtl"] .pi-company__cell:last-child {
    padding-left: 0;
    padding-right: 0;
  }

  html[dir="rtl"] .pi-pp-diary__updated {
    text-align: right;
  }

  html[dir="rtl"] .pi-pp-faq__answer {
    padding-left: 0;
  }
}

/* The section list starts on the right, so its fades swap sides. */
html[dir="rtl"] .pi-pp-nav__list {
  -webkit-mask-image: linear-gradient(to left, transparent, #000 var(--pi-fade-start), #000 calc(100% - var(--pi-fade-end)), transparent);
  mask-image: linear-gradient(to left, transparent, #000 var(--pi-fade-start), #000 calc(100% - var(--pi-fade-end)), transparent);
}