/*
 * Ashby Job Board – Custom Stylesheet for Orderful Careers Page
 *
 * STATIC FILE — This CSS is uploaded to / linked from the Ashby job board admin
 * panel and served externally by Ashby's embed script. It is NOT bundled by
 * Next.js and will NOT be automatically deployed with the application.
 *
 * To apply changes:
 *   1. Edit this file in the repository.
 *   2. Commit and deploy the site so the file is available at its public URL.
 *   3. Verify the hosted URL returns the updated CSS.
 *   4. If Ashby caches the stylesheet, purge or re-save the URL in the Ashby
 *      admin panel (Settings → Job Board → Custom CSS).
 *
 * Reference: https://www.ashbyhq.com/job_board_example_css/full-job-board.css
 *
 * Last updated: 2026-03-19
 */

/* stylelint-disable */

/* ---------------------------------------------------------------------------
 * 1. ROOT VARIABLES
 *
 * Maps Ashby's theming variables to the Orderful design system.
 * WARNING — colorPrimary900 / colorPrimary600 can also be set in the Ashby
 * admin under Theme settings. If you modify them here, make sure the admin
 * values don't override them, or remove the admin-side colours.
 * --------------------------------------------------------------------------- */

:root {
  /* Primary brand colour (Orderful Compliance Red) */
  --colorPrimary900: #e42b0c;

  /* Lighter primary accent */
  --colorPrimary600: #f32b09;

  /*
   * Max width of the job board container.
   * The careers page Section has no explicit max-width on its inner content,
   * so we let the board fill the available space (matches ~1072px content width
   * once Section padding is accounted for). Set to "none" so it flexes with the
   * parent container rather than imposing its own constraint.
   */
  --widthMaxJobBoard: 100%;

  /* Container border radius — matches --radius-lg (8px) */
  --borderRadiusContainer: 0.5rem;

  /* Control element border radius (inputs, selects) — matches --radius-md */
  --borderRadiusControl: 0.375rem;

  /* Button border radius — matches --radius-lg */
  --borderRadiusButton: 0.5rem;

  /* Font family — PP Telegraf, same stack as the rest of the site */
  --fontFamily: "PP Telegraf", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;

  /* Background — match the site body (#f5f5f5) or white depending on context.
     Since the embed sits inside a white Section, use transparent so it inherits. */
  --colorAppBackground: transparent;
}

/* ---------------------------------------------------------------------------
 * 2. JOB BOARD LIST VIEW
 * --------------------------------------------------------------------------- */

/* Main heading — replaces the page-level h2 so Ashby controls the text.
   Matches: text-5xl leading-tight font-extralight tracking-tight mb-12 */
.ashby-job-board-heading {
  font-family: var(--fontFamily);
  font-size: 3rem; /* text-5xl = 3rem */
  font-weight: 200; /* font-extralight */
  letter-spacing: -0.025em; /* tracking-tight */
  line-height: 1.25; /* leading-tight */
  color: #000000;
  margin-bottom: 3rem; /* mb-12 = 3rem */
}

/* Job count — inline with the heading, same style */
.ashby-job-board-heading-count {
  font-family: var(--fontFamily);
  font-size: 3rem;
  font-weight: 200;
  letter-spacing: -0.025em;
  line-height: 1.25;
  color: #000000;
}

/* Filter controls */
.ashby-job-board-filter {
  font-family: var(--fontFamily);
  border-radius: var(--borderRadiusControl);
  border: 1px solid #ebebeb;
  font-size: 0.875rem;
  color: #000000;
  background-color: #ffffff;
  transition: border-color 0.15s ease;
}

.ashby-job-board-filter:focus,
.ashby-job-board-filter:focus-within {
  border-color: var(--colorPrimary900);
  outline: none;
}

.ashby-job-board-filters-label {
  font-family: var(--fontFamily);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #676767;
}

.ashby-job-board-reset-filters-label {
  font-family: var(--fontFamily);
  font-size: 0.8125rem;
  color: var(--colorPrimary900);
  cursor: pointer;
  transition: color 0.15s ease;
}

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

/* ---------------------------------------------------------------------------
 * 3. DEPARTMENT GROUPINGS
 * --------------------------------------------------------------------------- */

