/* ============================================================
   TRIOMICS — Ashby job board theme
   Uses only Ashby's whitelisted job-board classes.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root {
  /* Orange accent. Also set in Ashby admin Theme settings; keep in sync. */
  --colorPrimary900: #c7411a;
  --colorPrimary600: #e8521e;

  --triomics-cream:        #efede8;
  --triomics-surface:      #f6f4ef;
  --triomics-ink:          #141414;
  --triomics-ink-soft:     #3a3a38;
  --triomics-grey:         #8c8c86;
  --triomics-orange:       #e8521e;
  --triomics-orange-dark:  #c7411a;
  --triomics-line:         rgba(20, 20, 20, 0.12);
  --triomics-line-strong:  rgba(20, 20, 20, 0.28);

  --fontFamily: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  --fontMono: "IBM Plex Mono", "SFMono-Regular", "Menlo", "Consolas", monospace;

  --widthMaxJobBoard:      860px;
  --borderRadiusContainer: 2px;
  --borderRadiusControl:   4px;
  --borderRadiusButton:    999px;

  --colorAppBackground: var(--triomics-cream);
}

/* --- Page base --------------------------------------------- */
body {
  background-color: var(--triomics-cream);
  color: var(--triomics-ink);
  font-family: var(--fontFamily);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   FIX: posting detail ships a default WHITE content panel.
   The JD text lives in the overview tab. Force the panes and
   tabs to cream so the text blends into the page.
   ============================================================ */
.ashby-job-posting-left-pane,
.ashby-job-posting-right-pane,
.ashby-job-posting-right-pane-overview-tab,
.ashby-job-posting-right-pane-application-tab,
.ashby-job-posting-right-pane-tab-slider {
  background-color: var(--triomics-cream) !important;
  color: var(--triomics-ink);
}

.ashby-job-posting-right-pane-tab-slider {
  border-bottom: 1px solid var(--triomics-line);
}

/* Some Ashby builds wrap the JD text in an inner card with its own white
   background and no targetable class. Setting the panes cream cannot beat a
   child's own background, so neutralize descendant backgrounds inside the
   overview + left panes and let the cream show through.
   Scoped to overview/left only, so application form inputs keep their fills. */
.ashby-job-posting-left-pane *,
.ashby-job-posting-right-pane-overview-tab * {
  background-color: transparent !important;
}

/* ============================================================
   JOB BOARD — listing view
   ============================================================ */

.ashby-job-board-heading {
  font-family: var(--fontFamily);
  font-weight: 800;
  font-size: 4rem;
  line-height: 0.98;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--triomics-ink);
  margin: 0 0 0.35em;
}

.ashby-job-board-heading-count {
  font-family: var(--fontMono);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--triomics-grey);
}

/* --- Filters ----------------------------------------------- */
.ashby-job-board-filters-label,
.ashby-job-board-reset-filters-label {
  font-family: var(--fontMono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--triomics-grey);
}

.ashby-job-board-reset-filters-label {
  color: var(--triomics-orange);
  cursor: pointer;
}

.ashby-job-board-filter {
  background-color: var(--triomics-surface);
  border: 1px solid var(--triomics-line);
  border-radius: var(--borderRadiusControl);
  color: var(--triomics-ink);
  font-family: var(--fontFamily);
  font-size: 0.9rem;
  padding: 0.55rem 0.75rem;
  transition: border-color 0.15s ease;
}

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

.ashby-job-board-filter:focus,
.ashby-job-board-filter:focus-visible {
  outline: none;
  border-color: var(--triomics-orange);
  box-shadow: 0 0 0 2px rgba(232, 82, 30, 0.25);
}

/* --- Department / team headings (eyebrow + orange square) -- */
.ashby-department-heading,
.ashby-job-posting-brief-department-heading {
  font-family: var(--fontMono);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--triomics-ink);
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding-top: 1.5rem;
  margin-bottom: 0.25rem;
}

.ashby-department-heading::before,
.ashby-job-posting-brief-department-heading::before {
  content: "\25A0";
  color: var(--triomics-orange);
  font-size: 0.6em;
  line-height: 1;
}

