/* ============================================================
   Swamp Club — Ashby Job Board Custom CSS
   ============================================================
   Skins Ashby's default job board to match swamp-club.com:
   black background, neon green / cyan / pink accent system,
   Orbitron display type, JetBrains Mono body/UI type, Chakra
   Petch for small uppercase HUD-style labels.

   HOW TO USE
   1. Ashby Admin → Job Board → Custom CSS → upload this file.
   2. Also set these under Job Board → Theme (this keeps the
      CSS variables below in sync with Ashby's own admin controls,
      per Ashby's warning comment in their example stylesheet):
        Brand Color:        #EC4899
        Brand Color (Dark): #BE185D
   3. Use Ashby's live preview to check every screen (list, single
      posting, application form, confirmation) before publishing —
      Ashby doesn't publish a full list of internal class names, so
      a couple of elements outside the documented hooks below may
      still need a manual nudge after you see it rendered.
   ============================================================ */

/* --- Brand fonts (Google Fonts, loaded via @import at-rule) --- */
@import url("https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Orbitron:wght@600;700;800;900&display=swap");

/* --- Root tokens --- */
:root {
  /* Brand Color (Dark) — hover / active state. Keep in sync with
     Job Board → Theme → Brand Color (Dark) in the Ashby admin. */
  --colorPrimary900: #be185d;

  /* Brand Color — base link/accent color. Keep in sync with
     Job Board → Theme → Brand Color in the Ashby admin. */
  --colorPrimary600: #ec4899;

  --widthMaxJobBoard: 900px;

  /* Sharp, minimal corners — swamp-club.com never rounds past 2px. */
  --borderRadiusContainer: 2px;
  --borderRadiusControl: 2px;
  --borderRadiusButton: 2px;

  --fontFamily:
    "JetBrains Mono",
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Courier New",
    monospace;

  /* Page background — swamp-club.com's near-black. */
  --colorAppBackground: #0a0a0a;

  /* Local tokens (not read by Ashby directly, reused below so every
     rule stays in sync if you retune the palette later).
     --sc-card-bg is a SOLID/opaque color, not translucent — several
     of Ashby's own containers ship with an opaque white background
     by default, and a translucent overlay can't cover that up. */
  --sc-bg: #0a0a0a;
  --sc-card-bg: #0d0e11;
  --sc-card-bg-hover: #15171c;
  --sc-border: rgba(255, 255, 255, 0.08);
  --sc-border-strong: rgba(255, 255, 255, 0.16);
  --sc-text: #e5e7eb;
  --sc-text-muted: #9ca3af;
  --sc-green: #4ade80;
  --sc-green-glow: rgba(57, 255, 20, 0.35);
  --sc-cyan: #22d3ee;
  --sc-cyan-glow: rgba(34, 211, 238, 0.35);
  --sc-pink: #ec4899;
  --sc-pink-strong: #ff2d95;
  --sc-pink-glow: rgba(255, 0, 153, 0.35);
  --sc-font-display: "Orbitron", sans-serif;
  --sc-font-hud: "Chakra Petch", sans-serif;
  --sc-font-mono: "JetBrains Mono", ui-monospace, monospace;
}

/* ============================================================
   Job board list — heading, count, filters
   ============================================================ */

.ashby-job-board-heading {
  font-family: var(--sc-font-display);
  font-weight: 700;
  color: var(--sc-green);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-shadow: 0 0 20px var(--sc-green-glow);
}

.ashby-job-board-heading-count {
  font-family: var(--sc-font-mono);
  color: var(--sc-cyan);
  opacity: 0.8;
  letter-spacing: 0.05em;
}

.ashby-job-board-filters-label,
.ashby-job-board-reset-filters-label {
  font-family: var(--sc-font-hud);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.6875rem;
  color: var(--sc-cyan);
}

.ashby-job-board-reset-filters-label {
  color: var(--sc-text-muted);
  cursor: pointer;
}
.ashby-job-board-reset-filters-label:hover {
  color: var(--sc-pink);
}

.ashby-job-board-filter {
  font-family: var(--sc-font-mono);
  background-color: var(--sc-card-bg) !important;
  color: var(--sc-text) !important;
  border: 1px solid var(--sc-border);
  border-radius: var(--borderRadiusControl);
}
.ashby-job-board-filter:focus-visible {
  outline: none;
  border-color: var(--sc-cyan);
  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.25);
}

