/* stylelint-disable */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');

/* These variables can be used to control values throughout the job board. */
:root {
  /*  Darker primary color
    WARNING - This can be set in the Ashby admin under theme settings!
    If you modify, you should make sure your colors work with the settings there. */
  --colorPrimary900: #e84125;

  /*  Lighter primary color
    WARNING - This can be set in the Ashby admin under theme settings!
    If you modify, you should make sure your colors work with the settings there. */
  --colorPrimary600: #e84125;

  /*  The max width of the job board container */
  --widthMaxJobBoard: 800px;

  /*  The max width of the application form section */
  /* --widthMaxJobBoard: 800px; */

  /*  Container border radius */
  --borderRadiusContainer: 0.75rem;

  /*  Border radius of control elements (e.g. input boxes) */
  --borderRadiusControl: 0.75rem;

  /*  Button border radius */
  --borderRadiusButton: 9999px;

  --borderWidthBold: 1px;
  --borderWidthHeavy: 2px;

  /*  Font families - match website design system */
  --fontFamily: 'Geist', sans-serif;

  /* Background colors - match website design system */
  --colorAppBackground: hsl(0, 0%, 0%);
  --colorCardBackground: #000000;
  --colorBorder: hsl(240, 7%, 26%);
  --colorTextPrimary: #d3d3d9;
  --colorTextSecondary: hsl(240, 5%, 64.9%);
  --colorInput: hsl(217.2, 32.6%, 17.5%);

  /* Website color palette */
  --primary-light: #e84125;
  --primary-lightest: #f96b50;
  --gray-50: #fafafa;
  --gray-100: #f4f4f5;
  --gray-200: #e3e3e8;
  --gray-300: #d3d3d9;
  --gray-400: #9f9fac;
  --gray-500: #7d7d8c;
  --gray-600: #50505d;
  --gray-700: #3e3e47;
  --gray-800: #26262b;
  --gray-900: #17171c;
  --gray-950: #111113;
  --gray-1000: #09090b;
  --gray-1100: #000000;

  --radius: 0.75rem;
  --border: 240 7% 26%;

  --colorNeutral300: rgb(62, 62, 71);

  --colorNeutral000: #000000;
}

/* Base styling to match website */
* {
  box-sizing: border-box;
}

body {
  font-family: var(--fontFamily);
  background-color: var(--colorAppBackground);
  color: var(--colorTextPrimary);
  margin: 0;
  padding: 0;
}

/* Job board container styling */
.ashby-job-board-heading {
  font-family: var(--fontFamily);
  font-weight: 500;
  font-size: 52px;
  text-align: center;
  color: var(--colorTextPrimary);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
}

#root > div > div {
  margin:0 !important;
}

.ashby-job-board-heading-count {
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--primary-lightest);
  background-color: rgb(67 20 7 / 1);
  border-radius: calc(var(--radius) - 6px);
  word-break: keep-all;
}

.ashby-job-posting-brief-list {
  margin-left: 12px;
  margin-right: 12px;
}

/* Job posting brief styling */
.ashby-job-posting-brief {
  background-color: var(--gray-950);
  border: none;
  padding: 24px;
  border-radius: 8px;
  margin-bottom: 12px;
}

.ashby-job-posting-brief:hover {
  border-color: var(--gray-900);
  background-color: hsl(240, 12%, 6%);
}

.ashby-job-posting-brief-title {
  font-weight: 500;
  color: var(--gray-100);
  margin-bottom: 0.5rem;
  font-size: 18px;
}

.ashby-job-posting-brief-details {
  color: var(--gray-400);
  font-size: 12px;
}

.ashby-job-posting-brief-details > p {
  color: var(--gray-400) !important;
}

/* Department and team headings */
.ashby-department-heading,
.ashby-department-heading-level,
.ashby-job-posting-brief-department-heading,
.ashby-job-posting-brief-department-heading-level {
  font-size: 24px;
  font-weight: 450;
  color: var(--colorTextPrimary);
}

/* Job posting page styling */
.ashby-job-posting-header {
}

.ashby-job-posting-heading {
  font-weight: 500;
  color: var(--colorTextPrimary);
}

