/* ===========================================================================
 * Orion Sleep — Ashby job board theme
 *
 * Loaded INSIDE the Ashby board (jobs.ashbyhq.com), not by this site. Published
 * by uploading this file at Ashby → Settings → Job Board Options → Custom CSS.
 * Ashby then serves it alongside the board, so it covers both the hosted board
 * and the /careers embed on every environment including localhost — no
 * allowlisted URL, no CDN, no deploy. To ship a change, re-upload this file.
 *
 * THE UPLOADER VALIDATES THIS FILE and rejects anything outside its whitelist
 * with `only specified classes and at-rules allowed`. Accepted:
 * - the documented `ashby-*` classes — full list at
 *   https://www.ashbyhq.com/job_board_example_css/full-job-board.css
 * - plain elements, pseudo-classes and combinators scoped under those classes
 * - `:root`, `html`, `body`
 * - at-rules (`@font-face`, `@media`)
 *
 * It rejects ID selectors outright. `#root`, `#overview` and `#job-overview`
 * are what the first upload attempt failed on, so don't reintroduce them. There
 * is no class hook for the "Powered by Ashby" footer, which is why it now keeps
 * Ashby's default grey.
 *
 * RULES FOR EDITING
 * - Only target `ashby-*` classes, or plain elements scoped under them.
 *   Everything else in the board markup is a CSS-modules hash
 *   (`_title_1dvh9_382`) that changes on every Ashby deploy.
 * - Prefer Ashby's own variables (the second half of `:root` below) over a
 *   per-class override where one exists — they reach chrome we have no class
 *   for, which is the only lever left after the ID selectors went.
 * - `!important` is required throughout: our selectors and Ashby's are both
 *   single-class, so specificity ties and their bundle may load last.
 * - The fonts load from the site origin and must keep the `www.` host (the apex
 *   301s to it). `@font-face` requests are always CORS-mode, so they depend on
 *   Vercel serving `Access-Control-Allow-Origin: *` on `/public` assets, which
 *   it does for the whole static tree. If that ever stops, add an explicit
 *   `/fonts/:path*` rule to `next.config.ts` → `headers()` or the board
 *   silently falls back to system sans.
 * - Ashby's own CSP already permits this: `style-src ... https:` and
 *   `font-src ... https:`.
 * =========================================================================== */

/* ── Fonts ─────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Aeonik";
  src: url("https://www.orionsleep.com/fonts/Aeonik-Regular.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Aeonik";
  src: url("https://www.orionsleep.com/fonts/Aeonik-Medium.woff2")
    format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Aeonik";
  src: url("https://www.orionsleep.com/fonts/Aeonik-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Body: 400 = Theinhardt Light, 500 = Theinhardt Regular (mirrors globals.css) */
