/* Ardani careers — invisible interaction layer over the two locked artworks.
   Desktop artwork: 1557 x 2047 CSS px (source 2503 x 3292).
   Mobile  artwork:  882 x 2048 CSS px (source 1077 x 2500).
   Every coordinate is a percentage of the ACTIVE artwork box, measured from the
   supplied PNG itself. Nothing paints over the artwork except the field, CV-row
   and consent-strip masks, whose colours are sampled from the artwork. */

:root {
  --ink: rgb(11, 20, 36);
  --gold: rgb(178, 135, 82);
  --printed-placeholder: rgb(180, 162, 136);
  --field-bg-1: rgb(241, 230, 216);
  --field-bg-2: rgb(243, 232, 219);
  --card-bg-desktop: rgb(242, 231, 218);
  --field-bg-mobile: rgb(244, 235, 225);
  --cvrow-bg-mobile: rgb(244, 234, 224);
  --page-bg: rgb(241, 230, 216);
  --error: rgb(150, 42, 38);
  --ok: rgb(120, 92, 44);
}

* { box-sizing: border-box; }

html { background: var(--page-bg); overflow-x: clip; }

body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  overflow-x: clip;
  font-family: "Assistant", "Rubik", "Heebo", "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background-color: var(--page-bg);
  background-image: url("assets/marble-bg.png");
  background-repeat: repeat;
  background-position: top center;
  background-size: 100% auto;
}

