/* =========================================================================
   contact.css - (9) CONTACT  (id="contact")
   Figma: 1:163 heading (Futurism Bold 96 / lh 74%, right, x1040..1756,
   y6686) + 1:154 form row (x171 y6769, 866x59): three 206x59 fields with
   r19 and a 0.5px brown bottom hairline, 14px gaps, then a solid brown
   206x59 "שליחה" pill on the far left. Section white, 6560..6914 = 354px.
   Desktop geometry uses --u (1px at 1920). The lower band lives in footer.css.
   ========================================================================= */

#contact.contact {
  position: relative;
  background: var(--fg-paper);
  color: var(--fg-brown);
  scroll-margin-top: 90px;
}

/* ---------- mobile first (< 768) ---------- */
#contact .contact__inner {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 64px 20px 56px;
  max-width: 640px;
  margin-inline: auto;
}

#contact .contact__heading {
  margin: 0;
  color: var(--fg-brown);
  font-family: var(--font-heb);
  font-weight: 700;
  font-size: clamp(40px, 10.6vw, 64px);
  line-height: .86;
  text-align: right;
}
#contact .contact__heading-line { display: block; }

/* ---------- form ---------- */
#contact .contact__form { position: relative; margin: 0; }

#contact .contact__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;                         /* room for the inline error under each field */
}

#contact .contact__field {
  position: relative;
  height: 58px;
  border-radius: 19px;
  border-bottom: 1px solid var(--fg-caramel); /* >= 3:1 input boundary */
  background: var(--fg-paper);
  box-shadow: 0 6px 10px -8px rgba(93, 40, 9, .28);
  transition: border-color .2s ease, box-shadow .2s ease;
}
#contact .contact__field:hover { border-bottom-color: var(--fg-brown); }
#contact .contact__field:focus-within {
  border-bottom-color: var(--fg-brown);
  outline: 2px solid var(--fg-caramel);
  outline-offset: 2px;
  box-shadow: 0 8px 14px -8px rgba(93, 40, 9, .45);
}
#contact .contact__field.is-invalid { border-bottom-color: #a3321b; }

#contact .contact__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 18px 22px 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: var(--fg-ink);
  font-family: var(--font-heb);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.2;
  text-align: right;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
#contact .contact__input[type="tel"] { text-align: right; }
#contact .contact__input:focus-visible { box-shadow: 0 0 0 2px var(--fg-caramel); }

/* Visible label that sits where the Figma placeholder is and floats up
   (smaller) once the field has focus or a value - never disappears. */
#contact .contact__label {
  position: absolute;
  inset-inline-start: 22px;          /* right edge in RTL */
  top: 50%;
  transform: translateY(-50%);
  color: var(--fg-brown);
  font-family: var(--font-heb);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.2;
  pointer-events: none;
  transition: top .18s ease, font-size .18s ease, transform .18s ease, opacity .18s ease;
}
#contact .contact__input:focus + .contact__label,
#contact .contact__input:not(:placeholder-shown) + .contact__label {
  top: 5px;
  transform: none;
  font-size: 13px;
  opacity: .8;
}

#contact .contact__err {
  position: absolute;
  top: calc(100% + 4px);
  inset-inline-start: 6px;
  color: #a3321b;
  font-family: var(--font-heb);
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
}
#contact .contact__err:empty { display: none; }

#contact .contact__submit {
  height: 58px;
  width: 100%;
  margin: 0;
  padding: 0 24px;
  border: 0;
  border-radius: 99px;
  background: var(--fg-brown);
  color: #fff;
  font-family: var(--font-heb);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease, opacity .2s ease;
}
#contact .contact__submit:hover { background: var(--fg-ink); }
#contact .contact__submit:active { transform: translateY(1px); }
#contact .contact__submit:focus-visible { outline: 3px solid var(--fg-caramel); outline-offset: 3px; }
#contact .contact__submit:disabled,
#contact .contact__submit[aria-busy="true"] { opacity: .72; cursor: progress; }

#contact .contact__honeypot {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

#contact .contact__status {
  margin: 14px 0 0;
  font-family: var(--font-heb);
  font-size: 16px;
  line-height: 1.35;
  color: var(--fg-brown);
  text-align: right;
}
#contact .contact__status:empty { display: none; }
#contact .contact__status.is-error { color: #a3321b; }
#contact .contact__status.is-ok { color: var(--fg-brown); font-weight: 700; }
#contact .contact__status a {
  color: var(--fg-brown);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
#contact .contact__status a:hover { color: var(--fg-caramel); }

/* ---------- tablet (768 - 1023) ---------- */
@media (min-width: 768px) {
  #contact .contact__inner { max-width: 900px; padding: 88px 40px 72px; gap: 40px; }
  #contact .contact__heading { font-size: clamp(56px, 8vw, 76px); line-height: .8; }
  #contact .contact__row { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  #contact .contact__field:nth-child(3) { grid-column: 1 / -1; }
  #contact .contact__submit { grid-column: 1 / -1; justify-self: end; width: 240px; }
}

/* ---------- desktop: Figma-exact (>= 1024) ---------- */
@media (min-width: 1280px) {
  #contact.contact { height: calc(354 * var(--u)); }
  #contact .contact__inner {
    display: block;
    position: relative;
    height: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
  }
  #contact .contact__heading {
    position: absolute;
    top: calc(126 * var(--u));
    right: calc(164 * var(--u));
    width: calc(716 * var(--u));
    font-size: var(--t-h2);
    line-height: var(--lh-h2-fg);
  }
  #contact .contact__form {
    position: absolute;
    left: calc(171 * var(--u));
    top: calc(209 * var(--u));
    width: calc(866 * var(--u));
  }
  #contact .contact__row {
    display: flex;
    gap: calc(14 * var(--u));
  }
  #contact .contact__field,
  #contact .contact__submit {
    flex: 0 0 calc(206 * var(--u));
    width: calc(206 * var(--u));
    height: max(44px, calc(59 * var(--u)));
  }
  #contact .contact__field {
    border-radius: calc(19 * var(--u));
    border-bottom-width: max(1px, calc(.5 * var(--u)));
    box-shadow: none;                /* Figma: hairline only */
  }
  #contact .contact__field:focus-within { box-shadow: 0 8px 12px -10px rgba(93, 40, 9, .45); }
  #contact .contact__input {
    padding: calc(20 * var(--u)) calc(42 * var(--u)) 0 calc(14 * var(--u));
    font-size: max(15px, calc(22 * var(--u)));
  }
  #contact .contact__label {
    inset-inline-start: calc(42 * var(--u));
    top: 41.5%;                      /* Figma: label box y+10..39 of 59 */
    transform: translateY(-50%);
    font-size: max(16px, calc(24 * var(--u)));
  }
  #contact .contact__input:focus + .contact__label,
  #contact .contact__input:not(:placeholder-shown) + .contact__label {
    top: calc(4 * var(--u));
    transform: none;
    font-size: max(12px, calc(15 * var(--u)));
  }
  #contact .contact__submit {
    padding: 0;
    font-size: max(16px, calc(24 * var(--u)));
  }
  #contact .contact__err { font-size: max(13px, calc(16 * var(--u))); }
  #contact .contact__status {
    position: absolute;
    top: calc(100% + 30 * var(--u));
    right: 0;
    left: 0;
    margin: 0;
    font-size: max(15px, calc(20 * var(--u)));
  }
}

#contact .contact__optional { font-weight: 300; opacity: .8; }