/* =====================================================================
   Lighthouse — Ashby Job Board · Custom CSS
   Завантажити: Admin → Job Boards → Custom CSS → Browse files
   ===================================================================== */

/* Шрифти (мусить бути найпершим рядком файлу).
   «Sorts Mill Goudy» з Google Fonts = той самий OFL Sorts Mill Goudy. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=JetBrains+Mono:wght@600&family=Sorts+Mill+Goudy:ital@0;1&display=swap');

/* ---------------------------------------------------------------------
   1. Тло всієї сторінки → #FAF9F7.
   scrollbar-gutter: stable — завжди резервує місце під скролбар, щоб ширина
   сторінки не змінювалась між короткими й довгими сторінками (інакше
   центрований хедер/лого «стрибає» при переходах).
--------------------------------------------------------------------- */
html {
  scrollbar-gutter: stable !important;
}
html, body {
  background: #FAF9F7 !important;
}

/* ---------------------------------------------------------------------
   2. Хедер-банер (фото) — фоном ПІД лого, на ВСІХ сторінках.
   [class*="_navRoot_"] — контейнер хедера Ashby з лого (стабільна частина
   хешованого класу _navRoot_5bhg5_28). Лого сидить поверх фото.
   Вертикальні padding'и дають лого простір на фото — висоту легко змінити.
--------------------------------------------------------------------- */
[class*="_navRoot_"] {
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("https://www.lighthousehq.com/assets/hero-atmosphere-end.webp") !important;  /* 10% чорний тинт поверх фото */
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: #E4E1DB !important;   /* запасний колір, поки фото вантажиться */
  padding-top: 20px !important;           /* було 40 — хедер удвічі тонший */
  padding-bottom: 20px !important;
  margin-bottom: 64px !important;         /* вільний простір під хедером */
}

/* ---------------------------------------------------------------------
   3. Базовий шрифт → DM Sans (скрізь, крім заголовка та основних кнопок —
   їх повертаємо нижче). Широкий селектор, бо Ashby ставить шрифт на
   контейнери, а не лише на body.
--------------------------------------------------------------------- */
body, body * {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif !important;
}

/* ---------------------------------------------------------------------
   4. Заголовок «Open Positions (N)» — Sorts Mill Goudy, курсив, більший.
   Колір — без змін.
--------------------------------------------------------------------- */
.ashby-job-board-heading {
  font-family: 'OFL Sorts Mill Goudy TT', 'Sorts Mill Goudy', 'EB Garamond', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 36px !important;
}
.ashby-job-board-heading * {            /* щоб лічильник "(N)" теж лишився Goudy */
  font-family: 'OFL Sorts Mill Goudy TT', 'Sorts Mill Goudy', 'EB Garamond', Georgia, serif !important;
}

/* Назва вакансії на сторінці вакансії («Case Manager») — той самий курсивний
   Goudy І той самий розмір 36px, що й «Open Positions». */
.ashby-job-posting-heading,
.ashby-job-posting-heading * {
  font-family: 'OFL Sorts Mill Goudy TT', 'Sorts Mill Goudy', 'EB Garamond', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 36px !important;
}

/* ---------------------------------------------------------------------
   5. УСІ кнопки (Apply, Submit, обидві «Upload File»…) — фірмовий шрифт
   JetBrains Mono, uppercase. Колір/фон — без змін.
   [class*="_button_"] = базовий клас кнопки Ashby (спільний для всіх
   варіантів). Подвоєний — для специфічності. Тег не вказуємо, бо
   «Upload File» може бути <label>, а не <button>.
--------------------------------------------------------------------- */
[class*="_button_"][class*="_button_"],
[class*="_button_"][class*="_button_"] * {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 600 !important;          /* Semi-bold */
  font-size: 14px !important;
  line-height: 15.4px !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

/* ---------------------------------------------------------------------
   6. Скруглення 6px — УСІ кнопки та поля вводу.
--------------------------------------------------------------------- */
button,
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  border-radius: 6px !important;
}

