/* ============================================================
   Crucibl — Ashby job board theme
   Matches crucibl.ai: Playfair Display + Lora, navy/brown palette.
   Upload under: Job Board Options → Custom CSS.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Playfair+Display:wght@700;800;900&display=swap');

/* ---- Brand tokens (mirror crucibl.ai) -------------------- */
:root {
  /* Primary clickable / hover colors.
     NOTE: also settable in admin → Job Board Options → Brand Color.
     Set Brand Color = #1b2d38 and Brand Color (Dark) = #2d4a5a there,
     OR rely on these two lines — keep the two in sync. */
  --colorPrimary900: #1b2d38;   /* navy ink  — links, buttons, active tab */
  --colorPrimary600: #2d4a5a;   /* slate     — hover state                */

  --colorAppBackground: #f7f5f3; /* warm off-white page background        */

  --fontFamily: "Lora", Georgia, "Times New Roman", serif; /* body text   */

  /* Restrained corners, like the site's buttons/rules */
  --borderRadiusContainer: 4px;
  --borderRadiusControl: 4px;
  --borderRadiusButton: 4px;

  --widthMaxJobBoard: 820px;

  /* Local palette (not Ashby vars — used in rules below) */
  --crucibl-navy: #1b2d38;
  --crucibl-slate: #2d4a5a;
  --crucibl-brown: #8b7060;
  --crucibl-muted: #6b7f8a;
  --crucibl-border: #ddd8d3;
}

/* ---- Base copy ------------------------------------------- */
.ashby-job-posting-brief-details,
.ashby-application-form-question-description,
.ashby-application-form-section-header-description {
  color: var(--crucibl-muted);
}

/* ---- Big display headings → Playfair Display, navy ------- */
.ashby-job-board-heading,
.ashby-job-posting-heading,
.ashby-job-posting-header {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--crucibl-navy);
}

.ashby-job-board-heading-count {
  font-family: "Lora", serif;
  font-weight: 400;
  color: var(--crucibl-muted);
}

/* ---- Department / team labels → letterspaced brown caps
   (the "WHAT WE DO" / "IN STEALTH" treatment on the site) --- */
.ashby-department-heading,
.ashby-department-heading-level,
.ashby-job-posting-brief-department-heading,
.ashby-job-posting-brief-department-heading-level {
  font-family: "Lora", serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78em;
  color: var(--crucibl-brown);
}

/* ---- Individual job rows → Lora semibold navy, brown on hover */
.ashby-job-posting-brief {
  border-bottom: 1px solid var(--crucibl-border);
  margin-bottom: 0;
}

.ashby-job-posting-brief-title {
  font-family: "Lora", serif;
  font-weight: 600;
  color: var(--crucibl-navy);
  transition: color 0.15s ease;
}

.ashby-job-posting-brief:hover .ashby-job-posting-brief-title {
  color: var(--crucibl-brown);
}

/* ---- Apply / submit button → navy CTA, slate on hover ---- */
.ashby-application-form-submit-button {
  font-family: "Lora", serif;
  font-weight: 600;
  letter-spacing: 0.04em;     /* a little air between letters */
  line-height: 1.2;
  padding-top: 1em;           /* loosen the cramped vertical fit */
  padding-bottom: 1em;
  background-color: var(--crucibl-navy);
  color: #ffffff;
}
.ashby-application-form-submit-button:hover {
  background-color: var(--crucibl-slate);
}

/* ---- "Back to all jobs" → quiet brown link --------------- */
.ashby-job-board-back-to-all-jobs-button {
  color: var(--crucibl-brown);
  font-family: "Lora", serif;
}

/* ---- Form question titles → navy ------------------------- */
.ashby-application-form-question-title,
.ashby-application-form-section-header-title {
  font-family: "Lora", serif;
  font-weight: 600;
  color: var(--crucibl-navy);
}

/* ---- Active application tab slider → navy ---------------- */
.ashby-job-posting-right-pane-tab-slider {
  background-color: var(--crucibl-navy);
}