/* =========================================================
   FutureMedia — Ashby job board theme
   Upload in Ashby: Admin → Job Boards → Theme → Custom CSS
   Uses Ashby's stable "ashby-*" class names only.
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap");

html {
  --fm-bg: #1B1D22;          /* graphite page background */
  --fm-surface: #24272E;     /* cards, filters */
  --fm-surface-hover: #2A2F38;
  --fm-line: rgba(255, 255, 255, 0.11);
  --fm-text: #F2F1EE;
  --fm-muted: #BCC1CA;
  --fm-sky: #8FB3D9;
  --fm-sky-light: #C9DCF0;
  --fm-red: #E3261C;
  --fm-col: 1040px;          /* content column, framed by grid lines */
  --fm-sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --fm-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}

/* ---------- Page ---------- */
html,
body,
body > div:first-of-type {
  background: var(--fm-bg) !important;
  color: var(--fm-text) !important;
  font-family: var(--fm-sans) !important;
  -webkit-font-smoothing: antialiased;
}

body * { font-family: var(--fm-sans); }

/* Vertical grid lines framing the content column (as on the careers site) */
body::before {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(var(--fm-col), calc(100% - 24px));
  transform: translateX(-50%);
  border-left: 1px solid var(--fm-line);
  border-right: 1px solid var(--fm-line);
  pointer-events: none;
  z-index: 0;
}

body > div:first-of-type > * { position: relative; z-index: 1; }

/* Top bar with the logo */
body > div:first-of-type > div:first-child,
body > div:first-of-type > div:first-child * {
  background: transparent !important;
  box-shadow: none !important;
}
body > div:first-of-type > div:first-child {
  border-bottom: 1px solid var(--fm-line);
}

a { color: inherit; }

/* ---------- Main heading: "Open positions (8)" ---------- */
.ashby-job-board-heading {
  color: var(--fm-text) !important;
  font-weight: 500 !important;
  font-size: 32px !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
  padding-top: 40px;
  margin-top: 40px !important;
  border-top: 1px solid var(--fm-line);
}

.ashby-job-board-heading-count {
  color: var(--fm-sky) !important;
  font-weight: 500 !important;
}

/* Banner image (uploaded in Ashby as the top description image) */
body > div:first-of-type img:not([class*="Logo"]):not([class*="logo"]) {
  border-radius: 20px;
}

/* ---------- Filters ---------- */
.ashby-job-board-filters-label {
  font-family: var(--fm-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--fm-muted) !important;
}

.ashby-job-board-reset-filters-label {
  color: var(--fm-sky) !important;
}
.ashby-job-board-reset-filters-label svg,
.ashby-job-board-reset-filters-label path {
  fill: var(--fm-sky) !important;
}

select.ashby-job-board-filter {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: var(--fm-surface) !important;
  background-color: var(--fm-surface) !important;
  color: var(--fm-text) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  min-height: 48px !important;
  padding: 0 40px 0 16px !important;
  font-size: 15px !important;
  box-shadow: none !important;
  transition: border-color 0.2s, background-color 0.2s;
}

select.ashby-job-board-filter:hover,
select.ashby-job-board-filter:focus {
  border-color: var(--fm-sky) !important;
  background: #2A2F38 !important;
  outline: none !important;
}

select.ashby-job-board-filter option {
  background: var(--fm-surface);
  color: var(--fm-text);
}

/* Filter arrow icon (sibling of the select) */
select.ashby-job-board-filter + div svg,
select.ashby-job-board-filter + div path {
  fill: var(--fm-sky) !important;
  color: var(--fm-sky) !important;
}

/* Mobile "Filter open positions" button */
body > div:first-of-type button:not([type="submit"]):not(.ashby-job-board-reset-filters-label) {
  background: var(--fm-surface) !important;
  color: var(--fm-sky) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
body > div:first-of-type button:not([type="submit"]) * { color: var(--fm-sky) !important; }

/* ---------- Department headings ---------- */
.ashby-department-heading {
  display: flex !important;
  align-items: center;
  gap: 12px;
  margin: 40px 0 16px !important;
  padding-top: 40px !important;
  border-top: 1px solid var(--fm-line);
}

.ashby-department-heading-level {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
}
.ashby-department-heading-level::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  background: var(--fm-red);
  flex: none;
}

.ashby-department-heading-level {
  color: var(--fm-sky) !important;
  font-weight: 500 !important;
  font-size: 20px !important;
  letter-spacing: -0.015em !important;
}

/* ---------- Job cards ---------- */
.ashby-job-posting-brief-list a {
  text-decoration: none !important;
  display: block;
}

.ashby-job-posting-brief {
  position: relative;
  background: var(--fm-surface) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  padding: 20px 72px 20px 22px !important;
  margin-bottom: 8px !important;
  box-shadow: none !important;
  transition: background 0.25s, border-color 0.25s;
}

/* Round arrow on the right */
.ashby-job-posting-brief::after {
  content: "→";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 38px;
  height: 38px;
  margin-top: -19px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--fm-sky);
  font-size: 15px;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}

.ashby-job-posting-brief-title {
  color: var(--fm-text) !important;
  font-weight: 500 !important;
  font-size: 17px !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 6px !important;
  transition: color 0.25s;
}