/* ---------------------------------------------------------------------
   7. Поверхні зливаємо з тлом #FAF9F7: фільтри, картки вакансій,
   панель автозаповнення, поля вводу. Картка вакансії підсвічується
   на hover кольором #F5F4F1.
--------------------------------------------------------------------- */
.ashby-job-board-filter,
.ashby-job-posting-brief,
.ashby-application-form-autofill-pane,
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  background-color: #FAF9F7 !important;
}

.ashby-job-posting-brief.ashby-job-posting-brief:hover {   /* подвоєний клас — щоб hover перебив правило _container_f7cvd із секції 11 */
  background-color: #F3F1ED !important;
}

/* ---------------------------------------------------------------------
   8. Кнопка «Submit Application» — ширина як у полів вводу.
   Поля сидять у .ashby-application-form-container (гор. padding 16px), а
   кнопка — сусід цього контейнера, тому ширша. Даємо їй такий самий відступ
   16px з боків, щоб краї збіглися з полями.
--------------------------------------------------------------------- */
.ashby-application-form-submit-button {
  width: calc(100% - 32px) !important;
  margin-left: 16px !important;
  margin-right: 16px !important;
  box-sizing: border-box !important;
}

/* ---------------------------------------------------------------------
   9. Дропдауни-фільтри ВСЕ ЩЕ білі — Ashby перебиває навіть
   select.ashby-job-board-filter. Йдемо на максимальну специфічність
   (подвоєний клас / подвоєний атрибут) + чистимо можливе фон-зображення.
--------------------------------------------------------------------- */
select.ashby-job-board-filter.ashby-job-board-filter,
[class*="_filterContainer_"][class*="_filterContainer_"] {
  background-color: #FAF9F7 !important;
  background-image: none !important;
}

/* ---------------------------------------------------------------------
   10. Хедер: лого −20%, СТАБІЛЬНО по центру + біла стрілка «назад» (←).
   Ліве вирівнювання прибрано (лишаємо центр). transform-origin: center —
   щоб зменшене лого не зміщувалось і трималось рівно по центру.
--------------------------------------------------------------------- */
[class*="_navRoot_"] img {
  transform: scale(0.8) !important;        /* лого менше на 20% */
  transform-origin: center !important;
}
[class*="_navRoot_"] svg {
  fill: #ffffff !important;
  stroke: #ffffff !important;
  color: #ffffff !important;
}

/* ---------------------------------------------------------------------
   11. «Білі куски» на сторінці вакансії/форми: панелі мають хешований клас
   _container_f7cvd_ з білим фоном тієї ж ваги, що й наші ashby-класи.
   Піднімаємо специфічність через [class], щоб #FAF9F7 переміг.
--------------------------------------------------------------------- */
.ashby-job-posting-left-pane[class],
.ashby-job-posting-right-pane[class],
.ashby-application-form-container[class],
.ashby-application-form-autofill-pane[class],
.ashby-application-form-autofill-input-root[class],
[class*="_container_f7cvd"][class*="_container_f7cvd"] {   /* усі білі панелі-контейнери Ashby одним махом */
  background-color: #FAF9F7 !important;
}

/* ---------------------------------------------------------------------
   12. Мобілка: панель фільтрів має «дивний» (холодний) фон за замовч.
   Ashby — міняємо на теплий #F3F1ED. Тільки на вузьких екранах, щоб не
   чіпати десктоп (там фільтри стоять інлайн на #FAF9F7).
   Подвоєний атрибут — для специфічності.
--------------------------------------------------------------------- */
@media (max-width: 768px) {
  [class*="_filtersContainer_"][class*="_filtersContainer_"],
  [class*="_filtersHeader_"][class*="_filtersHeader_"] {
    background-color: #F3F1ED !important;
  }
}