/* Careers page styles */

section#pg-careers {
  background: var(--bg);
  color: var(--text);

  h2 {
    font-size: 2.5rem;
  }

  h3 {
    font-size: 1.75rem;
  }

  p.tagline {
    font-size: var(--medium);
    color: var(--text);
  }

  ol {
    padding-left: var(--md);
  }

  .compensation {
    font-style: italic;
  }


  .job-application-form {
    display: flex;
    flex-direction: column;
    gap: var(--md);
  }

  .form-group {
    display: flex;
    flex-direction: column;
  }

  label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  select,
  input,
  textarea {
    width: 100%;
  }

  #job-descriptions {
    margin: var(--md) 0;
  }

  .job-description {
    background: var(--bg-2);
    padding: var(--lg);
    border: 1px solid var(--border);
  }

  .job-description h3 {
    margin-top: 0;
  }

  .button {
    align-self: flex-start;
  }

  /* Responsive */
  @media (max-width: 768px) {
    .tagline {
      font-size: var(--body);
    }
  }

  @media (max-width: 640px) {
    .button {
      width: 100%;
      align-self: stretch;
    }
  }

  @media (max-width: 480px) {
    .job-description {
      padding: var(--md);
    }
  }

  @media (max-width: 320px) {
    select,
    input[type="text"],
    input[type="email"],
    input[type="url"],
    textarea {
      padding: 0.875rem;
      font-size: var(--small);
    }

    .job-description {
      padding: 1.25rem;
    }
  }
}