/* ============================================================================
 * COMPONENT — Form field
 * ----------------------------------------------------------------------------
 * Renderer: shared/components/field.php
 *
 * Label, control, hint and error in one predictable block. Inputs are 44px so
 * they stay comfortable as touch targets, which is the case that matters most
 * for this audience.
 * ========================================================================== */

.field + .field { margin-block-start: var(--sp-4); }

.field__label {
  display: block;
  margin-block-end: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--ink);
}

.field__req {
  color: var(--danger);
  margin-inline-start: 2px;
}

.field__optional {
  margin-inline-start: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-normal);
  color: var(--ink-muted);
}

/* -- control -------------------------------------------------------------- */

.input,
.textarea,
.select {
  inline-size: 100%;
  min-block-size: 44px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-md);
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--ink-muted);
}

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--focus-ring);
}

.input:disabled,
.textarea:disabled,
.select:disabled {
  background: var(--surface-sunken);
  color: var(--ink-muted);
  cursor: not-allowed;
}

.textarea {
  min-block-size: 108px;
  line-height: var(--lh-snug);
  resize: vertical;
}

/* The native arrow is positioned by the browser and does not follow dir, so it
   is replaced with a background image anchored to the logical trailing edge. */
.select {
  appearance: none;
  padding-inline-end: var(--sp-10);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237E7E76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-3) center;
  background-size: 16px;
}

[dir="rtl"] .select {
  background-position: left var(--sp-3) center;
}

/* -- input with a leading icon -------------------------------------------- */

.input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.input-group__icon {
  position: absolute;
  inset-inline-start: var(--sp-3);
  display: grid;
  place-items: center;
  color: var(--ink-muted);
  pointer-events: none;
}

.input-group .input {
  padding-inline-start: var(--sp-10);
}

/* -- hint and error -------------------------------------------------------- */

.field__hint {
  margin-block-start: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}

.field__error {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-block-start: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--danger);
}

.field.has-error .input,
.field.has-error .textarea,
.field.has-error .select {
  border-color: var(--danger);
}

.field.has-error .input:focus,
.field.has-error .textarea:focus,
.field.has-error .select:focus {
  box-shadow: 0 0 0 3px var(--danger-soft);
}

/* -- checkbox and radio ---------------------------------------------------- */

.check {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  cursor: pointer;
}

.check input {
  flex: 0 0 auto;
  inline-size: 20px;
  block-size: 20px;
  margin-block-start: 2px;
  accent-color: var(--brand);
  cursor: pointer;
}

.check__text {
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
}

.check__note {
  display: block;
  margin-block-start: 2px;
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}

/* -- rows ------------------------------------------------------------------ */

/* Two fields side by side on a tablet and up; stacked on a phone, always. */
.field-row {
  display: grid;
  gap: var(--sp-4);
}

@media (min-width: 640px) {
  .field-row { grid-template-columns: 1fr 1fr; }
  .field-row > .field { margin-block-start: 0; }
}

.form-actions {
  display: flex;
  gap: var(--sp-3);
  margin-block-start: var(--sp-6);
}

@media (max-width: 639px) {
  .form-actions { flex-direction: column-reverse; }
  .form-actions .btn { inline-size: 100%; }
}

/* -- section heading inside a long form ------------------------------------
 * A form with three distinct groups of questions (the job posting has
 * "qualifications", "terms" and the basics) reads as one undifferentiated
 * wall without them. Sits with the field component rather than in a page's
 * own CSS because any long form will want it.
 * ----------------------------------------------------------------------- */

.form-heading {
  margin-block: var(--sp-6) var(--sp-2);
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--border);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--ink);
}

/* The hint that follows a heading explains the whole group, so it should not
   carry the top margin a per-field hint has. */
.form-heading + .field__hint {
  margin-block-start: 0;
  margin-block-end: var(--sp-3);
}