/* =============================================================
   Bolt Brand — Ashby Job Board Custom CSS
   Font: Inter (Google Fonts)
   Primary green: #34D186
   ============================================================= */

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

/* ── Ashby CSS Variables ────────────────────────────────────── */
/* These map into Ashby's built-in theming system.              */
:root {
  /* Primary brand green (used by Ashby for buttons, accents) */
  --colorPrimary900: #28A96A;
  --colorPrimary600: #34D186;

  /* Layout */
  --widthMaxJobBoard: 900px;

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

  /* Font */
  --fontFamily: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                'Helvetica', 'Arial', sans-serif;

  /* Background — plain white keeps text contrast clean */
  --colorAppBackground: #FFFFFF;

  /* ── Local Bolt tokens (used in the overrides below) ──── */
  --bolt-green:       #34D186;
  --bolt-green-dark:  #28A96A;
  --bolt-green-light: #E8FBF2;
  --bolt-black:       #0D0D0D;
  --bolt-dark:        #1A1A1A;
  --bolt-gray-700:    #333333;
  --bolt-gray-500:    #666666;
  --bolt-gray-200:    #E0E0E0;
  --bolt-gray-100:    #F5F5F5;
  --bolt-white:       #FFFFFF;
}


/* ═══════════════════════════════════════════════════════════
   JOB BOARD — LIST PAGE
   ═══════════════════════════════════════════════════════════ */

/* Heading ("X jobs" title) */
.ashby-job-board-heading {
  font-family: var(--fontFamily);
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--bolt-green);
}

/* Job count next to / inside the heading */
.ashby-job-board-heading-count {
  font-family: var(--fontFamily);
  font-size: 40px;
  font-weight: 800;
  color: var(--bolt-green);
}

