/* Sparkle Studios: custom CSS for the Ashby-hosted job board (jobs.ashbyhq.com/sparkle).
 * Upload in Ashby: Admin > Job Boards > Theme > Custom CSS.
 * Matches the LBA design system used on the jobs site: Instrument Sans + Lora, paper/ink/slate/butter.
 * Keep to .ashby-* classes, plain descendant selectors and variables: Ashby's validator
 * reportedly rejects hashed classes, clamp(), :not() and :nth-*.
 * Brand Color / Brand Color (Dark) in the Ashby theme settings: #3A5273 / #243247.
 * v2 (2026-11-09): description sits on the page (no white box), facts become a padded sticky card,
 * job list cards get spacing + hover, mobile type scale.
 * v3 (2026-11-09): plain white background; description typography uses a doubled class
 * (.ashby-job-posting-description.ashby-job-posting-description) because Ashby's own p/li/h3
 * rules otherwise win (line-height stuck at 1.5, h3 margin 12px).
 * v4 (2026-11-09): right pane carries the indent (tabs, content and submit line up), 32px under the tabs,
 * facts card aligned with content, single-box autofill + resume dropzone, proper upload buttons,
 * separate Yes/No buttons. Doubled classes again where Ashby's hashed rules win.
 */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600&family=Lora:ital,wght@0,500;1,500&display=swap");

