/* stylelint-disable */

/* ============================================================
   RELATIO — Ashby Job Board Custom CSS
   Brand: getrelatio.com
   Colors: #1C5BD8 (primary), #2239B8 (hover), #141218 (bg)
   Font: Poppins
   ============================================================ */

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

/* ─── CSS Variables ─────────────────────────────────────── */
:root {
  /* Primary brand color — buttons, links, active tabs */
  --colorPrimary600: #1C5BD8;

  /* Hover / dark variant */
  --colorPrimary900: #2239B8;

  /* Neutral scale — dark theme */
  --colorNeutral800: #FFFFFF;           /* main text */
  --colorNeutral700: rgba(255,255,255,0.70); /* secondary text */
  --colorNeutral600: rgba(255,255,255,0.50); /* muted text */
  --colorNeutral500: rgba(255,255,255,0.35); /* placeholder */
  --colorNeutral400: rgba(255,255,255,0.15); /* borders */
  --colorNeutral300: #2D2A38;           /* card hover bg */
  --colorNeutral200: #211E26;           /* card bg */
  --colorNeutral100: #1A1720;           /* subtle section bg */
  --colorNeutral000: #141218;           /* page background */

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

  /* Radii */
  --borderRadiusContainer: 16px;
  --borderRadiusControl: 10px;
  --borderRadiusButton: 24px;

  /* Font */
  --fontFamily: "Poppins", "-apple-system", "BlinkMacSystemFont", "Segoe UI", sans-serif;

  /* App background */
  --colorAppBackground: #141218;
}

/* ─── Base ──────────────────────────────────────────────── */
body,
html {
  background-color: #141218;
  color: #FFFFFF;
  font-family: "Poppins", sans-serif;
}

a {
  color: #1C5BD8;
  font-family: "Poppins", sans-serif;
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: #2239B8;
}

/* ─── Job Board Heading ─────────────────────────────────── */
.ashby-job-board-heading {
  color: #FFFFFF;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.ashby-job-board-heading-count {
  color: rgba(255, 255, 255, 0.50);
  font-size: 0.9em;
  font-weight: 400;
}

/* ─── Department / Team Headings ────────────────────────── */
.ashby-department-heading {
  color: rgba(255, 255, 255, 0.50);
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 32px;
  margin-bottom: 8px;
}

.ashby-department-heading-level {
  color: #1C5BD8;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
}