@font-face {
  font-family: "Theinhardt Light";
  src: url("https://www.orionsleep.com/fonts/Theinhardt-Light.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Theinhardt Light";
  src: url("https://www.orionsleep.com/fonts/Theinhardt-Regular.woff2")
    format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ── Tokens ────────────────────────────────────────────────────────────── */

:root {
  /* Ours — mirrors src/app/globals.css. */
  --orion-dark: #251b0a;
  --orion-muted: #60543e;
  --orion-brown: #281a06;
  --orion-navy: #152347;
  --orion-blue: #257af4;
  --orion-surface: #fffdf8;

  --orion-hairline: rgba(40, 26, 6, 0.12);
  --orion-hairline-soft: rgba(40, 26, 6, 0.08);
  --orion-hover-wash: rgba(40, 26, 6, 0.035);

  --orion-font-display: "Aeonik", ui-sans-serif, system-ui, sans-serif;
  --orion-font-body: "Theinhardt Light", ui-sans-serif, system-ui, sans-serif;

  /* Ashby's own knobs. Worth setting even where a class override exists: these
     also reach the parts of the board we have no documented selector for.

     `--colorPrimary600` drives links and active controls, `--colorPrimary900`
     their hover — the same two values as the Brand Color / Brand Color (Dark)
     fields in Job Board Options. Keep all four in sync; Ashby warns that the
     admin fields and these variables can disagree. */
  --colorPrimary600: #152347;
  --colorPrimary900: #0e1830;

  /* Lets the board dissolve into the cream page behind the iframe rather than
     stamping a white panel onto it. Also the only remaining hook for the
     overview pane, which used to be cleared via `#overview`. */
  --colorAppBackground: transparent;

  --fontFamily: var(--orion-font-body);

  --borderRadiusContainer: 16px;
  --borderRadiusControl: 12px;
  --borderRadiusButton: 12px;

  /* Ashby caps the board at 800px. The /careers wrapper is already max-w-5xl,
     so uncomment to let the board fill it:
     --widthMaxJobBoard: 100%; */
}

/* ── Document ──────────────────────────────────────────────────────────── */

/* `--colorAppBackground` above should cover this, but Ashby paints the
   document itself in a couple of places, so clear it here too. */
html,
body {
  background: transparent !important;
  font-family: var(--orion-font-body) !important;
  color: var(--orion-dark) !important;
  -webkit-font-smoothing: antialiased;
}

/* Ashby paints white panels behind the posting description, the left meta
   column and the application form. Clear them or the transparent document
   above is pointless. The autofill pane keeps a tint of its own further down.
   The overview pane is no longer listed here — it was only reachable by ID —
   so verify it after upload and lean on `--colorAppBackground` if it stays
   white. */
.ashby-job-posting-left-pane,
.ashby-application-form-container {
  background: transparent !important;
}

/* ── Board list: heading ───────────────────────────────────────────────── */

.ashby-job-board-heading {
  font-family: var(--orion-font-display) !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  color: var(--orion-brown) !important;
}

.ashby-job-board-heading-count {
  font-family: var(--orion-font-display) !important;
  font-weight: 400 !important;
  color: var(--orion-muted) !important;
}

/* ── Board list: filters ───────────────────────────────────────────────── */

.ashby-job-board-filters-label {
  font-family: var(--orion-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--orion-muted) !important;
}

.ashby-job-board-filter {
  font-family: var(--orion-font-body) !important;
  font-size: 15px !important;
  color: var(--orion-dark) !important;
  background: var(--orion-surface) !important;
  border: 1px solid var(--orion-hairline) !important;
  border-radius: 12px !important;
  padding: 10px 26px 10px 14px !important;
  transition:
    border-color 200ms ease,
    background-color 200ms ease;
}

.ashby-job-board-filter:hover {
  border-color: rgba(40, 26, 6, 0.24) !important;
}

.ashby-job-board-reset-filters-label {
  font-family: var(--orion-font-body) !important;
  font-size: 13px !important;
  color: var(--orion-muted) !important;
}

.ashby-job-board-reset-filters-label:hover:not([disabled]) {
  color: var(--orion-dark) !important;
}

/* ── Board list: departments + rows ────────────────────────────────────── */

.ashby-department-heading,
.ashby-department-heading-level {
  font-family: var(--orion-font-display) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  color: var(--orion-brown) !important;
  margin: 40px 0 4px !important;
}

/* Rows are whole-row anchors, so the underline is chrome rather than prose.
   Links inside the posting copy keep theirs — `#root a` used to strip those
   too, and Ashby's brand colour alone isn't enough to mark them as links. */
.ashby-job-posting-brief-list a {
  text-decoration: none !important;
}

/* Hairline between rows only — matches the divide-y list this replaced. */
.ashby-job-posting-brief {
  background: transparent !important;
  border-radius: 12px !important;
  padding: 20px 40px 20px 12px !important;
  margin-left: 0 !important;
  position: relative !important;
  transition: background-color 200ms ease;
}

.ashby-job-posting-brief-list > a + a .ashby-job-posting-brief {
  border-top: 1px solid var(--orion-hairline-soft) !important;
  border-radius: 0 !important;
}

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

.ashby-job-posting-brief-title {
  font-family: var(--orion-font-display) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  color: var(--orion-dark) !important;
}

.ashby-job-posting-brief-details,
.ashby-job-posting-brief-details p {
  font-family: var(--orion-font-body) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--orion-muted) !important;
  margin-top: 6px !important;
}

/* Rows are whole-row links with no visible button, so add the affordance. */
.ashby-job-posting-brief::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%) translateX(-4px);
  font-size: 16px;
  color: var(--orion-muted);
  opacity: 0;
  transition:
    opacity 200ms ease,
    transform 200ms ease;
}

