/*
  Custom CSS for the Ashby-hosted job board (jobs.ashbyhq.com/reflectionrobotics),
  matching the Reflection Robotics site theme (see /src/style.css).

  Paste this into Ashby → Job Board Settings → Design → Custom CSS.

  Only targets Ashby's documented, stable "ashby-*" class hooks — never the
  hashed/auto-generated classes (e.g. "_container_j2da7_1"). Ashby's Custom
  CSS field validates and rejects selectors against undocumented/internal
  classes at save time, so those aren't usable here regardless.

  Known limitation: the top logo/nav bar and the filters bar's wrapping
  container have no documented ashby-* hook, and render with a hardcoded
  white/light background this stylesheet cannot override. See the note at
  the bottom of this file for how to address that outside of Custom CSS.
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --rr-bg: #07080a;
  --rr-text: rgba(255, 255, 255, 0.85);
  --rr-text-dim: rgba(240, 240, 240, 0.65);
  --rr-accent: #00a2ff;
  --rr-card-bg: rgba(20, 20, 20, 0.5);
  --rr-card-border: rgba(255, 255, 255, 0.1);
  --rr-font-main: 'Inter', sans-serif;
  --rr-font-display: 'Space Grotesk', sans-serif;
  --rr-radius-lg: 20px;
  --rr-radius-md: 14px;
}

/* Page shell */
html,
body {
  background: var(--rr-bg) !important;
  color: var(--rr-text) !important;
  font-family: var(--rr-font-main) !important;
}

a {
  color: var(--rr-accent);
}

/* Board heading ("Reflection Robotics" title + open-role count) */
.ashby-job-board-heading {
  font-family: var(--rr-font-display) !important;
  color: #fff !important;
  font-weight: 600 !important;
}

.ashby-job-board-heading-count {
  color: var(--rr-accent) !important;
  font-weight: 600 !important;
}

/* Filters bar */
.ashby-job-board-filters-label {
  color: var(--rr-text-dim) !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.75rem !important;
}

.ashby-job-board-reset-filters-label {
  color: var(--rr-accent) !important;
  background: transparent !important;
  border: none !important;
}

.ashby-job-board-reset-filters-label:hover {
  color: #fff !important;
}

.ashby-job-board-filter {
  background: var(--rr-card-bg) !important;
  color: var(--rr-text) !important;
  border: 1px solid var(--rr-card-border) !important;
  border-radius: 999px !important;
  padding: 0.5rem 1rem !important;
  font-family: var(--rr-font-main) !important;
}

.ashby-job-board-filter:focus {
  outline: none !important;
  border-color: var(--rr-accent) !important;
}

/* Department groupings */
.ashby-department-heading {
  font-family: var(--rr-font-display) !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--rr-card-border);
  padding-bottom: 0.5rem;
}

.ashby-department-heading-level {
  color: var(--rr-text-dim) !important;
}

/* Job list cards */
.ashby-job-posting-brief-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.ashby-job-posting-brief {
  background: var(--rr-card-bg) !important;
  border: 1px solid var(--rr-card-border) !important;
  border-radius: var(--rr-radius-md) !important;
  padding: 1.5rem 2rem !important;
  transition: border-color 0.3s ease, transform 0.3s ease !important;
}

.ashby-job-posting-brief:hover {
  border-color: var(--rr-accent) !important;
  transform: translateY(-3px);
}

.ashby-job-posting-brief-title {
  font-family: var(--rr-font-display) !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 1.2rem !important;
}

.ashby-job-posting-brief-details,
.ashby-job-posting-brief-details p {
  color: var(--rr-accent) !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.75rem !important;
}

/* Job detail page */
.ashby-job-posting-header {
  background: var(--rr-bg) !important;
  border-bottom: 1px solid var(--rr-card-border) !important;
}

.ashby-job-board-back-to-all-jobs-button {
  color: var(--rr-accent) !important;
}

.ashby-job-posting-heading {
  font-family: var(--rr-font-display) !important;
  color: #fff !important;
  font-weight: 700 !important;
}

.ashby-job-posting-left-pane {
  background: var(--rr-bg) !important;
  color: var(--rr-text-dim) !important;
}

.ashby-job-posting-brief-department-heading,
.ashby-job-posting-brief-department-heading-level {
  color: var(--rr-text-dim) !important;
}

.ashby-job-posting-right-pane-overview-tab,
.ashby-job-posting-right-pane-application-tab {
  color: var(--rr-text-dim) !important;
  font-family: var(--rr-font-main) !important;
}

.ashby-job-posting-right-pane-tab-slider {
  background: var(--rr-accent) !important;
}

/* The Overview/Application tab bar wraps in a <nav> with no documented
   class of its own (only its child tabs/slider do); it renders with a
   hardcoded white sticky background on mobile widths. Reached via a
   descendant selector off the documented right-pane class instead of the
   nav's internal hashed class, which Ashby's Custom CSS validator rejects. */
.ashby-job-posting-right-pane nav {
  background: var(--rr-bg) !important;
}

.ashby-job-posting-description-container {
  background: var(--rr-bg) !important;
}

.ashby-job-posting-description-container,
.ashby-job-posting-description {
  color: rgba(255, 255, 255, 0.8) !important;
  font-family: var(--rr-font-main) !important;
  line-height: 1.8 !important;
}

.ashby-job-posting-description h1,
.ashby-job-posting-description h2,
.ashby-job-posting-description h3,
.ashby-job-posting-description h4 {
  color: var(--rr-accent) !important;
  font-family: var(--rr-font-display) !important;
  font-weight: 600 !important;
}

