/*
 * Passionfroot theme for the Ashby-hosted job board (jobs.ashbyhq.com/passionfroot).
 *
 * Upload in Ashby admin → Job Boards → Theme → Custom CSS. Values are resolved copies of the
 * careers-page design tokens in app/styles/tailwind.css (oklch converted to hex, since this file
 * runs standalone on Ashby's domain) — if the site tokens change, regenerate the hex values here.
 *
 * !important is required on brand-critical declarations: Ashby injects uploaded CSS BEFORE its own
 * stylesheets, so equal-specificity rules lose the tie (this bit us on fonts and shadows).
 *
 * Fonts: New Kansas comes from the same Adobe Fonts kit the site uses (add jobs.ashbyhq.com to the
 * kit's allowed domains in Adobe Fonts → Web Projects), Nunito Sans from Google Fonts.
 */

@import url("https://use.typekit.net/iur2yej.css");
@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700;800&display=swap");

:root {
  /* Ashby's own theme hooks */
  --colorPrimary900: #db4241; /* red-700 */
  --colorPrimary600: #e85854; /* red-600 / text-accent */
  --widthMaxJobBoard: 800px;
  --borderRadiusContainer: 16px; /* rounded-2xl, the careers-page card radius */
  --borderRadiusControl: 10px;
  --borderRadiusButton: 9999px; /* site buttons are pills */
  --fontFamily: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --colorAppBackground: #f8f7f2; /* bg-foundation (surface-300) */

  /* Passionfroot tokens */
  --pf-font-heading: "new-kansas", system-ui, sans-serif;
  --pf-ink-900: #1d1d1c; /* text-primary */
  --pf-ink-700: #43423e; /* text-secondary */
  --pf-ink-500: #99978f; /* text-muted */
  --pf-ink-300: #d8d6ce; /* border-strong */
  --pf-ink-200: #edeae4; /* border-default */
  --pf-surface-50: #fdfdfa; /* bg-page */
  --pf-white: #ffffff; /* bg-clickable */
  --pf-hovered: #f9f8f5; /* bg-hovered */
  --pf-accent: #e85854;
  /* shadow-border-default: 1px token ring + layered soft ink shadows */
  --pf-shadow-border:
    0 0 0 1px var(--pf-ink-200), 0 1px 1px -0.5px rgba(29, 29, 28, 0.04),
    0 3px 3px -1.5px rgba(29, 29, 28, 0.04), 0 6px 6px -3px rgba(29, 29, 28, 0.04),
    0 12px 12px -6px rgba(29, 29, 28, 0.02);
}

html,
body {
  background-color: var(--colorAppBackground) !important;
  color: var(--pf-ink-900);
  font-family: var(--fontFamily);
}

/* Nav wordmark renders 64px tall by default — bring it down to nav scale. */
img[alt="Passionfroot"] {
  height: 36px !important;
  width: auto !important;
}

/* ---------- Headings — New Kansas, like every heading on the site ---------- */

.ashby-job-board-heading,
.ashby-job-posting-heading,
.ashby-application-form-section-header-title {
  font-family: var(--pf-font-heading) !important;
  color: var(--pf-ink-900) !important;
  letter-spacing: -0.013em;
}

.ashby-job-posting-heading {
  font-size: 2.5rem;
  line-height: 1.1;
  /* Air between the title and the card below it */
  margin-bottom: 1.75rem !important;
}

/* Rich-text headings inside the JD body (the left pane's field labels stay in the body font).
   JD content uses h1–h4 inconsistently between postings, so cover all of them. */
.ashby-job-posting-right-pane h1,
.ashby-job-posting-right-pane h2,
.ashby-job-posting-right-pane h3,
.ashby-job-posting-right-pane h4 {
  font-family: var(--pf-font-heading) !important;
  color: var(--pf-ink-900) !important;
  letter-spacing: -0.013em;
}

/* ---------- Department eyebrows — quiet gray labels in the site's eyebrow idiom ---------- */

.ashby-department-heading,
.ashby-department-heading-level,
.ashby-job-posting-brief-department-heading,
.ashby-job-posting-brief-department-heading-level {
  font-family: var(--fontFamily) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--pf-ink-500) !important;
}

/* ---------- Job board list — white floating cards on the cream foundation ---------- */

.ashby-job-posting-brief {
  background: var(--pf-white) !important;
  border: none !important;
  border-radius: var(--borderRadiusContainer) !important;
  box-shadow: var(--pf-shadow-border) !important;
  margin-bottom: 12px;
  transition: background-color 0.2s ease;
}

.ashby-job-posting-brief:hover {
  background: var(--pf-hovered) !important;
}

.ashby-job-posting-brief-title {
  font-family: var(--pf-font-heading) !important;
  color: var(--pf-ink-900) !important;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}

.ashby-job-posting-brief-details {
  color: var(--pf-ink-500) !important;
  font-weight: 600;
}

