/* Within brand theme for Ashby job board
   Source: Within Brand Guidelines (Figma) — https://figma.com/design/ydIwUyAhMVRnyMJrRc6P1T
   Upload via: Admin > Job Board > Theme (Job Board) > Custom CSS, on the Within brand's theme page.
   NOTE: --colorPrimary900 / --colorPrimary600 are also set in the Ashby admin Theme settings directly.
   Set those there to Coral/Midnight first so buttons and links stay in sync with this file. */

/* Once you have hosted .woff2 files for FT Kunst Grotesk, uncomment and fill in the src URLs:

@font-face {
  font-family: "FT Kunst Grotesk";
  src: url("https://YOUR-CDN/ft-kunst-grotesk-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "FT Kunst Grotesk";
  src: url("https://YOUR-CDN/ft-kunst-grotesk-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
}
*/

:root {
  /* Primary palette */
  --withinCoral: #F56740;
  --withinMidnight: #0B1E2F;
  --withinWhite: #FFFFFF;
  --withinCream: #FBF6EF;

  /* Supporting/tint palette */
  --withinRose: #FFE0D8;
  --withinSky: #CFF3FE;
  --withinSun: #FFF5D2;

  /* Ashby-controlled brand color hooks (also set these in Admin > Theme) */
  --colorPrimary900: var(--withinCoral);
  --colorPrimary600: var(--withinMidnight);

  --widthMaxJobBoard: 800px;
  --borderRadiusContainer: 10px;
  --borderRadiusControl: 10px;
  --borderRadiusButton: 10px;

  --fontFamily: "FT Kunst Grotesk", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Helvetica", "Arial", sans-serif;
  --colorAppBackground: var(--withinCream);
}

/* ---------- Job board list page ---------- */

.ashby-job-board-heading {
  font-family: var(--fontFamily);
  font-weight: 400;
  font-size: 40px;
  line-height: 110%;
  letter-spacing: -1%;
  color: var(--withinMidnight);
}

.ashby-job-board-heading-count {
  font-family: var(--fontFamily);
  color: var(--withinCoral);
}

.ashby-job-board-filters-label,
.ashby-job-board-reset-filters-label {
  font-family: var(--fontFamily);
  color: var(--withinMidnight);
}

.ashby-job-board-filter {
  border-radius: var(--borderRadiusControl);
  border: 1px solid var(--withinRose);
  font-family: var(--fontFamily);
}

.ashby-department-heading {
  font-family: var(--fontFamily);
  font-weight: 500;
  color: var(--withinMidnight);
}

.ashby-department-heading-level {
  font-family: var(--fontFamily);
  font-weight: 400;
  color: var(--withinMidnight);
}

/* ---------- Job posting brief (list item) ---------- */

.ashby-job-posting-brief {
  margin-bottom: 10px;
  border-radius: var(--borderRadiusContainer);
}

.ashby-job-posting-brief-title {
  font-family: var(--fontFamily);
  font-weight: 500;
  color: var(--withinMidnight);
}

.ashby-job-posting-brief-department-heading,
.ashby-job-posting-brief-department-heading-level {
  font-family: var(--fontFamily);
  color: var(--withinMidnight);
}

/* ---------- Job posting detail page ---------- */

.ashby-job-posting-header {
  background-color: var(--withinCream);
}

.ashby-job-posting-heading {
  font-family: var(--fontFamily);
  font-weight: 400;
  font-size: 40px;
  line-height: 110%;
  letter-spacing: -1%;
  color: var(--withinMidnight);
}

.ashby-job-posting-left-pane {
  font-family: var(--fontFamily);
  font-size: 18px;
  line-height: 120%;
  letter-spacing: 0%;
  color: var(--withinMidnight);
}

.ashby-job-posting-right-pane {
  font-family: var(--fontFamily);
  background-color: var(--withinWhite);
  border-radius: var(--borderRadiusContainer);
}

.ashby-job-posting-right-pane-tab-slider {
  background-color: var(--withinRose);
}

.ashby-job-board-back-to-all-jobs-button {
  font-family: var(--fontFamily);
  color: var(--withinCoral);
}

/* ---------- Application form ---------- */

.ashby-application-form-container {
  font-family: var(--fontFamily);
  background-color: var(--withinWhite);
  border-radius: var(--borderRadiusContainer);
}

.ashby-application-form-section-header-title {
  font-family: var(--fontFamily);
  font-weight: 500;
  font-size: 18px;
  color: var(--withinMidnight);
}

.ashby-application-form-section-header-description {
  font-family: var(--fontFamily);
  font-size: 18px;
  line-height: 120%;
  color: var(--withinMidnight);
}

.ashby-application-form-question-title {
  font-family: var(--fontFamily);
  font-weight: 500;
  color: var(--withinMidnight);
}

.ashby-application-form-question-description {
  font-family: var(--fontFamily);
  color: var(--withinMidnight);
}

.ashby-application-form-field-entry {
  font-family: var(--fontFamily);
}

.ashby-application-form-submit-button {
  font-family: var(--fontFamily);
  background-color: var(--withinCoral);
  color: var(--withinWhite);
  border-radius: var(--borderRadiusButton);
}

.ashby-application-form-submit-button:hover {
  background-color: var(--withinMidnight);
}

.ashby-application-form-success-container {
  font-family: var(--fontFamily);
  background-color: var(--withinSky);
  border-radius: var(--borderRadiusContainer);
  color: var(--withinMidnight);
}

.ashby-application-form-failure-container {
  font-family: var(--fontFamily);
  background-color: var(--withinRose);
  border-radius: var(--borderRadiusContainer);
  color: var(--withinMidnight);
}

.ashby-application-form-blocked-application-container {
  font-family: var(--fontFamily);
  background-color: var(--withinSun);
  border-radius: var(--borderRadiusContainer);
  color: var(--withinMidnight);
}

.ashby-application-form-texting-consent-description {
  font-family: var(--fontFamily);
  color: var(--withinMidnight);
}

/* ---------- Autofill (resume parse) input ---------- */

.ashby-application-form-autofill-input-root {
  border-radius: var(--borderRadiusContainer);
  border: 1px dashed var(--withinRose);
}

.ashby-application-form-autofill-input-title {
  font-family: var(--fontFamily);
  font-weight: 500;
  color: var(--withinMidnight);
}

.ashby-application-form-autofill-input-description {
  font-family: var(--fontFamily);
  color: var(--withinMidnight);
}

.ashby-application-form-autofill-input-icon {
  color: var(--withinCoral);
}

/* ---------- Surveys ---------- */

.ashby-survey-form-container {
  font-family: var(--fontFamily);
  color: var(--withinMidnight);
}