/* /careers: the open roles, and /careers/apply/<role>: the form for each.
 *
 * Its own file rather than utilities in styles.css: styles.css is Tailwind's
 * output with hand edits on top, and regenerating it to pick up new classes
 * would carry every other page's unreleased markup with it. Nothing here is
 * used outside this page.
 *
 * Colours are the page's own greys. The orange stays on the Apply buttons,
 * which use the same utility classes as every other button on the site, so
 * theme.js retints them with the rest. */

/* A link in these pages' copy is dark and underlined. The site's orange, once
 * theme.js has painted it, has 3.45:1 on white, and text under 24px needs
 * 4.5:1. The header, the footer and the buttons keep the site's own colours.
 * .careers-hero-link is the class of the role links kept empty in the hero's
 * hidden sentence, since the hero names no role. */
.careers-hero-link,
.careers-link {
  color: #191919;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.careers-hero-link:hover,
.careers-link:hover {
  color: #4a4a4a;
}

/* The footer's closing band asks for a demo and a policy, which is not what a
 * reader of a job page or an application form came for. It is hidden here, on
 * these four pages only; the footer partial and every other page keep it. */
.closing-bg-section {
  display: none;
}

.careers-roles {
  display: grid;
  gap: 24px;
}

/* One role: the same white panel, border and padding as the empty state it
 * replaces. 16px on a phone, where the section's and the list's own gutters
 * already take 32px a side and 24px would leave a column of about 250px. */
.careers-role {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  border: 1px solid #e1e1e1;
  background: #fff;
  padding: 16px;
}
@media (min-width: 640px) {
  .careers-role {
    padding: 24px;
  }
}

/* The sales role's old anchor: empty, and out of the flex flow so the
 * article's gap does not count it. */
.careers-role-alias {
  position: absolute;
  top: 0;
  left: 0;
}

/* The base sheet sets every h3 and h4 to a line-height of 1, which overlaps
 * the lines of a title that wraps on a phone. */
.careers-role-title {
  color: #191919;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.careers-role-summary {
  max-width: 48rem;
}

.careers-role-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

/* Normal tracking: the base sheet's tight h4 tracking crowds 16px type. */
.careers-role-subhead {
  color: #191919;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: normal;
}

.careers-list {
  margin-top: 12px;
  padding-left: 20px;
  display: grid;
  gap: 10px;
  list-style: disc outside;
}
.careers-list > li {
  padding-left: 2px;
}
.careers-list > li::marker {
  color: #767676;
}

/* The Apply button: full width on a phone, where it is the widest target,
 * and its own width from 640px. A label that wraps there, as the German and
 * Italian do at 360px, wraps about the button's centre. */
.careers-role-apply {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #e1e1e1;
  padding-top: 24px;
}
.careers-role-apply a {
  text-align: center;
}
@media (min-width: 640px) {
  .careers-role-apply {
    align-items: flex-start;
  }
}

/* How to apply is a note under the roles, not a fourth role, so its heading
 * is a size below theirs, and still a size above the 18px or 20px paragraph
 * it heads. */
.careers-apply-heading {
  color: #191919;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.careers-apply {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-top: 1px solid #e1e1e1;
  padding-top: 32px;
}

/* More room inside a role from a tablet up. */
@media (min-width: 768px) {
  .careers-role {
    padding: 40px;
  }
  .careers-role-title {
    font-size: 28px;
  }
  .careers-apply-heading {
    font-size: 24px;
  }
}

/* Two columns from a laptop up: what the role does beside what it needs. On a
 * tablet each column would be about 250px, and a duty would run to five or six
 * lines, so the two lists stack there, as How we work does. */
@media (min-width: 1024px) {
  .careers-role-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
  }
}

/* --- /careers/apply/<role> ------------------------------------------------ */

/* The role and what to send on the left, the form on the right; stacked,
 * intro first, below a laptop. The form keeps a fixed width so its fields do
 * not stretch with the window. */
.careers-apply-layout {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.careers-apply-intro {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 36rem;
  min-width: 0;
}

/* The role title. Smaller than the hero headings elsewhere: a role title is a
 * name, often of four long words, and in German or Polish one of them can be
 * longer than a phone is wide. It breaks between words only: automatic
 * hyphenation split a German compound by syllable ("Risikomo-delle") where a
 * space was a line away. A word wider than the line still breaks. */
.careers-apply-title {
  color: #191919;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
  hyphens: manual;
}

/* The same white panel and border as a role on /careers. */
.careers-form-panel {
  width: 100%;
  max-width: 32rem;
  border: 1px solid #e1e1e1;
  background: #fff;
  padding: 24px;
}
.careers-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* The role, which the reader cannot change: a field's shape, without its
 * white, so it does not read as one to type in. */
.careers-form-fixed {
  border: 1px solid #e1e1e1;
  border-radius: 12px;
  background: #f6f6f6;
  padding: 9px 12px;
  color: #191919;
  font-size: 16px;
  line-height: 1.35;
}

/* The CV control. The input is the focusable control but is not drawn; the
 * label is the button the reader sees and clicks. */
.careers-file {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.careers-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
}
.careers-file-button {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  border: 1px solid #e1e1e1;
  border-radius: 12px;
  background: #fff;
  padding: 8px 14px;
  color: #191919;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 150ms, box-shadow 150ms;
}
.careers-file-button:hover {
  border-color: #c4c4c4;
}
.careers-file-input:focus-visible + .careers-file-button {
  border-color: #ff5c00;
  box-shadow: 0 0 0 3px #ffbe99;
}
.careers-file-input[aria-invalid="true"] + .careers-file-button {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px #ff8092;
}
/* A long file name breaks rather than widening the panel. */
.careers-file-name {
  min-width: 0;
  flex: 1 1 10rem;
  color: #4a4a4a;
  font-size: 14px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.careers-file-name.is-chosen {
  color: #191919;
}

.careers-form-privacy {
  margin-left: 4px;
}

/* A field's or the form's error. A darker red than the field's border: at
 * 13px, text needs 4.5:1 on white, and #ef4444 has 3.8:1. */
.careers-form-error {
  color: #b91c1c;
}

/* The receipt, in the panel the form was in. */
.careers-form-done {
  display: flex;
  flex-direction: column;
  gap: 16px;
  outline: none;
}

@media (min-width: 768px) {
  .careers-apply-title {
    font-size: 40px;
  }
  .careers-form-panel {
    padding: 32px;
  }
}

/* Side by side once the window has room for both at their full widths. */
@media (min-width: 1024px) {
  .careers-apply-layout {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 64px;
  }
  .careers-form-panel {
    flex: 0 0 30rem;
  }
}

/* Below 1,280px the title's column is 352px. At 40px a Dutch or Polish title
 * leaves its gender tag, (m/v/x) or (K/M), alone on a fourth line; at 32px it
 * stays with the word before it. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .careers-apply-title {
    font-size: 32px;
  }
}