/* ---------------------------------------------------------------------------
 * Hadar - front page (page 6) design layer.
 *
 * This lives OUTSIDE Elementor on purpose. Anything stored in the widget's
 * Custom CSS box is wiped whenever an editor tab that was opened *before* a
 * server-side change hits Save - Elementor rewrites the whole page tree from
 * the browser. Rules here survive that, and they key off widget TYPE rather
 * than element ID, so rebuilding/duplicating a widget keeps the styling.
 *
 * Everything is scoped to .elementor-6 = the front page only. It never
 * reaches /privacy-policy/, /terms/ or /accessibility/.
 * ------------------------------------------------------------------------- */

@property --hdr-ring {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* ---------------------------------------------------------------------------
 * 1. Rose buttons ("יצירת קשר") - bg dissolves, 2px ring draws itself around
 * ------------------------------------------------------------------------- */
.elementor .elementor-element.elementor-widget-button.elementor-widget-button .elementor-button {
  position: relative;
  transition: background-color .35s ease, color .35s ease;
}

/* the icon SVGs ship with a hard-coded fill="white"; follow the text instead */
.elementor .elementor-element.elementor-widget-button.elementor-widget-button .elementor-button svg,
.elementor .elementor-element.elementor-widget-button.elementor-widget-button .elementor-button svg path {
  fill: currentColor;
  transition: fill .35s ease;
}

.elementor .elementor-element.elementor-widget-button.elementor-widget-button .elementor-button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  pointer-events: none;
  opacity: 0;
  background: conic-gradient(from -90deg, #B89390 var(--hdr-ring), transparent var(--hdr-ring));
  /* both shorthands first: the `mask` shorthand resets *-mask-composite,
     so the composites have to come after it or Safari drops the cut-out */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: --hdr-ring .75s ease-in-out, opacity .2s ease;
}

@media (hover: hover) and (min-width: 1025px) {
  .elementor .elementor-element.elementor-widget-button.elementor-widget-button .elementor-button:hover,
  .elementor .elementor-element.elementor-widget-button.elementor-widget-button .elementor-button:focus-visible {
    background-color: transparent;
    color: #B89390;
  }
  .elementor .elementor-element.elementor-widget-button.elementor-widget-button .elementor-button:hover::before,
  .elementor .elementor-element.elementor-widget-button.elementor-widget-button .elementor-button:focus-visible::before {
    --hdr-ring: 360deg;
    opacity: 1;
  }
}

/* ---------------------------------------------------------------------------
 * 2. Contact form - 62px fields + button, black placeholder, white hover
 * ------------------------------------------------------------------------- */
.elementor-6 .elementor-element.elementor-widget-form .elementor-field-group .elementor-field-textual,
.elementor-6 .elementor-element.elementor-widget-form .elementor-button[type="submit"] {
  height: 62px;
  min-height: 62px;
}

/* labels are off, so the placeholder IS the visible label */
.elementor-6 .elementor-element.elementor-widget-form .elementor-field-group .elementor-field-textual::placeholder {
  color: #000000;
  opacity: 1;
}

.elementor-6 .elementor-element.elementor-widget-form .elementor-button[type="submit"] {
  position: relative;
  transition: background-color .35s ease, color .35s ease;
}

.elementor-6 .elementor-element.elementor-widget-form .elementor-button[type="submit"]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  pointer-events: none;
  opacity: 0;
  background: conic-gradient(from -90deg, #000000 var(--hdr-ring), transparent var(--hdr-ring));
  /* both shorthands first: the `mask` shorthand resets *-mask-composite,
     so the composites have to come after it or Safari drops the cut-out */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: --hdr-ring .75s ease-in-out, opacity .2s ease;
}

/* NOTE on the doubled .elementor-widget-form below: Elementor emits CSS for
   control DEFAULTS too, and the form's "hover text colour" defaults to white --
   .elementor-6 .elementor-element.elementor-element-{id} .elementor-button[type="submit"]:hover{color:#fff}
   which ties with a single-class version of this rule and wins on load order.
   Repeating the class buys one point of specificity so black always wins, even
   if the widget's own hover setting gets wiped by an editor save. */
@media (hover: hover) and (min-width: 1025px) {
  .elementor-6 .elementor-element.elementor-widget-form.elementor-widget-form .elementor-button[type="submit"]:hover,
  .elementor-6 .elementor-element.elementor-widget-form.elementor-widget-form .elementor-button[type="submit"]:focus-visible {
    background-color: #FFFFFF;
    color: #000000;
  }
  .elementor-6 .elementor-element.elementor-widget-form.elementor-widget-form .elementor-button[type="submit"]:hover svg *,
  .elementor-6 .elementor-element.elementor-widget-form.elementor-widget-form .elementor-button[type="submit"]:focus-visible svg * {
    fill: #000000;
  }
  .elementor-6 .elementor-element.elementor-widget-form .elementor-button[type="submit"]:hover::before,
  .elementor-6 .elementor-element.elementor-widget-form .elementor-button[type="submit"]:focus-visible::before {
    --hdr-ring: 360deg;
    opacity: 1;
  }
}

/* ---------------------------------------------------------------------------
 * 3. Testimonials carousel dots - outlined ring, filled when active.
 *    #847365 is the brown of the arrow glyphs in left.svg / righy.svg.
 * ------------------------------------------------------------------------- */
.elementor-6 .elementor-element.elementor-widget-n-carousel .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: transparent;
  border: 1.5px solid #847365;
  opacity: 1;
  transition: background-color .25s ease, transform .25s ease;
}

