/* ==========================================================================
   Volta — Ashby Job Board Custom CSS
   Built from Volta brand guidelines (PowerPoint template, March 2026)
   ========================================================================== */

:root {
  /* --- Ashby theme hooks ---
     Ashby admin theme settings can also set these two — keep them in sync
     with whatever is configured there so this stylesheet doesn't fight it. */
  --colorPrimary900: #0E3F66; /* Volta Midnight — primary brand color */
  --colorPrimary600: #B87333; /* Volta Copper — primary accent */

  /* --- Volta full palette, exposed as variables for reuse below --- */
  --volta-midnight: #0E3F66;
  --volta-midnight-bright: #1B4F7A;
  --volta-grey: #E2E8EE;
  --volta-gray-dark: #2D3748;
  --volta-gray-mid: #6B7280;
  --volta-gray-cool: #9AA1AC;
  --volta-gray-silver: #BEC4CD;

  --volta-copper-dark: #774A21;
  --volta-copper: #B87333;
  --volta-copper-bright: #D4893B;
  --volta-copper-vivid: #E8922D;

  --volta-steel: #4882A0;
  --volta-blue: #2B81C6;

  /* --- Layout / shape tokens --- */
  --widthMaxJobBoard: 800px;
  --borderRadiusContainer: 10px;
  --borderRadiusControl: 6px;
  --borderRadiusButton: 6px;

  /* --- Typography: Volta brand uses Arial exclusively --- */
  --fontFamily: Arial, "Helvetica Neue", Helvetica, sans-serif;

  --colorAppBackground: #FFFFFF;
}

/* ==========================================================================
   Global type
   ========================================================================== */

body {
  font-family: var(--fontFamily);
  color: var(--volta-gray-dark);
  background-color: var(--colorAppBackground);
}

/* ==========================================================================
   Job board listing page
   ========================================================================== */

/* Main job board heading ("Careers at Volta", etc.) */
.ashby-job-board-heading {
  font-family: var(--fontFamily);
  font-weight: bold;
  color: var(--volta-midnight);
  border-left: 4px solid var(--volta-copper-vivid);
  padding-left: 16px;
}

/* The "(N jobs)" count next to the heading */
.ashby-job-board-heading-count {
  color: var(--volta-gray-mid);
  font-weight: normal;
}

/* Department group headings */
.ashby-department-heading {
  font-family: var(--fontFamily);
  font-weight: bold;
  color: var(--volta-midnight);
  border-bottom: 2px solid var(--volta-grey);
  padding-bottom: 8px;
  margin-top: 32px;
}

/* Team sub-headings under a department */
.ashby-department-heading-level {
  font-family: var(--fontFamily);
  font-weight: 600;
  color: var(--volta-steel);
}

/* Filter dropdowns (Department / Team / Location, etc.) */
.ashby-job-board-filter {
  font-family: var(--fontFamily);
  border-radius: var(--borderRadiusControl);
  border: 1px solid var(--volta-gray-silver);
  color: var(--volta-gray-dark);
  background-color: #FFFFFF;
}

.ashby-job-board-filter:focus {
  border-color: var(--volta-copper);
  outline: none;
  box-shadow: 0 0 0 2px rgba(184, 115, 51, 0.2); /* copper focus ring */
}

/* "Filters" label */
.ashby-job-board-filters-label {
  font-family: var(--fontFamily);
  font-weight: 600;
  color: var(--volta-gray-dark);
}

/* "Reset filters" link */
.ashby-job-board-reset-filters-label {
  font-family: var(--fontFamily);
  color: var(--volta-blue);
  text-decoration: underline;
  cursor: pointer;
}

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

/* ==========================================================================
   Job posting briefs (the list rows on the board)
   ========================================================================== */

.ashby-job-posting-brief-list {
  font-family: var(--fontFamily);
}

.ashby-job-posting-brief {
  margin-bottom: 10px;
  border: 1px solid var(--volta-grey);
  border-radius: var(--borderRadiusContainer);
  background-color: #FFFFFF;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ashby-job-posting-brief:hover {
  border-color: var(--volta-copper);
  box-shadow: 0 2px 8px rgba(14, 63, 102, 0.08);
}

.ashby-job-posting-brief-title {
  font-family: var(--fontFamily);
  font-weight: bold;
  color: var(--volta-midnight);
}

.ashby-job-posting-brief-department-heading {
  font-family: var(--fontFamily);
  color: var(--volta-gray-mid);
  font-weight: 600;
}

.ashby-job-posting-brief-department-heading-level {
  font-family: var(--fontFamily);
  color: var(--volta-gray-mid);
}

.ashby-job-posting-brief-details {
  font-family: var(--fontFamily);
  color: var(--volta-gray-dark);
}

/* ==========================================================================
   Individual job posting page
   ========================================================================== */

.ashby-job-posting-header {
  font-family: var(--fontFamily);
  border-bottom: 1px solid var(--volta-grey);
  padding-bottom: 16px;
}

.ashby-job-posting-heading {
  font-family: var(--fontFamily);
  font-weight: bold;
  font-size: 28px;
  color: var(--volta-midnight);
  border-left: 4px solid var(--volta-copper-vivid);
  padding-left: 16px;
}

.ashby-job-posting-left-pane {
  font-family: var(--fontFamily);
  color: var(--volta-gray-dark);
}

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

