/* ============================================================
 * UNIVERSE — Custom CSS для Ashby Job Board (FULL DARK)
 * jobs.ashbyhq.com/universe
 *
 * Повністю чорна версія — як у SKELAR: фон панелей сторінки
 * вакансії та форми відгуку теж перефарбовується в чорний.
 *
 * ЯК ЦЕ ПРАЦЮЄ: стандартних налаштувань фону в Theme немає,
 * тому білі контейнери Ashby перекриваються через !important.
 * Це робочий патерн (так роблять інші компанії на Ashby),
 * але він спирається на поточну верстку Ashby — якщо Ashby
 * змінить структуру сторінки, окремі зони можуть «посвітлішати».
 * Після кожного апдейту Ashby варто раз на місяць перевіряти борд.
 *
 * Завантаження: Admin → Job Boards → Theme (Job Board) → Custom CSS
 * ============================================================ */

/* ------------------------------------------------------------
 * 0. ШРИФТИ
 * ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

/*
@font-face {
  font-family: 'Mariupol';
  src: url('https://YOUR-PUBLIC-HOST/Mariupol-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mariupol';
  src: url('https://YOUR-PUBLIC-HOST/Mariupol-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mariupol';
  src: url('https://YOUR-PUBLIC-HOST/Mariupol-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
*/

/* ------------------------------------------------------------
 * 1. ЗМІННІ БРЕНДУ
 * ------------------------------------------------------------ */
:root {
  --u-yellow: #FDE201;
  --u-black: #1A1A1A;
  --u-black-soft: #1E1E1E;
  --u-black-card: #242424;     /* картки/інпути на чорному */
  --u-white: #FFFFFF;
  --u-gray: #D9D9D9;           /* основний текст контенту */
  --u-gray-dim: #8A8A8A;       /* метадані */
  --u-border: #3A3A3A;         /* рамки інпутів */

  --colorPrimary900: var(--u-yellow);
  --colorPrimary600: var(--u-yellow);
  --colorAppBackground: var(--u-black);

  --borderRadiusContainer: 0px;
  --borderRadiusControl: 4px;
  --borderRadiusButton: 0px;

  --widthMaxJobBoard: 860px;

  --fontFamily: 'Mariupol', 'Roboto', -apple-system, BlinkMacSystemFont,
                'Segoe UI', Helvetica, Arial, sans-serif;
}

html,
body {
  background-color: var(--u-black) !important;
  color: var(--u-gray);
}

/* ------------------------------------------------------------
 * 2. ГОЛОВНА СТОРІНКА БОРДА
 * ------------------------------------------------------------ */
.ashby-job-board-heading {
  font-family: var(--fontFamily);
  font-weight: 700;
  color: var(--u-white) !important;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.ashby-job-board-heading-count {
  color: var(--u-yellow) !important;
  font-weight: 400;
}

.ashby-department-heading,
.ashby-job-posting-brief-department-heading {
  font-family: var(--fontFamily);
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--u-yellow) !important;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--u-yellow);
  padding-bottom: 0.5rem;
}

.ashby-department-heading-level,
.ashby-job-posting-brief-department-heading-level {
  font-family: var(--fontFamily);
  font-weight: 500;
  color: var(--u-yellow) !important;
}

/* Картки вакансій */
.ashby-job-posting-brief {
  margin-bottom: 6px;
  border-radius: 0;
  background-color: var(--u-black-soft) !important;
  transition: background-color 0.15s ease;
}

.ashby-job-posting-brief:hover {
  background-color: var(--u-yellow) !important;
}

.ashby-job-posting-brief-title {
  font-family: var(--fontFamily);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--u-white) !important;
  letter-spacing: -0.01em;
  line-height: 1.15;
  transition: color 0.15s ease;
}

.ashby-job-posting-brief:hover .ashby-job-posting-brief-title {
  color: var(--u-black) !important;
}

.ashby-job-posting-brief-details {
  font-family: var(--fontFamily);
  font-weight: 400;
  color: var(--u-gray-dim) !important;
  line-height: 1.2;
  transition: color 0.15s ease;
}

.ashby-job-posting-brief:hover .ashby-job-posting-brief-details {
  color: var(--u-black-soft) !important;
}

/* ------------------------------------------------------------
 * 3. ФІЛЬТРИ (включно з дропдаунами)
 * ------------------------------------------------------------ */
