/* ==========================================================================
   SQUIRE — Ashby job board custom CSS
   Fonts: Bebas Neue (headings), Poppins (body)
   Palette: SQUIRE Blue #377DF7 · Navy #0B0E13 · Amber #FFB300
   ========================================================================== */

/* @import must come first in the file or it will be ignored. */
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Poppins:wght@300;400;500;600&display=swap");


/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* NOTE: Ashby also sets these two in admin → theme settings. Set them there
     if you can; leave these as a fallback so the file is self-contained. */
  --colorPrimary900: #1a5ad0;  /* darker blue — text, hover, focus */
  --colorPrimary600: #377df7;  /* SQUIRE Blue — buttons, accents */

  --colorAppBackground: #ffffff;

  --widthMaxJobBoard: 880px;

  /* Squared-off corners read closer to SQUIRE's typographic style than pills. */
  --borderRadiusContainer: 4px;
  --borderRadiusControl: 4px;
  --borderRadiusButton: 4px;

  --fontFamily: "Poppins", "-apple-system", "BlinkMacSystemFont", "Segoe UI",
    "Helvetica", "Arial", sans-serif;

  /* SQUIRE-specific tokens (not Ashby's — used by the rules below) */
  --squireNavy: #0b0e13;
  --squireAmber: #ffb300;
  --squireInk: #2b3138;
  --squireLine: #e3e7ec;
  --squireSurface: #f6f8fa;
  --fontDisplay: "Bebas Neue", "Impact", sans-serif;
}


/* --------------------------------------------------------------------------
   2. Job board — heading
   -------------------------------------------------------------------------- */

.ashby-job-board-heading {
  font-family: var(--fontDisplay);
  font-size: 3.25rem;
  line-height: 1.02;
  letter-spacing: 0.01em;
  color: var(--squireNavy);
  margin-bottom: 0.5rem;
}

/* Amber rule under the board title — the one decorative move in the file. */
.ashby-job-board-heading::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 4px;
  margin-top: 0.85rem;
  background: var(--squireAmber);
}

.ashby-job-board-heading-count {
  font-family: var(--fontFamily);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--squireInk);
  letter-spacing: 0.01em;
}


/* --------------------------------------------------------------------------
   3. Job board — filters
   -------------------------------------------------------------------------- */

.ashby-job-board-filters-label {
  font-family: var(--fontFamily);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--squireInk);
}

.ashby-job-board-filter {
  font-family: var(--fontFamily);
  font-size: 0.9375rem;
  border: 1px solid var(--squireLine);
  background: #ffffff;
}

.ashby-job-board-filter:hover {
  border-color: var(--colorPrimary600);
}

.ashby-job-board-reset-filters-label {
  font-family: var(--fontFamily);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--colorPrimary900);
}


/* --------------------------------------------------------------------------
   4. Departments and teams
   -------------------------------------------------------------------------- */

.ashby-department-heading,
.ashby-job-posting-brief-department-heading {
  font-family: var(--fontDisplay);
  font-size: 1.5rem;
  letter-spacing: 0.03em;
  color: var(--squireNavy);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--squireLine);
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}

.ashby-department-heading-level,
.ashby-job-posting-brief-department-heading-level {
  font-family: var(--fontFamily);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--squireInk);
  margin-top: 1.25rem;
}


/* --------------------------------------------------------------------------
   5. Posting list
   -------------------------------------------------------------------------- */

.ashby-job-posting-brief-list {
  display: block;
}

.ashby-job-posting-brief {
  margin-bottom: 0.5rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--squireLine);
  border-left: 3px solid transparent;
  border-radius: var(--borderRadiusContainer);
  background: #ffffff;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* Blue left edge on hover signals the row is clickable. */
.ashby-job-posting-brief:hover {
  border-left-color: var(--colorPrimary600);
  background: var(--squireSurface);
}

.ashby-job-posting-brief-title {
  font-family: var(--fontFamily);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--squireNavy);
  line-height: 1.35;
}

.ashby-job-posting-brief-details {
  font-family: var(--fontFamily);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--squireInk);
  margin-top: 0.3rem;
}