.ashby-job-posting-brief-details,
.ashby-job-posting-brief-details p {
  color: var(--fm-muted) !important;
  font-size: 14px !important;
  margin: 0 !important;
}

/* Hover */
.ashby-job-posting-brief-list a:hover .ashby-job-posting-brief {
  background: var(--fm-surface-hover) !important;
  border-color: rgba(143, 179, 217, 0.5) !important;
}
.ashby-job-posting-brief-list a:hover .ashby-job-posting-brief-title {
  color: var(--fm-sky-light) !important;
}
.ashby-job-posting-brief-list a:hover .ashby-job-posting-brief::after {
  background: var(--fm-red);
  border-color: var(--fm-red);
  color: #fff;
}

.ashby-job-posting-brief-list a:focus-visible {
  outline: 2px solid var(--fm-sky);
  outline-offset: 3px;
  border-radius: 14px;
}

/* ---------- Single job page ---------- */
/* Remove Ashby's white panels so the graphite background shows through */
body > div:first-of-type div:not(.ashby-job-posting-brief):not(.ashby-job-posting-right-pane-tab-slider) {
  background-color: transparent !important;
}
body > div:first-of-type label,
body > div:first-of-type legend,
body > div:first-of-type fieldset p,
body > div:first-of-type form p,
body > div:first-of-type form span {
  color: var(--fm-text) !important;
}
body > div:first-of-type form hr,
body > div:first-of-type [class*="divider"] {
  border-color: var(--fm-line) !important;
}
body > div:first-of-type input[type="checkbox"],
body > div:first-of-type input[type="radio"] {
  accent-color: var(--fm-red);
}

.ashby-job-posting-heading {
  color: var(--fm-text) !important;
  font-weight: 500 !important;
  letter-spacing: -0.03em !important;
}

.ashby-job-board-back-to-all-jobs-button {
  color: var(--fm-sky) !important;
}

.ashby-job-posting-left-pane {
  color: var(--fm-muted) !important;
}
.ashby-job-posting-left-pane h2,
.ashby-job-posting-left-pane h3 {
  font-family: var(--fm-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--fm-muted) !important;
}
.ashby-job-posting-left-pane p,
.ashby-job-posting-left-pane span,
.ashby-job-posting-left-pane div {
  color: var(--fm-text) !important;
}
.ashby-job-posting-left-pane > div > div {
  border-color: var(--fm-line) !important;
}

.ashby-job-posting-right-pane-overview-tab,
.ashby-job-posting-right-pane-application-tab {
  color: var(--fm-muted) !important;
}
.ashby-job-posting-right-pane-tab-slider {
  background: var(--fm-red) !important;
}

.ashby-job-posting-description,
.ashby-job-posting-description p,
.ashby-job-posting-description li {
  color: rgba(242, 241, 238, 0.85) !important;
  line-height: 1.65 !important;
}
.ashby-job-posting-description h1,
.ashby-job-posting-description h2,
.ashby-job-posting-description h3,
.ashby-job-posting-description strong {
  color: var(--fm-text) !important;
}
.ashby-job-posting-description a {
  color: var(--fm-sky) !important;
}

/* Application form */
body > div:first-of-type input,
body > div:first-of-type textarea {
  background: var(--fm-surface) !important;
  color: var(--fm-text) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
}
body > div:first-of-type input:focus,
body > div:first-of-type textarea:focus {
  border-color: var(--fm-sky) !important;
  outline: none !important;
}
body > div:first-of-type button[type="submit"] {
  background: var(--fm-red) !important;
  border-color: var(--fm-red) !important;
  color: #fff !important;
  border-radius: 999px !important;
}

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--fm-line);
  color: var(--fm-muted) !important;
}
footer a,
footer span,
footer p { color: var(--fm-muted) !important; }
footer svg path { fill: var(--fm-muted) !important; }

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  body::before { display: none; }
  .ashby-job-board-heading { font-size: 26px !important; }
  .ashby-job-posting-brief { padding: 18px 64px 18px 18px !important; }
}

/* ---------- Readability: application form ---------- */
.ashby-application-form-autofill-input-title {
  color: var(--fm-text) !important;
}
.ashby-application-form-autofill-input-description,
.ashby-application-form-input-file-dropzone-instructions,
.ashby-application-form-input-file-dropzone-instructions p {
  color: var(--fm-muted) !important;
}
.ashby-application-form-question-title,
.ashby-application-form-question-title * {
  color: var(--fm-text) !important;
}
input::placeholder,
textarea::placeholder {
  color: #A9B0BC !important;
  opacity: 1 !important;
}

/* ---------- Layout: list column as wide as the banner ---------- */
[class*="_container_"][class*="_section_"] {
  max-width: var(--fm-col) !important;
}
[class*="_container_"][class*="_section_"] > [class*="_content_"] {
  padding-left: 24px !important;
  padding-right: 24px !important;
}
[class*="_filtersContainer_"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.ashby-job-posting-brief {
  margin: 0 0 8px !important;
}
[class*="topDescription"] img {
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
}

/* ---------- Job page tabs: Ashby makes them sticky and white on mobile ---------- */
nav[role="tablist"] {
  position: relative !important;
  top: auto !important;
  background: transparent !important;
  box-shadow: none !important;
}
nav[role="tablist"] [role="tab"] {
  background: transparent !important;
}