/* ============================================================
   Talent Bridge — Ashby Job Board custom CSS
   ------------------------------------------------------------
   Uses ONLY Ashby's documented job-board class names, :root, and
   at-rules — Ashby's validator rejects any other selector.

   WHAT THIS FILE CAN AND CAN'T DO
   Ashby exposes CSS classes only for the elements listed below
   (headings, job cards, filters, and the application-form labels/
   sections/submit button). It does NOT expose classes for:
     - text inputs / textareas / selects inside the form
     - the Overview / Application tabs
     - the "Autofill from resume" widget
     - the left info sidebar (Location, Compensation, etc.)
   Those are drawn by Ashby's theme. Their COLOR comes from the
   admin Brand Color pickers, and their CORNER RADIUS comes from
   the --borderRadius* variables below.
   ============================================================ */

:root {
  /* ---------- ROUNDED CORNERS (tune here) ----------
     0 = square, larger = rounder.
     Container = cards / panels / autofill box
     Control   = filter dropdowns AND form inputs
     Button    = submit + upload buttons */
  --borderRadiusContainer: 14px;
  --borderRadiusControl: 12px;
  --borderRadiusButton: 12px;

  /* ---------- Other Ashby globals ---------- */
  --fontFamily: "Inter", "-apple-system", "BlinkMacSystemFont", "Segoe UI",
    "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  --borderWidthBold: 1px;
  --widthMaxJobBoard: 1040px;
  --colorAppBackground: #f5f7fa;

  /* ---------- OPTIONAL: soften the blue globally ----------
     The bright blue on input borders, the active tab, and the
     upload buttons is Ashby's PRIMARY color, normally set by the
     admin Brand Color pickers. Uncomment below to drive it from
     CSS instead and calm it down. (Overrides the admin pickers.)

  --colorPrimary600: #4f86c0;   |* lighter, softer blue        *|
  --colorPrimary900: #1e6fb8;   |* hover / darker              *|
  */

  /* ---------- Talent Bridge tokens (used only in this file) ---------- */
  --tb-blue: #1e6fb8;        /* brand blue  (matches admin Brand Color)      */
  --tb-navy: #143156;        /* deep navy   (matches admin Brand Color Dark) */
  --tb-blue-tint: #eef4fb;   /* very soft blue for hover backgrounds         */
  --tb-ink: #12233d;         /* headings / primary text                      */
  --tb-muted: #5a6b85;       /* secondary text                               */
  --tb-border: #e2e7ee;      /* hairline borders                             */
  --tb-border-strong: #cdd6e2;
}

/* ============================================================
   Job board — headings & listing
   ============================================================ */

/* Main job board title ("Open Positions") */
.ashby-job-board-heading {
  color: var(--tb-navy);
  font-family: var(--fontFamily);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* "(10)" count next to the heading */
.ashby-job-board-heading-count {
  color: var(--tb-muted);
  font-weight: 500;
}

/* Department / team group headings ("Customer Success", "Engineering") */
.ashby-department-heading,
.ashby-job-posting-brief-department-heading {
  color: var(--tb-navy);
  font-weight: 600;
  border-bottom: 1px solid var(--tb-border);
  padding-bottom: 8px;
}

.ashby-department-heading-level,
.ashby-job-posting-brief-department-heading-level {
  color: var(--tb-muted);
  font-weight: 500;
}

/* The list wrapper for all job briefs.
   Ashby draws the SELECTED-card highlight as a ring OUTSIDE the
   card box. overflow:visible + this side padding give that ring
   room so it renders fully instead of clipping at the edge. */
.ashby-job-posting-brief-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 5px 6px;
  overflow: visible;
}

/* Each job card in the list */
.ashby-job-posting-brief {
  box-sizing: border-box;
  overflow: visible;
  border: 1px solid var(--tb-border);
  border-radius: var(--borderRadiusContainer);
  padding: 16px 18px;
  background: #ffffff;
  transition: border-color 0.15s ease, background-color 0.15s ease,
    box-shadow 0.15s ease;
}

.ashby-job-posting-brief:hover {
  border-color: var(--tb-blue);
  background: var(--tb-blue-tint);
  box-shadow: 0 4px 14px rgba(20, 49, 86, 0.08);
}

/* Job title in the list / details pane */
.ashby-job-posting-brief-title {
  color: var(--tb-navy);
  font-weight: 600;
  transition: color 0.15s ease;
}

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

/* Meta / sub-line under the title (dept • location • type, salary) */
.ashby-job-posting-brief-details {
  color: var(--tb-muted);
  line-height: 1.55;
  overflow: visible;
}

/* Individual job posting page heading ("Backend Engineer") */
.ashby-job-posting-heading {
  color: var(--tb-navy);
  font-family: var(--fontFamily);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

/* Filter dropdowns (Department, Location, etc.) */
.ashby-job-board-filter {
  border: 1px solid var(--tb-border-strong);
  border-radius: var(--borderRadiusControl);
  color: var(--tb-ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

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

.ashby-job-board-filter:focus,
.ashby-job-board-filter:focus-visible {
  outline: none;
  border-color: var(--tb-blue);
  box-shadow: 0 0 0 3px rgba(30, 111, 184, 0.18);
}

/* ============================================================
   Application form
   ============================================================ */

.ashby-application-form-container {
  background-color: var(--colorAppBackground);
  border-radius: var(--borderRadiusContainer);
  box-shadow: none;
}

/* Spacing between form sections */
.ashby-application-form-section-container {
  margin-bottom: 8px;
}

/* Section title (e.g. "Personal information") */
.ashby-application-form-section-header-title {
  color: var(--tb-navy);
  font-weight: 600;
}

.ashby-application-form-section-header-description {
  color: var(--tb-muted);
}

/* One label + input block */
.ashby-application-form-field-entry {
  margin-bottom: 6px;
}

/* Question label ("Name", "Email", "Github Link") */
.ashby-application-form-question-title {
  color: var(--tb-ink);
  font-weight: 500;
}

/* Required-field asterisk — a calmer tone than pure primary blue */
.ashby-application-form-question-title::after {
  color: var(--tb-muted);
}

/* Helper text under a question */
.ashby-application-form-question-description {
  color: var(--tb-muted);
}

/* Submit button — color comes from your admin Brand Color pickers.
   Here we refine only shape, weight, and interaction states. */
.ashby-application-form-submit-button {
  border-radius: var(--borderRadiusButton);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}

.ashby-application-form-submit-button:hover {
  filter: brightness(0.96);
}

.ashby-application-form-submit-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(20, 49, 86, 0.35);
}

/* Success / failure states (single-sided accent → keep square) */
.ashby-application-form-success-container {
  border-left: 3px solid var(--tb-blue);
  padding-left: 14px;
  border-radius: 0;
}

.ashby-application-form-failure-container {
  border-left: 3px solid var(--colorNegative600, #dc3030);
  padding-left: 14px;
  border-radius: 0;
}

/* ============================================================
   At-rules (allowed by Ashby)
   ============================================================ */

/* Tighten listing spacing on small screens */
@media (max-width: 640px) {
  .ashby-job-posting-brief {
    padding: 14px;
  }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .ashby-job-posting-brief,
  .ashby-job-posting-brief-title,
  .ashby-job-board-filter,
  .ashby-application-form-submit-button {
    transition: none;
  }
}

/* Optional: load the Inter web font referenced in --fontFamily.
   Ashby loads custom CSS inside an iframe, so to use it you must also
   add fonts.googleapis.com / fonts.gstatic.com to the allowed URLs in
   admin. Otherwise the system stack is used.

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
*/