.ashby-job-board-filters-label {
  font-family: var(--fontFamily);
  font-weight: 500;
  color: var(--u-white) !important;
}

.ashby-job-board-reset-filters-label {
  font-family: var(--fontFamily);
  color: var(--u-gray-dim) !important;
}

.ashby-job-board-reset-filters-label:hover {
  color: var(--u-yellow) !important;
}

.ashby-job-board-filter {
  font-family: var(--fontFamily);
  background-color: var(--u-black-card) !important;
  color: var(--u-white) !important;
  border: 1px solid var(--u-border) !important;
  border-radius: var(--borderRadiusControl);
}

.ashby-job-board-filter select,
.ashby-job-board-filter option {
  background-color: var(--u-black-card) !important;
  color: var(--u-white) !important;
}

/* ------------------------------------------------------------
 * 4. СТОРІНКА ВАКАНСІЇ — ПЕРЕФАРБУВАННЯ БІЛИХ ПАНЕЛЕЙ
 * Це та зона, яка лишалася білою. Форсуємо чорний фон.
 * ------------------------------------------------------------ */
.ashby-job-posting-left-pane,
.ashby-job-posting-right-pane {
  background-color: var(--u-black) !important;
  color: var(--u-gray) !important;
}

/* ВАЖЛИВО (перевірено через DevTools на живому борді):
   класи -overview-tab / -application-tab висять на ТЕКСТОВИХ
   SPAN-ах усередині табів, а не на контейнерах контенту.
   Їхній фон має бути прозорим — інакше зʼявляються чорні
   прямокутники за написами Overview / Application. */
.ashby-job-posting-right-pane-overview-tab,
.ashby-job-posting-right-pane-application-tab {
  background-color: transparent !important;
}

/* Білий фон опису вакансії сидить на внутрішньому контейнері
   без документованого класу — обнуляємо фони всіх div усередині
   правої панелі. Інпути/кнопки не зачіпаються (вони не div
   і стилізуються власними правилами нижче). */
.ashby-job-posting-right-pane div {
  background-color: transparent !important;
}

/* Те саме страхування для лівої панелі */
.ashby-job-posting-left-pane div {
  background-color: transparent !important;
}

