/* Shared labels and field accessibility for the two volunteer forms. */
.join-form .join-row { flex-wrap: wrap; }
.join-form .join-field {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-width: 0;
  gap: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  /* Add clearance only when the user enlarges the label text. */
  margin-block-start: max(0px, calc(1em - 13px));
}
.join-form .join-field > input,
.join-form .join-field select {
  box-sizing: border-box;
  flex: none !important;
  width: 100% !important;
  height: 34px;
  min-block-size: max(34px, 2.5em);
  padding: 3px 8px;
  font-size: 13px !important;
  border-color: color-mix(in srgb, var(--ink) 52%, transparent);
}
.join-form .join-field select { padding-inline-end: 30px; }
.join-form .join-select-wrap::after { left: 12px; }
.join-form .join-consent {
  align-items: center;
  gap: 4px;
  font-size: 13px;
  white-space: normal;
}
.join-form .join-consent > span { min-width: 0; }
.join-form .join-consent a { white-space: normal; }
.join-form .join-field input::placeholder {
  color: color-mix(in srgb, var(--ink) 65%, transparent);
  opacity: 1;
}
.join-form .join-field :is(input, select):focus {
  border-color: var(--ink);
}
.join-form .join-consent input[type="checkbox"] {
  border-color: color-mix(in srgb, var(--ink) 52%, transparent);
  accent-color: var(--ink);
  flex-shrink: 0;
}
/* The existing Phase 1 focus-visible outline remains in force. */
/* היה מוסתר לקורא מסך בלבד. הודעת השגיאה חייבת להיות גלויה גם
   בעין, ולכן היא מוצגת עכשיו מתחת לכפתור. כשאין מה לומר היא ריקה
   ואינה תופסת מקום. */
.join-form .join-status {
  display: block;
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 700;
  color: #5B4136;
}
.join-form .join-status[data-state="error"] { color: #8E1B10; }
.join-form .join-status:empty { margin: 0; }
.join-form .join-submit {
  background-color: #c44f21;
  min-height: var(--jn-btn-h, 46px);
  height: auto;
  padding-block: 8px;
}
.join-form .join-submit em { white-space: normal; }
@media (max-width: 980px) {
  .join-form .join-field { flex: 0 0 auto; width: 100%; }
}
@media (max-width: 767px) {
  body .join-form .join-consent,
  body.home-page:not(.desktop-preview) .join-form .join-consent {
    align-items: center;
    gap: 4px;
    font-size: 14px !important;
    line-height: 1.3;
    white-space: normal !important;
  }
  body .join-form .join-consent a { white-space: normal; }
  body.home-page .join-form .join-row > .join-field { flex: 1 1 calc(50% - 5px); width: auto; }
  body.home-page .join-form .join-row > .join-field--phone { flex-basis: 100%; }
  body .join-form .join-field :is(input, select),
  body.home-page:not(.desktop-preview) .join-form .join-field :is(input, select) {
    font-size: 12px !important;
    height: 34px !important;
    min-block-size: max(34px, 2.5em);
    padding-block: 3px;
    padding-inline: 7px !important;
  }
  body .join-form .join-field select,
  body.home-page:not(.desktop-preview) .join-form .join-field select {
    padding-inline-end: 28px !important;
  }
}

/* The native labels keep every field name accessible while placeholders carry
   the compact visual treatment requested for this form. */
.join-form .join-field > span:not(.join-select-wrap):not(.field-error) {
  position: absolute;
  z-index: 1;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ===================== הודעת שגיאה בשדה (14.9.2026) =====================
   הודעה קבועה מתחת לשדה, מקושרת אליו ב-aria-describedby. המידע נמסר
   בטקסט עצמו ולא בצבע בלבד, והגוון כהה דיו כדי לעמוד בניגודיות. */
.join-form .field-error {
  display: block;
  width: 100%;
  margin-top: 5px;
  color: #8E1B10;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
}
.join-form .join-consent .field-error { flex: 1 1 100%; }
.join-form :is(input, select, textarea)[aria-invalid="true"] {
  border-color: #8E1B10 !important;
  box-shadow: 0 0 0 2px rgba(142, 27, 16, .16);
}