.ashby-department-heading-level,
.ashby-job-posting-brief-department-heading-level {
  font-family: var(--fontMono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--triomics-grey);
}

/* --- Posting rows ------------------------------------------ */
.ashby-job-posting-brief-list { border-top: 1px solid var(--triomics-line); }

.ashby-job-posting-brief {
  margin-bottom: 0;
  border-bottom: 1px solid var(--triomics-line);
  border-radius: 0;
  padding: 1.1rem 0.25rem;
  background: transparent;
  transition: background-color 0.15s ease, padding-left 0.15s ease;
}

.ashby-job-posting-brief:hover {
  background-color: rgba(232, 82, 30, 0.05);
  padding-left: 0.75rem;
}

.ashby-job-posting-brief-title {
  font-family: var(--fontFamily);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.015em;
  color: var(--triomics-ink);
}

.ashby-job-posting-brief:hover .ashby-job-posting-brief-title {
  color: var(--triomics-orange-dark);
}

.ashby-job-posting-brief-details {
  font-family: var(--fontMono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--triomics-grey);
}

/* ============================================================
   SINGLE POSTING — detail view headings
   ============================================================ */

.ashby-job-posting-header,
.ashby-job-posting-heading {
  font-family: var(--fontFamily);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--triomics-ink);
}

.ashby-job-posting-heading {
  font-size: 2.75rem;
  line-height: 1.02;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.ashby-application-form-submit-button {
  background-color: var(--triomics-orange);
  color: #ffffff;
  font-family: var(--fontFamily);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid var(--triomics-orange);
  border-radius: var(--borderRadiusButton);
  padding: 0.75rem 1.75rem;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ashby-application-form-submit-button:hover {
  background-color: var(--triomics-orange-dark);
  border-color: var(--triomics-orange-dark);
}

.ashby-application-form-submit-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(232, 82, 30, 0.3);
}

.ashby-job-board-back-to-all-jobs-button {
  background-color: transparent;
  color: var(--triomics-ink);
  font-family: var(--fontFamily);
  font-weight: 500;
  font-size: 0.9rem;
  border: 1px solid var(--triomics-line-strong);
  border-radius: var(--borderRadiusButton);
  padding: 0.55rem 1.25rem;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ashby-job-board-back-to-all-jobs-button:hover {
  background-color: var(--triomics-ink);
  color: var(--triomics-cream);
  border-color: var(--triomics-ink);
}

/* ============================================================
   APPLICATION FORM
   ============================================================ */

.ashby-application-form-container,
.ashby-survey-form-container {
  background-color: var(--triomics-surface) !important;
  border: 1px solid var(--triomics-line);
  border-radius: var(--borderRadiusContainer);
  padding: 1.5rem;
}

.ashby-application-form-section-header-title {
  font-family: var(--fontFamily);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--triomics-ink);
}

.ashby-application-form-section-header-description,
.ashby-application-form-question-description,
.ashby-application-form-texting-consent-description {
  color: var(--triomics-ink-soft);
  font-size: 0.85rem;
}

.ashby-application-form-question-title {
  font-family: var(--fontMono);
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--triomics-grey);
}

.ashby-application-form-autofill-input-icon { color: var(--triomics-orange); }
.ashby-application-form-autofill-input-root { border-radius: var(--borderRadiusContainer); }
.ashby-application-form-success-container { border-left: 3px solid var(--triomics-orange); }

/* ============================================================
   @media — responsive
   ============================================================ */
@media (max-width: 768px) {
  .ashby-job-board-heading { font-size: 2.4rem; }
  .ashby-job-posting-heading { font-size: 1.9rem; }
  .ashby-job-posting-brief { padding: 0.9rem 0.15rem; }
  .ashby-job-posting-brief-title { font-size: 1.1rem; }
  .ashby-job-posting-brief:hover { padding-left: 0.25rem; }
}

/* ============================================================
   @supports — progressive enhancement
   ============================================================ */
@supports (text-wrap: balance) {
  .ashby-job-board-heading,
  .ashby-job-posting-heading { text-wrap: balance; }
}