/*
 * Crux Climate — Ashby Job Board Custom CSS (admin-upload version)
 * v17 "SAFE" — uses ONLY selectors from Ashby's documented whitelist:
 *   :root variables + bare .ashby-* classes + @media at-rules.
 *   No element selectors (body, a, #root), no pseudo-classes,
 *   no descendant selectors — guaranteed to pass the validator.
 *
 * Upload in: Admin > Job Boards > Theme (Job Board) > Custom CSS
 * Reference: https://www.ashbyhq.com/job_board_example_css/full-job-board.css
 */

:root {
  /* Brand font — falls back to sans-serif if the variable font
     isn't loaded inside the iframe */
  --fontFamily: "Monument Grotesk Variable", "ABC Monument Grotesk Variable", sans-serif;

  /* Page background inside the embed (replaces the old `#root` rule) */
  --colorAppBackground: #000000;

  /* Layout */
  --widthMaxJobBoard: 100%;

  /* Primary colors — these drive Ashby's buttons/links.
     600 = Crux blue (was the Apply button color),
     900 = darker blue used by Ashby for hover/active states.
     NOTE: the old yellow (#ffd400) hover can't be reproduced via
     whitelisted selectors alone — see the EXTENDED file. */
  --colorPrimary600: #0088ff;
  --colorPrimary900: #006fdb;

  /* Radii — cards, inputs, pill buttons */
  --borderRadiusContainer: 1em;
  --borderRadiusControl: 0.5rem;
  --borderRadiusButton: 6.25rem;
}

/* ============================================================
   JOB BOARD (list page)
   ============================================================ */

/* Board heading + posting count */
.ashby-job-board-heading {
  color: #ffffff;
  font-weight: 400;
}

.ashby-job-board-heading-count {
  color: rgba(255, 255, 255, 0.6);
}

/* Filters row */
.ashby-job-board-filters-label {
  color: #ffffff;
  font-weight: 300;
}

.ashby-job-board-reset-filters-label {
  color: #ffffff;
}

.ashby-job-board-filter {
  background-color: #ffffff;
  background-image: none;
  color: #000000;
  border: 1px solid rgba(255, 255, 255, 0.125);
  border-radius: 0.5rem;
  padding: 0.625rem 0.875rem;
  font-size: 1rem;
  font-weight: 400;
}

/* Department / team headings (replaces _departmentHeading_12ylk_349) */
.ashby-department-heading {
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.2;
  margin-left: 0;
}

.ashby-department-heading-level {
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.2;
  margin-left: 0;
}

/* Job posting cards (replaces _container_dea4p_28) */
.ashby-job-posting-brief-list {
  margin-left: 0;
}

.ashby-job-posting-brief {
  background-color: #222222;
  color: #ffffff;
  border-radius: 1em;
  padding: 2.5em;
  margin-left: 0;
  margin-bottom: 0.75em;
  transition: background-color 0.3s ease;
}

/* Card title (replaces _title_dea4p_33) */
.ashby-job-posting-brief-title {
  color: #ffffff;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.2;
}

.ashby-job-posting-brief-department-heading {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 300;
}

.ashby-job-posting-brief-department-heading-level {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 300;
}

/* Location / compensation details (replaces _details_5yu8i_417) */
.ashby-job-posting-brief-details {
  color: #ffffff;
  margin-top: 2rem;
}

/* ============================================================
   JOB POSTING (detail page)
   ============================================================ */

.ashby-job-posting-header {
  color: #ffffff;
}

.ashby-job-posting-heading {
  color: #ffffff;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.2;
}

/* Left pane = dark card (replaces _left_5yu8i_421) */
.ashby-job-posting-left-pane {
  background-color: #222222;
  color: #ffffff;
  border-radius: 1em;
  padding: 2.5em;
  margin-top: 0;
}

/* Right pane = description + application form */
.ashby-job-posting-right-pane {
  color: #ffffff;
}

.ashby-job-posting-right-pane-overview-tab {
  color: #ffffff;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.4;
}

.ashby-job-posting-right-pane-application-tab {
  color: #ffffff;
}

/* Tabs container (replaces _tabs_5yu8i_29) */
.ashby-job-posting-right-pane-tab-slider {
  position: static;
  margin-top: 0;
}

/* "Back to all jobs" (replaces _back_4fqrp_44) */
.ashby-job-board-back-to-all-jobs-button {
  color: #ffffff;
}

/* ============================================================
   APPLICATION FORM
   ============================================================ */

.ashby-application-form-container {
  color: #ffffff;
}

.ashby-application-form-section-header-title {
  color: #ffffff;
}

.ashby-application-form-section-header-description {
  color: rgba(255, 255, 255, 0.7);
}

.ashby-application-form-question-title {
  color: #ffffff;
}

.ashby-application-form-question-description {
  color: rgba(255, 255, 255, 0.7);
}

/* Submit button styled like the old primary button (_primary_8wvgw_96) */
.ashby-application-form-submit-button {
  background-color: #0088ff;
  color: #ffffff;
  border: none;
  border-radius: 6.25rem;
  padding: 0.375rem 1.5rem;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.7;
  text-align: center;
  transition: all 0.3s;
}

.ashby-application-form-texting-consent-description {
  color: rgba(255, 255, 255, 0.6);
}

.ashby-application-form-failure-container {
  color: #ffffff;
}

.ashby-application-form-success-container {
  color: #ffffff;
}

/* ============================================================
   MOBILE
   ============================================================ */

@media screen and (max-width: 767px) {
  .ashby-job-posting-brief {
    padding: 1.25em;
  }

  .ashby-job-posting-brief-details {
    margin-top: 1rem;
  }

  .ashby-job-posting-left-pane {
    padding: 1rem;
  }

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

  .ashby-job-posting-heading {
    font-size: 1.5rem;
  }
}

/* ============================================================
   EXTENDED RULES — pseudo-classes & descendant selectors
   ============================================================
   The whitelist error message says "only specified classes and
   at-rules allowed", but it is undocumented whether :hover,
   ::placeholder, or descendant selectors on allowed classes pass
   validation. This file = SAFE file + the rules below.
   Try uploading THIS file first; if the validator rejects it,
   fall back to jobs17-admin-safe.css.
   ============================================================ */

/* Card hover (was _container_dea4p_28:hover → #313131) */
.ashby-job-posting-brief:hover {
  background-color: #313131;
}

/* Yellow hover from the original design (_button_8wvgw_29:hover) */
.ashby-application-form-submit-button:hover {
  background-color: #ffd400;
  color: #ffffff;
}

.ashby-job-board-back-to-all-jobs-button:hover {
  color: #ffd400;
}

/* White links inside description & details (was bare `a` selector) */
.ashby-job-posting-right-pane-overview-tab a {
  color: #ffffff;
}

.ashby-job-posting-brief-details a {
  color: #ffffff;
}

/* Paragraph rhythm in the job description. Uses the adjacent-sibling
   combinator so every paragraph after the first gets top margin.
   If the validator rejects this one rule, just delete it —
   everything else in this file already passed. */
.ashby-job-posting-right-pane-overview-tab p + p {
  margin-top: 1.5em;
}