.ashby-department-heading,
.ashby-job-posting-brief-department-heading {
  font-family: var(--fontFamily);
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #000000;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.ashby-department-heading-level,
.ashby-job-posting-brief-department-heading-level {
  font-family: var(--fontFamily);
}

/* ---------------------------------------------------------------------------
 * 4. JOB POSTING CARDS / LIST ITEMS
 * --------------------------------------------------------------------------- */

.ashby-job-posting-brief {
  margin-bottom: 0.25rem;
  padding: 1rem 1.25rem;
  border-radius: var(--borderRadiusContainer);
  background-color: #ffffff;
  border: 1px solid #ebebeb !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ashby-job-posting-brief:hover {
  border-color: #d1d1d1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.ashby-job-posting-brief-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ashby-job-posting-brief-title {
  font-family: var(--fontFamily);
  font-size: 1rem;
  font-weight: 400;
  color: #000000;
  line-height: 1.5;
  transition: color 0.15s ease;
}

.ashby-job-posting-brief-title:hover {
  color: var(--colorPrimary900);
}

.ashby-job-posting-brief-details {
  font-family: var(--fontFamily);
  font-size: 0.875rem;
  font-weight: 300;
  color: #676767;
  line-height: 1.5;
}

/* ---------------------------------------------------------------------------
 * 5. INDIVIDUAL JOB POSTING PAGE
 * --------------------------------------------------------------------------- */

.ashby-job-posting-heading {
  font-family: var(--fontFamily);
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #000000;
}

.ashby-job-posting-header {
  font-family: var(--fontFamily);
  margin-bottom: 2rem;
}

.ashby-job-posting-left-pane {
  font-family: var(--fontFamily);
  font-size: 1rem;
  font-weight: 300;
  color: #383838;
  line-height: 1.5;
}

.ashby-job-posting-right-pane {
  font-family: var(--fontFamily);
}

.ashby-job-posting-right-pane-overview-tab,
.ashby-job-posting-right-pane-application-tab {
  font-family: var(--fontFamily);
  font-size: 0.875rem;
  font-weight: 400;
  color: #000000;
}

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

/* Back to all jobs link */
.ashby-job-board-back-to-all-jobs-button {
  font-family: var(--fontFamily);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--colorPrimary900);
  transition: color 0.15s ease;
}

.ashby-job-board-back-to-all-jobs-button:hover {
  color: var(--colorPrimary600);
}

/* ---------------------------------------------------------------------------
 * 6. APPLICATION FORM
 * --------------------------------------------------------------------------- */

.ashby-application-form-container {
  font-family: var(--fontFamily);
}

.ashby-application-form-section-container {
  margin-bottom: 1.5rem;
}

.ashby-application-form-section-header {
  margin-bottom: 1rem;
}

.ashby-application-form-section-header-title {
  font-family: var(--fontFamily);
  font-size: 1.25rem;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: #000000;
}

.ashby-application-form-section-header-description {
  font-family: var(--fontFamily);
  font-size: 0.875rem;
  font-weight: 300;
  color: #676767;
  line-height: 1.5;
}

.ashby-application-form-question-title {
  font-family: var(--fontFamily);
  font-size: 0.875rem;
  font-weight: 400;
  color: #000000;
  margin-bottom: 0.25rem;
}

.ashby-application-form-question-description {
  font-family: var(--fontFamily);
  font-size: 0.8125rem;
  font-weight: 300;
  color: #676767;
}

.ashby-application-form-field-entry {
  margin-bottom: 1rem;
}

/* Submit button */
.ashby-application-form-submit-button {
  font-family: var(--fontFamily);
  font-size: 0.875rem;
  font-weight: 400;
  background-color: var(--colorPrimary900);
  color: #ffffff;
  border: none;
  border-radius: var(--borderRadiusButton);
  padding: 0.625rem 1.5rem;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.ashby-application-form-submit-button:hover {
  background-color: #c5280d;
}

/* Success / failure / blocked states */
.ashby-application-form-success-container {
  font-family: var(--fontFamily);
  background-color: #383838;
  color: #ffffff;
}

.ashby-application-form-failure-container {
  font-family: var(--fontFamily);
  color: var(--colorPrimary900);
}

.ashby-application-form-blocked-application-container {
  font-family: var(--fontFamily);
  color: #676767;
}

/* Texting consent */
.ashby-application-form-texting-consent-description {
  font-family: var(--fontFamily);
  font-size: 0.8125rem;
  font-weight: 300;
  color: #676767;
  line-height: 1.5;
}

/* ---------------------------------------------------------------------------
 * 7. AUTOFILL / FILE UPLOAD COMPONENTS
 * --------------------------------------------------------------------------- */

.ashby-application-form-autofill-pane {
  font-family: var(--fontFamily);
}

.ashby-application-form-autofill-input-root {
  border-radius: var(--borderRadiusControl);
  border: 1px solid #ebebeb;
  transition: border-color 0.15s ease;
}

.ashby-application-form-autofill-input-root:focus-within {
  border-color: var(--colorPrimary900);
}

.ashby-application-form-autofill-input-title {
  font-family: var(--fontFamily);
  font-size: 0.875rem;
  font-weight: 400;
  color: #000000;
}

.ashby-application-form-autofill-input-description {
  font-family: var(--fontFamily);
  font-size: 0.8125rem;
  font-weight: 300;
  color: #676767;
}

.ashby-application-form-autofill-input-icon {
  color: #676767;
}

.ashby-application-form-autofill-input-base-layer {
  background-color: #ffffff;
}

.ashby-application-form-autofill-input-pending-layer {
  background-color: #f7f7f7;
}

.ashby-application-form-autofill-input-drag-layer {
  background-color: #f7f7f7;
  border-color: var(--colorPrimary600);
}

.ashby-application-form-autofill-input-form-alert {
  font-family: var(--fontFamily);
  font-size: 0.8125rem;
  color: var(--colorPrimary900);
}

.ashby-application-form-autofill-uploader {
  font-family: var(--fontFamily);
}

/* ---------------------------------------------------------------------------
 * 8. SURVEY FORM
 * --------------------------------------------------------------------------- */

.ashby-survey-form-container {
  font-family: var(--fontFamily);
}