/* Mandl job board theme for Ashby.

   Makes the board, the role page and the application form look like the
   Mandl website: the #030303 canvas, #111110 cards with a #1e1e1d
   hairline, Lora for titles and Zalando Sans Light for copy.

   How to apply: Ashby admin > Job Boards > Theme of the Mandl board >
   Custom CSS > upload this file. Keep the brand colors in the admin as
   they are (#111111 and #4C4C4C): booking pages, surveys and emails still
   use them on white, and this file swaps them only on the job board.

   Ashby validates the file on upload: only its own ashby classes, no
   hashed ones, and no focus or disabled states (those follow the brand
   color). */

/* Fonts: the same families as the website, from jsDelivr (it sends CORS
   headers, so the board can load them). */
@font-face {
  font-family: "Zalando Sans";
  src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/zalando-sans@5.3.0/files/zalando-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Zalando Sans";
  src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/zalando-sans@5.3.0/files/zalando-sans-latin-wght-italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Lora";
  src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/lora@5.3.0/files/lora-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lora";
  src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/lora@5.3.0/files/lora-latin-wght-italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

/* Ashby paints every page from these tokens, so flipping the neutral
   scale turns the whole board dark, including the parts without an
   ashby-* class (footer, details pane, dropdowns, date picker). 000 is the
   canvas and 800 the body text. The brand colors come inline on <html>,
   hence the !important on the two primaries. */
:root {
  --colorPrimary600: #ffffff !important;
  --colorPrimary900: #cccccc !important;
  --colorPrimary500A: rgba(255, 255, 255, 0.12);
  --colorPrimaryShadow: rgba(0, 0, 0, 0.5);
  --colorShadowPrimaryLight: rgba(255, 255, 255, 0.2);
  --colorShadowPrimaryXLight: rgba(255, 255, 255, 0.1);

  --colorNeutral000: #030303;
  --colorNeutral000A: rgba(3, 3, 3, 0);
  --colorNeutral100: #111110;
  --colorNeutral100A: rgba(255, 255, 255, 0.03);
  --colorNeutral100Transparent: rgba(17, 17, 16, 0);
  --colorNeutral200: #1e1e1d;
  --colorNeutral200A: rgba(255, 255, 255, 0.08);
  --colorNeutral300: #2a2a29;
  --colorNeutral300A: rgba(255, 255, 255, 0.16);
  --colorNeutral400: #3a3a39;
  --colorNeutral400A: rgba(255, 255, 255, 0.24);
  --colorNeutral500: #6b6b6a;
  --colorNeutral500A: rgba(255, 255, 255, 0.34);
  --colorNeutral600: #8a8a89;
  --colorNeutral600A: rgba(255, 255, 255, 0.5);
  --colorNeutral600Transparent: rgba(138, 138, 137, 0.25);
  --colorNeutral700: #b3b3b3;
  --colorNeutral700A: rgba(255, 255, 255, 0.7);
  --colorNeutral800: #d1d1d1;
  --colorNeutral800A: rgba(255, 255, 255, 0.82);
  --colorNeutralShadow: rgba(0, 0, 0, 0.6);

  --colorNegative200: rgba(220, 48, 48, 0.14);
  --colorPositive200: rgba(41, 180, 88, 0.14);
  --colorInfo100: #0b0f14;
  --colorInfo200: #0d131a;
  --colorInfo300: #101821;
  --colorInfo400: #13202d;

  --colorAppBackground: #030303;
  --fontFamily: "Zalando Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --widthMaxJobBoard: 957px;
  --borderRadiusContainer: 6px;
  --borderRadiusControl: 4px;
  --borderRadiusButton: 4px;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: rgba(255, 255, 255, 0.2);
}

/* The wordmark in the admin is dark for the white pages; it turns white
   here. */
img[alt="Mandl"] {
  filter: brightness(0) invert(1);
}

/* Board */

.ashby-job-board-heading {
  font-family: "Lora", serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 36px;
  color: #ffffff;
}

.ashby-job-board-heading-count {
  color: rgba(255, 255, 255, 0.5);
}

.ashby-job-board-filters-label,
.ashby-job-board-reset-filters-label {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
}

.ashby-job-board-filter {
  border: 1px solid #1e1e1d;
  background-color: rgba(30, 30, 29, 0.5);
  font-size: 14px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.82);
}

.ashby-job-board-filter:hover {
  border-color: rgba(255, 255, 255, 0.16);
}

.ashby-department-heading {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
}

/* Each role is the Careers card on the website: the title on the left, the
   details on the right. Ashby hangs the card 12px out of the column; the
   site lines its edge up with the heading. */
.ashby-job-posting-brief-list .ashby-job-posting-brief {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 12px 16px;
  padding: 20px;
  border: 0.65px solid #1e1e1d;
  border-radius: 5.2px;
  background: #111110;
  transition: border-color 150ms ease;
}

