/* Additions on top of the original theme CSS (loaded last). */

/* ---- Hero slider (replaces Revolution Slider, see src/render/home.ts) ---- */
.ps-slider {
  position: relative;
  width: 100%;
  height: 936px;
  overflow: hidden;
}
.ps-slider > ul {
  margin: 0;
  padding: 0;
  list-style: none;
  height: 100%;
}
/* Rev Slider's "fade": the incoming slide's image fades in over the outgoing one (which stays put
   underneath until then), while the captions cross-fade (300ms, Power3.easeInOut) */
.ps-slide {
  position: absolute;
  inset: 0;
  visibility: hidden;
  transition: visibility 0s 0.6s;
}
.ps-slide.active {
  visibility: visible;
  z-index: 1;
  transition: none;
}
.ps-slide .tp-bgimg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0s 0.6s;
}
.ps-slide.active .tp-bgimg {
  opacity: 1;
  transition: opacity 0.55s ease-in-out;
}
.ps-slide .tp-parallax-wrap {
  position: absolute;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.ps-slide.active .tp-parallax-wrap {
  opacity: 1;
}
/* As Rev Slider placed the layer: it hangs from the right edge of .tp-parallax-wrap's content box and is
   as wide as its widest unbreakable line (the nowrap tagline, or the nowrap text on desktop and above
   479px), so on mobile it may be wider than the wrap and overflow to the left. */
.ps-slide .tp-caption {
  width: min-content;
  white-space: nowrap;
  font-size: 20px;
  line-height: 22px;
  color: #fff;
}
.ps-slider .tp-bullets {
  position: absolute;
  z-index: 100;
  display: flex;
}
.ps-slider .tp-bullets.vertical {
  right: 38px;
  top: 50%;
  transform: translateY(-50%);
  flex-direction: column;
  gap: 17px;
}
/* Mobile slider: horizontal bullets, bottom center (Rev Slider config of rev_slider_2_2).
   Rev Slider lays bullets out left to right even on RTL pages: the first slide's bullet is the left one. */
.ps-slider .tp-bullets.horizontal {
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  gap: 20px;
  direction: ltr;
}
.home_slidermob .ps-slider {
  container-type: inline-size;
}
/* tp-resizeme scales the layer's margins by slider width / gridwidth (1240): the theme's 60px → 19px at 390px */
.home_slidermob .ps-slide .tp-caption p {
  margin-bottom: round(100cqw * 60 / 1240, 1px);
}
.ps-slider .tp-bullet {
  cursor: pointer;
  padding: 0;
}

/* ---- Lead form ---- */
.lead-form .hp-field {
  position: absolute;
  left: -9999px;
}

/* Contact Form 7 adds a (hidden) spinner after the submit button; it takes space in the layout */
.wpcf7-spinner {
  visibility: hidden;
  display: inline-block;
  background-color: #23282d;
  opacity: 0.75;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 100%;
  padding: 0;
  margin: 0 24px;
  position: relative;
}

/* Like CF7's form.init state: the message box takes no space until there is a message */
.lead-form .wpcf7-response-output:empty {
  display: none;
}

/* QA C12: the theme's .wpcf7 input[type="tel"] {direction: rtl} needs a div.wpcf7 wrapper, which the side form doesn't
   have, so its "טלפון :" placeholder read ": טלפון" aligned left */
.lead-form input[type="tel"] {
  direction: rtl;
}

/* Contact Form 7's own styles.css (5.5.6.1 on the live site) isn't copied: its rule for the message under an invalid
   field. The contact page's .con_form rule in the theme's style.css still applies on top. */
.lead-form .wpcf7-not-valid-tip {
  color: #dc3232;
  font-size: 1em;
  font-weight: normal;
  display: block;
}