/* ==========================================================================
   SQUIRE — Ashby job board custom CSS
   Fonts: Bebas Neue (headings), Poppins (body)
   Palette: SQUIRE Blue #377DF7 · Navy #0B0E13 · Amber #FFB300
   ========================================================================== */

/* @import must come first in the file or it will be ignored. */
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Poppins:wght@300;400;500;600&display=swap");


/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* NOTE: Ashby also sets these two in admin → theme settings. Set them there
     if you can; leave these as a fallback so the file is self-contained. */
  --colorPrimary900: #1a5ad0;  /* darker blue — text, hover, focus */
  --colorPrimary600: #377df7;  /* SQUIRE Blue — buttons, accents */

  --colorAppBackground: #ffffff;

  --widthMaxJobBoard: 880px;

  /* Squared-off corners read closer to SQUIRE's typographic style than pills. */
  --borderRadiusContainer: 4px;
  --borderRadiusControl: 4px;
  --borderRadiusButton: 4px;

  --fontFamily: "Poppins", "-apple-system", "BlinkMacSystemFont", "Segoe UI",
    "Helvetica", "Arial", sans-serif;

  /* SQUIRE-specific tokens (not Ashby's — used by the rules below) */
  --squireBlue: #377df7;   /* fixed SQUIRE Blue, so theme settings can't change it */
  --squireNavy: #0b0e13;
  --squireAmber: #ffb300;
  --squireInk: #2b3138;
  --squireLine: #e3e7ec;
  --squireSurface: #f6f8fa;
  --squireMuted: #6b7480;   /* inactive tab gray */
  --fontDisplay: "Bebas Neue", "Impact", sans-serif;

  /* One body size, shared by the left pane (details) and right pane (description) */
  --squireBodySize: 1rem;
}


/* --------------------------------------------------------------------------
   2. Job board — heading
   -------------------------------------------------------------------------- */

.ashby-job-board-heading {
  font-family: var(--fontDisplay);
  font-size: 3.25rem;
  line-height: 1.02;
  letter-spacing: 0.01em;
  color: var(--squireNavy);
  margin-bottom: 0.5rem;
}

/* SQUIRE Blue rule under the board title — the one decorative move in the file.
   (Amber alternative: background: var(--squireAmber);) */
.ashby-job-board-heading::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 4px;
  margin-top: 0.85rem;
  background: var(--squireBlue);
}

.ashby-job-board-heading-count {
  font-family: var(--fontFamily);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--squireInk);
  letter-spacing: 0.01em;
}


/* --------------------------------------------------------------------------
   3. Job board — filters
   -------------------------------------------------------------------------- */

.ashby-job-board-filters-label {
  font-family: var(--fontFamily);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--squireInk);
}

.ashby-job-board-filter {
  font-family: var(--fontFamily);
  font-size: 0.9375rem;
  border: 1px solid var(--squireLine);
  background: #ffffff;
}

.ashby-job-board-filter:hover {
  border-color: var(--colorPrimary600);
}

.ashby-job-board-reset-filters-label {
  font-family: var(--fontFamily);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--colorPrimary900);
}


/* --------------------------------------------------------------------------
   4. Departments and teams
   -------------------------------------------------------------------------- */

/* Department and Team are the same size (1.375rem / 22px). Job title is smaller. */
.ashby-department-heading,
.ashby-job-posting-brief-department-heading {
  font-family: var(--fontDisplay);
  font-size: 1.375rem;
  letter-spacing: 0.03em;
  color: var(--squireNavy);
  padding-bottom: 0.4rem;
  /* Navy rule under each department name. (Amber alternative:
     border-bottom: 1px solid var(--squireAmber);) */
  border-bottom: 1px solid var(--squireNavy);
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}

.ashby-department-heading-level,
.ashby-department-heading-level *,
.ashby-job-posting-brief-department-heading-level,
.ashby-job-posting-brief-department-heading-level * {
  font-size: 1.375rem !important;
}

.ashby-department-heading-level,
.ashby-job-posting-brief-department-heading-level {
  font-family: var(--fontDisplay);
  font-size: 1.375rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--squireNavy);
  margin-top: 1.25rem;
}


/* --------------------------------------------------------------------------
   5. Posting list
   -------------------------------------------------------------------------- */

.ashby-job-posting-brief-list {
  display: block;
}