.ashby-job-posting-brief:hover {
  border-color: rgba(255, 255, 255, 0.16);
  background: #111110;
}

.ashby-job-posting-brief-title {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
  color: #ffffff;
}

.ashby-job-posting-brief-details {
  margin: 0 0 0 20px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
  text-align: right;
  color: rgba(255, 255, 255, 0.6);
}

.ashby-job-posting-brief-details p {
  margin: 0;
}

/* Role page */

.ashby-job-posting-heading {
  font-family: "Lora", serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 47px;
  color: #ffffff;
}

.ashby-job-posting-left-pane {
  font-weight: 300;
}

.ashby-job-posting-right-pane-overview-tab,
.ashby-job-posting-right-pane-application-tab {
  font-size: 15px;
  font-weight: 400;
}

.ashby-job-posting-right-pane-tab-slider {
  background: #ffffff;
}

.ashby-job-posting-description {
  font-size: 15px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.7);
}

.ashby-job-posting-description p,
.ashby-job-posting-description li {
  line-height: 1.75;
}

.ashby-job-posting-description h1,
.ashby-job-posting-description h2,
.ashby-job-posting-description h3 {
  font-family: "Lora", serif;
  font-weight: 400;
  color: #ffffff;
}

.ashby-job-posting-description strong,
.ashby-job-posting-description b {
  font-weight: 500;
  color: #ffffff;
}

.ashby-job-posting-description a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* "Apply for this Job", as the site's white button. */
.ashby-job-posting-description-container > a {
  border-radius: 4px;
  font-size: 15px;
  font-weight: 500;
  transition: opacity 150ms ease;
}

.ashby-job-posting-description-container > a:hover {
  opacity: 0.7;
}

/* Application form */

.ashby-application-form-section-header-title,
.ashby-application-form-question-title {
  font-size: 15px;
  font-weight: 400;
  color: #ffffff;
}

.ashby-application-form-question-description,
.ashby-application-form-section-header-description,
.ashby-application-form-texting-consent-description {
  font-weight: 300;
  color: rgba(255, 255, 255, 0.6);
}

.ashby-application-form-input-text,
.ashby-application-form-input-textarea {
  border: 1px solid #1e1e1d;
  background-color: rgba(30, 30, 29, 0.5);
  font-size: 15px;
  font-weight: 300;
  color: #ffffff;
}

.ashby-application-form-input-text:hover,
.ashby-application-form-input-textarea:hover {
  border-color: rgba(255, 255, 255, 0.16);
}

.ashby-application-form-autofill-input-root {
  border-color: #1e1e1d;
  background: #111110;
}

.ashby-application-form-input-file {
  border: 1px dashed rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  background: rgba(30, 30, 29, 0.5);
}

.ashby-application-form-input-file-dropzone {
  border: 0;
  background: transparent;
}

/* The upload buttons, as the site's dark chip with a hairline. */
.ashby-application-form-input-file-dropzone-upload,
.ashby-application-form-autofill-input-base-layer button {
  border: 1px solid #1e1e1d;
  background: #111110;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
}

.ashby-application-form-input-file-dropzone-upload:hover,
.ashby-application-form-autofill-input-base-layer button:hover {
  border-color: rgba(255, 255, 255, 0.16);
}

/* Native radios and checkboxes are white on a dark page; this turns them
   into dark circles with a light ring. */
input[type="radio"],
input[type="checkbox"] {
  filter: invert(1) grayscale(1);
}

.ashby-application-form-input-yesno-option {
  border-color: #1e1e1d;
  background-color: rgba(30, 30, 29, 0.5);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
}

.ashby-application-form-input-yesno-option[aria-pressed="true"] {
  background-color: #ffffff;
  color: #030303;
}

.ashby-application-form-submit-button {
  border-radius: 4px;
  font-size: 15px;
  font-weight: 500;
  transition: opacity 150ms ease;
}

.ashby-application-form-submit-button:hover {
  opacity: 0.7;
}

/* Mobile, as the Careers cards there: stacked, 20px titles, 13px details. */
@media (max-width: 767px) {
  .ashby-job-board-heading {
    font-size: 24px;
    line-height: 31px;
  }

  .ashby-job-posting-heading {
    font-size: 28px;
    line-height: 36px;
  }

  .ashby-job-posting-brief-list .ashby-job-posting-brief {
    display: block;
    margin-bottom: 14px;
    padding: 20px 16px;
  }

  .ashby-job-posting-brief-title {
    margin-bottom: 20px;
    font-size: 20px;
  }

  .ashby-job-posting-brief-details {
    margin: 0;
    font-size: 13px;
    text-align: left;
  }
}