/* ============================================================
   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 job-description rich text and its surrounding pane (including
   the Apply button) now have real, documented classes —
   ashby-job-posting-description-container / ashby-job-posting-
   description — added by Ashby's engineering team after we flagged
   that the only way to reach this element used to be an undocumented,
   build-generated class (e.g. "_description_..."). Style them
   directly; no filter tricks needed. Verified live: none of the
   nested elements (p, h2, li, strong) carry their own inline color,
   so overriding color once at the container level cascades cleanly
   to all of them. Links already render in the brand pink on their
   own — Ashby wires link color to the same --colorPrimary600 token
   set at :root above, so nothing to override there. The "Apply for
   this Job" button lives inside description-container too; it's
   already themed off --colorPrimary600 as well (pink fill, white
   text) and needs no extra styling now that nothing upstream is
   filtering it. */
.ashby-job-posting-description-container {
  background-color: var(--sc-card-bg) !important;
}

.ashby-job-posting-description {
  color: var(--sc-text) !important;
  font-family: var(--sc-font-mono);
  font-size: 0.9375rem;
  line-height: 1.7;
}

.ashby-job-posting-description p,
.ashby-job-posting-description li,
.ashby-job-posting-description strong {
  color: var(--sc-text) !important;
}

.ashby-job-posting-description h1,
.ashby-job-posting-description h2,
.ashby-job-posting-description h3 {
  font-family: var(--sc-font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sc-cyan) !important;
}

.ashby-job-posting-description a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ashby-job-posting-description a:hover {
  color: var(--sc-pink-strong) !important;
}

.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 — a flat,
   documented class, so a direct override lands cleanly with no
   positional tricks needed. Styled to match the site's card language
   (dark fill, colored accent border, glow) instead of fighting
   Ashby's alert colors piece by piece. */
.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);
}

/* --- 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;
  }
}