.ashby-job-posting-brief {
  margin-bottom: 0.5rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--squireLine);
  border-left: 3px solid transparent;
  border-radius: var(--borderRadiusContainer);
  background: #ffffff;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* Blue left edge on hover signals the row is clickable. */
.ashby-job-posting-brief:hover {
  border-left-color: var(--colorPrimary600);
  background: var(--squireSurface);
}

.ashby-job-posting-brief-title {
  font-family: var(--fontFamily);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--squireNavy);
  line-height: 1.35;
}

/* Detail line under the job title (department, team, location, type...). */
.ashby-job-posting-brief-details,
.ashby-job-posting-brief-details * {
  font-family: var(--fontFamily);
  font-weight: 300;
}

.ashby-job-posting-brief-details {
  font-size: 0.875rem;
  color: var(--squireInk);
  margin-top: 0.3rem;
}


/* --------------------------------------------------------------------------
   6. Individual posting page
   -------------------------------------------------------------------------- */

.ashby-job-posting-header,
.ashby-job-posting-heading {
  font-family: var(--fontDisplay);
  font-size: 3.75rem;
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--squireNavy);
}

/* LEFT pane = the job details (Location, Employment Type, etc.) */
.ashby-job-posting-left-pane {
  font-family: var(--fontFamily);
  font-size: var(--squireBodySize);
  font-weight: 300;
  line-height: 1.7;
  color: var(--squireInk);
  max-width: 68ch;
}

/* Detail labels (Location, Employment Type, Location Type, Department).
   Bebas Neue only comes in one weight, so keep it at 400 (no faux bold) and
   size it up a little so it reads about the same as the Poppins values. */
.ashby-job-posting-left-pane h2 {
  font-family: var(--fontDisplay);
  font-size: 1.375rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.1;
  color: var(--squireNavy);
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}

.ashby-job-posting-left-pane h3 {
  font-family: var(--fontFamily);
  font-weight: 600;
  color: var(--squireNavy);
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}

/* The Department value reuses the job board list's department/team heading
   classes. Inside the details column, reset them so the value reads like
   Location / Employment Type / Location Type: Poppins Light, same size,
   tight spacing, no rule underneath. Parent department sits on top in gray,
   the team below in the regular text color. */
.ashby-job-posting-left-pane .ashby-department-heading,
.ashby-job-posting-left-pane .ashby-department-heading-level,
.ashby-job-posting-left-pane .ashby-job-posting-brief-department-heading,
.ashby-job-posting-left-pane .ashby-job-posting-brief-department-heading-level {
  font-family: var(--fontFamily);
  font-size: var(--squireBodySize);
  font-weight: 300;
  letter-spacing: normal;
  line-height: 1.7;
  color: var(--squireInk);
  margin: 0;
  padding: 0;
  border: none;
}

.ashby-job-posting-left-pane .ashby-department-heading *,
.ashby-job-posting-left-pane .ashby-department-heading-level *,
.ashby-job-posting-left-pane .ashby-job-posting-brief-department-heading *,
.ashby-job-posting-left-pane .ashby-job-posting-brief-department-heading-level * {
  font-family: inherit;
  font-size: inherit !important;
  font-weight: inherit;
  letter-spacing: inherit;
}

/* Parent department (with the arrow) stays gray. */
.ashby-job-posting-left-pane .ashby-department-heading-level,
.ashby-job-posting-left-pane .ashby-department-heading-level *,
.ashby-job-posting-left-pane .ashby-job-posting-brief-department-heading-level,
.ashby-job-posting-left-pane .ashby-job-posting-brief-department-heading-level * {
  color: var(--squireMuted);
}

