/* ==================================================
   WERKEN BIJ
================================================== */


/* ==================================================
   HERO
================================================== */

.job-hero {
  position: relative;

  min-height: 50vh;

  justify-content: center;

  color: var(--white);

  overflow: hidden;
}

.job-hero__container {
  display: flex;
  align-items: center;
  justify-content: center;

  padding-top: var(--header-height);

  z-index: 1;
}

.job-hero__content {
  width: 55ch;
  max-width: 100%;

  text-align: center;
}

.job-hero__background {
  position: absolute;
  inset: 0;

  z-index: -1;
}

.job-hero__media {
  position: absolute;
  inset: 0;
}

.job-hero__media img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center 20%;
}

.job-hero .overlay {
  position: absolute;
  inset: 0;

  background-color: rgb(0 0 0 / 40%);
}


/* ==================================================
   CONTENT
================================================== */

.job-content {
  padding-block: var(--space-xl);
}

.job-content__container {
  display: flex;
  flex-direction: column;

  gap: var(--content-gap-l);

  width: 100%;
  max-width: 600px;
  background-color: var(--white);
}

.job-content__text {
  display: flex;
  flex-direction: column;

  gap: var(--content-gap-m);
}


/* ==================================================
   BENEFITS
================================================== */

.job-benefits {
  display: flex;
  flex-direction: column;

  gap: var(--content-gap-s);
}

.job-benefits__heading {
  font-weight: 600;
}

.job-benefits__list {
  --icon-size: 1.5em;

  display: flex;
  flex-direction: column;

  gap: 0.5em;

  padding: 0;
  margin: 0;

  list-style: none;
}

.job-benefits__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;

  gap: 0.5em;

  line-height: 1.3;
}

.job-benefits__icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: var(--icon-size);
  height: var(--icon-size);

  color: var(--secondary);
}

.job-benefits__icon svg {
  width: 100%;
  height: 100%;
}


/* ==================================================
   FORM WRAPPER
================================================== */

.job-form-wrapper {
  display: flex;
  flex-direction: column;

  gap: var(--content-gap-m);

  padding-top: var(--space-m);
}


/* ==================================================
   FORM
================================================== */

.job-form {
  --field-padding: 0.7rem 1rem;

  position: relative;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: var(--space-m);
}

.job-form__field {
  min-width: 0;
}

.job-form__field--full,
.job-form__privacy,
.job-form__submit,
.job-form__success,
.job-form__error--form {
  grid-column: 1 / -1;
}


/* ==================================================
   FIELDS
================================================== */

.job-form input:not(
  [type="checkbox"],
  [type="file"]
),
.job-form textarea {
  width: 100%;

  padding: var(--field-padding);

  font: inherit;
  color: var(--primary);

  background-color: var(--white);

  border: 1px solid var(--border-color-soft);
  border-radius: var(--radius);

  transition:
    border-color 0.2s ease,
    outline-color 0.2s ease;
}

.job-form input::placeholder,
.job-form textarea::placeholder {
  color: var(--text-placeholder);
}

.job-form textarea {
  min-height: 12rem;

  resize: vertical;
}

.job-form input:not([type="checkbox"]):focus,
.job-form textarea:focus {
  border-color: var(--secondary);

  outline: 2px solid var(--secondary);
  outline-offset: 2px;
}


/* ==================================================
   CV UPLOAD
================================================== */

.job-form__file-title {
  display: inline-block;

  margin-bottom: var(--space-xs);

  font-weight: 500;
}

.job-form__file-title span {
  color: var(--secondary);
}

.job-form__file-drop {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 7.5rem;

  padding: var(--space-m);

  color: var(--text-placeholder);
  text-align: center;

  background-color: var(--white);

  border: 2px dashed rgb(0 0 0 / 70%);
  border-radius: var(--radius);

  cursor: pointer;

  transition:
    border-color 0.2s ease,
    color 0.2s ease,
    background-color 0.2s ease;
}

.job-form__file-drop:hover {
  color: var(--primary);

  border-color: var(--secondary);
}

.job-form__file-help {
  margin-top: var(--space-xs);

  color: var(--text-muted);

  font-size: var(--text-small);
}


/* ==================================================
   PRIVACY
================================================== */

.job-form__privacy {
  display: flex;
  align-items: center;

  gap: var(--space-xs);
}

.job-form__privacy input {
  flex: 0 0 auto;

  width: 1.25rem;
  height: 1.25rem;

  accent-color: var(--secondary);

  cursor: pointer;
}

.job-form__privacy label {
  font-size: var(--text-small);
}

.job-form__privacy a {
  color: var(--secondary);

  font-weight: 600;
}

.job-form__privacy a:hover {
  color: var(--secondary-hover);
}


/* ==================================================
   SUBMIT
================================================== */

.job-form__submit {
  width: 100%;

  border: none;

  cursor: pointer;
}


/* ==================================================
   MESSAGES
================================================== */

.job-form__success {
  padding: var(--space-m);

  color: #1f6b38;
  background-color: #e7f7ec;

  border-left: 4px solid #2f9e44;
  border-radius: var(--radius);

  font-size: var(--text);
  font-weight: 500;
}

.job-form__error {
  margin-top: var(--space-xs);

  color: #a61b1b;

  font-size: var(--text-small);
  font-weight: 500;
}

.job-form__error--form {
  padding: var(--space-m);
  margin-top: 0;

  color: #8a1c1c;
  background-color: #fdeaea;

  border-left: 4px solid #c92a2a;
  border-radius: var(--radius);
}


/* ==================================================
   HONEYPOT
================================================== */

.job-form__honeypot {
  position: absolute;

  left: -9999px;

  width: 1px;
  height: 1px;

  overflow: hidden;
}


/* ==================================================
   VISUALLY HIDDEN
================================================== */

.visually-hidden {
  position: absolute;

  width: 1px;
  height: 1px;

  padding: 0;
  margin: -1px;

  overflow: hidden;

  clip: rect(0 0 0 0);
  clip-path: inset(50%);

  white-space: nowrap;

  border: 0;
}


/* ==================================================
   RESPONSIVE
================================================== */

@media (max-width: 768px) {

  .job-hero {
    min-height: 40vh;
  }

  .job-form {
    grid-template-columns: 1fr;
  }

  .job-form__field--full,
  .job-form__privacy,
  .job-form__submit,
  .job-form__success,
  .job-form__error--form {
    grid-column: auto;
  }

}