/* Filter selects — slim controls with a hairline border, like the site's inputs */
.ashby-job-board-filter,
.ashby-job-board-filter select {
  border: 1px solid var(--pf-ink-300) !important;
  border-radius: var(--borderRadiusControl) !important;
  background-color: var(--pf-white) !important;
  box-shadow: none !important;
  font-size: 0.875rem !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  min-height: 0 !important;
  color: var(--pf-ink-700) !important;
}

.ashby-job-board-filters-label {
  color: var(--pf-ink-500) !important;
  font-size: 0.875rem;
}

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

/* The grid wrapping both panes only has hashed class names, so target it relationally.
   One floating card on the cream foundation, like the roles card on /careers. */
div:has(> .ashby-job-posting-left-pane) {
  background: var(--pf-white) !important;
  border-radius: var(--borderRadiusContainer) !important;
  box-shadow: var(--pf-shadow-border) !important;
  overflow: hidden;
}

.ashby-job-posting-left-pane {
  background: transparent !important;
  color: var(--pf-ink-700);
}

.ashby-job-posting-right-pane {
  color: var(--pf-ink-700);
  font-size: 1rem;
  line-height: 1.6;
}

.ashby-job-posting-right-pane a {
  color: var(--pf-accent);
  font-weight: 700;
}

/* Overview / Application tabs — the blog category-tab idiom: quiet uppercase labels,
   the active one in ink with a 2px ink underline (no accent red). */
.ashby-job-posting-right-pane-overview-tab,
.ashby-job-posting-right-pane-application-tab {
  font-family: var(--fontFamily) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--pf-ink-500) !important;
  transition: color 0.2s ease;
}

[role="tab"]:hover .ashby-job-posting-right-pane-overview-tab,
[role="tab"]:hover .ashby-job-posting-right-pane-application-tab,
[role="tab"][aria-selected="true"] .ashby-job-posting-right-pane-overview-tab,
[role="tab"][aria-selected="true"] .ashby-job-posting-right-pane-application-tab {
  color: var(--pf-ink-700) !important;
}

.ashby-job-posting-right-pane-tab-slider {
  background: var(--pf-ink-700) !important;
  height: 2px !important;
  border-radius: 9999px;
}

.ashby-job-board-back-to-all-jobs-button {
  color: var(--pf-ink-700) !important;
  font-weight: 700;
}

.ashby-job-board-back-to-all-jobs-button:hover {
  color: var(--pf-ink-900) !important;
}

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

/* No card-in-card: the submit button lives OUTSIDE this container in Ashby's DOM, so giving the
   container its own ring visually orphans the button. The JD card already frames the form. */
.ashby-application-form-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Inputs — the app's Input component recipe: border-strong hairline, rounded-lg, ink glow on
   hover/focus (Ashby's defaults are slate/indigo, which read purple next to our palette). */
.ashby-job-posting-right-pane input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.ashby-job-posting-right-pane textarea,
.ashby-job-posting-right-pane select {
  background: var(--pf-white) !important;
  border: 1px solid var(--pf-ink-300) !important;
  border-radius: 10px !important;
  color: var(--pf-ink-900) !important;
  box-shadow: none;
  outline: none !important;
  transition:
    box-shadow 0.2s ease-in-out,
    border-color 0.2s ease-in-out;
}

.ashby-job-posting-right-pane input:hover,
.ashby-job-posting-right-pane textarea:hover,
.ashby-job-posting-right-pane select:hover {
  box-shadow: 0 0 0 3px rgba(122, 121, 116, 0.12) !important;
}

.ashby-job-posting-right-pane input:focus,
.ashby-job-posting-right-pane textarea:focus,
.ashby-job-posting-right-pane select:focus {
  border-color: var(--pf-ink-500) !important;
  box-shadow:
    inset 0 0 6px rgba(122, 121, 116, 0.12),
    0 0 0 3px rgba(122, 121, 116, 0.2) !important;
}

.ashby-job-posting-right-pane input::placeholder,
.ashby-job-posting-right-pane textarea::placeholder {
  color: var(--pf-ink-500) !important;
}

.ashby-application-form-question-title {
  color: var(--pf-ink-900) !important;
  font-weight: 700;
}

.ashby-application-form-question-description,
.ashby-application-form-texting-consent-description {
  color: var(--pf-ink-500) !important;
}

/* Align the submit row with the form fields (its bare-div wrapper sits outside the container's
   16px side padding) and keep it off the card's bottom edge. */
div:has(> .ashby-application-form-submit-button) {
  padding: 0 16px 24px;
}

/* Site-style primary button: ink-900 pill, white text, gentle lift on hover */
.ashby-application-form-submit-button {
  background: var(--pf-ink-900) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--borderRadiusButton) !important;
  font-family: var(--fontFamily) !important;
  font-weight: 800;
  padding: 0.875rem 2rem;
  transition:
    transform 0.2s cubic-bezier(0.23, 1, 0.32, 1),
    background-color 0.2s ease;
}

.ashby-application-form-submit-button:hover {
  background: #000 !important;
  transform: translateY(-1px);
}