/*
 * Fullstack — Ashby job board theme
 *
 * Light, minimal, high-contrast. The page background Ashby renders is white
 * and cannot be re-themed, so everything here is built for a white page:
 * near-black type, hairline borders, brand orange used only as an accent.
 *
 * Ashby's own components read a small set of CSS variables. Ashby treats
 * --colorPrimary600 as the MAIN brand color (primary buttons, active tab,
 * focus, checked states) and --colorPrimary900 as the DARKER hover shade —
 * the variables below follow that convention. They are scoped to Ashby's
 * top-level containers so this file only ever touches the job board itself.
 *
 * Ashby validates uploads: only its documented ashby-* classes, descendant
 * tags/attributes, interaction pseudo-classes (hover/focus/active) and
 * at-rules are accepted. Structural pseudo-classes (child/type position
 * selectors) and arbitrary selectors are rejected.
 */

@import url("https://fonts.googleapis.com/css2?family=Funnel+Sans:wght@400..700&display=swap");

/* ------------------------------------------------------------------ */
/* Theme variables (scoped to every Ashby top-level container)         */
/* ------------------------------------------------------------------ */

.ashby-job-posting-header,
.ashby-job-posting-left-pane,
.ashby-job-posting-right-pane,
.ashby-application-form-container,
.ashby-job-board-heading,
.ashby-department-heading,
.ashby-job-posting-brief-list,
.ashby-job-board-filter,
.ashby-job-board-filters-label,
.ashby-job-board-back-to-all-jobs-button {
  --fontFamily:
    "Funnel Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
    Arial, sans-serif;

  /* brand */
  --colorPrimary600: #eb8c52;
  --colorPrimary900: #d57737;
  --colorPrimary500A: rgba(235, 140, 82, 0.28);
  --colorPrimaryShadow: rgba(0, 0, 0, 0.06);
  --colorShadowPrimaryLight: rgba(235, 140, 82, 0.2);
  --colorShadowPrimaryXLight: rgba(235, 140, 82, 0.1);

  /* neutrals — replace Ashby's blue-tinted grays with plain ones */
  --colorNeutral800: #09090b;
  --colorNeutral700: #3f3f46;
  --colorNeutral600: #71717a;
  --colorNeutral500: #a1a1aa;
  --colorNeutral400: #d4d4d8;
  --colorNeutral300: #e4e4e7;
  --colorNeutral200: #ececee;
  --colorNeutral100: #fafafa;
  --colorNeutralShadow: rgba(0, 0, 0, 0.06);

  /* geometry */
  --borderRadiusContainer: 10px;
  --borderRadiusControl: 8px;
  --borderRadiusButton: 8px;

  font-family: var(--fontFamily) !important;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------ */
/* Header                                                             */
/* ------------------------------------------------------------------ */

.ashby-job-posting-header {
  /*
    * Breathing room between the header and the job title. This collapses with
    * the title block's own 24px top margin, so the value here IS the gap.
    */
  margin-bottom: 3.5rem !important;
  border-bottom: 1px solid #e4e4e7 !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

/* Ashby fixes the nav row at 100px; bring it down to a normal nav height */
.ashby-job-posting-header ul {
  height: 4rem !important;
}

/* the wordmark renders at its intrinsic size otherwise — cap it to nav scale */
.ashby-job-posting-header img {
  width: auto !important;
  max-width: 100% !important;
  height: 20px !important;
}

/*
  * Job board index page (/Fullstack) — same header, matched by hand.
  *
  * Ashby renders the identical nav component on the index page but does NOT
  * attach the ashby-job-posting-header class there, so the rules above never
  * reach it. These attribute selectors match Ashby's internal class-name
  * PREFIXES (the trailing hash changes between Ashby builds, the prefix does
  * not) and mirror the header rules above one-for-one. Keep the two in sync.
  *
  * If Ashby's upload validator ever rejects this block, delete just this block
  * — the posting page header is unaffected.
  */
div[class^="_navRoot"] {
  margin-bottom: 3.5rem !important;
  border-bottom: 1px solid #e4e4e7 !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

ul[class^="_navContainer"] {
  height: 4rem !important;
}

img[class^="_navLogoWordmarkImage"] {
  width: auto !important;
  max-width: 100% !important;
  height: 20px !important;
}

/*
 * Back-to-listings control — keep the wordmark from jumping.
 *
 * Ashby's 3-column nav is a grid with align-items: center. On the index
 * page the row is 32px (the ul's content box). On a posting, the back
 * button ships with 12px padding around a 16px icon = 40px, which
 * stretches that row and recenters the 20px wordmark 4px lower.
 * Cap the control to the content-box height so both pages match.
 */
.ashby-job-board-back-to-all-jobs-button {
  box-sizing: border-box !important;
  width: 2rem !important;
  height: 2rem !important;
  padding: 0.5rem !important;
}

/* ------------------------------------------------------------------ */
/* Job title                                                          */
/* ------------------------------------------------------------------ */

.ashby-job-posting-heading {
  margin-bottom: 1rem !important;
  color: #09090b !important;
  font-size: 2.25rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
}

/* ------------------------------------------------------------------ */
/* Left pane — job details card                                       */
/* ------------------------------------------------------------------ */

.ashby-job-posting-left-pane {
  /* hug the content instead of stretching to the height of the description */
  align-self: start !important;
  padding: 1.25rem !important;
  border: 1px solid #e4e4e7 !important;
  border-radius: 10px !important;
  background-color: #fafafa !important;
  box-shadow: none !important;
  color: #09090b !important;
}

.ashby-job-posting-left-pane h2 {
  margin-bottom: 0.375rem !important;
  color: #71717a !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

.ashby-job-posting-left-pane p,
.ashby-job-posting-left-pane li,
.ashby-job-posting-left-pane li span {
  color: #09090b !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}

.ashby-job-posting-left-pane a {
  color: #09090b !important;
  text-decoration: underline !important;
  text-decoration-color: #d4d4d8 !important;
  text-underline-offset: 3px !important;
}

/* ------------------------------------------------------------------ */
/* Right pane — tabs                                                  */
/* ------------------------------------------------------------------ */

.ashby-job-posting-right-pane {
  color: #3f3f46 !important;
}

.ashby-job-posting-right-pane a[role="tab"] {
  color: #71717a !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
}

.ashby-job-posting-right-pane a[role="tab"]:hover,
.ashby-job-posting-right-pane a[role="tab"][aria-selected="true"] {
  color: #09090b !important;
}

.ashby-job-posting-right-pane-tab-slider {
  background-color: #eb8c52 !important;
}

/* ------------------------------------------------------------------ */
/* Right pane — description                                           */
/* ------------------------------------------------------------------ */

.ashby-job-posting-description-container {
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.ashby-job-posting-description {
  color: #3f3f46 !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
}

.ashby-job-posting-description h1,
.ashby-job-posting-description h2,
.ashby-job-posting-description h3 {
  color: #09090b !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
}

.ashby-job-posting-description h1 {
  font-size: 1.25rem !important;
  margin-bottom: 1.2rem !important;
}

.ashby-job-posting-description h2 {
  font-size: 1.0625rem !important;
  margin-bottom: 1.2rem !important;
}

.ashby-job-posting-description h3 {
  font-size: 1rem !important;
  margin-bottom: 1.25rem !important;
}

/*
  * Section spacing is left to Ashby's defaults: its validator rejects
  * structural (child-position) pseudo-classes, so heading/paragraph
  * margins cannot be overridden here.
  */

.ashby-job-posting-description strong,
.ashby-job-posting-description b {
  color: #09090b !important;
  font-weight: 600 !important;
}

.ashby-job-posting-description a {
  color: #09090b !important;
  text-decoration: underline !important;
  text-decoration-color: #d4d4d8 !important;
  text-underline-offset: 3px !important;
}

.ashby-job-posting-description a:hover {
  text-decoration-color: #eb8c52 !important;
}

.ashby-job-posting-description li {
  line-height: 1.6 !important;
}

/* ------------------------------------------------------------------ */
/* Primary buttons — "Apply for this Job" + "Submit Application"       */
/* ------------------------------------------------------------------ */

.ashby-job-posting-description-container > a > button,
.ashby-application-form-submit-button {
  min-height: 3rem !important;
  border: 1px solid #09090b !important;
  border-radius: 8px !important;
  background-color: #09090b !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-family: var(--fontFamily) !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.ashby-job-posting-description-container > a > button:hover,
.ashby-job-posting-description-container > a > button:active,
.ashby-application-form-submit-button:hover,
.ashby-application-form-submit-button:active {
  border-color: #27272a !important;
  background-color: #27272a !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

.ashby-job-posting-description-container > a > button:focus-visible,
.ashby-application-form-submit-button:focus-visible {
  outline: 2px solid #eb8c52 !important;
  outline-offset: 2px !important;
}

/* ------------------------------------------------------------------ */
/* Application form                                                   */
/* ------------------------------------------------------------------ */

.ashby-application-form-container {
  padding: 1.5rem !important;
  border: 1px solid #e4e4e7 !important;
  border-radius: 10px !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
  color: #3f3f46 !important;
}

.ashby-application-form-section-container {
  color: #3f3f46 !important;
}

.ashby-application-form-section-header-title {
  color: #09090b !important;
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

.ashby-application-form-section-header-description {
  color: #71717a !important;
  line-height: 1.6 !important;
}

.ashby-application-form-field-entry {
  margin-bottom: 1.25rem !important;
}

.ashby-application-form-question-title {
  margin-bottom: 0.5rem !important;
  color: #09090b !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

.ashby-application-form-question-description {
  color: #71717a !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
}

/* text-like inputs */
.ashby-application-form-input-text,
.ashby-application-form-input-textarea,
.ashby-application-form-input-dropdown,
.ashby-application-form-input-autocomplete,
.ashby-application-form-input-date {
  border: 1px solid #d4d4d8 !important;
  border-radius: 8px !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
  color: #09090b !important;
  font-family: var(--fontFamily) !important;
  font-size: 1rem !important;
}

.ashby-application-form-input-text,
.ashby-application-form-input-dropdown,
.ashby-application-form-input-autocomplete {
  min-height: 2.75rem !important;
}

.ashby-application-form-input-textarea {
  min-height: 8rem !important;
  line-height: 1.5 !important;
}

.ashby-application-form-input-text:hover,
.ashby-application-form-input-textarea:hover,
.ashby-application-form-input-dropdown:hover,
.ashby-application-form-input-autocomplete:hover,
.ashby-application-form-input-date:hover {
  border-color: #a1a1aa !important;
}

.ashby-application-form-input-text:focus,
.ashby-application-form-input-text:focus-within,
.ashby-application-form-input-textarea:focus,
.ashby-application-form-input-textarea:focus-within,
.ashby-application-form-input-dropdown:focus-within,
.ashby-application-form-input-autocomplete:focus-within,
.ashby-application-form-input-date:focus-within {
  border-color: #eb8c52 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(235, 140, 82, 0.25) !important;
}

.ashby-application-form-input-text::placeholder,
.ashby-application-form-input-textarea::placeholder {
  color: #a1a1aa !important;
}

.ashby-application-form-input-dropdown-select {
  color: #09090b !important;
  font-family: var(--fontFamily) !important;
  font-size: 1rem !important;
}

.ashby-application-form-input-dropdown-icon {
  color: #71717a !important;
}

/* popups (autocomplete results, date picker) */
.ashby-application-form-input-autocomplete-popup,
.ashby-application-form-input-date-popup {
  border: 1px solid #e4e4e7 !important;
  border-radius: 10px !important;
  background-color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
  color: #09090b !important;
}

.ashby-application-form-input-autocomplete-popup-result {
  color: #09090b !important;
}

.ashby-application-form-input-autocomplete-popup-result[aria-selected="true"] {
  background-color: #fafafa !important;
  color: #09090b !important;
}

/* checkboxes + radios */
.ashby-application-form-input-checkbox-group,
.ashby-application-form-input-radio-group {
  margin-bottom: 1.25rem !important;
  border: 0 !important;
}

.ashby-application-form-input-checkbox-group-option,
.ashby-application-form-input-radio-group-option {
  border-radius: 8px !important;
}

.ashby-application-form-input-checkbox-group-option[data-checked],
.ashby-application-form-input-radio-group-option[data-checked] {
  background-color: transparent !important;
}

.ashby-application-form-input-checkbox-group-option-checkbox {
  border: 1px solid #d4d4d8 !important;
  border-radius: 5px !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
}

.ashby-application-form-input-radio-group-option-radio {
  border-color: #d4d4d8 !important;
  background-color: #ffffff !important;
}

.ashby-application-form-input-checkbox-group-option-label,
.ashby-application-form-input-radio-group-option-label {
  color: #09090b !important;
  font-family: var(--fontFamily) !important;
  font-size: 0.9375rem !important;
}

/* yes / no toggle */
.ashby-application-form-input-yesno {
  border-color: #d4d4d8 !important;
  border-radius: 8px !important;
  background-color: #ffffff !important;
}

.ashby-application-form-input-yesno-option {
  color: #3f3f46 !important;
}

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

/* file upload */
.ashby-application-form-input-file {
  border: 1px dashed #d4d4d8 !important;
  border-radius: 8px !important;
  background-color: #fafafa !important;
}

.ashby-application-form-input-file:focus-within {
  border-color: #eb8c52 !important;
  background-color: #fafafa !important;
}

.ashby-application-form-input-file-dropzone {
  min-height: 6.5rem !important;
  padding: 1.25rem !important;
}

.ashby-application-form-input-file-dropzone-upload {
  border: 1px solid #d4d4d8 !important;
  border-radius: 8px !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
  color: #09090b !important;
  font-family: var(--fontFamily) !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
}

.ashby-application-form-input-file-dropzone-upload svg {
  fill: #09090b !important;
}

.ashby-application-form-input-file-dropzone-upload:hover,
.ashby-application-form-input-file-dropzone-upload:active {
  border-color: #09090b !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
  color: #09090b !important;
}

.ashby-application-form-input-file-dropzone-instructions {
  color: #71717a !important;
  font-weight: 400 !important;
}

.ashby-application-form-input-file-item {
  border: 1px solid #e4e4e7 !important;
  border-radius: 8px !important;
  background-color: #ffffff !important;
}

.ashby-application-form-input-file-item-name {
  color: #09090b !important;
}

.ashby-application-form-input-file-item-delete {
  color: #71717a !important;
}

/* status banners */
.ashby-application-form-success-container {
  border: 1px solid #bbe5c8 !important;
  border-radius: 10px !important;
  background-color: #f2faf5 !important;
  color: #09090b !important;
}

.ashby-application-form-failure-container,
.ashby-application-form-blocked-application-container {
  border: 1px solid #f3c6c6 !important;
  border-radius: 10px !important;
  background-color: #fdf4f4 !important;
  color: #09090b !important;
}

/* ------------------------------------------------------------------ */
/* Job board index (list of open positions)                           */
/* ------------------------------------------------------------------ */

.ashby-job-board-heading {
  color: #09090b !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
}

.ashby-job-board-heading-count {
  color: #a1a1aa !important;
  font-weight: 400 !important;
}

.ashby-department-heading {
  margin-top: 2.5rem !important;
  margin-bottom: 0.75rem !important;
  color: #71717a !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.ashby-job-posting-brief {
  margin-bottom: 0.75rem !important;
  padding: 1.25rem 1.5rem !important;
  border: 1px solid #e4e4e7 !important;
  border-radius: 10px !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
  transition:
    border-color 150ms ease,
    background-color 150ms ease !important;
}

.ashby-job-posting-brief:hover {
  border-color: #09090b !important;
  background-color: #fafafa !important;
}

.ashby-job-posting-brief-title {
  color: #09090b !important;
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

.ashby-job-posting-brief-details {
  margin-top: 0.375rem !important;
  color: #71717a !important;
  font-size: 0.875rem !important;
}

.ashby-job-board-filter {
  border: 1px solid #d4d4d8 !important;
  border-radius: 8px !important;
  background-color: #ffffff !important;
  color: #09090b !important;
}

.ashby-job-board-filters-label {
  color: #71717a !important;
}

.ashby-job-board-reset-filters-label,
.ashby-job-board-back-to-all-jobs-button {
  color: #09090b !important;
}

/* ------------------------------------------------------------------ */
/* Mobile                                                             */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
  .ashby-job-posting-heading,
  .ashby-job-board-heading {
    font-size: 1.75rem !important;
  }

  .ashby-job-posting-left-pane,
  .ashby-application-form-container {
    padding: 1rem !important;
  }

  .ashby-job-posting-brief {
    padding: 1rem 1.25rem !important;
  }

  .ashby-application-form-input-file-dropzone {
    padding: 1rem !important;
  }
}