/* ==========================================================================
   Crux — Ashby Job Board Custom CSS
   Source: Figma "Crux-Climate" › Careers Module (node 9659:60787)
   Upload: Ashby › Admin › Job Boards › Theme › Custom CSS

   Notes
   - Ashby only accepts its own .ashby-* classes and :root variables, and
     rejects @import. Everything below sticks to those.
   - The job board renders inside an iframe, so it can't use the fonts already
     loaded on crux.com. The @font-face rule below loads the same variable
     ABC Monument Grotesk file crux.com uses (hosted on Crux's Webflow CDN).
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Font — one variable file covers weights 200–900 (300 and 400 used here)
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "ABC Monument Grotesk";
  src: url("https://cdn.prod.website-files.com/6a3d83affbbfecfd5aaee59a/6a3d83affbbfecfd5aaee5dc_ABCMonumentGroteskVariable.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}


/* --------------------------------------------------------------------------
   2. Tokens (from the Figma variables)
   -------------------------------------------------------------------------- */

:root {
  /* Ashby built-in variables */
  --fontFamily: "ABC Monument Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --colorAppBackground: #f8f7f4;      /* fill/light-soft */
  --colorPrimary900: #070707;         /* text/black */
  --colorPrimary600: #070707;
  --widthMaxContent: 100%;            /* job board container */
  --widthMaxJobBoard: 100%;           /* application form section */
  --borderRadiusContainer: 0;
  --borderRadiusControl: 0;
  --borderRadiusButton: 0;

  /* Crux tokens */
  --crux-fill-light: #ffffff;         /* fill/light, button/white */
  --crux-fill-light-soft: #f8f7f4;    /* fill/light-soft */
  --crux-stroke-light: #dedede;       /* stroke/light */
  --crux-text-black: #070707;         /* text/black */
  --crux-text-secondary: rgba(7, 7, 7, 0.6); /* text/secondary-black */
  --crux-text-control: #1c1c1c;       /* dropdown label */
}


/* --------------------------------------------------------------------------
   3. Job list — heading
   "Open Positions (21)" — H3: Light 32 / 1.25 / 0.25%
   -------------------------------------------------------------------------- */

.ashby-job-board-heading,
.ashby-job-board-heading-count {
  font-family: var(--fontFamily);
  font-size: 32px;
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: 0.08px;
  color: #000000;
}

.ashby-job-board-heading {
  margin-bottom: 40px;
}


/* --------------------------------------------------------------------------
   4. Filters
   Dropdown: white, 1px #dedede, 14px 16px padding, Text S 16 / 1.5 / 2.2%
   -------------------------------------------------------------------------- */

/* Mockup has no "Filters" label above the dropdowns */
.ashby-job-board-filters-label {
  display: none;
}

.ashby-job-board-filter {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--crux-fill-light);
  /* 16px chevron (vuesax/outline/arrow-down) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M19.92 8.95l-6.52 6.52c-.77.77-2.03.77-2.8 0L4.08 8.95' stroke='%231c1c1c' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px 16px;
  border: 1px solid var(--crux-stroke-light);
  border-radius: 0;
  box-shadow: none;
  padding: 14px 44px 14px 16px;
  height: auto;
  font-family: var(--fontFamily);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.352px;
  color: var(--crux-text-control);
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.ashby-job-board-filter:hover,
.ashby-job-board-filter:focus {
  border-color: var(--crux-text-black);
  outline: none;
}

.ashby-job-board-reset-filters-label {
  font-family: var(--fontFamily);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.308px;
  color: var(--crux-text-black);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* --------------------------------------------------------------------------
   5. Department headings
   H4: Regular 25 / 1.28 / 1.16% — 48px between groups, 24px to first card
   -------------------------------------------------------------------------- */

.ashby-department-heading,
.ashby-job-posting-brief-department-heading,
.ashby-department-heading-level,
.ashby-job-posting-brief-department-heading-level {
  font-family: var(--fontFamily);
  font-size: 25px;
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: 0.29px;
  color: #000000;
  text-transform: none;
}

.ashby-department-heading,
.ashby-job-posting-brief-department-heading {
  margin-top: 48px;
  margin-bottom: 24px;
}

/* Sub-team headings (only appear if Crux nests teams under departments) */
.ashby-department-heading-level,
.ashby-job-posting-brief-department-heading-level {
  font-size: 20px;
  line-height: 1.4;
  margin-top: 24px;
  margin-bottom: 16px;
}


/* --------------------------------------------------------------------------
   6. Job cards
   Default: transparent on #f8f7f4, 1px #dedede, 24px padding
   Hover:   white background, details go full black
   -------------------------------------------------------------------------- */

.ashby-job-posting-brief-list {
  background-color: transparent;
  margin: 0;
  padding: 0;
}

.ashby-job-posting-brief {
  background-color: transparent;
  border: 1px solid var(--crux-stroke-light);
  border-radius: 0;
  box-shadow: none;
  padding: 24px;
  margin-bottom: 8px;
  transition: background-color 0.2s ease;
}