.ashby-job-posting-left-pane {
  background-color: var(--colorCardBackground);
  color: var(--colorTextPrimary);
}

.ashby-job-posting-left-pane h1,
.ashby-job-posting-left-pane h2,
.ashby-job-posting-left-pane h3,
.ashby-job-posting-left-pane h4,
.ashby-job-posting-left-pane h5,
.ashby-job-posting-left-pane h6 {
  color: var(--colorTextPrimary);
}

.ashby-job-posting-left-pane p,
.ashby-job-posting-left-pane li,
.ashby-job-posting-left-pane div {
  color: var(--gray-300);
}

.ashby-job-posting-right-pane {
  background-color: var(--colorCardBackground);
  color: var(--colorTextPrimary);
}

/* Tab styling */
.ashby-job-posting-right-pane-tab-slider {
}

.ashby-job-posting-right-pane-overview-tab,
.ashby-job-posting-right-pane-application-tab {
    color: inherit;
}

.ashby-job-posting-right-pane nav a {
    color: var(--colorTextSecondary);
}

.ashby-job-posting-right-pane nav a:hover {
    color: var(--colorNeutral200) !important;
    border-bottom-color: var(--colorNeutral200) !important;
}

.ashby-application-form-field-entry > div > div {
    background: none;
}

.ashby-application-form-field-entry > div > div > div {
    color: var(--colorTextSecondary);
}
.ashby-job-posting-right-pane nav a[aria-selected='true'] {
  color: var(--primary-light);
}

.ashby-job-posting-right-pane h2 {
  color: var(--gray-100);
}