.ashby-job-posting-heading {
  font-family: var(--fontFamily);
  font-weight: 700;
  color: var(--u-white) !important;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.ashby-job-posting-header {
  font-family: var(--fontFamily);
  background-color: var(--u-black) !important;
}

/* Ліва панель: підписи Location / Employment Type / Department
   та їхні значення */
.ashby-job-posting-left-pane,
.ashby-job-posting-left-pane * {
  color: var(--u-gray) !important;
}

.ashby-job-posting-left-pane h1,
.ashby-job-posting-left-pane h2,
.ashby-job-posting-left-pane h3 {
  color: var(--u-white) !important;
}

/* Текст опису вакансії (rich text від рекрутерів) */
.ashby-job-posting-right-pane p,
.ashby-job-posting-right-pane li {
  color: var(--u-gray) !important;
  line-height: 1.55;
}

.ashby-job-posting-right-pane h1,
.ashby-job-posting-right-pane h2,
.ashby-job-posting-right-pane h3,
.ashby-job-posting-right-pane h4,
.ashby-job-posting-right-pane strong,
.ashby-job-posting-right-pane b {
  color: var(--u-white) !important;
}

/* ============================================
   ТАБИ Overview / Application
   Реальна структура (перевірено через DevTools):
   <nav class="_tabs_…">
     <a aria-selected="true|false">
       <span class="ashby-job-posting-right-pane-overview-tab">Overview</span>
     </a>
   </nav>
   Тому селектор — nav > a всередині правої панелі.
   ============================================ */

/* Контейнер табів (на мобільній верстці може мати власний
   світлий фон — перекриваємо) */
.ashby-job-posting-right-pane nav,
nav[class*="_tabs_"] {
  background-color: var(--u-black) !important;
  border: none !important;
  box-shadow: none !important;
}

/* Страховка для мобільних обгорток навколо nav */
div:has(> nav[class*="_tabs_"]) {
  background-color: var(--u-black) !important;
}

/* Обидва таби: жовтий текст + жовте підкреслення */
.ashby-job-posting-right-pane nav a,
nav[class*="_tabs_"] a {
  color: var(--u-yellow) !important;
  background-color: transparent !important;
  font-family: var(--fontFamily);
  text-decoration: underline !important;
  text-decoration-color: var(--u-yellow) !important;
  text-decoration-thickness: 3px !important;
  text-underline-offset: 8px !important;
}

/* Неактивний таб — трохи прозоріший, щоб активний читався */
.ashby-job-posting-right-pane nav a[aria-selected="false"],
nav[class*="_tabs_"] a[aria-selected="false"] {
  opacity: 0.55;
}

.ashby-job-board-back-to-all-jobs-button {
  font-family: var(--fontFamily);
  font-weight: 500;
  color: var(--u-yellow) !important;
  background: transparent !important;
}

/* ------------------------------------------------------------
 * 5. ФОРМА ВІДГУКУ — ТЕМНІ ІНПУТИ
 * ------------------------------------------------------------ */
.ashby-application-form-container {
  background-color: var(--u-black) !important;
  color: var(--u-gray) !important;
}

.ashby-application-form-question-title,
.ashby-application-form-section-header-title {
  font-family: var(--fontFamily);
  font-weight: 500;
  color: var(--u-white) !important;
}

.ashby-application-form-question-description,
.ashby-application-form-section-header-description,
.ashby-application-form-texting-consent-description {
  font-family: var(--fontFamily);
  font-weight: 400;
  color: var(--u-gray-dim) !important;
}

/* Поля вводу */
.ashby-application-form-field-entry input,
.ashby-application-form-field-entry textarea,
.ashby-application-form-field-entry select {
  background-color: var(--u-black-card) !important;
  color: var(--u-white) !important;
  border: 1px solid var(--u-border) !important;
  border-radius: var(--borderRadiusControl);
}

.ashby-application-form-field-entry input::placeholder,
.ashby-application-form-field-entry textarea::placeholder {
  color: var(--u-gray-dim) !important;
}

.ashby-application-form-field-entry label {
  color: var(--u-white) !important;
}

/* Аплоадер резюме / autofill */
.ashby-application-form-autofill-input-root,
.ashby-application-form-autofill-pane,
.ashby-application-form-autofill-uploader {
  background-color: var(--u-black-card) !important;
  color: var(--u-gray) !important;
  border-color: var(--u-border) !important;
}

.ashby-application-form-autofill-input-title {
  color: var(--u-white) !important;
}

.ashby-application-form-autofill-input-description {
  color: var(--u-gray-dim) !important;
}

/* Кнопка Submit: чорне на жовтому, hover — інверсія */
.ashby-application-form-submit-button {
  font-family: var(--fontFamily);
  font-weight: 500;
  background-color: var(--u-yellow) !important;
  color: var(--u-black) !important;
  border: 2px solid var(--u-yellow) !important;
  border-radius: 0;
  letter-spacing: -0.01em;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.ashby-application-form-submit-button:hover {
  background-color: var(--u-black) !important;
  color: var(--u-yellow) !important;
}

/* Кнопка "Apply for this Job": чорний текст на жовтому.
   Реальний клас кнопки — _primary_<hash> (перевірено DevTools).
   Хеш у назві класу може змінитися при оновленні Ashby —
   тому матчимо за стабільним префіксом через [class*=]. */
button[class*="_primary_"] {
  font-family: var(--fontFamily);
  font-weight: 500;
  color: var(--u-black) !important;
  letter-spacing: -0.01em;
  transition: background-color 0.15s ease, color 0.15s ease;
}

button[class*="_primary_"]:hover {
  background-color: var(--u-black) !important;
  color: var(--u-yellow) !important;
}

/* Повідомлення успіху/помилки */
.ashby-application-form-success-container,
.ashby-application-form-failure-container {
  background-color: var(--u-black-soft) !important;
  color: var(--u-white) !important;
}

/* ------------------------------------------------------------
 * 6. МОБІЛЬНА ВЕРСІЯ
 * ------------------------------------------------------------ */
@media (max-width: 640px) {
  .ashby-department-heading,
  .ashby-job-posting-brief-department-heading {
    font-size: 1.2rem;
    margin-top: 2rem;
  }

  .ashby-job-posting-brief-title {
    font-size: 1rem;
  }
}