.ashby-job-posting-description strong,
.ashby-job-posting-description b {
  color: #fff !important;
  font-weight: 700 !important;
}

.ashby-job-posting-description li {
  color: rgba(255, 255, 255, 0.8) !important;
}

.ashby-job-posting-description a {
  color: var(--rr-accent) !important;
}

/* Application form */
.ashby-application-form-container {
  background: var(--rr-bg) !important;
  color: var(--rr-text) !important;
}

.ashby-application-form-section-header-title {
  font-family: var(--rr-font-display) !important;
  color: #fff !important;
}

.ashby-application-form-section-header-description,
.ashby-application-form-question-description {
  color: var(--rr-text-dim) !important;
}

.ashby-application-form-question-title {
  color: var(--rr-text) !important;
  font-weight: 600 !important;
}

.ashby-application-form-input-text,
.ashby-application-form-input-textarea,
.ashby-application-form-input-autocomplete {
  background: var(--rr-card-bg) !important;
  color: var(--rr-text) !important;
  border: 1px solid var(--rr-card-border) !important;
  border-radius: var(--rr-radius-md) !important;
  font-family: var(--rr-font-main) !important;
}

.ashby-application-form-input-text:focus,
.ashby-application-form-input-textarea:focus,
.ashby-application-form-input-autocomplete:focus {
  outline: none !important;
  border-color: var(--rr-accent) !important;
}

.ashby-application-form-input-checkbox-group-option-label,
.ashby-application-form-input-radio-group-option-label,
.ashby-application-form-input-yesno-option {
  color: var(--rr-text) !important;
}

.ashby-application-form-input-checkbox-group-option,
.ashby-application-form-input-radio-group-option,
.ashby-application-form-input-yesno-option,
.ashby-application-form-input-file {
  border-color: var(--rr-card-border) !important;
}

.ashby-application-form-input-checkbox-group-option-checkbox,
.ashby-application-form-input-radio-group-option-radio {
  accent-color: var(--rr-accent) !important;
}

/* Required-field markers */
.ashby-application-form-question-title::after {
  color: var(--rr-accent) !important;
}

.ashby-application-form-input-file-dropzone {
  background: var(--rr-card-bg) !important;
  border: 1px dashed var(--rr-card-border) !important;
  border-radius: var(--rr-radius-md) !important;
}

.ashby-application-form-input-file-dropzone-instructions,
.ashby-application-form-input-file-dropzone-upload {
  color: var(--rr-text-dim) !important;
}

.ashby-application-form-autofill-pane {
  background: var(--rr-bg) !important;
}

.ashby-application-form-autofill-input-root {
  background: var(--rr-card-bg) !important;
  border: 1px dashed var(--rr-card-border) !important;
  border-radius: var(--rr-radius-md) !important;
}

.ashby-application-form-autofill-input-title {
  color: var(--rr-text) !important;
}

.ashby-application-form-autofill-input-drag-layer,
.ashby-application-form-autofill-input-pending-layer {
  background: rgba(7, 8, 10, 0.92) !important;
  color: var(--rr-text) !important;
}

.ashby-application-form-autofill-input-description {
  color: var(--rr-text-dim) !important;
}

.ashby-application-form-autofill-input-icon {
  color: var(--rr-accent) !important;
}

.ashby-application-form-submit-button {
  background: var(--rr-accent) !important;
  color: #000 !important;
  border: 1px solid var(--rr-accent) !important;
  border-radius: 999px !important;
  padding: 12px 28px !important;
  font-weight: 600 !important;
  font-family: var(--rr-font-main) !important;
  box-shadow: 0 4px 20px rgba(0, 162, 255, 0.25) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

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

.ashby-application-blocking-disclosure,
.ashby-survey-form-container {
  color: var(--rr-text-dim) !important;
}

/* ---------------------------------------------------------------------
   The top logo/nav bar has no documented ashby-* class, and Ashby's Custom
   CSS field rejects selectors that reference their internal/hashed class
   directly ("only specified classes and at-rules allowed"). This rule
   reaches it with a purely structural selector instead — no class name at
   all, just its fixed position as the first element on the page — which
   contains nothing for that validator rule to reject. Confirmed to target
   only this element in a live render, but NOT yet confirmed to pass
   Ashby's save-time validator; if Ashby rejects it too, remove this rule
   and either ask Ashby support for a header background setting, or accept
   the white header behind the logo. This never appears on your own site's
   embed anyway — it's only visible to people who land on the standalone
   jobs.ashbyhq.com/reflectionrobotics URL directly.
   --------------------------------------------------------------------- */
body > div > div:first-child {
  background: var(--rr-bg) !important;
}

/* ---------------------------------------------------------------------
   The filters bar's wrapping container (visible as an off-white background
   behind the mobile "Filter Open Positions..." button) has no documented
   ashby-* class. Reached via :has() off the documented board-heading class
   instead — "the container immediately after the one holding the board
   heading, first child of it" — with zero hashed class names anywhere in
   the selector. Confirmed live; not yet confirmed to pass Ashby's save-time
   validator. If Ashby rejects it, remove this rule and instead toggle
   "Show Job Filters?" off in Job Board Options, which removes the whole
   filters component (only worth it if you don't need candidates to filter
   by department/location/type).
   --------------------------------------------------------------------- */
div:has(> .ashby-job-board-heading) + div > div:first-child {
  background: transparent !important;
}