/* Back button styling */
.ashby-job-board-back-to-all-jobs-button {
  color: var(--gray-500);
  background: none;
  border: none;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

.ashby-job-board-back-to-all-jobs-button > svg {
  fill: var(--gray-500);
}

.ashby-job-board-back-to-all-jobs-button:hover {
  background: none;
  border: none;
  color: var(--primary-light);
}

.ashby-job-board-back-to-all-jobs-button:hover > svg {
  fill: var(--primary-light);
}

/* Filter styling */
.ashby-job-board-filters-label {
  color: var(--colorTextPrimary);
  font-weight: 400;
  margin-bottom: 0.5rem;
}

.ashby-job-board-filter {
  background: var(--colorCardBackground) !important;
  color: var(--colorTextPrimary) !important;
  border: 1px solid var(--colorBorder) !important;
  border-radius: var(--borderRadiusControl) !important;
  padding: 0.5rem 1rem !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 400 !important;
  font-family: var(--fontFamily) !important;
}

.ashby-job-board-filter:focus {
}

.ashby-job-board-filter option {
  background-color: var(--colorCardBackground) !important;
  color: var(--colorTextPrimary) !important;
  border: 1px solid var(--colorBorder) !important;
  font-weight: 300 !important;
}

.ashby-job-board-reset-filters-label {
  color: var(--colorPrimary600);
  cursor: pointer;
  text-decoration: underline;
  line-height: 1;
}

.ashby-job-board-reset-filters-label:hover {
  color: var(--colorPrimary900);
}

/* Application form styling */
.ashby-application-form-container {
  background-color: var(--colorCardBackground);
}

.ashby-application-form-section-container {
}

.ashby-application-form-section-header {
}

.ashby-application-form-section-header-title {
  color: var(--colorTextPrimary);
}

.ashby-application-form-section-header-description {
  color: var(--colorTextSecondary);
}

.ashby-application-form-field-entry {
}

.ashby-application-form-question-title {
  color: var(--colorTextPrimary);
}

.ashby-application-form-question-description {
  color: var(--colorTextSecondary);
}

/* Form inputs */
.ashby-application-form-field-entry input,
.ashby-application-form-field-entry textarea,
.ashby-application-form-field-entry select {
  background-color: var(--colorCardBackground) !important;
  border: 1px solid var(--colorBorder);
  border-radius: var(--borderRadiusControl);
  color: var(--colorTextPrimary);
  padding: 0.75rem;
  font-family: var(--fontFamily);
  font-size: 0.875rem;
  width: 100%;
  transition: border-color 0.2s ease;
}

.ashby-application-form-field-entry input::placeholder,
.ashby-application-form-field-entry textarea::placeholder {
  color: var(--colorTextSecondary);
}

.ashby-application-form-field-entry input:focus,
.ashby-application-form-field-entry textarea:focus,
.ashby-application-form-field-entry select:focus {
  outline: none;
  border-color: var(--colorPrimary600);
}

.ashby-application-form-field-entry textarea {
  resize: vertical;
  min-height: 120px;
}

/* Submit button */
.ashby-job-posting-right-pane > div > a > button,
.ashby-application-form-submit-button {
  background-color: var(--colorPrimary600);
  border: none;
  border-radius: var(--borderRadiusButton);
  color: white;
  padding: 0.875rem 1.5rem;
  font-family: var(--fontFamily);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.ashby-job-posting-right-pane > div > a > button > svg,
.ashby-application-form-submit-button > svg {
  fill: white;
}

.ashby-job-posting-right-pane > div > a > button:hover,
.ashby-application-form-submit-button:hover {
  color: white;
  background-color: rgba(232, 67, 38, 0.9);
}

.ashby-job-posting-right-pane > div > a > button:hover > svg,
.ashby-application-form-submit-button:hover > svg {
  fill: white;
}

.ashby-job-posting-right-pane > div > a > button:disabled,
.ashby-application-form-submit-button:disabled {
  background-color: var(--colorTextSecondary);
  cursor: not-allowed;
}

/* Success and failure messages */
.ashby-application-form-success-container,
.ashby-application-form-failure-container {
  background-color: var(--colorCardBackground);
  border: 1px solid var(--colorBorder);
  border-radius: var(--borderRadiusContainer);
  padding: 2rem;
  text-align: center;
  color: var(--colorTextPrimary);
}

.ashby-application-form-success-container {
  border-color: #22c55e;
  background-color: rgba(34, 197, 94, 0.1);
}

.ashby-application-form-success-container h2 {
    font-size: 24px;
}

.ashby-application-form-failure-container {
  border-color: #ef4444;
  background-color: rgba(239, 68, 68, 0.1);
}

/* Texting consent */
.ashby-application-form-texting-consent-description {
  color: var(--colorTextSecondary);
  font-size: 0.75rem;
  margin-top: 0.5rem;
}

/* Autofill styling */
.ashby-application-form-autofill-pane {
  background-color: var(--colorCardBackground);
  border: none;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.ashby-application-form-autofill-input-root {
  background-color: var(--colorCardBackground);
  border: 1px dashed var(--colorNeutral300);
  padding: 2rem;
  text-align: center;
  transition: border-color 0.2s ease;
}

.ashby-application-form-autofill-input-root:hover,
.ashby-application-form-autofill-input-root[data-state='drag'] {
  border-color: var(--colorPrimary600);
}

.ashby-application-form-autofill-input-title {
  color: var(--colorTextPrimary);
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.ashby-application-form-autofill-input-description {
  color: var(--colorTextSecondary);
  font-size: 0.875rem;
}

/* Survey forms */
.ashby-survey-form-container {
  background-color: var(--colorCardBackground);
  border: 1px solid var(--colorBorder);
  border-radius: var(--borderRadiusContainer);
  padding: 2rem;
  margin-top: 2rem;
}

/* Blocked application container */
.ashby-application-form-blocked-application-container {
  background-color: var(--colorCardBackground);
  border: 1px solid var(--colorBorder);
  border-radius: var(--borderRadiusContainer);
  padding: 2rem;
  text-align: center;
}

/* Responsive design */
@media (max-width: 1024px) {
  .ashby-job-board-heading {
    font-size: 40px;
  }
}

@media (max-width: 768px) {
  .ashby-job-posting-brief,
  .ashby-application-form-container,
  .ashby-job-posting-left-pane,
  .ashby-job-posting-right-pane {
    padding: 1.5rem;
  }

  .ashby-application-form-submit-button {
    padding: 1rem 1.5rem;
  }

  .ashby-job-board-heading {
    font-size: 32px;
  }
}

#overview {
  background-color: var(--colorCardBackground) !important;
}