.ashby-job-posting-brief-department-heading {
  color: rgba(255, 255, 255, 0.50);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ─── Filters ───────────────────────────────────────────── */
.ashby-job-board-filters-label {
  color: rgba(255, 255, 255, 0.60);
  font-family: "Poppins", sans-serif;
  font-size: 0.85rem;
}

.ashby-job-board-filter {
  background-color: #211E26;
  background-image: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #FFFFFF;
  font-family: "Poppins", sans-serif;
  font-size: 0.875rem;
  padding: 8px 14px;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.ashby-job-board-filter:hover,
.ashby-job-board-filter:focus {
  border-color: #1C5BD8;
  background-color: #2D2A38;
  outline: none;
}

.ashby-job-board-reset-filters-label {
  color: #1C5BD8;
  font-family: "Poppins", sans-serif;
  font-size: 0.85rem;
  cursor: pointer;
  transition: color 0.2s ease;
}

.ashby-job-board-reset-filters-label:hover {
  color: #2239B8;
}

/* ─── Job Posting Cards ─────────────────────────────────── */
.ashby-job-posting-brief {
  background: #211E26;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  margin-bottom: 10px;
  padding: 4px;
  box-shadow:
    inset 0.5px 0.5px 0 0 rgba(255, 255, 255, 0.08),
    inset -0.5px -0.5px 0 0 rgba(255, 255, 255, 0.04);
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.ashby-job-posting-brief:hover,
.ashby-job-posting-brief:active {
  background-color: #2D2A38;
  border-color: rgba(28, 91, 216, 0.40);
  transform: translateY(-2px);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.35),
    inset 0.5px 0.5px 0 0 rgba(255, 255, 255, 0.12),
    inset -0.5px -0.5px 0 0 rgba(255, 255, 255, 0.06);
}

/* Job title in card */
.ashby-job-posting-brief-title {
  color: #FFFFFF;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  transition: color 0.2s ease;
}

.ashby-job-posting-brief:hover .ashby-job-posting-brief-title,
.ashby-job-posting-brief:active .ashby-job-posting-brief-title {
  color: #1C5BD8;
}

/* Job meta details (location, type) */
.ashby-job-posting-brief-details {
  color: rgba(255, 255, 255, 0.60);
  font-family: "Poppins", sans-serif;
  font-size: 0.85rem;
}

.ashby-job-posting-brief-details > p {
  color: rgba(255, 255, 255, 0.60);
  font-family: "Poppins", sans-serif;
}

.ashby-job-posting-brief:hover .ashby-job-posting-brief-details,
.ashby-job-posting-brief:active .ashby-job-posting-brief-details,
.ashby-job-posting-brief:hover .ashby-job-posting-brief-details > p,
.ashby-job-posting-brief:active .ashby-job-posting-brief-details > p {
  color: rgba(255, 255, 255, 0.75);
}

/* ─── Job Posting Page ──────────────────────────────────── */
.ashby-job-posting-header {
  background-color: #141218;
}

.ashby-job-posting-heading {
  color: #FFFFFF;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.ashby-job-posting-left-pane {
  color: rgba(255, 255, 255, 0.85);
  font-family: "Poppins", sans-serif;
}

.ashby-job-posting-right-pane {
  font-family: "Poppins", sans-serif;
}

/* Tabs */
.ashby-job-posting-right-pane-overview-tab,
.ashby-job-posting-right-pane-application-tab {
  color: rgba(255, 255, 255, 0.60);
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  transition: color 0.2s ease;
}

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

.ashby-job-posting-right-pane-tab-slider {
  background-color: #1C5BD8;
  border-radius: 2px;
}

/* Back button */
.ashby-job-board-back-to-all-jobs-button {
  color: #1C5BD8;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  transition: color 0.2s ease;
}

.ashby-job-board-back-to-all-jobs-button:hover {
  color: #2239B8;
}

/* ─── Application Form ──────────────────────────────────── */
.ashby-application-form-container {
  font-family: "Poppins", sans-serif;
}

.ashby-application-form-question-title {
  color: #FFFFFF;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
}

.ashby-application-form-question-description {
  color: rgba(255, 255, 255, 0.55);
  font-family: "Poppins", sans-serif;
  font-size: 0.82rem;
}

.ashby-application-form-section-header-title {
  color: #FFFFFF;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
}

.ashby-application-form-section-header-description {
  color: rgba(255, 255, 255, 0.60);
  font-family: "Poppins", sans-serif;
}

/* Submit button — gradient matching Relatio brand */
.ashby-application-form-submit-button {
  background: linear-gradient(125.65deg,
    rgba(0, 116, 232, 0.95)  1.55%,   /* #0074E8 */
    rgba(20, 41, 222, 0.95) 53.55%,   /* #1429DE */
    rgba(43, 0, 135, 0.95) 105.56%);  /* #2B0087 */
  border: none;
  border-radius: 24px;
  color: #FFFFFF;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: opacity 0.2s ease, transform 0.15s ease;
}

.ashby-application-form-submit-button:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

.ashby-application-form-submit-button:active {
  transform: translateY(0px);
  opacity: 1;
}

/* Success / Failure messages */
.ashby-application-form-success-container {
  color: #FFFFFF;
  font-family: "Poppins", sans-serif;
  background: rgba(28, 91, 216, 0.12);
  border: 1px solid rgba(28, 91, 216, 0.30);
  border-radius: 16px;
}

.ashby-application-form-failure-container {
  color: #FFFFFF;
  font-family: "Poppins", sans-serif;
  background: rgba(244, 92, 67, 0.10);
  border: 1px solid rgba(244, 92, 67, 0.30);
  border-radius: 16px;
}

/* ─── Autofill Input ────────────────────────────────────── */
.ashby-application-form-autofill-input-root {
  background: #211E26;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  font-family: "Poppins", sans-serif;
}

.ashby-application-form-autofill-input-title {
  color: #FFFFFF;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
}

.ashby-application-form-autofill-input-description {
  color: rgba(255, 255, 255, 0.60);
  font-family: "Poppins", sans-serif;
}