/* ==========================================================================
   Flux.ai-inspired theme for Ashby job board (Ashby-safe selectors)
   Brand accent: #1DFDC0
   Brand dark: #1D1B3E
   --------------------------------------------------------------------------
   Usage:
   - Host this file somewhere public (e.g. your site, S3).
   - In Ashby Admin → Job Boards → Theme → Custom CSS URL, point to this file.
   ========================================================================== */

/* stylelint-disable */

/* ---------- Ashby theme variables ---------------------------------------- */

:root {
  /* Primary colors used by Ashby's built-in theme tokens */
  --colorPrimary900: #1D1B3E; /* darker primary (brand dark) */
  --colorPrimary600: #1DFDC0; /* lighter primary (brand accent) */

  /* Job board & app widths */
  --widthMaxJobBoard: 960px;
  /* --widthMaxJobBoardApplicationForm: 800px; */

  /* Radii */
  --borderRadiusContainer: 14px;
  --borderRadiusControl: 999px;
  --borderRadiusButton: 999px;

  /* Font family */
  --fontFamily: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI", sans-serif;

  /* Background color behind the entire job board */
  --colorAppBackground: #050816;
}

/* ---------- Custom design tokens ----------------------------------------- */

:root {
  --flux-bg: #050816;               /* page background (near-black / space) */
  --flux-bg-elevated: #0c0f25;      /* cards / panels */
  --flux-bg-elevated-soft: #10142b; /* softer slightly lighter card */
  --flux-bg-soft: #10142b;          /* subtle contrast background */
  --flux-border-subtle: #1e2340;
  --flux-border-strong: #303863;

  --flux-text: #f9fafb;
  --flux-text-strong: #e5ecff;
  --flux-text-muted: #c0c6e0;
  --flux-text-soft: #8b92b4;

  --flux-accent: #1DFDC0;           /* main brand accent */
  --flux-accent-soft: rgba(29, 253, 192, 0.18);
  --flux-accent-strong: #11caa0;

  --flux-danger: #f97373;

  --flux-radius-sm: 6px;
  --flux-radius-md: 10px;
  --flux-radius-lg: 16px;

  --flux-shadow-soft: 0 20px 45px rgba(0, 0, 0, 0.55);
  --flux-shadow-subtle: 0 8px 22px rgba(0, 0, 0, 0.45);

  --flux-font-sans: var(--fontFamily);
}

/* ---------- Global layout & typography ----------------------------------- */

html,
body {
  margin: 0;
  padding: 0;
  background-color: var(--flux-bg);
  color: var(--flux-text-muted);
  font-family: var(--flux-font-sans);
  -webkit-font-smoothing: antialiased;
}

/* Job board main heading */
.ashby-job-board-heading {
  font-size: 2.1rem;
  color: var(--flux-text-strong);
  font-weight: 650;
  letter-spacing: 0.01em;
  margin-bottom: 4px;
}

/* Count under heading */
.ashby-job-board-heading-count {
  color: var(--flux-text-soft);
  font-size: 0.85rem;
}

/* Department / team headings */
.ashby-department-heading,
.ashby-department-heading-level {
  color: var(--flux-text-strong);
  margin-top: 24px;
  margin-bottom: 8px;
  font-weight: 600;
}

/* ---------- Filter bar --------------------------------------------------- */

.ashby-job-board-filters-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--flux-text-soft);
  font-size: 0.88rem;
}

/* “Reset filters” link */
.ashby-job-board-reset-filters-label {
  cursor: pointer;
  color: var(--flux-text-soft);
  font-size: 0.88rem;
}

.ashby-job-board-reset-filters-label:hover {
  color: var(--flux-accent);
}

/* Individual filter controls (e.g., select dropdowns) */
.ashby-job-board-filter {
  background-color: var(--flux-bg-elevated);
  border-radius: var(--borderRadiusControl);
  border: 1px solid var(--flux-border-subtle);
  color: var(--flux-text-muted);
  padding: 8px 14px;
  font-family: var(--flux-font-sans);
  font-size: 0.9rem;
  min-width: 160px;
  outline: none;
}

