/* =========================================================
   apply.css — Careers "Apply for this position" page
   Reuses .field / .field__input / .field__textarea from
   contact.css plus the shared header/footer and .sp-hero.
   ========================================================= */

.apply {
  background: #fff;
  padding: 76px 0;
}

.apply__panel {
  max-width: 640px;
  margin: 0 auto;
}

.apply__title {
  font-size: 36px;
  font-weight: 600;
  line-height: 1.2;
  color: #181819;
  margin: 0 0 36px;
}

/* Single-column stacked form */
.apply-form {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Visible field labels */
.field__label {
  display: block;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 500;
  color: #181819;
}

.field__req {
  color: #e0322d;
}

/* File input */
.field__file {
  width: 100%;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  color: #181819;
}

.field__file::file-selector-button {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  margin-right: 14px;
  padding: 12px 18px;
  border: 1px solid #eaeaea;
  border-radius: 10px;
  background: #fafafa;
  color: #181819;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}

.field__file::file-selector-button:hover {
  border-color: #39cdd8;
  background: #f2feff;
}

.field__hint {
  margin: 10px 0 0;
  font-size: 14px;
  color: #6b6b6b;
}

/* Consent row */
.field--consent {
  flex-direction: row;
}

.field__consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  line-height: 1.5;
  color: #181819;
  cursor: pointer;
}

.field__consent input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  flex-shrink: 0;
  accent-color: #39cdd8;
  cursor: pointer;
}

.apply-form__submit {
  align-self: flex-start;
  padding: 13px 32px;
}

/* Success / status message */
.apply-form__status {
  margin: 4px 0 0;
  padding: 16px 18px;
  border-radius: 10px;
  background: #f2feff;
  border: 1px solid #39cdd8;
  font-size: 16px;
  color: #181819;
}

@media (max-width: 600px) {
  .apply__title {
    font-size: 28px;
  }
}

/* Outline border on the submit button on hover (higher specificity than .btn--secondary:hover so it wins) */
.apply-form__submit.btn--secondary:hover {
  border-color: var(--color-dark-blue);
}