.ashby-job-posting-brief:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* ── Posting detail ────────────────────────────────────────────────────── */

.ashby-job-board-back-to-all-jobs-button {
  font-family: var(--orion-font-body) !important;
  font-size: 14px !important;
  color: var(--orion-muted) !important;
  background: transparent !important;
  border: none !important;
  padding-left: 0 !important;
  box-shadow: none !important;
}

/* Ashby styles this as a full button: hover fills it, drops a `0 6px 10px`
   shadow, and flips the label AND arrow to white. We keep the fill transparent,
   so their shadow was left hanging around nothing — reading as a clipped pill —
   and the white arrow disappeared against the page. Reduce hover to a colour
   shift, and let the arrow inherit the label colour in both states. */
.ashby-job-board-back-to-all-jobs-button:hover {
  color: var(--orion-dark) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ashby-job-board-back-to-all-jobs-button svg {
  fill: currentColor !important;
}

.ashby-job-posting-heading {
  font-family: var(--orion-font-display) !important;
  font-size: 30px !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  color: var(--orion-brown) !important;
}

.ashby-job-posting-left-pane > div {
  border-color: var(--orion-hairline-soft) !important;
}

.ashby-job-posting-left-pane h2 {
  font-family: var(--orion-font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: var(--orion-muted) !important;
}

.ashby-job-posting-left-pane p {
  font-family: var(--orion-font-body) !important;
  font-size: 15px !important;
  color: var(--orion-dark) !important;
}

.ashby-job-posting-right-pane h2,
.ashby-job-posting-right-pane h3 {
  font-family: var(--orion-font-display) !important;
  font-weight: 400 !important;
  color: var(--orion-brown) !important;
}

.ashby-job-posting-right-pane p,
.ashby-job-posting-right-pane li {
  font-family: var(--orion-font-body) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: var(--orion-muted) !important;
}

/* Ashby lays each tab out in a fixed 200px slot but left-aligns the label,
   while the active-tab underline spans the whole slot — so the underline
   overshoots the word by ~110px. Fill the slot and centre the label instead,
   which lands it on the same centre as the underline. */
.ashby-job-posting-right-pane-overview-tab,
.ashby-job-posting-right-pane-application-tab {
  font-family: var(--orion-font-body) !important;
  font-size: 15px !important;
  color: var(--orion-muted) !important;
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}

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

/* ── Application form ──────────────────────────────────────────────────── */

.ashby-application-form-autofill-input-root {
  background: rgba(40, 26, 6, 0.03) !important;
  border: 1px solid var(--orion-hairline-soft) !important;
  border-radius: 14px !important;
}

/* The card above sits inside a pane Ashby pads `24px 16px 0` — no bottom. Any
   border on the pane therefore lands flush against the card's bottom edge, so
   drop the pane's box entirely and keep only side padding, which aligns the
   card with the input column below it. */
.ashby-application-form-autofill-pane {
  background: transparent !important;
  border: none !important;
  padding: 0 16px 8px !important;
}

.ashby-application-form-autofill-input-title {
  font-family: var(--orion-font-display) !important;
  font-weight: 400 !important;
  color: var(--orion-dark) !important;
}

.ashby-application-form-autofill-input-description {
  font-family: var(--orion-font-body) !important;
  color: var(--orion-muted) !important;
}

.ashby-application-form-question-title {
  font-family: var(--orion-font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--orion-dark) !important;
}

.ashby-application-form-question-description {
  font-family: var(--orion-font-body) !important;
  font-size: 13px !important;
  color: var(--orion-muted) !important;
}

/* Questions with no description still render as `<div><p></p></div>`, which
   reserves a blank line and leaves those fields with a wider label-to-input
   gap than the rest of the form. `:empty` alone can't match it — the empty
   paragraph is a child — hence `:has()`. */
.ashby-application-form-question-description:has(> p:empty:only-child) {
  display: none !important;
}

.ashby-application-form-field-entry input:not([type="file"]),
.ashby-application-form-field-entry select,
.ashby-application-form-field-entry textarea {
  font-family: var(--orion-font-body) !important;
  font-size: 15px !important;
  color: var(--orion-dark) !important;
  background: var(--orion-surface) !important;
  border: 1px solid var(--orion-hairline) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  box-shadow: none !important;
  transition:
    border-color 200ms ease,
    box-shadow 200ms ease;
}

.ashby-application-form-field-entry input::placeholder,
.ashby-application-form-field-entry textarea::placeholder {
  color: rgba(96, 84, 62, 0.55) !important;
}

.ashby-application-form-field-entry input:focus,
.ashby-application-form-field-entry select:focus,
.ashby-application-form-field-entry textarea:focus {
  border-color: var(--orion-blue) !important;
  box-shadow: 0 0 0 3px rgba(37, 122, 244, 0.15) !important;
  outline: none !important;
}

/* Secondary buttons: "Upload file" / "Upload File" in the resume + autofill
   fields. Hashed classes only, so scope by their stable ancestors. */
.ashby-application-form-field-entry button,
.ashby-application-form-autofill-pane button {
  font-family: var(--orion-font-display) !important;
  font-size: 14px !important;
  color: var(--orion-dark) !important;
  background: var(--orion-surface) !important;
  border: 1px solid var(--orion-hairline) !important;
  border-radius: 10px !important;
  transition:
    border-color 200ms ease,
    background-color 200ms ease;
}

.ashby-application-form-field-entry button:hover,
.ashby-application-form-autofill-pane button:hover {
  border-color: rgba(40, 26, 6, 0.24) !important;
  background: rgba(255, 253, 248, 0.6) !important;
}

/* Combobox chevron toggles (e.g. the Location field) sit inside their input and
   must not pick up the standalone-button chrome above. */
.ashby-application-form-field-entry input[role="combobox"] + button,
.ashby-application-form-field-entry input[role="combobox"] + button:hover {
  background: transparent !important;
  border: none !important;
  color: var(--orion-muted) !important;
}

/* Primary CTAs: the form submit and the "Apply for this job" button on the
   overview tab. Matches the site's `variant="navy"` button. */
.ashby-application-form-submit-button,
.ashby-job-posting-right-pane a > button {
  font-family: var(--orion-font-display) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #fff !important;
  background: var(--orion-navy) !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 14px 24px !important;
  text-decoration: none !important;
  transition: filter 200ms ease;
}

.ashby-application-form-submit-button:hover,
.ashby-job-posting-right-pane a > button:hover {
  filter: brightness(1.15);
}

.ashby-application-form-submit-button:active,
.ashby-job-posting-right-pane a > button:active {
  transform: translateY(1px);
}

/* ── Focus ─────────────────────────────────────────────────────────────── */

/* One `#root :focus-visible` rule used to cover the whole board; the whitelist
   forces an explicit list, so anything focusable Ashby adds later falls back to
   the UA ring until it is added here. Form fields are deliberately absent —
   they get the blue border + soft ring above instead. No `border-radius` here
   either, so the outline follows each element's own corners. */
.ashby-job-posting-brief-list a:focus-visible,
.ashby-job-board-filter:focus-visible,
.ashby-job-board-reset-filters-label:focus-visible,
.ashby-job-board-back-to-all-jobs-button:focus-visible,
.ashby-job-posting-right-pane-overview-tab:focus-visible,
.ashby-job-posting-right-pane-application-tab:focus-visible,
.ashby-job-posting-right-pane a:focus-visible,
.ashby-application-form-field-entry button:focus-visible,
.ashby-application-form-autofill-pane button:focus-visible,
.ashby-application-form-submit-button:focus-visible {
  outline: 2px solid var(--orion-blue) !important;
  outline-offset: 2px !important;
}

/* ── Narrow viewports ─────────────────────────────────────────────────── */

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

  .ashby-department-heading,
  .ashby-department-heading-level {
    font-size: 17px !important;
    margin-top: 28px !important;
  }

  .ashby-job-posting-brief-title {
    font-size: 16px !important;
  }

  .ashby-job-posting-brief {
    padding: 16px 32px 16px 10px !important;
  }

  .ashby-job-posting-heading {
    font-size: 24px !important;
  }
}

/* ── Reduced motion ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .ashby-job-posting-brief,
  .ashby-job-posting-brief::after,
  .ashby-job-board-filter,
  .ashby-application-form-submit-button {
    transition: none !important;
  }
}