/* ---------- Buttons ------------------------------------------------------ */

.ashby-job-board-back-to-all-jobs-button,
.ashby-job-posting-right-pane-application-tab,
.ashby-job-posting-right-pane-overview-tab,
.ashby-application-form-submit-button {
  appearance: none;
  border-radius: var(--borderRadiusButton);
  border: 1px solid var(--flux-accent);
  background: radial-gradient(circle at 0% 0%, var(--flux-accent-soft), #050816);
  color: var(--flux-text-strong);
  font-family: var(--flux-font-sans);
  font-weight: 550;
  font-size: 0.95rem;
  padding: 9px 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition:
    background 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.08s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}

.ashby-job-board-back-to-all-jobs-button {
  margin-bottom: 18px;
}

/* Tabs (Overview / Application) */
.ashby-job-posting-right-pane-application-tab,
.ashby-job-posting-right-pane-overview-tab {
  background: transparent;
  border-color: transparent;
  color: var(--flux-text-soft);
  border-radius: 999px;
  padding-inline: 14px;
}

.ashby-job-posting-right-pane-application-tab[data-state="active"],
.ashby-job-posting-right-pane-overview-tab[data-state="active"] {
  color: var(--flux-text-strong);
  border-color: var(--flux-accent);
  background-color: var(--flux-accent-soft);
}

/* Primary submit / back hover */
.ashby-application-form-submit-button:hover,
.ashby-application-form-submit-button:focus-visible,
.ashby-job-board-back-to-all-jobs-button:hover,
.ashby-job-board-back-to-all-jobs-button:focus-visible {
  background: linear-gradient(135deg, var(--flux-accent-strong), #13a37f);
  border-color: var(--flux-accent-strong);
  box-shadow: var(--flux-shadow-soft);
  transform: translateY(-1px);
}

/* ---------- Job list view ------------------------------------------------ */

.ashby-job-posting-brief-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

/* Card background & text – make it dark so white text is readable */
.ashby-job-posting-brief {
  border-radius: var(--flux-radius-lg);
  border: 1px solid var(--flux-border-subtle);
  background-color: var(--flux-bg-elevated-soft);
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: var(--flux-shadow-subtle);
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--flux-text-muted);
}

/* Slightly brighter on hover, but still dark */
.ashby-job-posting-brief:hover {
  background-color: #151a36;
  border-color: var(--flux-accent-soft);
}

/* Title inside list row – strong contrast */
.ashby-job-posting-brief-title {
  font-size: 1.05rem;
  color: var(--flux-text-strong);
}

/* Meta (location / team / type) */
.ashby-job-posting-brief-details {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--flux-text-soft);
}

/* ---------- Job detail view ---------------------------------------------- */

.ashby-job-posting-header {
  margin-bottom: 16px;
}

/* Main job title */
.ashby-job-posting-heading {
  font-size: 2.1rem;
  color: var(--flux-text-strong);
  font-weight: 650;
  letter-spacing: 0.01em;
  margin-bottom: 4px;
}

/* Left (description) & right (tabs/app) panes */
.ashby-job-posting-left-pane,
.ashby-job-posting-right-pane {
  background-color: var(--flux-bg-elevated);
  border-radius: var(--flux-radius-lg);
  border: 1px solid var(--flux-border-subtle);
  box-shadow: var(--flux-shadow-soft);
  padding: 22px 24px;
  color: var(--flux-text-muted);
}

/* Nuke any inner white boxes that Ashby may add so text isn't white-on-white */
.ashby-job-posting-left-pane *,
.ashby-job-posting-right-pane * {
  background-color: transparent;
}