:root {
  --colorAppBackground: #FFFFFF;
  --colorPrimary600: #3A5273;
  --colorPrimary900: #243247;
  --widthMaxContent: 1120px;
  --widthMaxJobBoard: 820px;
  --borderRadiusContainer: 16px;
  --borderRadiusControl: 10px;
  --borderRadiusButton: 999px;
  --fontFamily: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ---------- Header ---------- */
.ashby-job-posting-header {
  background: #FFFFFF;
  border-bottom: 1px solid #ECECE6;
}
.ashby-job-posting-header p {
  font-family: "Lora", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0;
  text-transform: none;
  color: #243247;
}
.ashby-job-board-back-to-all-jobs-button {
  color: #3A5273;
  border-radius: 999px;
}

/* ---------- Job board (list of roles) ---------- */
.ashby-job-board-heading {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: #243247;
  margin-bottom: 8px;
}
.ashby-job-board-heading-count { color: #8B95A5; font-weight: 500; }
.ashby-job-board-filters-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6B7686;
}
.ashby-job-board-filter {
  font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  color: #243247;
  border: 1px solid #DCDFD6;
  border-radius: 10px;
  background-color: #FFFFFE;
}
.ashby-department-heading {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6B5312;
  margin: 36px 0 12px;
}
.ashby-job-posting-brief-list {
  display: grid;
  gap: 12px;
}
/* Ashby indents the heading/intro block 12px more than the role list; line them up */
.ashby-department-heading.ashby-department-heading { margin-left: 12px; margin-right: 12px; }
.ashby-job-posting-brief-list.ashby-job-posting-brief-list { padding: 0 12px; }
.ashby-job-posting-brief.ashby-job-posting-brief { margin-left: 0; }
.ashby-job-posting-brief {
  background: #F5F7FA;
  border: 1px solid #F5F7FA;
  border-radius: 16px;
  padding: 22px 26px;
  box-shadow: none;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.ashby-job-posting-brief:hover {
  background: #FFFFFF;
  border-color: #C9D3E0;
  box-shadow: 0 8px 24px rgba(36, 50, 71, 0.08);
  transform: translateY(-1px);
}
.ashby-job-posting-brief-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: #243247;
}
.ashby-job-posting-brief-details {
  font-size: 15px;
  color: #6B7686;
  margin-top: 6px;
}

/* Board intro / outro (Admin > Job Boards text). Ashby gives these only hashed classes,
 * so match on the stable part of the name. If the validator rejects attribute selectors, drop this block. */
[class*="_topDescription_"], [class*="_bottomDescription_"] {
  font-size: 17px;
  line-height: 1.7;
  color: #3D4757;
  max-width: 720px;
}
[class*="_topDescription_"] p, [class*="_bottomDescription_"] p { margin: 0 0 12px; font-size: 17px; line-height: 1.7; }
[class*="_topDescription_"] p:empty, [class*="_bottomDescription_"] p:empty { display: none; }
[class*="_topDescription_"] > p:first-child {
  font-family: "Lora", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 26px;
  line-height: 1.35;
  color: #243247;
  margin-bottom: 28px;
}
[class*="_topDescription_"] ol, [class*="_topDescription_"] ul, [class*="_bottomDescription_"] ol, [class*="_bottomDescription_"] ul { padding-left: 24px; margin: 0 0 16px; }
[class*="_topDescription_"] li, [class*="_bottomDescription_"] li { margin: 0 0 10px; padding-left: 4px; }
[class*="_topDescription_"] li p, [class*="_bottomDescription_"] li p { margin: 0; }
[class*="_topDescription_"][class*="_topDescription_"] h1, [class*="_bottomDescription_"][class*="_bottomDescription_"] h1 {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #243247;
  margin: 40px 0 12px;
}
[class*="_topDescription_"][class*="_topDescription_"] h2, [class*="_bottomDescription_"][class*="_bottomDescription_"] h2 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  color: #243247;
  margin: 22px 0 4px;
}
[class*="_topDescription_"] strong, [class*="_bottomDescription_"] strong { color: #243247; font-weight: 600; }
[class*="_topDescription_"] { margin-bottom: 24px; }
[class*="_bottomDescription_"][class*="_bottomDescription_"] {
  border-top: 1px solid #ECECE6;
  margin: 56px 12px 0;
  padding: 16px 0 12px;
}
[class*="_bottomDescription_"][class*="_bottomDescription_"] > h1:first-child { margin-top: 24px; }
/* Outro: emoji-led paragraphs (values, why join) get more air, and headings sit further off them */
[class*="_bottomDescription_"][class*="_bottomDescription_"] h1 { margin-bottom: 20px; }
[class*="_bottomDescription_"][class*="_bottomDescription_"] p { margin-bottom: 18px; }

/* ---------- Job posting ---------- */
.ashby-job-posting-heading {
  font-size: 46px;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: #243247;
  margin-bottom: 8px;
}

/* Facts column: a quiet, padded card that stays in view */
.ashby-job-posting-left-pane.ashby-job-posting-left-pane {
  background: #F5F7FA;
  border: 1px solid #F5F7FA;
  border-radius: 16px;
  padding: 22px 24px;
  align-self: flex-start;
  position: sticky;
  top: 125px; /* clears Ashby's sticky header (101px) + 24px */
  box-shadow: none;
}
.ashby-job-posting-left-pane.ashby-job-posting-left-pane > div { border-bottom-color: #E3E8EF; }
.ashby-job-posting-left-pane h2 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8B95A5;
  margin-bottom: 4px;
}
.ashby-job-posting-left-pane p {
  font-size: 16px;
  line-height: 1.45;
  color: #243247;
}

@media (min-width: 801px) {
  .ashby-job-posting-left-pane.ashby-job-posting-left-pane { margin-top: 94px; }
  .ashby-job-posting-right-pane { padding-left: 40px; }
}

/* Overview / Application tabs */
.ashby-job-posting-right-pane nav {
  border-bottom: 1px solid #ECECE6;
  margin-bottom: 32px;
}
.ashby-job-posting-right-pane-overview-tab,
.ashby-job-posting-right-pane-application-tab {
  font-weight: 600;
  font-size: 16px;
  color: #6B7686;
}
.ashby-job-posting-right-pane nav a { margin-left: 0; margin-right: 16px; }
.ashby-job-posting-right-pane-tab-slider.ashby-job-posting-right-pane-tab-slider { margin-left: 0; }
.ashby-job-posting-right-pane-tab-slider {
  height: 3px;
  border-radius: 3px;
  background: #F2D983;
}

/* Description: sits straight on the page, comfortable reading measure */
.ashby-job-posting-description-container.ashby-job-posting-description-container {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.ashby-job-posting-description.ashby-job-posting-description {
  font-size: 18px;
  line-height: 1.75;
  color: #3D4757;
  max-width: 680px;
}
.ashby-job-posting-description.ashby-job-posting-description p,
.ashby-job-posting-description.ashby-job-posting-description li {
  font-size: 18px;
  line-height: 1.75;
}
.ashby-job-posting-description.ashby-job-posting-description p { margin: 0 0 20px; }
/* Ashby pads sections with empty <p style="min-height:1.5em">; headings carry the spacing instead */
.ashby-job-posting-description.ashby-job-posting-description p:empty { display: none; }
.ashby-job-posting-description.ashby-job-posting-description h1,
.ashby-job-posting-description.ashby-job-posting-description h2 {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #243247;
  margin: 48px 0 16px;
}
.ashby-job-posting-description.ashby-job-posting-description h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
  color: #243247;
  margin: 32px 0 12px;
}
.ashby-job-posting-description.ashby-job-posting-description h1 + p,
.ashby-job-posting-description.ashby-job-posting-description h2 + p,
.ashby-job-posting-description.ashby-job-posting-description h3 + p,
.ashby-job-posting-description.ashby-job-posting-description h2 + ul,
.ashby-job-posting-description.ashby-job-posting-description h2 + ol,
.ashby-job-posting-description.ashby-job-posting-description h3 + ul,
.ashby-job-posting-description.ashby-job-posting-description h3 + ol { margin-top: 0; }
.ashby-job-posting-description.ashby-job-posting-description > h1:first-child,
.ashby-job-posting-description.ashby-job-posting-description > h2:first-child,
.ashby-job-posting-description.ashby-job-posting-description > h3:first-child,
.ashby-job-posting-description.ashby-job-posting-description > p:first-child { margin-top: 0; }
.ashby-job-posting-description.ashby-job-posting-description strong { color: #243247; font-weight: 600; }
.ashby-job-posting-description.ashby-job-posting-description ol,
.ashby-job-posting-description.ashby-job-posting-description ul {
  padding-left: 24px;
  margin: 0 0 24px;
}
.ashby-job-posting-description.ashby-job-posting-description li { margin: 0 0 10px; padding-left: 4px; }
.ashby-job-posting-description.ashby-job-posting-description li p { margin: 0; }
.ashby-job-posting-description.ashby-job-posting-description a {
  color: #3A5273;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Application form ---------- */
.ashby-application-form-autofill-pane.ashby-application-form-autofill-pane {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0 0 36px;
}
.ashby-application-form-autofill-input-root {
  border: 1px dashed #C9D3E0;
  border-radius: 16px;
  background: #F7F9FC;
  padding: 20px 22px;
}
.ashby-application-form-autofill-input-title { color: #243247; font-weight: 600; }
.ashby-application-form-autofill-input-description { color: #6B7686; }
.ashby-application-form-container.ashby-application-form-container {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.ashby-application-form-section-container { gap: 26px; }
.ashby-application-form-field-entry { margin-bottom: 6px; }
.ashby-application-form-question-title {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  color: #243247;
  margin-bottom: 8px;
}
.ashby-application-form-question-description { color: #6B7686; font-size: 15px; }
.ashby-application-form-input-text,
.ashby-application-form-input-textarea,
.ashby-application-form-input-autocomplete {
  font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  color: #243247;
  border: 1px solid #DCDFD6;
  border-radius: 10px;
  background: #FFFFFE;
  padding: 12px 14px;
  min-height: 48px;
}
.ashby-application-form-input-text:focus,
.ashby-application-form-input-textarea:focus,
.ashby-application-form-input-autocomplete:focus {
  border-color: #3A5273;
  box-shadow: 0 0 0 3px rgba(58, 82, 115, 0.15);
  outline: none;
}
.ashby-application-form-input-radio-group-option,
.ashby-application-form-input-checkbox-group-option { padding: 4px 0; }
.ashby-application-form-input-radio-group-option-label,
.ashby-application-form-input-checkbox-group-option-label { font-size: 16px; color: #3D4757; }
.ashby-application-form-input-yesno { display: flex; gap: 10px; }
.ashby-application-form-input-yesno .ashby-application-form-input-yesno-option.ashby-application-form-input-yesno-option {
  border: 1px solid #DCDFD6;
  border-radius: 10px;
  flex: 0 0 auto;
  width: auto;
  min-width: 88px;
  min-height: 46px;
  padding: 10px 22px;
  font-size: 16px;
  font-weight: 600;
}
.ashby-application-form-input-file.ashby-application-form-input-file {
  border: 0;
  padding: 0;
  background: transparent;
}
.ashby-application-form-input-file-dropzone.ashby-application-form-input-file-dropzone {
  border: 1px dashed #C9D3E0;
  border-radius: 16px;
  background: #F7F9FC;
  padding: 28px 22px;
  gap: 14px;
}
.ashby-application-form-input-file-dropzone-instructions { color: #6B7686; font-size: 15px; }
/* Upload buttons (resume autofill + file fields): quiet white pill */
.ashby-application-form-autofill-input-root button,
.ashby-application-form-input-file-dropzone .ashby-application-form-input-file-dropzone-upload {
  background: #FFFFFF;
  color: #243247;
  border: 1px solid #C9D3E0;
  border-radius: 999px;
  padding: 0 20px;
  min-height: 44px;
  height: 44px;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(36, 50, 71, 0.06);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.ashby-application-form-autofill-input-root button:hover,
.ashby-application-form-input-file-dropzone .ashby-application-form-input-file-dropzone-upload:hover {
  border-color: #3A5273;
  box-shadow: 0 2px 8px rgba(36, 50, 71, 0.10);
}
.ashby-application-form-submit-button {
  background: #243247;
  color: #FFFFFF;
  font-weight: 600;
  font-size: 17px;
  min-height: 54px;
  border-radius: 999px;
}
.ashby-application-form-submit-button:hover { background: #3A5273; }
.ashby-application-form-success-container {
  color: #243247;
  font-size: 18px;
}

/* ---------- Phones ---------- */
@media (max-width: 800px) {
  .ashby-job-board-heading { font-size: 28px; }
  .ashby-job-posting-heading { font-size: 30px; line-height: 1.15; }
  .ashby-job-posting-left-pane.ashby-job-posting-left-pane { position: static; padding: 18px 20px; }
  .ashby-job-posting-right-pane nav { margin-bottom: 24px; }
  .ashby-job-posting-description.ashby-job-posting-description,
  .ashby-job-posting-description.ashby-job-posting-description p,
  .ashby-job-posting-description.ashby-job-posting-description li { font-size: 17px; }
  .ashby-job-posting-description.ashby-job-posting-description h1,
  .ashby-job-posting-description.ashby-job-posting-description h2 { font-size: 24px; margin-top: 40px; }
  .ashby-job-posting-brief { padding: 18px 20px; }
}