/* stylelint-disable */
/* ==========================================================================
   Future Media: Ashby Job Board custom CSS  (v2)
   Tokens taken from Figma › FutureMedia-Website › "D - Home"
   (Careers & capabilities + CTA sections). Design is not final:
   change the --fm-* tokens below and everything follows.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600&display=swap");

/* ---------- Brand tokens (from Figma variables) ---------- */
:root {
  --fm-bg:            #121212;  /* colors/background/bg-primary            */
  --fm-surface:       #0a0a0a;  /* colors/background/bg-primary-solid      */
  --fm-surface-hover: #1a1a1a;
  --fm-border:        #2b2b2b;  /* colors/border/border-secondary          */
  --fm-hairline: rgba(255, 255, 255, 0.08); /* colors/gray-(alpha)/800     */
  --fm-brand:         #c81e17;  /* colors/background/bg-brand-solid        */
  --fm-brand-hover:   #a8170f;
  --fm-brand-deep:    #7d1210;  /* colors/background/bg-brand-section      */
  --fm-text:          #f5f5f5;  /* colors/text/text-primary (900)          */
  --fm-text-2:        #d1d1d1;  /* colors/text/text-secondary (700)        */
  --fm-text-3:        #a3a3a3;  /* meta text (derived)                     */

  /* ---------- Ashby variables ----------
     Also update Ashby admin → Theme settings to
     primary #C81E17 / dark #0A0A0A (currently #F11D1D / #1d1b3e). */
  --colorPrimary900: var(--fm-brand);
  --colorPrimary600: var(--fm-brand);

  /* Ashby's neutral scale is built for light boards; flipped for dark */
  --colorNeutral900: var(--fm-text);
  --colorNeutral800: var(--fm-text);
  --colorNeutral700: var(--fm-text-2);
  --colorNeutral300: var(--fm-border);
  --colorNeutral200: var(--fm-border);
  --colorNeutral100: var(--fm-surface-hover);
  --colorNeutral000: var(--fm-surface);

  --colorAppBackground: var(--fm-bg);

  --widthMaxJobBoard: 960px;
  --widthMaxContent: 960px;

  --borderRadiusContainer: 0px;   /* panels are square in the design */
  --borderRadiusControl: 2px;     /* radius-xxs */
  --borderRadiusButton: 2px;      /* radius-xxs */

  --fontFamily: "Schibsted Grotesk", "-apple-system", "BlinkMacSystemFont",
    "Segoe UI", "Helvetica", "Arial", sans-serif;
}

/* Ashby writes admin theme colours on <html>; keep ours on top */
html {
  --colorPrimary900: #c81e17 !important;
  --colorPrimary600: #c81e17 !important;
}

body {
  background: var(--fm-bg);
  color: var(--fm-text);
  font-family: var(--fontFamily);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--fm-text); text-decoration-color: var(--fm-brand); }
