/*
 * RTL overrides for style.min.css (loaded only when <html dir="rtl">, i.e. /he/).
 * GENERATED by scripts/gen_rtl_css.py from web/static/common/css/style.min.css.
 * Do not hand-edit the generated block; re-run the script if style.min.css changes:
 *   pip install tinycss2 && python scripts/gen_rtl_css.py > web/static/common/css/rtl.css
 *
 * style.min.css positions the hero image (.intro*__img-wrapper) and the
 * /download/ Features app column (.tabs-element__app-link) with physical
 * left/right. In RTL the text column sits on the right, so the image covered
 * the H1/subtitle/CTAs. Each rule below is the same rule, same media query,
 * same cascade order, with left<->right (and translateX sign) swapped.
 */

/* Keep the hero image internals (deco, animated strokes, clip-path image)
 * laid out exactly like LTR; only the wrapper position is mirrored. */
html[dir="rtl"] .intro__img-wrapper {direction:ltr}

/* .intro--main: the wrapper has no width of its own (its children are
 * absolute), so a mirrored `right:` would pin the image's LEFT edge to the
 * mirror line. Give it the image box width per breakpoint so `right:` places
 * the image's right edge there. <=1023px keeps the original width:100%. */
html[dir="rtl"] .intro--main .intro__img-wrapper {width:578px}
@media (max-width:1279px) {html[dir="rtl"] .intro--main .intro__img-wrapper {width:388px}}
@media (max-width:1023px) {html[dir="rtl"] .intro--main .intro__img-wrapper {width:100%}}

/* Decorative strokes that sit past the outer image edge end up past the
 * LEFT viewport edge in RTL, which (unlike in LTR) creates horizontal scroll.
 * Clip, don't scroll. overflow-x:clip keeps position:sticky working. */
html[dir="rtl"] .wrapper {overflow-x:clip}

/* /download/ Features check icons: style.min.css sets the ::before icon's
 * gap with a `margin` shorthand (`margin:T 16px 0 0`), which the generator
 * does not mirror, so in RTL the 16px sat on the outer side and the icon
 * touched the text. Same selectors, same media queries, same cascade order,
 * with the 16px moved to the left. */
html[dir="rtl"] .tabs-element__features-list-item::before {margin:4px 0 0 16px}
@media (max-width:1023px) {
  html[dir="rtl"] .tabs-element__features-item:nth-child(3) .tabs-element__features-list-item:before {margin:2px 0 0 16px}
  html[dir="rtl"] .tabs-element__features-list-item::before {margin:0 0 0 16px}
}
@media (max-width:767px) {
  html[dir="rtl"] .tabs-element__features-list-item::before {margin:2px 0 0 16px}
}

/* Feature-page hero tiles (.intro--features .intro__features, all
 * /feature/* pages): style.min.css spaces the ::before check icon with
 * margin-right:8px and the tile with padding-left:10px (>=1280),
 * padding-left:0 (<=1279) and padding-right:25px (<=767). Not in the
 * generator's TARGET list, so mirrored here: same selectors, same media
 * queries, same cascade order, left<->right, and the LTR side reset. */
html[dir="rtl"] .intro--features .intro__features {padding-right:10px;padding-left:0}
html[dir="rtl"] .intro--features .intro__features:before {margin-left:8px;margin-right:0}
@media (max-width:1279px) {
  html[dir="rtl"] .intro--features .intro__features {padding-right:0}
}
@media (max-width:767px) {
  html[dir="rtl"] .intro--features .intro__features {padding-left:25px;padding-right:0}
}

/* /download/ phone mockup: style.min.css nudges the img outwards with
 * position:relative;left:16px (<=1023: 13px). Mirrored so in RTL it moves
 * outwards (left) too instead of 16px into the feature column. */
html[dir="rtl"] .tabs-element__app-link img {right:16px;left:auto}
@media (max-width:1023px) {
  html[dir="rtl"] .tabs-element__app-link img {right:13px;left:auto}
}

/* /download/ "Calls & Texts information" info link: inline
 * style="margin-left: 4px" in download.html; inline, so !important. */
html[dir="rtl"] .tabs-element__features-list-item > a[style*="margin-left"] {margin-left:0 !important;margin-right:4px}