.elementor-6 .elementor-element.elementor-widget-n-carousel .swiper-pagination-bullet:hover {
  background: rgba(132, 115, 101, .35);
  opacity: 1;
  transform: scale(1.15);
}

.elementor-6 .elementor-element.elementor-widget-n-carousel .swiper-pagination-bullet-active,
.elementor-6 .elementor-element.elementor-widget-n-carousel .swiper-pagination-bullet-active:hover {
  background: #847365;
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------------------------
 * 4. Hero scroll arrow - bob the <path> only; the <circle> in down.svg
 *    is part of the same file and must stay still.
 *    Matched on the link target so it survives a widget rebuild.
 * ------------------------------------------------------------------------- */
.elementor-6 a.elementor-icon[href$="#about"] svg path {
  animation: hdr-arrow-up 1.8s ease-in-out infinite;
}

@keyframes hdr-arrow-up {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  .elementor-6 a.elementor-icon[href$="#about"] svg path { animation: none; }
  .elementor-6 .elementor-button::before { transition: none; }
}

/* ---------------------------------------------------------------------------
 * 5. FAQ - the open item must read as ONE card.
 *    Elementor gives every title the full --n-accordion-border-radius and has
 *    no control for the *active* state, so an open title keeps its rounded
 *    bottom corners and leaves a notch above the content. Square them off.
 *    Weight too: Elementor exposes active *colour* only, not weight.
 * ------------------------------------------------------------------------- */
.elementor-6 .elementor-widget-n-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title,
.elementor-6 .elementor-widget-n-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-text {
  font-weight: 700;
}

.elementor-6 .elementor-widget-n-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* ---------------------------------------------------------------------------
 * 6. Hover ring on the icon-box cubes.
 *      .hadar-cube       - rose ring, section "אני יודעת איך זה מרגיש"
 *      .hadar-cube-brown - brown ring, section "למי הליווי מיועד"
 *    Classes are set on the containers via Elementor's CSS Classes field, so
 *    Hadar can put the same ring on a new cube without touching code.
 *    ::after and NOT ::before - Elementor already owns .e-con:before for the
 *    container background overlay.
 * ------------------------------------------------------------------------- */
.elementor-6 .e-con.hadar-cube,
.elementor-6 .e-con.hadar-cube-brown {
  position: relative;
}

.elementor-6 .e-con.hadar-cube::after,
.elementor-6 .e-con.hadar-cube-brown::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  pointer-events: none;
  opacity: 0;
  z-index: 2;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: --hdr-ring .75s ease-in-out, opacity .2s ease;
}

.elementor-6 .e-con.hadar-cube::after {
  background: conic-gradient(from -90deg, #B89390 var(--hdr-ring), transparent var(--hdr-ring));
}

.elementor-6 .e-con.hadar-cube-brown::after {
  background: conic-gradient(from -90deg, #847365 var(--hdr-ring), transparent var(--hdr-ring));
}

@media (hover: hover) and (min-width: 1025px) {
  .elementor-6 .e-con.hadar-cube:hover::after,
  .elementor-6 .e-con.hadar-cube-brown:hover::after {
    --hdr-ring: 360deg;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .elementor-6 .e-con.hadar-cube::after,
  .elementor-6 .e-con.hadar-cube-brown::after { transition: none; }
}