/* Paragraphs & lists in description area */
.ashby-job-posting-left-pane p,
.ashby-job-posting-left-pane li {
  color: var(--flux-text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Section headings (“Responsibilities”, etc.) */
.ashby-job-posting-left-pane h3 {
  margin-top: 22px;
  font-size: 1.05rem;
  color: var(--flux-text-strong);
}

/* Lists in job description */
.ashby-job-posting-left-pane ul,
.ashby-job-posting-left-pane ol {
  margin-left: 0;
  padding-left: 0;
}

.ashby-job-posting-left-pane ul li,
.ashby-job-posting-left-pane ol li {
  margin-bottom: 6px;
  position: relative;
  padding-left: 1.2em;
}

.ashby-job-posting-left-pane ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--flux-accent);
}

/* Links in description section */
.ashby-job-posting-left-pane a {
  color: var(--flux-accent);
}

.ashby-job-posting-left-pane a:hover,
.ashby-job-posting-left-pane a:focus-visible {
  color: var(--flux-accent-strong);
}

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

.ashby-application-form-container {
  margin-top: 16px;
}

/* Form sections */
.ashby-application-form-section-container {
  margin-bottom: 18px;
}

.ashby-application-form-section-header-title {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--flux-text-soft);
}

.ashby-application-form-section-header-description {
  font-size: 0.85rem;
  color: var(--flux-text-soft);
}

/* Fields */
.ashby-application-form-field-entry label,
.ashby-application-form-question-title {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--flux-text-soft);
  display: block;
  margin-bottom: 4px;
}

.ashby-application-form-field-entry input[type="text"],
.ashby-application-form-field-entry input[type="email"],
.ashby-application-form-field-entry input[type="tel"],
.ashby-application-form-field-entry input[type="url"],
.ashby-application-form-field-entry textarea,
.ashby-application-form-field-entry select {
  width: 100%;
  background-color: var(--flux-bg-soft);
  border-radius: var(--flux-radius-sm);
  border: 1px solid var(--flux-border-subtle);
  color: var(--flux-text-muted);
  padding: 9px 12px;
  font-family: var(--flux-font-sans);
  font-size: 0.9rem;
  box-sizing: border-box;
}

/* Placeholder text */
.ashby-application-form-field-entry input::placeholder,
.ashby-application-form-field-entry textarea::placeholder {
  color: var(--flux-text-soft);
}

/* Autofill widget */
.ashby-application-form-autofill-input-root {
  border-radius: var(--flux-radius-md);
  border: 1px dashed var(--flux-border-subtle);
  background-color: rgba(16, 20, 43, 0.9);
  padding: 12px 14px;
}

.ashby-application-form-autofill-input-title {
  color: var(--flux-text-strong);
  font-size: 0.9rem;
}

.ashby-application-form-autofill-input-description {
  font-size: 0.85rem;
  color: var(--flux-text-soft);
}

/* Alerts / error text */
.ashby-application-form-autofill-input-form-alert,
[role="alert"],
[class*="error-message"] {
  color: var(--flux-danger);
  font-size: 0.78rem;
  margin-top: 4px;
}

/* Submit button spacing */
.ashby-application-form-submit-button {
  margin-top: 18px;
}

/* ---------- Success / failure / blocked containers ----------------------- */

.ashby-application-form-success-container,
.ashby-application-form-failure-container,
.ashby-application-form-blocked-application-container {
  border-radius: var(--flux-radius-md);
  border: 1px solid var(--flux-border-subtle);
  background-color: var(--flux-bg-elevated);
  padding: 16px 18px;
  box-shadow: var(--flux-shadow-subtle);
}

/* ---------- Surveys ------------------------------------------------------- */

.ashby-survey-form-container {
  margin-top: 24px;
  border-radius: var(--flux-radius-md);
  border: 1px solid var(--flux-border-subtle);
  background-color: var(--flux-bg-elevated);
  padding: 16px 18px;
}

/* ---------- Responsiveness ----------------------------------------------- */

@media (max-width: 640px) {
  .ashby-job-posting-left-pane,
  .ashby-job-posting-right-pane {
    padding: 16px 14px;
  }

  .ashby-job-posting-brief {
    padding: 14px 14px;
  }

  .ashby-job-posting-brief-details {
    flex-direction: column;
    align-items: flex-start;
  }
}