/* Back-to-jobs button */
.ashby-job-board-back-to-all-jobs-button {
  font-family: var(--fontFamily);
  color: var(--volta-blue);
  background: none;
  border: none;
  font-weight: 600;
}

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

/* Tabs (Overview / Application) */
.ashby-job-posting-right-pane-tab-slider {
  background-color: var(--volta-copper-vivid);
}

.ashby-job-posting-right-pane-overview-tab,
.ashby-job-posting-right-pane-application-tab {
  font-family: var(--fontFamily);
  font-weight: 600;
  color: var(--volta-gray-mid);
}

.ashby-job-posting-right-pane-overview-tab[aria-selected="true"],
.ashby-job-posting-right-pane-application-tab[aria-selected="true"] {
  color: var(--volta-midnight);
}

/* ==========================================================================
   Application form
   ========================================================================== */

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

.ashby-application-form-section-container {
  border-bottom: 1px solid var(--volta-grey);
  padding-bottom: 16px;
  margin-bottom: 16px;
}

.ashby-application-form-section-header-title {
  font-family: var(--fontFamily);
  font-weight: bold;
  color: var(--volta-midnight);
}

.ashby-application-form-section-header-description {
  font-family: var(--fontFamily);
  color: var(--volta-gray-mid);
}

.ashby-application-form-question-title {
  font-family: var(--fontFamily);
  font-weight: 600;
  color: var(--volta-gray-dark);
}

.ashby-application-form-question-description {
  font-family: var(--fontFamily);
  color: var(--volta-gray-mid);
  font-size: 13px;
}

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

.ashby-application-form-field-entry input,
.ashby-application-form-field-entry textarea,
.ashby-application-form-field-entry select {
  font-family: var(--fontFamily);
  border: 1px solid var(--volta-gray-silver);
  border-radius: var(--borderRadiusControl);
  color: var(--volta-gray-dark);
}

.ashby-application-form-field-entry input:focus,
.ashby-application-form-field-entry textarea:focus,
.ashby-application-form-field-entry select:focus {
  border-color: var(--volta-copper);
  outline: none;
  box-shadow: 0 0 0 2px rgba(184, 115, 51, 0.2);
}

/* Submit button — primary copper CTA, per "accent / highlights" role */
.ashby-application-form-submit-button {
  font-family: var(--fontFamily);
  font-weight: bold;
  background-color: var(--volta-copper);
  color: #FFFFFF;
  border: none;
  border-radius: var(--borderRadiusButton);
  padding: 12px 24px;
  transition: background-color 0.15s ease;
}

.ashby-application-form-submit-button:hover {
  background-color: var(--volta-copper-bright);
}

.ashby-application-form-submit-button:disabled {
  background-color: var(--volta-gray-silver);
  color: var(--volta-gray-mid);
}

/* Success / failure / blocked states */
.ashby-application-form-success-container {
  font-family: var(--fontFamily);
  color: var(--volta-midnight);
  border: 1px solid var(--volta-grey);
  border-radius: var(--borderRadiusContainer);
  background-color: var(--volta-grey);
}

.ashby-application-form-failure-container,
.ashby-application-form-blocked-application-container {
  font-family: var(--fontFamily);
  color: var(--volta-gray-dark);
  border: 1px solid var(--volta-gray-silver);
  border-radius: var(--borderRadiusContainer);
  background-color: #FFFFFF;
}

/* Texting consent copy below phone fields */
.ashby-application-form-texting-consent-description {
  font-family: var(--fontFamily);
  color: var(--volta-gray-mid);
  font-size: 12px;
}

/* ==========================================================================
   Resume autofill
   ========================================================================== */

.ashby-application-form-autofill-pane {
  font-family: var(--fontFamily);
  border: 1px dashed var(--volta-copper);
  border-radius: var(--borderRadiusContainer);
  background-color: var(--volta-grey);
}

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

.ashby-application-form-autofill-input-title {
  font-family: var(--fontFamily);
  font-weight: bold;
  color: var(--volta-midnight);
}

.ashby-application-form-autofill-input-description {
  font-family: var(--fontFamily);
  color: var(--volta-gray-mid);
}

/* Sparkles icon — recolor to copper to match accent role */
.ashby-application-form-autofill-input-icon {
  color: var(--volta-copper-vivid);
}

/* Drag-and-drop overlay */
.ashby-application-form-autofill-input-drag-layer[data-state="active"] {
  background-color: rgba(184, 115, 51, 0.08);
  border: 2px dashed var(--volta-copper);
}

/* Pending (processing) overlay */
.ashby-application-form-autofill-input-pending-layer[data-state="active"] {
  background-color: rgba(226, 232, 238, 0.7);
}

/* Validation alert — uses [data-highlight] = 'negative' | 'positive' */
.ashby-application-form-autofill-input-form-alert[data-highlight="positive"] {
  color: var(--volta-midnight);
  background-color: var(--volta-grey);
}

.ashby-application-form-autofill-input-form-alert[data-highlight="negative"] {
  color: #774A21; /* copper-dark, kept within brand palette rather than red */
  background-color: #F4E9DD;
}

/* Uploader control itself */
.ashby-application-form-autofill-uploader {
  font-family: var(--fontFamily);
  border-radius: var(--borderRadiusControl);
}

/* ==========================================================================
   Surveys
   ========================================================================== */

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