/* stylelint-disable */
/* ==========================================================================
   Bruno — Ashby job board custom CSS
   Brand: amber #F4AA41 · slate #0F172A · warm bg #FBFBF8 · Inter
   Scope: type, spacing, job-list cards, form polish. No structural overrides,
   so it survives Ashby markup updates. Set the SAME accent (#F4AA41) in
   Ashby admin → Theme so non-CSS surfaces match.
   ========================================================================== */

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

:root {
  /* Accent — also set these in Ashby admin Theme settings to match */
  --colorPrimary900: #B86E10;   /* darker: hover / active */
  --colorPrimary600: #F4AA41;   /* Bruno amber */

  --widthMaxJobBoard: 1200px;   /* wider to fit four columns of departments */

  --borderRadiusContainer: 14px;
  --borderRadiusControl: 10px;
  --borderRadiusButton: 10px;

  --fontFamily: "Inter", "-apple-system", "BlinkMacSystemFont", "Segoe UI",
    "Helvetica", "Arial", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;

  --colorAppBackground: #FBFBF8;   /* warm off-white, matches bruno site */

  /* Local tokens */
  --bruno-ink: #0F172A;
  --bruno-muted: #64748B;
  --bruno-line: #EAE7E0;
  --bruno-cream: #FFF0DD;
  --bruno-card: #FFFFFF;
}

/* ---- Board header ------------------------------------------------------- */
.ashby-job-board-heading {
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--bruno-ink);
}

.ashby-job-board-heading-count {
  color: var(--bruno-muted);
  font-weight: 500;
}

/* ---- Filters ------------------------------------------------------------ */
.ashby-job-board-filters-label {
  color: var(--bruno-muted);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.ashby-job-board-filter {
  border: 1px solid var(--bruno-line);
  border-radius: var(--borderRadiusControl);
  background: var(--bruno-card);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ashby-job-board-filter:hover {
  border-color: #D8D2C6;
}

.ashby-job-board-reset-filters-label {
  color: var(--colorPrimary900);
  font-weight: 600;
}

/* ---- Department / team headings ---------------------------------------- */
.ashby-department-heading,
.ashby-job-posting-brief-department-heading {
  color: var(--bruno-ink);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---- Departments: rows → columns --------------------------------------- */
/* Ashby stacks each department (heading + its card list) vertically. This
   flows those blocks into up to 2 balanced columns. `:has()` targets the
   container that holds the interleaved heading/list siblings. The break rules
   keep a heading glued to its list and prevent a card from splitting across
   columns. `columns: 220px 4` = up to 4 columns (one per department at full
   width), each at least ~220px, so it steps down 4 → 3 → 2 → 1 as the viewport
   narrows. Change the `4` to 2 or 3 if you add departments or want wider cards. */
div:has(> .ashby-job-posting-brief-list) {
  columns: 220px 4;
  column-gap: 20px;
}

.ashby-department-heading {
  break-after: avoid;      /* keep the heading with its list */
  break-inside: avoid;
  margin-top: 4px;
}

.ashby-job-posting-brief-list {
  break-before: avoid;
  break-inside: avoid;     /* keep a department's roles together */
  margin-bottom: 22px;
}

/* ---- Job list: flat rows → cards --------------------------------------- */
.ashby-job-posting-brief {
  break-inside: avoid;     /* never split a card across a column boundary */
  margin-bottom: 12px;
  padding: 16px 18px;      /* a touch tighter to suit narrower columns */
  border: 1px solid var(--bruno-line);
  border-radius: var(--borderRadiusContainer);
  background: var(--bruno-card);
  transition: transform 0.15s ease, box-shadow 0.15s ease,
    border-color 0.15s ease;
}

.ashby-job-posting-brief:hover {
  transform: translateY(-2px);
  border-color: var(--colorPrimary600);
  box-shadow: 0 6px 20px -10px rgba(184, 110, 16, 0.45);
}

.ashby-job-posting-brief-title {
  color: var(--bruno-ink);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.ashby-job-posting-brief-details {
  color: var(--bruno-muted);
}

/* ---- Job posting page --------------------------------------------------- */
.ashby-job-posting-heading,
.ashby-job-posting-header {
  color: var(--bruno-ink);
  letter-spacing: -0.02em;
}

.ashby-job-board-back-to-all-jobs-button {
  color: var(--colorPrimary900);
  font-weight: 600;
}

/* ---- Application form --------------------------------------------------- */
.ashby-application-form-question-title,
.ashby-application-form-section-header-title {
  color: var(--bruno-ink);
  font-weight: 600;
}

.ashby-application-form-question-description,
.ashby-application-form-section-header-description {
  color: var(--bruno-muted);
}

/* Inputs: consistent border + amber focus ring */
.ashby-application-form-field-entry input,
.ashby-application-form-field-entry textarea,
.ashby-application-form-field-entry select {
  border-radius: var(--borderRadiusControl);
  border: 1px solid var(--bruno-line);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ashby-application-form-field-entry input:focus,
.ashby-application-form-field-entry textarea:focus,
.ashby-application-form-field-entry select:focus {
  outline: none;
  border-color: var(--colorPrimary600);
  box-shadow: 0 0 0 3px rgba(244, 170, 65, 0.25);
}

/* Autofill / resume dropzone — lean on the cream accent */
.ashby-application-form-autofill-input-root {
  border-radius: var(--borderRadiusContainer);
}

/* ---- Submit button ------------------------------------------------------ */
.ashby-application-form-submit-button {
  border-radius: var(--borderRadiusButton);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.ashby-application-form-submit-button:hover {
  filter: brightness(0.97);
  box-shadow: 0 8px 22px -10px rgba(184, 110, 16, 0.6);
  transform: translateY(-1px);
}

/* ---- Text selection matches the site ----------------------------------- */
::selection {
  background: rgba(244, 170, 65, 0.35);
  color: #111827;
}