/*
  Custom CSS for the Kairos job board on Ashby (Job Board Options → Custom CSS).

  Ashby paints the board with its own system sans and two admin-set colours,
  and exposes the classes in https://www.ashbyhq.com/job_board_example_css/full-job-board.css.
  This sheet keeps to what those classes can carry safely: the site's ground
  colours, pill-shaped controls, and a serif for the headings, so the board
  reads as the same brand as kairos-project.org without fighting Ashby's layout.

  Deliberately no @font-face. The site's Reckless and Saans cuts are trial
  licences (see apps/kairos-website/astro.config.mjs), and its font files are
  served without CORS headers, so a cross-origin @font-face would be refused
  anyway. If a production licence lands, add `Access-Control-Allow-Origin` for
  /_astro/fonts/* in public/_headers and declare the faces here; until then
  the serif headings fall to Georgia, the same fallback the site itself uses.

  Colours are the site's theme tokens (apps/kairos-website/src/styles/kairos.css).
  The two brand colours (links, hover) are set in Ashby's admin, not here.
*/

:root {
  /*
    Halfway between the site's page ground (purple-50, #fbfbfe) and its header
    band (purple-100, #ebebfa). purple-50 is too close to Ashby's white content
    panels to frame them and purple-100 is too much lavender around them
    (Agus, 2026-09-02), so this sits between the two palette steps.
  */
  --colorAppBackground: #f3f3fc;
  --widthMaxContent: 960px;
}

/* Job board (the list) */

.ashby-job-board-heading,
.ashby-department-heading,
.ashby-job-posting-heading {
  font-family: "Reckless Standard S", Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: #07002d; /* purple-1000, the site's headline ink */
}

.ashby-job-board-heading {
  font-size: 2rem;
}

.ashby-department-heading {
  font-size: 1.25rem;
}

.ashby-job-posting-brief {
  margin-bottom: 12px;
  border-radius: 12px;
  border: 1px solid #d9d2f4; /* purple-200 */
  background: #ffffff;
  transition: border-color 120ms ease-out;
}

.ashby-job-posting-brief:hover {
  border-color: #7b5ea6; /* purple-600 */
}

.ashby-job-posting-brief-title {
  color: #07002d;
}

/* Job posting (the role page) */

/*
  Ashby paints the details pane white and leaves the description pane
  transparent. On its near-white default ground that never showed; on a tinted
  ground the pane reads as a lone white card with a seam against the tab bar.
  Both columns sit on the page ground instead.
*/
.ashby-job-posting-left-pane {
  background: transparent;
}

.ashby-job-posting-heading {
  font-size: 1.75rem;
  line-height: 1.2;
}

.ashby-job-posting-description h2,
.ashby-job-posting-description h3 {
  font-family: "Reckless Standard S", Georgia, "Times New Roman", serif;
  font-weight: 400;
  color: #07002d;
}

.ashby-job-posting-description a {
  text-decoration-color: #c2b2e4; /* purple-300, the site's link underline */
  text-underline-offset: 3px;
}

/* Application form */

.ashby-application-form-section-header-title,
.ashby-application-form-question-title {
  color: #07002d;
}

/* Ashby stacks question-and-answer pairs tightly; give each its own room. */
.ashby-application-form-field-entry {
  margin-bottom: 40px;
}

.ashby-application-form-section-container {
  margin-bottom: 24px;
}

.ashby-application-form-input-text,
.ashby-application-form-input-textarea,
.ashby-application-form-input-dropdown-select {
  border-radius: 10px;
}

/*
  The outer file input already carries Ashby's dashed border; only its corners
  are softened. The inner dropzone keeps a 3px border that Ashby leaves
  invisible, so it must not be touched (styling it draws a second box that the
  upload button overhangs).
*/
.ashby-application-form-input-file {
  border-radius: 12px;
}

/*
  Ashby's submit button is a full-width sticky bar, so a pill radius turns it
  into a capsule that overhangs the pane; it takes the inputs' radius instead.
  The back link is sized to its label, so it can be the site's pill.
*/
.ashby-application-form-submit-button {
  border-radius: 10px;
  font-weight: 500;
  /* The button is the last thing in flow and sat flush with the page bottom. */
  margin-top: 16px;
  margin-bottom: 48px;
}

.ashby-job-posting-right-pane {
  padding-bottom: 32px;
}

.ashby-job-board-back-to-all-jobs-button {
  border-radius: 999px;
  font-weight: 500;
}