.ashby-job-posting-left-pane a {
  color: var(--colorPrimary900);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* RIGHT pane = the job description (Overview tab).
   Poppins Light by default, same size as the left pane. Bold only where the
   description itself is bold. */
.ashby-job-posting-right-pane p,
.ashby-job-posting-right-pane li {
  font-family: var(--fontFamily);
  font-size: var(--squireBodySize);
  font-weight: 300;
  line-height: 1.7;
  color: var(--squireInk);
}

.ashby-job-posting-right-pane p strong,
.ashby-job-posting-right-pane p b,
.ashby-job-posting-right-pane li strong,
.ashby-job-posting-right-pane li b {
  font-weight: 600;
  color: var(--squireNavy);
}

/* No underline on tabs or the Apply link; links inside the description text
   (paragraphs and lists) keep theirs. */
.ashby-job-posting-right-pane a {
  text-decoration: none;
}

.ashby-job-posting-right-pane p a,
.ashby-job-posting-right-pane li a {
  color: var(--colorPrimary900);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* "Apply for this Job" button/link — Bebas Neue, no underline. */
.ashby-job-posting-right-pane a button {
  font-family: var(--fontDisplay);
  font-size: 1.375rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.ashby-job-board-back-to-all-jobs-button {
  font-family: var(--fontFamily);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--colorPrimary900);
}

/* Overview / Application tabs: Bebas Neue, no underline or bar.
   Active tab = near-black (SQUIRE Navy), inactive = gray. */
.ashby-job-posting-right-pane-overview-tab,
.ashby-job-posting-right-pane-application-tab {
  font-family: var(--fontDisplay);
  font-size: 1.875rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--squireMuted);
  text-decoration: none;
  border-bottom: none !important;
  box-shadow: none !important;
}

.ashby-job-posting-right-pane-overview-tab::before,
.ashby-job-posting-right-pane-overview-tab::after,
.ashby-job-posting-right-pane-application-tab::before,
.ashby-job-posting-right-pane-application-tab::after {
  content: none !important;
  display: none !important;
}

/* Active tab = near-black. */
.ashby-job-posting-right-pane-overview-tab[aria-selected="true"],
.ashby-job-posting-right-pane-application-tab[aria-selected="true"],
.ashby-job-posting-right-pane-overview-tab[data-state="active"],
.ashby-job-posting-right-pane-application-tab[data-state="active"],
.ashby-job-posting-right-pane-overview-tab[data-active="true"],
.ashby-job-posting-right-pane-application-tab[data-active="true"] {
  color: var(--squireNavy);
}

/* Hover = SQUIRE Blue (listed after the active rule so it wins on both tabs). */
.ashby-job-posting-right-pane-overview-tab:hover,
.ashby-job-posting-right-pane-application-tab:hover {
  color: var(--squireBlue);
}

/* Gray line on hover for the tab you're already on. (Ashby already draws one
   under the other tab, so this is only added to the active one.) */
.ashby-job-posting-right-pane-overview-tab[aria-selected="true"]:hover,
.ashby-job-posting-right-pane-application-tab[aria-selected="true"]:hover,
.ashby-job-posting-right-pane-overview-tab[data-state="active"]:hover,
.ashby-job-posting-right-pane-application-tab[data-state="active"]:hover,
.ashby-job-posting-right-pane-overview-tab[data-active="true"]:hover,
.ashby-job-posting-right-pane-application-tab[data-active="true"]:hover {
  box-shadow: inset 0 -2px 0 0 var(--squireLine) !important;
}

/* The sliding bar under the active tab. */
.ashby-job-posting-right-pane-tab-slider {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
}


/* --------------------------------------------------------------------------
   7. Application form
   -------------------------------------------------------------------------- */

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

.ashby-application-form-section-header-title {
  font-family: var(--fontDisplay);
  font-size: 1.5rem;
  letter-spacing: 0.03em;
  color: var(--squireNavy);
}

/* The four description rules below are prefixed with the right pane so the
   description rules in section 6 (which also target <p>) don't override them. */
.ashby-job-posting-right-pane .ashby-application-form-section-header-description {
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--squireInk);
}

.ashby-application-form-question-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--squireNavy);
}

.ashby-job-posting-right-pane .ashby-application-form-question-description,
.ashby-job-posting-right-pane .ashby-application-form-question-description * {
  font-size: 0.9375rem;
  font-weight: 300;
  color: var(--squireInk);
  line-height: 1.55;
}

/* Fallback: any paragraph or list inside a form field is 15px too, so the
   description can never end up bigger than the question title (all 15px). */
.ashby-job-posting-right-pane .ashby-application-form-field-entry p,
.ashby-job-posting-right-pane .ashby-application-form-field-entry li {
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.55;
}

.ashby-application-form-field-entry {
  margin-bottom: 1.15rem;
}

.ashby-application-form-field-entry input,
.ashby-application-form-field-entry textarea,
.ashby-application-form-field-entry select {
  font-family: var(--fontFamily);
  font-size: 1rem;
  border: 1px solid var(--squireLine);
}