/* --- Department / team grouping --- */

.ashby-department-heading {
  font-family: var(--sc-font-hud);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.75rem;
  color: var(--sc-cyan);
}

.ashby-department-heading-level {
  font-family: var(--sc-font-hud);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.6875rem;
  color: var(--sc-pink);
  opacity: 0.85;
}

/* --- Individual posting cards (the "brief" list) --- */

.ashby-job-posting-brief-list {
  background-color: var(--sc-bg) !important;
}

.ashby-job-posting-brief {
  background-color: var(--sc-card-bg) !important;
  border: 1px solid var(--sc-border);
  border-radius: var(--borderRadiusContainer);
  transition: background-color 0.2s ease, border-color 0.2s ease,
    transform 0.2s ease, box-shadow 0.2s ease;
  margin-bottom: 10px;
}
/* Ashby's own default hover state swaps the card to a light
   background, which turns the white title text unreadable. Pin the
   background explicitly here (and !important it) so it can't win. */
.ashby-job-posting-brief:hover {
  background-color: var(--sc-card-bg-hover) !important;
  border-color: rgba(34, 211, 238, 0.6);
  box-shadow: 0 0 24px rgba(34, 211, 238, 0.15);
  transform: translateY(-1px);
}

.ashby-job-posting-brief-title {
  font-family: var(--sc-font-mono);
  font-weight: 600;
  color: #ffffff !important;
}

.ashby-job-posting-brief-department-heading {
  font-family: var(--sc-font-hud);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--sc-cyan) !important;
}

.ashby-job-posting-brief-department-heading-level {
  font-family: var(--sc-font-hud);
  text-transform: uppercase;
  color: var(--sc-pink) !important;
  opacity: 0.85;
}

.ashby-job-posting-brief-details {
  font-family: var(--sc-font-mono);
  color: var(--sc-text-muted) !important;
  font-size: 0.8125rem;
}

/* ============================================================
   Single job posting page
   ============================================================ */

.ashby-job-posting-header {
  border-bottom: 1px solid var(--sc-border);
}