/* Filter select boxes */
.ashby-job-board-filter {
  font-family: var(--fontFamily);
  font-size: 14px;
  font-weight: 400;
  color: var(--bolt-dark);
  border: 1.5px solid var(--bolt-gray-200);
  border-radius: var(--borderRadiusControl);
  background-color: var(--bolt-white);
  padding: 10px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ashby-job-board-filter:focus {
  border-color: var(--bolt-green);
  box-shadow: 0 0 0 3px rgba(52, 209, 134, 0.18);
  outline: none;
}

/* "Filters" label */
.ashby-job-board-filters-label {
  font-family: var(--fontFamily);
  font-size: 13px;
  font-weight: 600;
  color: var(--bolt-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* "Reset filters" label */
.ashby-job-board-reset-filters-label {
  font-family: var(--fontFamily);
  font-size: 13px;
  font-weight: 500;
  color: var(--bolt-green);
  cursor: pointer;
  transition: color 0.15s ease;
}

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

/* Back to all jobs button */
.ashby-job-board-back-to-all-jobs-button {
  font-family: var(--fontFamily);
  font-size: 14px;
  font-weight: 600;
  color: var(--bolt-dark);
  background: var(--bolt-gray-100);
  border: none;
  border-radius: var(--borderRadiusButton);
  padding: 9px 16px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.ashby-job-board-back-to-all-jobs-button:hover {
  background-color: var(--bolt-gray-200);
}


/* ═══════════════════════════════════════════════════════════
   DEPARTMENT & TEAM HEADINGS
   ═══════════════════════════════════════════════════════════ */

/* Top-level department heading (e.g. "Business Operations") */
.ashby-department-heading {
  font-family: var(--fontFamily);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--bolt-gray-500);
  padding-bottom: 10px;
  border-bottom: 2px solid var(--bolt-green);
  margin-bottom: 12px;
}

/* Sub-team heading (e.g. "Customer Support") */
.ashby-department-heading-level {
  font-family: var(--fontFamily);
  font-size: 18px;
  font-weight: 700;
  color: var(--bolt-green);
  margin-bottom: 8px;
}

/* On the brief list — same selectors scoped to brief */
.ashby-job-posting-brief-department-heading {
  font-family: var(--fontFamily);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--bolt-gray-500);
  padding-bottom: 10px;
  border-bottom: 2px solid var(--bolt-green);
  margin-bottom: 12px;
}

.ashby-job-posting-brief-department-heading-level {
  font-family: var(--fontFamily);
  font-size: 18px;
  font-weight: 700;
  color: var(--bolt-green);
  margin-bottom: 8px;
}


/* ═══════════════════════════════════════════════════════════
   JOB POSTING BRIEF (list item card)
   ═══════════════════════════════════════════════════════════ */

/* Outer container for each job row */
.ashby-job-posting-brief {
  font-family: var(--fontFamily);
  border: 1.5px solid var(--bolt-gray-200);
  border-radius: var(--borderRadiusContainer);
  background-color: var(--bolt-white);
  margin-bottom: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease,
              transform 0.12s ease;
}

.ashby-job-posting-brief:hover {
  border-color: var(--bolt-green);
  box-shadow: 0 4px 16px rgba(52, 209, 134, 0.12);
  transform: translateY(-1px);
}

/* Container for the brief's inner content */
.ashby-job-posting-brief-details {
  font-family: var(--fontFamily);
  font-size: 13px;
  color: var(--bolt-gray-500);
}

/* Container for all job briefs */
.ashby-job-posting-brief-list {
  margin-top: 8px;
}

/* Job title in the brief row */
.ashby-job-posting-brief-title {
  font-family: var(--fontFamily);
  font-size: 15px;
  font-weight: 600;
  color: var(--bolt-dark);
  transition: color 0.15s ease;
}

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


/* ═══════════════════════════════════════════════════════════
   JOB POSTING PAGE
   ═══════════════════════════════════════════════════════════ */

/* Main header area on the posting detail page
   (the top bar with logo + back arrow — keep it dark) */
.ashby-job-posting-header {
  font-family: var(--fontFamily);
  background-color: var(--bolt-black);
  padding: 20px 32px;
}

/* The large job title — sits BELOW the dark header on a white bg */
.ashby-job-posting-heading {
  font-family: var(--fontFamily);
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.8px;
  color: var(--bolt-dark);
  margin-top: 32px;
  margin-bottom: 24px;
}

/* Left pane — job meta (Location, Employment Type, Department labels + values) */
.ashby-job-posting-left-pane {
  font-family: var(--fontFamily);
  font-size: 14px;
  line-height: 1.6;
  color: var(--bolt-dark);
}

/* Meta field labels (e.g. "Location") */
.ashby-job-posting-left-pane label,
.ashby-job-posting-left-pane [class*="label"],
.ashby-job-posting-left-pane [class*="Label"] {
  font-family: var(--fontFamily);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--bolt-gray-500);
  margin-bottom: 4px;
  display: block;
}

/* Meta field values (e.g. "Tallinn, Estonia") */
.ashby-job-posting-left-pane p,
.ashby-job-posting-left-pane span {
  font-family: var(--fontFamily);
  font-size: 14px;
  font-weight: 500;
  color: var(--bolt-dark);
}

.ashby-job-posting-left-pane h1,
.ashby-job-posting-left-pane h2,
.ashby-job-posting-left-pane h3 {
  font-family: var(--fontFamily);
  font-weight: 700;
  color: var(--bolt-dark);
  margin-top: 28px;
  margin-bottom: 10px;
}

/* Right pane — tabs + form + description body text */
.ashby-job-posting-right-pane {
  font-family: var(--fontFamily);
  font-size: 15px;
  line-height: 1.7;
  color: var(--bolt-dark);
}

.ashby-job-posting-right-pane p,
.ashby-job-posting-right-pane li,
.ashby-job-posting-right-pane span {
  font-family: var(--fontFamily);
  color: var(--bolt-gray-700);
}

.ashby-job-posting-right-pane h1,
.ashby-job-posting-right-pane h2,
.ashby-job-posting-right-pane h3 {
  font-family: var(--fontFamily);
  font-weight: 700;
  color: var(--bolt-dark);
  margin-top: 24px;
  margin-bottom: 8px;
}

/* Tab buttons */
.ashby-job-posting-right-pane-overview-tab,
.ashby-job-posting-right-pane-application-tab {
  font-family: var(--fontFamily);
  font-size: 14px;
  font-weight: 600;
  color: var(--bolt-gray-500);
  border-bottom: 2px solid transparent;
  padding: 10px 0;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.ashby-job-posting-right-pane-overview-tab:hover,
.ashby-job-posting-right-pane-application-tab:hover {
  color: var(--bolt-green);
}

/* Active tab indicator */
.ashby-job-posting-right-pane-tab-slider {
  background-color: var(--bolt-green);
  height: 2px;
  border-radius: 2px;
  transition: left 0.2s ease, width 0.2s ease;
}


/* ═══════════════════════════════════════════════════════════
   APPLICATION FORM
   ═══════════════════════════════════════════════════════════ */

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

/* Form sections */
.ashby-application-form-section-container {
  margin-bottom: 32px;
}

.ashby-application-form-section-header {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bolt-gray-200);
}

.ashby-application-form-section-header-title {
  font-family: var(--fontFamily);
  font-size: 16px;
  font-weight: 700;
  color: var(--bolt-dark);
}

.ashby-application-form-section-header-description {
  font-family: var(--fontFamily);
  font-size: 14px;
  color: var(--bolt-gray-500);
  margin-top: 4px;
}

/* Individual field label + input wrapper */
.ashby-application-form-field-entry {
  margin-bottom: 20px;
}

/* Question label */
.ashby-application-form-question-title {
  font-family: var(--fontFamily);
  font-size: 13px;
  font-weight: 600;
  color: var(--bolt-dark);
  margin-bottom: 6px;
  letter-spacing: 0.1px;
}

/* Question helper text */
.ashby-application-form-question-description {
  font-family: var(--fontFamily);
  font-size: 12px;
  color: var(--bolt-gray-500);
  margin-top: 4px;
}

/* Submit / Apply button */
.ashby-application-form-submit-button {
  font-family: var(--fontFamily);
  font-size: 15px;
  font-weight: 700;
  background-color: var(--bolt-green);
  color: var(--bolt-black);
  border: none;
  border-radius: var(--borderRadiusButton);
  padding: 14px 28px;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
  width: 100%;
}

.ashby-application-form-submit-button:hover {
  background-color: var(--bolt-green-dark);
  transform: translateY(-1px);
}

/* Success message */
.ashby-application-form-success-container {
  font-family: var(--fontFamily);
  background-color: var(--bolt-green-light);
  border: 1.5px solid var(--bolt-green);
  border-radius: var(--borderRadiusContainer);
  padding: 24px;
  color: var(--bolt-green-dark);
  font-weight: 600;
}

/* Failure / error message */
.ashby-application-form-failure-container {
  font-family: var(--fontFamily);
  background-color: #FFF0F0;
  border: 1.5px solid #F87171;
  border-radius: var(--borderRadiusContainer);
  padding: 24px;
  color: #B91C1C;
  font-weight: 600;
}

/* Blocked application message */
.ashby-application-form-blocked-application-container {
  font-family: var(--fontFamily);
  background-color: var(--bolt-gray-100);
  border-radius: var(--borderRadiusContainer);
  padding: 24px;
  color: var(--bolt-gray-500);
}

/* Autofill / resume uploader */
.ashby-application-form-autofill-uploader {
  font-family: var(--fontFamily);
  border: 2px dashed var(--bolt-gray-200);
  border-radius: var(--borderRadiusContainer);
  background-color: var(--bolt-gray-100);
  padding: 32px;
  text-align: center;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ashby-application-form-autofill-uploader:hover {
  border-color: var(--bolt-green);
  background-color: var(--bolt-green-light);
}

.ashby-application-form-autofill-input-title {
  font-family: var(--fontFamily);
  font-size: 15px;
  font-weight: 700;
  color: var(--bolt-dark);
}

.ashby-application-form-autofill-input-description {
  font-family: var(--fontFamily);
  font-size: 13px;
  color: var(--bolt-gray-500);
}

.ashby-application-form-autofill-input-form-alert[data-highlight="positive"] {
  color: var(--bolt-green-dark);
  background-color: var(--bolt-green-light);
  border-radius: var(--borderRadiusControl);
  padding: 8px 12px;
}

.ashby-application-form-autofill-input-form-alert[data-highlight="negative"] {
  color: #B91C1C;
  background-color: #FFF0F0;
  border-radius: var(--borderRadiusControl);
  padding: 8px 12px;
}

/* Consent text (texting/SMS opt-in) */
.ashby-application-form-texting-consent-description {
  font-family: var(--fontFamily);
  font-size: 12px;
  color: var(--bolt-gray-500);
  margin-top: 6px;
}

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