/* --------------------------------------------------------------------------
   6. Individual posting page
   -------------------------------------------------------------------------- */

.ashby-job-posting-header,
.ashby-job-posting-heading {
  font-family: var(--fontDisplay);
  font-size: 2.75rem;
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--squireNavy);
}

.ashby-job-posting-left-pane {
  font-family: var(--fontFamily);
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--squireInk);
  max-width: 68ch;
}

.ashby-job-posting-left-pane h2,
.ashby-job-posting-left-pane h3 {
  font-family: var(--fontFamily);
  font-weight: 600;
  color: var(--squireNavy);
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}

.ashby-job-posting-left-pane a {
  color: var(--colorPrimary900);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ashby-job-board-back-to-all-jobs-button {
  font-family: var(--fontFamily);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--colorPrimary900);
}

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


/* --------------------------------------------------------------------------
   7. Application form
   -------------------------------------------------------------------------- */

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

.ashby-application-form-section-header-title {
  font-family: var(--fontDisplay);
  font-size: 1.375rem;
  letter-spacing: 0.03em;
  color: var(--squireNavy);
}

.ashby-application-form-section-header-description {
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--squireInk);
}

.ashby-application-form-question-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--squireNavy);
}

.ashby-application-form-question-description {
  font-size: 0.8125rem;
  font-weight: 300;
  color: var(--squireInk);
  line-height: 1.55;
}

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

.ashby-application-form-field-entry input,
.ashby-application-form-field-entry textarea,
.ashby-application-form-field-entry select {
  font-family: var(--fontFamily);
  font-size: 0.9375rem;
  border: 1px solid var(--squireLine);
}

.ashby-application-form-field-entry input:focus,
.ashby-application-form-field-entry textarea:focus,
.ashby-application-form-field-entry select:focus {
  border-color: var(--colorPrimary600);
  outline: 2px solid rgba(55, 125, 247, 0.28);
  outline-offset: 1px;
}

.ashby-application-form-submit-button {
  font-family: var(--fontFamily);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--colorPrimary600);
  color: #ffffff;
  border: none;
  padding: 0.8rem 1.9rem;
}

.ashby-application-form-submit-button:hover {
  background: var(--colorPrimary900);
}

.ashby-application-form-submit-button:focus-visible {
  outline: 2px solid var(--squireNavy);
  outline-offset: 2px;
}

.ashby-application-form-texting-consent-description {
  font-size: 0.75rem;
  font-weight: 300;
  color: #5a626c;
}


/* --------------------------------------------------------------------------
   8. Resume autofill
   -------------------------------------------------------------------------- */

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

.ashby-application-form-autofill-input-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--squireNavy);
}

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

.ashby-application-form-autofill-input-icon {
  color: var(--colorPrimary600);
}

.ashby-application-form-autofill-input-drag-layer[data-state="active"] {
  border: 2px dashed var(--colorPrimary600);
  background: rgba(55, 125, 247, 0.06);
}

.ashby-application-form-autofill-input-form-alert[data-highlight="negative"] {
  color: #b3261e;
}

.ashby-application-form-autofill-input-form-alert[data-highlight="positive"] {
  color: #16794c;
}


/* --------------------------------------------------------------------------
   9. Success / failure / blocked states
   -------------------------------------------------------------------------- */

.ashby-application-form-success-container,
.ashby-application-form-failure-container,
.ashby-application-form-blocked-application-container {
  font-family: var(--fontFamily);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--squireInk);
  padding: 1.25rem;
  border-radius: var(--borderRadiusContainer);
}

.ashby-application-form-success-container {
  border-left: 3px solid var(--squireAmber);
  background: var(--squireSurface);
}

.ashby-application-form-failure-container {
  border-left: 3px solid #b3261e;
  background: #fdf3f2;
}


/* --------------------------------------------------------------------------
   10. Responsive + motion preferences
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .ashby-job-board-heading {
    font-size: 2.375rem;
  }

  .ashby-job-posting-header,
  .ashby-job-posting-heading {
    font-size: 2rem;
  }

  .ashby-job-posting-brief {
    padding: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ashby-job-posting-brief {
    transition: none;
  }
}