a:hover { color: var(--fm-brand); }
::selection { background: var(--fm-brand); color: #fff; }

/* ==========================================================================
   Job board (list page)
   ========================================================================== */

/* Display style: regular weight, tight tracking (Display lg in Figma) */
.ashby-job-board-heading {
  color: var(--fm-text);
  font-weight: 400;
  letter-spacing: -0.02em;
}

.ashby-job-board-heading-count {
  color: var(--fm-brand);
  font-weight: 400;
}

.ashby-job-board-filters-label { color: var(--fm-text-3); }

.ashby-job-board-reset-filters-label {
  color: var(--fm-text-2);
  cursor: pointer;
}
.ashby-job-board-reset-filters-label:hover { color: var(--fm-brand); }

.ashby-job-board-filter {
  color: var(--fm-text);
  background-color: var(--fm-surface);
  background-image: none;
  border: 1px solid var(--fm-border);
  border-radius: var(--borderRadiusControl);
}
.ashby-job-board-filter:hover,
.ashby-job-board-filter:focus { border-color: var(--fm-text-3); }

.ashby-department-heading,
.ashby-job-posting-brief-department-heading {
  color: var(--fm-text);
  font-weight: 500;
}

.ashby-department-heading-level,
.ashby-job-posting-brief-department-heading-level {
  color: var(--fm-text-3);
  font-weight: 400;
}

/* Job rows: stacked panels split by hairlines, like the
   "Careers & capabilities" feature list */
.ashby-job-posting-brief {
  margin-bottom: 0;
  margin-top: -1px;               /* collapse neighbouring borders */
  background-color: var(--fm-surface);
  border: 1px solid var(--fm-border);
  border-radius: 0;
  transition: background-color 0.15s ease-out, box-shadow 0.15s ease-out;
}

.ashby-job-posting-brief:hover,
.ashby-job-posting-brief:focus-within {
  background-color: var(--fm-surface-hover);
  box-shadow: inset 3px 0 0 var(--fm-brand);
}

.ashby-job-posting-brief-title {
  color: var(--fm-text);
  font-weight: 500;               /* Text xl / Medium */
}

.ashby-job-posting-brief-details,
.ashby-job-posting-brief-details > p {
  color: var(--fm-text-2);        /* Text sm / Regular */
}

/* ==========================================================================
   Job posting page
   ========================================================================== */

.ashby-job-board-back-to-all-jobs-button { color: var(--fm-text-2); }
.ashby-job-board-back-to-all-jobs-button:hover { color: var(--fm-brand); }

/* Header gets the CTA section's red-to-dark wash */
.ashby-job-posting-header {
  background: linear-gradient(180deg, rgba(125, 18, 16, 0.8) 0%, rgba(18, 18, 18, 0.8) 100%);
  border-bottom: 1px solid var(--fm-hairline);
}

.ashby-job-posting-heading {
  color: var(--fm-text);
  font-weight: 400;
  letter-spacing: -0.02em;
}

.ashby-job-posting-left-pane { color: var(--fm-text-2); }

.ashby-job-posting-right-pane-tab-slider { background-color: var(--fm-brand); }

.ashby-job-posting-description {
  color: var(--fm-text-2);
  line-height: 1.6;
}
.ashby-job-posting-description h1,
.ashby-job-posting-description h2,
.ashby-job-posting-description h3,
.ashby-job-posting-description strong {
  color: var(--fm-text);
  font-weight: 500;
}
.ashby-job-posting-description li::marker { color: var(--fm-brand); }

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

.ashby-application-form-container { color: var(--fm-text); }

.ashby-application-form-section-header-title {
  color: var(--fm-text);
  font-weight: 500;
}

.ashby-application-form-section-header-description,
.ashby-application-form-question-description,
.ashby-application-form-texting-consent-description { color: var(--fm-text-3); }

.ashby-application-form-question-title {
  color: var(--fm-text);
  font-weight: 500;
}

.ashby-application-form-input-text,
.ashby-application-form-input-textarea,
.ashby-application-form-input-date,
.ashby-application-form-input-dropdown-select,
.ashby-application-form-input-autocomplete {
  color: var(--fm-text);
  background-color: var(--fm-surface);
  border: 1px solid var(--fm-border);
  border-radius: var(--borderRadiusControl);
}

.ashby-application-form-input-text:focus,
.ashby-application-form-input-textarea:focus,
.ashby-application-form-input-autocomplete:focus,
.ashby-application-form-input-dropdown-select:focus {
  border-color: var(--fm-brand);
  outline: 2px solid rgba(200, 30, 23, 0.35);
  outline-offset: 1px;
}

.ashby-application-form-input-text::placeholder,
.ashby-application-form-input-textarea::placeholder { color: var(--fm-text-3); }

.ashby-application-form-input-autocomplete-popup,
.ashby-application-form-input-date-popup {
  background-color: var(--fm-surface);
  border: 1px solid var(--fm-border);
  color: var(--fm-text);
}
.ashby-application-form-input-autocomplete-popup-result[aria-selected="true"] {
  background-color: var(--fm-surface-hover);
  color: var(--fm-text);
  box-shadow: inset 3px 0 0 var(--fm-brand);
}

/* Yes / No */
.ashby-application-form-input-yesno-option {
  background-color: var(--fm-surface);
  border-color: var(--fm-border);
  color: var(--fm-text);
}
.ashby-application-form-input-yesno-option[aria-pressed="true"] {
  background-color: var(--fm-brand);
  border-color: var(--fm-brand);
  color: #fff;
}

/* Checkbox / radio */
.ashby-application-form-input-checkbox-group-option-label,
.ashby-application-form-input-radio-group-option-label { color: var(--fm-text); }
.ashby-application-form-input-checkbox-group-option-checkbox,
.ashby-application-form-input-radio-group-option-radio { accent-color: var(--fm-brand); }

/* File upload + autofill */
.ashby-application-form-input-file-dropzone,
.ashby-application-form-autofill-input-root {
  background-color: var(--fm-surface);
  border: 1px dashed var(--fm-border);
  border-radius: 0;
  color: var(--fm-text-2);
}
.ashby-application-form-autofill-input-root[data-state="drag"] { border-color: var(--fm-brand); }
.ashby-application-form-autofill-input-title { color: var(--fm-text); }
.ashby-application-form-autofill-input-description { color: var(--fm-text-3); }
.ashby-application-form-autofill-input-icon { color: var(--fm-brand); }
.ashby-application-form-input-file-item-name { color: var(--fm-text); }

/* Primary button: matches Figma "Buttons/Button" (brand, skeuomorphic xs) */
.ashby-application-form-submit-button,
.ashby-application-form-input-file-dropzone-upload,
.ashby-application-form-autofill-uploader button {
  background-color: var(--fm-brand);
  border: none;
  border-radius: var(--borderRadiusButton);
  color: #fff;
  font-weight: 600;
  padding: 12px 16px;
  box-shadow:
    0 1px 2px rgba(10, 13, 18, 0.05),
    inset 0 0 0 1px rgba(10, 13, 18, 0.18),
    inset 0 -2px 0 rgba(10, 13, 18, 0.05);
  transition: background-color 0.15s ease-out;
}
.ashby-application-form-submit-button:hover,
.ashby-application-form-input-file-dropzone-upload:hover,
.ashby-application-form-autofill-uploader button:hover {
  background-color: var(--fm-brand-hover);
}
.ashby-application-form-submit-button:focus-visible {
  outline: 2px solid var(--fm-text);
  outline-offset: 2px;
}

.ashby-application-form-success-container {
  color: var(--fm-text);
  border-left: 3px solid var(--fm-brand);
}
.ashby-application-form-failure-container { color: #ff8a80; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}