/*
 * 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's default styling can render a white background here, which
   was causing white-on-white text. Force the background to black so
   the original white text reads correctly (the "white on black" look
   the client wants). */
.ashby-job-posting-right-pane {
  color: #ffffff;
  background-color: #000000;
}

.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
   ============================================================ */

/* Force the form container's background dark too, in case Ashby
   applies its own white background to the form region independently
   of the right-pane wrapper. */
.ashby-application-form-container {
  color: #ffffff;
  background-color: #000000;
}

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

/* Autofill ("Upload your resume to autofill") pane — Ashby's default
   gives this a white background. Force dark. */
.ashby-application-form-autofill-pane {
  color: #ffffff;
  background-color: #000000;
}

/* The autofill *inner* card (root + base-layer) is a separate Ashby
   container with its own white background. Make it the same dark
   gray as the job-posting cards (#222222) so it reads as a card on
   the black pane. */
.ashby-application-form-autofill-input-root {
  background-color: #222222;
  border-radius: 1em;
}

.ashby-application-form-autofill-input-base-layer {
  background-color: #222222;
}

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

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

.ashby-application-form-autofill-input-icon {
  color: #ffffff;
}

/* 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 the dark job-posting brief cards and the
   right-pane overview content. */
.ashby-job-posting-right-pane-overview-tab a {
  color: #ffffff;
}

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

/* Back-to-all-jobs button arrow — path has no `fill`, browsers
   either render it transparent or default-black. Force it to
   inherit the button's text color so it tracks hover state too. */
.ashby-job-board-back-to-all-jobs-button svg,
.ashby-job-board-back-to-all-jobs-button svg path {
  fill: currentColor;
}

/* Autofill sparkles icon — same fill="none" SVG pattern as the back
   arrow. Make the path inherit the icon's color. */
.ashby-application-form-autofill-input-icon path {
  fill: currentColor;
}

/* Tab nav bar — Ashby's mobile CSS gives `._tabs_5yu8i_29` (the nav)
   a white background. Force it dark across all viewports so the
   white tab labels stay readable. */
.ashby-job-posting-right-pane nav {
  background-color: #000000;
}

/* Overview content panel — Ashby's `_container_f7cvd_28` default
   appears white. No whitelisted class is applied to this element,
   so reach through with [role="tabpanel"]. */
.ashby-job-posting-right-pane [role="tabpanel"] {
  color: #ffffff;
  background-color: #000000;
}

/* Form text inputs and textareas — Crux design tokens. White text
   on a subtle white-tinted dark surface, with brightening border
   on hover/focus. :not([type="file"]) excludes the hidden file
   inputs (which the visible upload <button> sits next to). */
.ashby-application-form-field-entry input:not([type="file"]),
.ashby-application-form-field-entry textarea {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.5rem;
  padding: 0.625rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.2;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.ashby-application-form-field-entry input:not([type="file"]):hover,
.ashby-application-form-field-entry textarea:hover {
  border-color: rgba(255, 255, 255, 0.5);
}

.ashby-application-form-field-entry input:not([type="file"]):focus,
.ashby-application-form-field-entry textarea:focus {
  background-color: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.8);
  outline: none;
}

/* File-upload trigger buttons (resume + optional documents). They
   sit inside `<div role="presentation">` wrappers, which lets us
   scope this without hitting the location field's chevron toggle. */
.ashby-application-form-field-entry [role="presentation"] button {
  color: #ffffff;
  background-color: #0088ff;
  border: none;
  border-radius: 6.25rem;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.ashby-application-form-field-entry [role="presentation"] button:hover {
  color: #0088ff;
  background-color: #ffffff;
}

/* Autofill pane's "Upload file" CTA — same styling as field uploads. */
.ashby-application-form-autofill-pane button {
  color: #ffffff;
  background-color: #0088ff;
  border: none;
  border-radius: 6.25rem;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.ashby-application-form-autofill-pane button:hover {
  color: #0088ff;
  background-color: #ffffff;
}

/* "Apply for this Job" CTA — sits at the bottom of the overview
   tabpanel with no whitelisted class of its own. Scoped to
   [id="overview"] so it doesn't conflict with the upload buttons
   in the application form tabpanel ([id="form"]). */
.ashby-job-posting-right-pane [role="tabpanel"][id="overview"] button {
  color: #ffffff;
  background-color: #0088ff;
  border: none;
  border-radius: 6.25rem;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.ashby-job-posting-right-pane [role="tabpanel"][id="overview"] button:hover {
  color: #0088ff;
  background-color: #ffffff;
}

/* Upload button SVG icons — Ashby's hover rule paints these white,
   which becomes invisible on the white hover background of our
   upload buttons. Force black on both states. Higher specificity
   than Ashby's internal `:hover svg path` rule. */
.ashby-application-form-field-entry [role="presentation"] button svg,
.ashby-application-form-field-entry [role="presentation"] button svg path,
.ashby-application-form-field-entry [role="presentation"] button:hover svg,
.ashby-application-form-field-entry [role="presentation"] button:hover svg path {
  fill: #000000;
}

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