/* ---- generated mirror rules ---- */
html[dir="rtl"] .font-serif--italic {margin-right:4px;margin-left:0}
html[dir="rtl"] .intro--main .intro__img-wrapper {right:calc(50% + 57px);left:auto}
html[dir="rtl"] .intro--about .intro__img-wrapper {right:46%;left:unset}
html[dir="rtl"] .intro--features .intro__img-wrapper {right:calc(50% + 108px);left:auto}
html[dir="rtl"] .intro--features-site .intro__img-wrapper {right:calc(50% + 151px);left:auto}
html[dir="rtl"] .intro--features-tracking .intro__img-wrapper {right:calc(50% + 110px);left:auto}
html[dir="rtl"] .intro--features-app .intro__img-wrapper {right:calc(50% + 151px);left:auto}
html[dir="rtl"] .intro--features-time .intro__img-wrapper {right:calc(56% + 57px);left:auto}
html[dir="rtl"] .intro--features-messenger .intro__img-wrapper {right:calc(46% + 143px);left:auto}
html[dir="rtl"] .intro--features-history .intro__img-wrapper {right:calc(50% + 151px);left:auto}
html[dir="rtl"] .download-block--main .font-serif--italic {margin-right:0;margin-left:0}
html[dir="rtl"] .tabs-element__app-link {left:45px;right:auto}
@media (min-width:1300px) {
  html[dir="rtl"] .tabs-element__app-link {left:56px;right:auto}
}
@media (max-width:1279px) {
  html[dir="rtl"] .intro--main .intro__img-wrapper {right:calc(50% - 20px);left:auto}
  html[dir="rtl"] .intro--about .intro__img-wrapper {right:49%;left:auto}
  html[dir="rtl"] .intro--features .intro__img-wrapper {right:calc(52% + 15px);left:auto}
  html[dir="rtl"] .intro--features-site .intro__img-wrapper {right:calc(52% + 15px);left:auto}
  html[dir="rtl"] .intro--features-tracking .intro__img-wrapper {right:calc(52% + 15px);left:auto}
  html[dir="rtl"] .intro--features-app .intro__img-wrapper {right:calc(55% + 15px);left:auto}
  html[dir="rtl"] .intro--features-time .intro__img-wrapper {right:calc(57% - 20px);left:auto}
  html[dir="rtl"] .intro--features-messenger .intro__img-wrapper {right:calc(56% + 15px);left:auto}
  html[dir="rtl"] .intro--features-history .intro__img-wrapper {right:calc(50% + 15px);left:auto}
  html[dir="rtl"] .tabs-element__app-link {left:38px;right:auto}
}
@media (max-width:1023px) {
  html[dir="rtl"] .intro--main .intro__img-wrapper {right:0;left:unset}
  html[dir="rtl"] .intro--about .intro__img-wrapper {right:55%;left:auto}
  html[dir="rtl"] .intro--features .intro__img-wrapper {right:calc(42% + 15px);left:auto}
  html[dir="rtl"] .intro--features-site .intro__img-wrapper {right:calc(46% + 15px);left:auto}
  html[dir="rtl"] .intro--features-tracking .intro__img-wrapper {right:calc(46% + 15px);left:auto}
  html[dir="rtl"] .intro--features-app .intro__img-wrapper {right:calc(41% + 15px);left:auto}
  html[dir="rtl"] .intro--features-time .intro__img-wrapper {right:calc(59% - 20px);left:auto}
  html[dir="rtl"] .intro--features-messenger .intro__img-wrapper {right:calc(46% + 15px);left:auto}
  html[dir="rtl"] .intro--features-history .intro__img-wrapper {right:calc(46% + 15px);left:auto}
  html[dir="rtl"] .tabs-element__app-link {left:36px;right:auto}
}
@media (max-width:767px) {
  html[dir="rtl"] .intro--main .intro__img-wrapper {right:0;left:unset}
  html[dir="rtl"] .intro--about .intro__img-wrapper {right:calc(100% - 246px);left:auto}
  html[dir="rtl"] .intro--features .intro__img-wrapper {right:50%;left:auto;-webkit-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%)}
  html[dir="rtl"] .intro--features-site .intro__img-wrapper {right:calc(46% + 15px);left:auto}
  html[dir="rtl"] .intro--features-tracking .intro__img-wrapper {right:calc(46% + 15px);left:auto}
  html[dir="rtl"] .intro--features-app .intro__img-wrapper {right:calc(46% + 15px);left:auto}
  html[dir="rtl"] .intro--features-history .intro__img-wrapper {right:calc(46% + 15px);left:auto}
  html[dir="rtl"] .download-block--price .download-block__title .font-serif--italic {margin-right:0;margin-left:0}
  html[dir="rtl"] .tabs-element__app-link {right:20px;left:auto}
}
@media (max-width:359px) {
  html[dir="rtl"] .intro--features-site .intro__img-wrapper {right:calc(46% + 15px);left:auto}
  html[dir="rtl"] .intro--features-tracking .intro__img-wrapper {right:calc(46% + 15px);left:auto}
  html[dir="rtl"] .intro--features-app .intro__img-wrapper {right:calc(46% + 15px);left:auto}
  html[dir="rtl"] .intro--features-messenger .intro__img-wrapper {right:55%;left:auto}
  html[dir="rtl"] .intro--features-history .intro__img-wrapper {right:47%;left:auto}
}