.ashby-job-posting-brief:hover {
  background-color: var(--crux-fill-light);
  border-color: var(--crux-stroke-light);
  box-shadow: none;
}

/* Title — Text M: Regular 20 / 1.4 / 2.2% */
.ashby-job-posting-brief-title {
  font-family: var(--fontFamily);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.44px;
  color: var(--crux-text-black);
  margin: 0 0 8px;
  text-decoration: none;
}

/* Details — Text XS: Regular 14 / 1.5 / 2.2%, 60% black */
.ashby-job-posting-brief-details {
  font-family: var(--fontFamily);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.308px;
  color: var(--crux-text-secondary);
  transition: color 0.2s ease;
}

.ashby-job-posting-brief:hover .ashby-job-posting-brief-details {
  color: var(--crux-text-black);
}


/* --------------------------------------------------------------------------
   7. Job detail page (not in mockup — same colors and font for consistency)
   -------------------------------------------------------------------------- */

.ashby-job-board-back-to-all-jobs-button {
  background-color: transparent;
  border: none;
  box-shadow: none;
  font-family: var(--fontFamily);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.308px;
  color: var(--crux-text-black);
}

.ashby-job-board-back-to-all-jobs-button:hover {
  background-color: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ashby-job-posting-header,
.ashby-job-posting-heading {
  font-family: var(--fontFamily);
  font-size: 32px;
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: 0.08px;
  color: #000000;
}

.ashby-job-posting-left-pane {
  font-family: var(--fontFamily);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.308px;
  color: var(--crux-text-secondary);
}

.ashby-job-posting-right-pane {
  background-color: var(--crux-fill-light);
  border: 1px solid var(--crux-stroke-light);
  border-radius: 0;
  box-shadow: none;
}

.ashby-job-posting-right-pane-overview-tab,
.ashby-job-posting-right-pane-application-tab {
  font-family: var(--fontFamily);
  font-size: 16px;
  line-height: 1.5;
  color: var(--crux-text-black);
}

.ashby-job-posting-right-pane-tab-slider {
  background-color: var(--crux-text-black);
}

.ashby-job-posting-description {
  font-family: var(--fontFamily);
  font-size: 16px;
  line-height: 1.5;
  color: var(--crux-text-black);
}


/* --------------------------------------------------------------------------
   8. Application form
   -------------------------------------------------------------------------- */

.ashby-application-form-container,
.ashby-application-form-section-container,
.ashby-survey-form-container {
  font-family: var(--fontFamily);
  color: var(--crux-text-black);
}

.ashby-application-form-question-title {
  font-family: var(--fontFamily);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.352px;
  color: var(--crux-text-black);
}

.ashby-application-form-question-description {
  font-family: var(--fontFamily);
  font-size: 14px;
  line-height: 1.5;
  color: var(--crux-text-secondary);
}

.ashby-application-form-section-header-title {
  font-family: var(--fontFamily);
  font-size: 25px;
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: 0.29px;
  color: #000000;
}

.ashby-application-form-section-header-description {
  font-family: var(--fontFamily);
  font-size: 14px;
  line-height: 1.5;
  color: var(--crux-text-secondary);
}

.ashby-application-form-input-text,
.ashby-application-form-input-textarea,
.ashby-application-form-input-dropdown-select,
.ashby-application-form-input-date {
  font-family: var(--fontFamily);
  font-size: 16px;
  color: var(--crux-text-black);
  background-color: var(--crux-fill-light);
  border: 1px solid var(--crux-stroke-light);
  border-radius: 0;
  box-shadow: none;
}

.ashby-application-form-input-text:focus,
.ashby-application-form-input-textarea:focus,
.ashby-application-form-input-dropdown-select:focus {
  border-color: var(--crux-text-black);
  outline: none;
}

.ashby-application-form-input-file-dropzone {
  border-color: var(--crux-stroke-light);
  border-radius: 0;
}

.ashby-application-form-submit-button {
  background-color: var(--crux-text-black);
  border: 1px solid var(--crux-text-black);
  border-radius: 0;
  box-shadow: none;
  color: var(--crux-fill-light);
  font-family: var(--fontFamily);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.352px;
  padding: 14px 24px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.ashby-application-form-submit-button:hover {
  background-color: var(--crux-fill-light);
  color: var(--crux-text-black);
}

.ashby-application-form-success-container,
.ashby-application-form-failure-container {
  font-family: var(--fontFamily);
  color: var(--crux-text-black);
  border-radius: 0;
}


/* --------------------------------------------------------------------------
   9. Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .ashby-job-board-heading,
  .ashby-job-board-heading-count,
  .ashby-job-posting-header,
  .ashby-job-posting-heading {
    font-size: 26px;
  }

  .ashby-job-board-heading {
    margin-bottom: 24px;
  }

  .ashby-department-heading,
  .ashby-job-posting-brief-department-heading {
    font-size: 22px;
    margin-top: 32px;
    margin-bottom: 16px;
  }

  .ashby-job-posting-brief {
    padding: 20px;
  }

  .ashby-job-posting-brief-title {
    font-size: 18px;
  }
}