@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

@font-face {
  font-family: 'Agrandir Wide';
  src: url(https://cdn.prod.website-files.com/63d3e5f547ca0a274b2e07e1/67814a360de7eed5c96e6358_PPAgrandir-WideLight.ttf) format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

html {
  --v-ink: #091c1e;
  --v-text: #fff;
  --v-muted: #ffffffb3;
  --v-rule: #ffffff33;
  --v-row-bg: #091c1e33;
  --v-row-bg-hover: #091c1e66;
  --v-pad: 40px;
  --v-surface: #091c1ee6;
  --v-panel: #ffffff0d;

  --colorPrimary900: #14363b !important;
  --colorPrimary600: #8438FF !important;
  --colorAppBackground: transparent !important;
  --widthMaxJobBoard: none !important;
  --borderRadiusContainer: 0px !important;
  --borderRadiusControl: 4px !important;
  --borderRadiusButton: 4px !important;
  --fontFamily: Inter, sans-serif !important;
}

html, body { background: transparent !important; color: var(--v-text) !important; margin: 0 !important; padding: 0 !important; }

/* ---- layout: only what the JazzHR match and the full-bleed ask require ---- */
div:has(> div > div > .ashby-job-posting-brief-list),
div:has(> div > .ashby-job-posting-brief-list),
div:has(> .ashby-job-posting-brief-list) { max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
div:has(> div > .ashby-job-posting-heading) { max-width: none !important; width: 100% !important; margin: 0 !important; }
div:has(> a > .ashby-job-board-back-to-all-jobs-button) { max-width: none !important; width: 100% !important; margin: 0 !important; }
/* Ashby centres this button in its own 1024px column, which leaves it adrift
   from the heading. Full-width above, then offset so the label - not the
   button box - lines up with the content edge (the button has 16px padding). */
.ashby-job-board-back-to-all-jobs-button { margin-left: calc(var(--v-pad) - 16px) !important; }

div:has(> .ashby-job-board-heading) { display: none !important; }
.ashby-job-board-heading, .ashby-department-heading, .ashby-job-posting-brief-department-heading, footer { display: none !important; }
div:has(> .ashby-job-posting-brief-list) { border: 1px solid var(--v-rule) !important; border-bottom: 0 !important; }

.ashby-job-posting-brief-list { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border: none !important; }
.ashby-job-posting-brief-list > a { display: block !important; width: 100% !important; text-decoration: none !important; color: inherit !important; }
.ashby-job-posting-brief {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--v-pad) !important;
  width: 100% !important;
  margin: 0 !important;
  padding: var(--v-pad) !important;
  border: none !important;
  border-bottom: 1px solid var(--v-rule) !important;
  border-radius: 0 !important;
  background-color: var(--v-row-bg) !important;
  transition: background-color .25s !important;
}
.ashby-job-posting-brief-list > a:hover .ashby-job-posting-brief { background-color: var(--v-row-bg-hover) !important; }
.ashby-job-posting-brief-title, .ashby-job-posting-brief-details {
  display: flex !important;
  align-items: center !important;
  width: 40% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.ashby-job-posting-brief-details { flex-wrap: wrap !important; gap: 5px !important; }
.ashby-job-posting-brief-details p { margin: 0 !important; font: inherit !important; color: inherit !important; }
.ashby-job-posting-brief::after { content: "+ View details"; flex: none; font: 500 16px/1.3 Inter, sans-serif; color: var(--v-text); }

/* Two-tone: surround one shade, content panel a step lighter. */
div:has(> div > .ashby-job-posting-heading) { background-color: var(--v-surface) !important; }
div:has(> div > a > .ashby-job-board-back-to-all-jobs-button) { background-color: var(--v-surface) !important; }
div:has(> .ashby-job-posting-left-pane) { background-color: var(--v-panel) !important; padding: var(--v-pad) !important; }

/* ---- colour, typography, branding ---- */
.ashby-job-posting-brief-title { border: none !important; font: 300 1.5rem/1.3 'Agrandir Wide', Arial, sans-serif !important; color: var(--v-text) !important; }
.ashby-job-posting-brief-details { font: 500 16px/1.3 Inter, sans-serif !important; color: var(--v-muted) !important; }

.ashby-job-posting-heading { font-family: 'Agrandir Wide', Arial, sans-serif !important; font-weight: 300 !important; color: var(--v-text) !important; }
.ashby-job-posting-left-pane { background-color: transparent !important; font-family: Inter, sans-serif !important; color: var(--v-muted) !important; }
.ashby-job-posting-right-pane { background-color: transparent !important; color: var(--v-text) !important; }
.ashby-job-posting-right-pane-overview-tab, .ashby-job-posting-right-pane-application-tab { font-family: Inter, sans-serif !important; font-weight: 500 !important; color: var(--v-muted) !important; }
.ashby-job-posting-right-pane-tab-slider { background-color: var(--v-text) !important; }
.ashby-job-posting-description-container { background-color: transparent !important; color: var(--v-text) !important; border: none !important; box-shadow: none !important; }
.ashby-job-posting-description { background-color: transparent !important; font-family: Inter, sans-serif !important; line-height: 1.6 !important; color: var(--v-muted) !important; }
.ashby-job-posting-description a { color: var(--v-text) !important; text-decoration: underline !important; }
.ashby-job-posting-description :is(h1, h2, h3),
.ashby-application-form-section-header-title { font-family: 'Agrandir Wide', Arial, sans-serif !important; font-weight: 300 !important; color: var(--v-text) !important; }

.ashby-job-board-back-to-all-jobs-button,
.ashby-application-form-question-title,
.ashby-application-form-field-entry label { font-family: Inter, sans-serif !important; font-weight: 500 !important; color: var(--v-text) !important; }
.ashby-job-board-back-to-all-jobs-button:hover { background-color: #ffffff1a !important; color: var(--v-text) !important; }

.ashby-job-board-back-to-all-jobs-button svg,
.ashby-job-board-back-to-all-jobs-button svg path,
.ashby-application-form-autofill-input-icon path { fill: var(--v-text) !important; }

/* Secondary buttons take their text from --colorPrimary600 (brand purple),
   which is 3.17:1 on the dark panel. Restate as white. */
.ashby-application-form-autofill-input-base-layer button,
.ashby-application-form-input-file-dropzone-upload { color: var(--v-text) !important; border-color: var(--v-rule) !important; }
.ashby-application-form-autofill-input-base-layer button svg,
.ashby-application-form-autofill-input-base-layer button path,
.ashby-application-form-input-file-dropzone-upload svg,
.ashby-application-form-input-file-dropzone-upload path { fill: var(--v-text) !important; }

/* Ashby's default label colour is rgb(84,91,109) - 2.29:1 on the dark panel. */
.ashby-job-posting-left-pane :is(h1, h2, h3, h4, label, strong),
.ashby-application-form-input-file-dropzone-instructions { color: var(--v-muted) !important; }

.ashby-job-board-filters-label, .ashby-job-board-reset-filters-label { font-family: Inter, sans-serif !important; color: var(--v-muted) !important; }
.ashby-application-form-section-header-description,
.ashby-application-form-question-description,
.ashby-application-form-texting-consent-description,
.ashby-application-form-autofill-input-description { font-family: Inter, sans-serif !important; color: var(--v-muted) !important; }

.ashby-job-board-filter,
.ashby-application-form-container :is(input, textarea, select) { background-color: #ffffff14 !important; border: 1px solid var(--v-rule) !important; color: var(--v-text) !important; font-family: Inter, sans-serif !important; }
.ashby-application-form-container :is(input, textarea)::placeholder { color: #ffffff66 !important; }

.ashby-survey-form-container,
.ashby-application-form-container,
.ashby-application-form-section-container,
.ashby-application-form-success-container,
.ashby-application-form-failure-container,
.ashby-application-form-blocked-application-container { background-color: transparent !important; color: var(--v-text) !important; }

/* One tinted layer only - these nest, so tinting all three compounds the alpha. */
.ashby-application-form-autofill-input-root { background-color: #ffffff0a !important; border-color: var(--v-rule) !important; color: var(--v-text) !important; }
.ashby-application-form-autofill-pane,
.ashby-application-form-autofill-uploader,
.ashby-application-form-autofill-input-base-layer { background-color: transparent !important; border-color: var(--v-rule) !important; color: var(--v-text) !important; }
.ashby-application-form-autofill-input-drag-layer,
.ashby-application-form-autofill-input-pending-layer { background-color: #0e2a2de6 !important; border-color: var(--v-rule) !important; color: var(--v-text) !important; }

/* "Apply for this Job" carries no ashby-* hook, so anchor on its container. */
.ashby-job-posting-description-container button,
.ashby-application-form-submit-button { background-color: #fff !important; color: var(--v-ink) !important; font-family: Inter, sans-serif !important; font-weight: 600 !important; border: none !important; }
.ashby-job-posting-description-container button:hover,
.ashby-application-form-submit-button:hover { background-color: #e8eced !important; color: var(--v-ink) !important; }

.ashby-job-posting-left-pane :is(label, strong),
:is(.ashby-job-posting-right-pane-overview-tab, .ashby-job-posting-right-pane-application-tab)[data-state="active"],
.ashby-job-posting-description :is(h4, strong, b),
.ashby-application-form-autofill-input-form-alert,
.ashby-application-form-autofill-input-title { color: var(--v-text) !important; }

@media only screen and (max-width: 479px) {
  html { --v-pad: 30px; }
  .ashby-job-posting-brief { flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; }
  .ashby-job-posting-brief-title, .ashby-job-posting-brief-details { width: 100% !important; }
}