/* 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;
}

/* ---- Intro hero --------------------------------------------------------- */
/* Turns the plain intro text into a warm branded hero band. Targets Ashby's
   own `topDescription` wrapper (the one non-documented selector in this sheet)
   via a substring match, so it survives the hashed suffix Ashby appends. If
   Ashby ever renames it, the intro just falls back to plain text — no breakage.
   The eyebrow is drawn with CSS content(); edit the string below to change it. */
[class*="topDescription"] {
  position: relative;
  background: linear-gradient(180deg, #FFF6E9 0%, var(--bruno-cream) 100%);
  border: 1px solid #F3E4CB;
  border-radius: 18px;
  padding: 34px 34px 30px;
  margin: 0 auto 14px;     /* center the band on the page */
  overflow: hidden;
  max-width: 760px;        /* hug the text so the band isn't half-empty */
  text-align: center;      /* center the eyebrow, title, and copy */
}

[class*="topDescription"]::before {
  content: "CAREERS AT BRUNO";
  display: block;          /* block so the gap below reliably applies */
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--colorPrimary900);
  margin-bottom: 18px;     /* breathing room above the title */
}

[class*="topDescription"] h2 {
  font-size: 2.3rem;       /* fixed value — Ashby's validator rejects clamp() */
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--bruno-ink);
  margin: 0 0 16px;
}

@media (max-width: 640px) {
  [class*="topDescription"] h2 { font-size: 1.9rem; }
  [class*="topDescription"] { padding: 24px 22px 22px; }
}

[class*="topDescription"] p {
  color: #3F3A31;
  line-height: 1.6;
  max-width: 58ch;         /* keep centered lines readable */
  margin-left: auto;
  margin-right: auto;
}

/* Prefer a full-width branded band instead? Delete the `max-width: 760px`
   above and uncomment this to fill the right side with soft brand shapes:
   [class*="topDescription"]::after {
     content: ""; position: absolute; right: -70px; top: -70px;
     width: 340px; height: 340px; border-radius: 50%;
     background: rgba(244, 170, 65, 0.14);
     box-shadow: -120px 160px 0 -40px rgba(244, 170, 65, 0.10);
     pointer-events: none;
   }
   Then add `position: relative; z-index: 1;` to the h2, p, and ::before. */

/* ---- 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) {
  column-width: 220px;     /* longhand — safer than the `columns` shorthand */
  column-count: 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, background-color 0.15s ease;
}

.ashby-application-form-submit-button:hover {
  background-color: var(--colorPrimary900);   /* darker amber — no filter() function */
  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;
}