/*
 * =============================================================================
 * style/apply.css — Job application form (forms/apply.html)
 * =============================================================================
 * PURPOSE
 *   Page-specific styles that the shared forms_v2.css theme does not cover:
 *   - Intro band (verbiage + celebrate image)
 *   - File inputs (global .reg_control uses a fixed 48px height — too tight)
 *   - Opt-in notification checkboxes (training / events)
 *   - Live "Reading resume…" / success / error status under the file field
 *
 * Does NOT redefine the whole form layout; we intentionally reuse .reg_form,
 * .reg_label, .reg_control, .form_reg_submit_btn from forms_v2.css.
 * =============================================================================
 */

/* ----- Intro: verbiage + image -------------------------------------------- */

.apply_intro {
  display: flex;
  align-items: center;
  gap: 32px;
  margin: 0 0 32px;
}

.apply_intro_copy {
  flex: 1 1 50%;
  min-width: 0;
}

.apply_intro_copy .reg_form_heading {
  margin-top: 0;
}

.apply_intro_copy .reg_form_lede {
  margin-bottom: 0;
}

.apply_intro_media {
  flex: 1 1 45%;
  min-width: 0;
}

.apply_intro_media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  max-height: 320px;
}

/* ----- Resume file picker ------------------------------------------------- */

/*
 * Override the shared fixed-height .reg_control so the native file control
 * can grow and remain usable on desktop and mobile.
 */
.apply_file_field .apply_file_control {
  height: auto;
  min-height: 48px;
  padding-top: 12px;
  padding-bottom: 12px;
  line-height: 1.3;
  cursor: pointer;
}

/* Status line under the file input (parse progress / result) */
.apply_parse_status {
  margin: 8px 0 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  color: #333;
  min-height: 1.2em;
}

/* Modifier classes toggled from apply.js */
.apply_parse_status.is_busy {
  color: #1a4176;
}

.apply_parse_status.is_ok {
  color: #1a5c2e;
}

.apply_parse_status.is_error {
  color: #8b1a1a;
}

/* ----- Notification opt-in checkboxes ------------------------------------- */

.apply_checkbox_group {
  gap: 12px;
}

/*
 * Match the spirit of .reg_eula_label: readable body copy, not the dark
 * uppercase .reg_label bar — checkboxes are consent/opt-in, not field titles.
 */
.apply_checkbox_label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 10px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: #000;
  cursor: pointer;
}

.apply_checkbox_label input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.apply_checkbox_label:last-child {
  margin-bottom: 0;
}

/* ----- Mobile tweaks ------------------------------------------------------ */

@media only screen and (max-width: 720px) {
  .apply_intro {
    flex-direction: column;
    gap: 20px;
    margin-bottom: 24px;
  }

  .apply_intro_media img {
    max-height: 220px;
  }

  .apply_file_field .apply_file_control {
    font-size: 16px;
  }

  .apply_checkbox_label {
    font-size: 15px;
  }

  .apply_parse_status {
    font-size: 14px;
  }
}