.ashby-job-posting-heading {
  font-family: var(--sc-font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #ffffff !important;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.12);
}

.ashby-job-posting-left-pane {
  background-color: var(--sc-bg) !important;
  color: var(--sc-text) !important;
  font-family: var(--sc-font-mono);
}

.ashby-job-posting-right-pane {
  background-color: var(--sc-card-bg) !important;
  color: var(--sc-text) !important;
  border: 1px solid var(--sc-border);
  border-radius: var(--borderRadiusContainer);
}

.ashby-job-posting-right-pane-tab-slider {
  background-color: var(--sc-pink);
  box-shadow: 0 0 10px var(--sc-pink-glow);
}

/* These are the small "Overview" / "Application" tab-switcher labels
   themselves — confirmed via live DOM inspection to be plain <span>
   tags, NOT the content panel (that was my mistake in an earlier
   pass). Ashby already colors the active one with your Brand Color,
   so just bring the type in line with the rest of the site. */
.ashby-job-posting-right-pane-overview-tab,
.ashby-job-posting-right-pane-application-tab {
  font-family: var(--sc-font-mono);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* The actual job-description / application-form content lives in an
   Ashby-internal class (e.g. "_description_...") that isn't in the
   documented ~30 — so we can't select it by name. Live inspection
   showed it's always the <div> that's a *direct child* of this
   documented container (its only sibling is a <nav> for the tab bar),
   which gives us a validator-safe way to reach it without knowing its
   real class name. It ships with an opaque white background and
   Ashby's own dark text color baked directly onto each paragraph tag
   — colors we can't override individually — so instead of fighting
   them we invert the whole panel as one unit: pin it to a known
   white-bg/black-text starting point, then flip it with a filter so
   it lands on black-bg/white-text. Scoping to "> div" (not a bare
   "div" descendant selector) matters: the panel itself contains
   further nested <div>s, and filters compound on nested elements, so
   filtering every div inside would invert twice and cancel back out
   on the inner text. hue-rotate(180deg) un-shifts any colored text
   (e.g. links) that invert() would otherwise skew.
   Both background AND color are pinned here on purpose — text inside
   this div inherits color from `.ashby-job-posting-right-pane` above
   (deliberately light, for the rest of that panel), and without
   re-pinning it to black *before* the filter runs, that inherited
   light text also gets inverted right along with the background —
   light-on-white becomes dark-on-black, i.e. invisible again. Forcing
   both ends of the swap here is what actually guarantees contrast.
   Trade-off: an actual photo embedded in a JD would invert too — a
   non-issue for text-only postings like this one. */
.ashby-job-posting-right-pane > div {
  background-color: #ffffff !important;
  color: #000000 !important;
  filter: invert(1) hue-rotate(180deg);
  font-family: var(--sc-font-mono);
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* The Application tab's form wrapper sits in the exact same DOM slot
   as the description div above (both are "the direct-child <div> of
   .ashby-job-posting-right-pane", just whichever one is active) — CSS
   has no way to tell those two apart structurally, so the rule above
   was inverting the application form too, right on top of its
   already-correct dark styling (from .ashby-application-form-container
   further down this file), undoing it: white bg, black text.
   Fix: apply the identical filter again here, one level deeper. Two
   invert(1) hue-rotate(180deg) filters on nested elements cancel each
   other out exactly, so everything inside the form renders as if
   neither filter existed — i.e. exactly as .ashby-application-form-
   container already styles it below. */
.ashby-application-form-container {
  filter: invert(1) hue-rotate(180deg);
}

.ashby-job-board-back-to-all-jobs-button {
  font-family: var(--sc-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.75rem;
  color: var(--sc-cyan);
  border: none;
  background: none;
}
.ashby-job-board-back-to-all-jobs-button:hover {
  color: var(--sc-pink);
}

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

.ashby-application-form-container {
  background-color: var(--sc-bg) !important;
  color: var(--sc-text) !important;
  font-family: var(--sc-font-mono);
}

.ashby-application-form-section-container {
  border: 1px solid var(--sc-border);
  border-radius: var(--borderRadiusContainer);
  background-color: var(--sc-card-bg) !important;
  color: var(--sc-text) !important;
}

.ashby-application-form-section-header-title {
  font-family: var(--sc-font-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sc-green) !important;
  font-size: 1rem;
}

.ashby-application-form-section-header-description,
.ashby-application-form-question-description {
  font-family: var(--sc-font-mono);
  color: var(--sc-text-muted) !important;
  font-size: 0.8125rem;
}

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

.ashby-application-form-field-entry input,
.ashby-application-form-field-entry textarea,
.ashby-application-form-field-entry select {
  font-family: var(--sc-font-mono);
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--sc-border);
  color: var(--sc-text) !important;
  border-radius: var(--borderRadiusControl);
}
.ashby-application-form-field-entry input:focus,
.ashby-application-form-field-entry textarea:focus,
.ashby-application-form-field-entry select:focus {
  outline: none;
  border-color: var(--sc-cyan);
  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.25);
}

/* Uploaded-file chip (the pill that shows the filename after you
   attach a resume) — confirmed live via a test upload: it's an
   Ashby-internal "_file_..." class, two levels inside the documented
   field-entry container, with its own off-white background that our
   input/textarea/select rule above never reaches. No name to target
   directly, so — same trick as the right-pane fix — reach it by
   position: two nested direct-child divs under the one documented
   anchor. Verified against the live page before shipping. */
.ashby-application-form-field-entry > div > div {
  background-color: var(--sc-card-bg) !important;
  color: var(--sc-text) !important;
}

.ashby-application-form-texting-consent-description {
  color: var(--sc-text-muted);
  font-size: 0.75rem;
}

/* --- Resume autofill uploader --- */

.ashby-application-form-autofill-uploader {
  border: 1px dashed var(--sc-border-strong);
  border-radius: var(--borderRadiusContainer);
  background-color: var(--sc-card-bg) !important;
  color: var(--sc-text) !important;
}

.ashby-application-form-autofill-input-root[data-state="drag"] {
  border-color: var(--sc-cyan);
  box-shadow: 0 0 20px rgba(34, 211, 238, 0.25);
}

.ashby-application-form-autofill-input-drag-layer[data-state="active"] {
  background-color: rgba(34, 211, 238, 0.08);
}

.ashby-application-form-autofill-input-title {
  font-family: var(--sc-font-hud);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sc-text);
}

.ashby-application-form-autofill-input-description {
  color: var(--sc-text-muted);
}

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

.ashby-application-form-autofill-input-form-alert[data-highlight="positive"] {
  color: var(--sc-green);
}
.ashby-application-form-autofill-input-form-alert[data-highlight="negative"] {
  color: #f87171;
}

/* --- Submit button — matches the outline-fill CTA used across
   swamp-club.com's pricing tiers: transparent + colored border by
   default, fills solid with black text on hover. --- */

.ashby-application-form-submit-button {
  font-family: var(--sc-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.75rem 1.5rem;
  background-color: transparent;
  border: 2px solid var(--sc-pink);
  color: var(--sc-pink);
  border-radius: var(--borderRadiusButton);
  transition: background-color 0.2s ease, color 0.2s ease,
    box-shadow 0.2s ease;
  animation: sc-pulse 3s ease-in-out infinite;
}
.ashby-application-form-submit-button:hover {
  background-color: var(--sc-pink);
  color: #000000;
  box-shadow: 0 0 30px var(--sc-pink-glow);
}

@keyframes sc-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(255, 0, 153, 0);
  }
  50% {
    box-shadow: 0 0 16px var(--sc-pink-glow);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ashby-application-form-submit-button {
    animation: none;
  }
}

/* Ashby's default here is a solid light-green alert box — same
   "opaque light background we can't reach individually" pattern as
   everywhere else in this file, just via a flat class this time
   rather than an undocumented nested one, so a direct override should
   land cleanly. Styled to match the site's card language (dark fill,
   colored accent border, glow) instead of fighting Ashby's alert
   colors piece by piece.
   Verified live via a real test submission: the border/dark-fill/text
   colors below DO apply correctly to this element — but they were
   getting undone by the JD-panel filter fix above. See the next rule
   for why and how that's fixed. */
.ashby-application-form-success-container,
.ashby-application-form-failure-container,
.ashby-application-form-blocked-application-container {
  background-color: var(--sc-card-bg) !important;
  color: var(--sc-text) !important;
  border-radius: var(--borderRadiusContainer);
  font-family: var(--sc-font-mono);
  padding: 1rem 1.25rem;
}
.ashby-application-form-success-container {
  border: 1px solid var(--sc-green);
  border-left: 3px solid var(--sc-green);
  box-shadow: 0 0 20px rgba(57, 255, 20, 0.15);
}
.ashby-application-form-failure-container,
.ashby-application-form-blocked-application-container {
  border: 1px solid #f87171;
  border-left: 3px solid #f87171;
  box-shadow: 0 0 20px rgba(248, 113, 113, 0.15);
}

/* Same root cause as the application-form-container fix above: after
   you submit, Ashby swaps the form out for this success/failure/
   blocked box in that exact same DOM slot — the direct-child <div> of
   .ashby-job-posting-right-pane that the JD-panel rule blanket-inverts
   to fix the *description* panel's undocumented white background.
   That inversion was undoing this box's own (correct) dark styling
   right back to light-bg/dark-text, the same way it was undoing the
   form. Confirmed live via a real test submission (before this fix:
   light-gray box, black text, dark-looking border — the inverted
   image of the colors set above; after: renders exactly as styled).
   Fix is identical: apply the same cancelling filter again here. */
.ashby-application-form-success-container,
.ashby-application-form-failure-container,
.ashby-application-form-blocked-application-container {
  filter: invert(1) hue-rotate(180deg);
}

/* --- Surveys --- */

.ashby-survey-form-container {
  font-family: var(--sc-font-mono);
  border: 1px solid var(--sc-border);
  border-radius: var(--borderRadiusContainer);
  background-color: var(--sc-card-bg) !important;
  color: var(--sc-text) !important;
}

/* ============================================================
   Small screens — Orbitron's wide tracking + all-caps runs long;
   ease it back so headings don't wrap awkwardly on mobile.
   ============================================================ */
@media (max-width: 640px) {
  .ashby-job-board-heading,
  .ashby-job-posting-heading {
    letter-spacing: 0.02em;
  }
}