/* 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;
  --colorPrimary600: #F4AA41;

  --widthMaxJobBoard: 1200px;

  --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;

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

/* ---- Intro hero --------------------------------------------------------- */
[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;
  overflow: hidden;
  max-width: 760px;
  text-align: center;
}

[class*="topDescription"]::before {
  content: "CAREERS AT BRUNO";
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--colorPrimary900);
  margin-bottom: 18px;
}

[class*="topDescription"] h2 {
  font-size: 2.3rem;
  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;
  margin-left: auto;
  margin-right: auto;
}

/* ---- 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: dynamic columns -------------------------------------- */
/* Automatically uses 1-4 columns based on how many department headings
   Ashby renders. No manual updates are needed when departments gain or lose
   open roles. */

div:has(> .ashby-job-posting-brief-list) {
  column-count: 1;
  column-gap: 20px;
}

/* 2+ departments */
div:has(
  > .ashby-department-heading ~ .ashby-department-heading
) {
  column-count: 2;
}

/* 3+ departments */
div:has(
  > .ashby-department-heading
    ~ .ashby-department-heading
    ~ .ashby-department-heading
) {
  column-count: 3;
}

/* 4+ departments */
div:has(
  > .ashby-department-heading
    ~ .ashby-department-heading
    ~ .ashby-department-heading
    ~ .ashby-department-heading
) {
  column-count: 4;
}

@media (max-width: 900px) {
  div:has(> .ashby-job-posting-brief-list) {
    column-count: 2;
  }
}

@media (max-width: 600px) {
  div:has(> .ashby-job-posting-brief-list) {
    column-count: 1;
  }
}

.ashby-department-heading {
  break-after: avoid;
  break-inside: avoid;
  margin-top: 4px;
}

.ashby-job-posting-brief-list {
  break-before: avoid;
  break-inside: avoid;
  margin-bottom: 22px;
}

/* ---- Job list: flat rows -> cards --------------------------------------- */
.ashby-job-posting-brief {
  break-inside: avoid;
  margin-bottom: 12px;
  padding: 16px 18px;
  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);
}

.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);
}

.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);
  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;
}