/* Multiple choice answers (radio / checkbox options): Poppins Light, 15px —
   the same size as the question titles and descriptions. */
.ashby-application-form-field-entry [role="radiogroup"] label,
.ashby-application-form-field-entry [role="radiogroup"] span,
.ashby-application-form-field-entry input[type="radio"] ~ label,
.ashby-application-form-field-entry input[type="radio"] ~ span,
.ashby-application-form-field-entry input[type="checkbox"] ~ label,
.ashby-application-form-field-entry input[type="checkbox"] ~ span {
  font-family: var(--fontFamily);
  font-size: 0.9375rem;
  font-weight: 300;
  color: var(--squireInk);
}

/* Same styling, matched by class name in case the options aren't native
   radio / checkbox inputs. */
.ashby-application-form-field-entry [class*="radio" i],
.ashby-application-form-field-entry [class*="radio" i] *,
.ashby-application-form-field-entry [class*="option" i],
.ashby-application-form-field-entry [class*="option" i] *,
.ashby-application-form-field-entry [class*="checkbox" i],
.ashby-application-form-field-entry [class*="checkbox" i] *,
.ashby-application-form-field-entry [role="radio"],
.ashby-application-form-field-entry [role="checkbox"] {
  font-family: var(--fontFamily);
  font-size: 0.9375rem;
  font-weight: 300;
  color: var(--squireInk);
}

/* Kept as its own rule: older browsers drop a whole rule if they don't
   understand :has(), so this can't take the rule above down with it. */
.ashby-application-form-field-entry label:has(input[type="radio"]),
.ashby-application-form-field-entry label:has(input[type="checkbox"]) {
  font-family: var(--fontFamily);
  font-size: 0.9375rem;
  font-weight: 300;
  color: var(--squireInk);
}

.ashby-application-form-field-entry input:focus,
.ashby-application-form-field-entry textarea:focus,
.ashby-application-form-field-entry select:focus {
  border-color: var(--colorPrimary600);
  outline: 2px solid rgba(55, 125, 247, 0.28);
  outline-offset: 1px;
}

.ashby-application-form-submit-button {
  font-family: var(--fontFamily);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--colorPrimary600);
  color: #ffffff;
  border: none;
  padding: 0.8rem 1.9rem;
}

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

.ashby-application-form-submit-button:focus-visible {
  outline: 2px solid var(--squireNavy);
  outline-offset: 2px;
}

.ashby-job-posting-right-pane .ashby-application-form-texting-consent-description {
  font-size: 0.8125rem;
  font-weight: 300;
  color: #5a626c;
}


/* --------------------------------------------------------------------------
   8. Resume autofill
   -------------------------------------------------------------------------- */

.ashby-application-form-autofill-pane,
.ashby-application-form-autofill-input-root {
  font-family: var(--fontFamily);
}

.ashby-application-form-autofill-input-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--squireNavy);
}

.ashby-job-posting-right-pane .ashby-application-form-autofill-input-description {
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--squireInk);
}

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

.ashby-application-form-autofill-input-drag-layer[data-state="active"] {
  border: 2px dashed var(--colorPrimary600);
  background: rgba(55, 125, 247, 0.06);
}

.ashby-application-form-autofill-input-form-alert[data-highlight="negative"] {
  color: #b3261e;
}

.ashby-application-form-autofill-input-form-alert[data-highlight="positive"] {
  color: #16794c;
}


/* --------------------------------------------------------------------------
   9. Success / failure / blocked states
   -------------------------------------------------------------------------- */

.ashby-application-form-success-container,
.ashby-application-form-failure-container,
.ashby-application-form-blocked-application-container {
  font-family: var(--fontFamily);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--squireInk);
  padding: 1.25rem;
  border-radius: var(--borderRadiusContainer);
}

.ashby-application-form-success-container {
  border-left: 3px solid var(--squireAmber);
  background: var(--squireSurface);
}

.ashby-application-form-failure-container {
  border-left: 3px solid #b3261e;
  background: #fdf3f2;
}


/* --------------------------------------------------------------------------
   10. Responsive + motion preferences
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .ashby-job-board-heading {
    font-size: 2.375rem;
  }

  .ashby-job-posting-header,
  .ashby-job-posting-heading {
    font-size: 2.75rem;
  }

  .ashby-job-posting-brief {
    padding: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ashby-job-posting-brief {
    transition: none;
  }
}