.stage {
  width: 100%;
  max-width: 1557px;
  margin-inline: auto;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

.artwork {
  position: relative;
  width: 100%;
  container-type: inline-size;
}

.art {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  margin-inline: auto;
}

.art--desktop { max-width: 1557px; }
.art--mobile { max-width: 882px; display: none; }

.layer {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ================= DESKTOP (> 768px) — calibrated, do not move ================= */

.roles {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.role {
  position: absolute;
  top: 37.85%;
  height: 7.75%;
  display: block;
  cursor: pointer;
  background: transparent;
  box-sizing: border-box;
  border-radius: 1.2cqw;
  --selected-frame-width: 0.14cqw;
  --selected-frame-inset: 0.22cqw;
}

.role--1 { left: 47.38%; width: 6.59%; }
.role--2 { left: 55.33%; width: 6.63%; }
.role--3 { left: 63.44%; width: 6.75%; }
.role--4 { left: 71.47%; width: 6.71%; }

/* the one selected gold frame: an inner ring on the role label itself, so it
   always traces the calibrated printed card and never changes its size */
.role::after {
  content: "";
  position: absolute;
  inset: var(--selected-frame-inset);
  box-sizing: border-box;
  border-radius: inherit;
  box-shadow: inset 0 0 0 var(--selected-frame-width) var(--gold);
  opacity: 0;
  pointer-events: none;
}

.roles.sel-1 .role--1::after,
.roles.sel-2 .role--2::after,
.roles.sel-3 .role--3::after,
.roles.sel-4 .role--4::after { opacity: 1; }

.role input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: none;
}

.role:focus,
.role:focus-visible,
.role:focus-within {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

/* selected dot — centred inside the gold ring already printed in each card */
.dot {
  position: absolute;
  width: 0.56cqw;
  height: 0.56cqw;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--gold);
  opacity: 0;
  pointer-events: none;
}

.dot--1 { left: 50.719%; top: 44.623%; }
.dot--2 { left: 58.690%; top: 44.593%; }
.dot--3 { left: 66.760%; top: 44.608%; }
.dot--4 { left: 74.810%; top: 44.593%; }

.roles.sel-1 .dot--1,
.roles.sel-2 .dot--2,
.roles.sel-3 .dot--3,
.roles.sel-4 .dot--4 { opacity: 1; }

/* text fields — inner text area only, left of the printed icon.
   The wrapper is the calibrated box; the input and its label live inside it. */
.live-field {
  position: absolute;
  left: 48.54%;
  width: 26.77%;
  height: 1.917cqw;
  transform: translateY(-50%);
  direction: rtl;
  background-color: var(--field-bg-2);
  background-clip: padding-box;
  padding: 0 0.52cqw 0 0.6cqw;
  font-size: 1cqw;
}

.live-field input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  box-shadow: none;
  background: transparent;
  color: var(--ink);
  direction: rtl;
  text-align: right;
  unicode-bidi: plaintext;
  font: inherit;
  line-height: normal;
  appearance: none;
  -webkit-appearance: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.live-field input:focus { outline: 0; box-shadow: none; }
.live-field input::placeholder { color: transparent; opacity: 0; }

.live-field__label {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  margin: 0;
  padding: 0;
  color: var(--printed-placeholder);
  direction: rtl;
  text-align: right;
  unicode-bidi: plaintext;
  white-space: nowrap;
  pointer-events: none;
  opacity: 1;
}

.live-field input:focus + .live-field__label,
.live-field input:not(:placeholder-shown) + .live-field__label { opacity: 0; }

.mobile-label-mask { display: none; }

.live-field--full-name { top: 47.843%; background-color: var(--field-bg-1); }
.live-field--phone     { top: 50.486%; }
.live-field--email     { top: 53.109%; }
.live-field--city      { top: 55.741%; }

/* file input over the printed "בחירת קובץ" pill */
.upload {
  position: absolute;
  left: 48.74%;
  top: 58.26%;
  width: 7.67%;
  height: 1.823%;
  display: block;
  cursor: pointer;
}

.upload input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.upload:focus-within {
  outline: 0.1cqw solid var(--gold);
  outline-offset: 0.2cqw;
  border-radius: 1cqw;
}

/* selected file name — inside the CV row, over the printed PDF/DOC line only */
.filename {
  position: absolute;
  left: 57.13%;
  top: 59.35%;
  width: 18.30%;
  height: 0.95%;
  display: none;
  margin: 0;
  padding: 0;
  background-color: var(--card-bg-desktop);
  color: var(--gold);
  direction: rtl;
  font-size: 0.62cqw;
  line-height: 0.95cqw;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  z-index: 6;
}

.filename.is-shown { display: block; }

/* submit over the printed button */
.submit {
  position: absolute;
  left: 47.82%;
  top: 61.60%;
  width: 30.32%;
  height: 2.734%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  font: inherit;
  cursor: pointer;
  border-radius: 1.6cqw;
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
}

.submit:focus-visible {
  outline: 0.1cqw solid var(--gold);
  outline-offset: 0.25cqw;
}

.submit__label {
  display: none;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-size: 1.15cqw;
  font-weight: 700;
  color: rgb(245, 239, 228);
  background: linear-gradient(180deg, rgb(43, 55, 76) 0%, rgb(21, 32, 58) 52%, rgb(4, 11, 30) 100%);
  border-radius: 1.6cqw;
}

.submit.is-sending .submit__label { display: flex; }
.submit.is-sending { cursor: progress; }

/* status message — inside the form card, over the printed consent line,
   left of the printed lock icon, never below the artwork */
.status {
  position: absolute;
  left: 48.82%;
  top: 64.66%;
  width: 27.10%;
  height: 1.86%;
  display: none;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  background-color: var(--card-bg-desktop);
  text-align: center;
  direction: rtl;
  white-space: pre-line;
  font-size: 0.82cqw;
  line-height: 1.3;
  color: var(--ink);
  pointer-events: none;
  z-index: 10;
}

.status.is-shown { display: flex; }
.status:empty { display: none; }
.status.is-error { color: var(--error); }
.status.is-ok { color: var(--ok); }

/* ================= MOBILE (<= 768px) — independently calibrated =================
   All values measured from ardani-careers-mobile.png (1077 x 2500 source px). */

@media (max-width: 768px) {
  .stage { max-width: 882px; }
  .art--desktop { display: none; }
  .art--mobile { display: block; }

  /* role cards: 2 x 2 grid, printed card bounds = clickable area = frame box */
  .role {
    border-radius: 2.2cqw;
    --selected-frame-width: 0.32cqw;
    --selected-frame-inset: 0.4cqw;
  }
  .role--1 { left: 54.78%; width: 14.30%; top: 29.08%; height: 8.20%; }
  .role--2 { left: 71.40%; width: 14.49%; top: 29.08%; height: 8.20%; }
  .role--3 { left: 54.78%; width: 14.30%; top: 37.84%; height: 8.12%; }
  .role--4 { left: 71.40%; width: 14.49%; top: 37.84%; height: 8.12%; }

  .dot { width: 0.95cqw; height: 0.95cqw; }
  .dot--1 { left: 62.03%; top: 36.28%; }
  .dot--2 { left: 78.74%; top: 36.28%; }
  .dot--3 { left: 62.03%; top: 44.88%; }
  .dot--4 { left: 78.74%; top: 44.88%; }

  /* text fields — real input stays at 16px so iPhone Safari never zooms; the
     empty-state label uses the smaller artwork typography */
  /* the mobile PNG already prints שם מלא / טלפון / אימייל / עיר, so the empty
     field must show nothing of its own — no HTML label, no placeholder, and a
     fully transparent wrapper */
  .live-field {
    left: 43.45%;
    width: auto;
    height: 4.64cqw;
    overflow: visible;
    box-sizing: border-box;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 0 0 1.3cqw;
    font-size: 16px;
  }

  /* one small mask per printed label — covers only the printed words, never the
     icon, border, shadow or corners; measured off ardani-careers-mobile.png */
  .mobile-label-mask {
    display: block;
    position: absolute;
    top: 50%;
    height: 3.6cqw;
    transform: translateY(-50%);
    background: var(--field-bg-mobile);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
  }

  .live-field--full-name .mobile-label-mask { right: -1.49cqw; width: 8.73cqw; }
  .live-field--phone     .mobile-label-mask { right: -1.49cqw; width: 6.31cqw; }
  .live-field--email     .mobile-label-mask { right: -1.58cqw; width: 6.96cqw; }
  .live-field--city      .mobile-label-mask { right: -1.03cqw; width: 3.81cqw; }

  .live-field.is-focused .mobile-label-mask,
  .live-field.has-value .mobile-label-mask,
  .live-field:focus-within .mobile-label-mask,
  .live-field:has(input:not(:placeholder-shown)) .mobile-label-mask { opacity: 1; }

  .live-field__label,
  .field-label,
  label[aria-hidden="true"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  .live-field input::placeholder,
  .live-field input::-webkit-input-placeholder {
    color: transparent !important;
    opacity: 0 !important;
  }

  /* nothing may be drawn over the artwork — no eraser, no cover layer */
  .live-field::before,
  .live-field::after { content: none !important; display: none !important; }

  .live-field input,
  .live-field__label {
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .live-field input {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    appearance: none;
    -webkit-appearance: none;
    direction: rtl;
    text-align: right;
    font-size: 16px;
  }

  .live-field input:focus,
  .live-field input:focus-visible {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  #phone, #email { direction: ltr; text-align: right; }

  .live-field--full-name { top: 48.28%; right: 19.41%; background: transparent !important; }
  .live-field--phone     { top: 51.00%; right: 19.22%; }
  .live-field--email     { top: 53.76%; right: 19.41%; }
  .live-field--city      { top: 56.48%; right: 19.03%; }

  /* upload over the printed pill (hit area padded vertically, no visual change) */
  .upload {
    left: 44.66%;
    top: 58.84%;
    width: 14.21%;
    height: 3.40%;
  }
  .upload:focus-within { outline-width: 0.3cqw; outline-offset: 0.4cqw; border-radius: 2.4cqw; }

  /* file name over the printed PDF/DOC line inside the CV row */
  .filename {
    left: 59.42%;
    top: 60.96%;
    width: 22.28%;
    height: 1.04%;
    background-color: var(--cvrow-bg-mobile);
    font-size: 2.3cqw;
    line-height: 1.04cqw;
  }

  /* submit over the printed button */
  .submit {
    left: 44.10%;
    top: 62.50%;
    width: 42.25%;
    height: 3.50%;
    border-radius: 3.2cqw;
  }
  .submit__label { font-size: 3.4cqw; border-radius: 3.2cqw; }
  .submit:focus-visible { outline-width: 0.3cqw; outline-offset: 0.5cqw; }

  /* status inside the consent strip, left of the printed lock icon */
  .status {
    left: 49.49%;
    top: 66.10%;
    width: 33.90%;
    height: 3.30%;
    background-color: var(--field-bg-mobile);
    font-size: 3.1cqw;
    line-height: 1.25;
  }
}