/* stylelint-disable */
/*
 * Ancep light theme for the Ashby job board
 * Brand colours: #131311 (ink, used for text) and #17827A (teal, accent)
 *
 * Also set the primary colour to #17827A under Ashby admin > Theme settings.
 */

:root {
  /* Ancep palette (light) */
  --ancepPaper: #f4f4f1;          /* fallback page colour while the image loads */
  --ancepInk: #131311;            /* main text */
  --ancepTextMuted: #5f5f58;      /* secondary text */
  --ancepTextSubtle: #8a8a82;     /* placeholders, footnotes */
  --ancepBorder: rgba(19, 19, 17, 0.1);
  --ancepBorderStrong: rgba(19, 19, 17, 0.18);
  --ancepGlass: rgba(255, 255, 255, 0.55);
  --ancepGlassHover: rgba(255, 255, 255, 0.75);
  --ancepField: rgba(255, 255, 255, 0.85);
  --ancepTeal: #17827a;
  --ancepTealHover: #12675f;
  --ancepTealTint: rgba(23, 130, 122, 0.1);
  --ancepNegative: #c2410c;

  /* Ashby variables */
  --colorAppBackground: var(--ancepPaper);
  --colorPrimary900: var(--ancepTeal);
  --colorPrimary600: var(--ancepTealHover);

  --widthMaxContent: 800px;
  --widthMaxJobBoard: 800px;
  --widthMaxSubscriptionPreferences: 600px;

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

  --fontFamily: "Inter", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Helvetica", "Arial", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;

  color-scheme: light;
}

/* ---------- Page background ---------- */

/*
 * Swap the url() to change the image.
 * The gradient on top is a light wash: raise 0.35 to calm the texture, lower to show more of it.
 * Temporary host (Kommodo link expires 9 Dec 2026). Move the image to Ancep's own site.
 */
html,
body {
  background-color: var(--ancepPaper) !important;
  background-image:
    linear-gradient(rgba(250, 250, 247, 0.35), rgba(250, 250, 247, 0.35)),
    url("https://plain-weur-prod-public.komododecks.com/202611/09/aXX9fwRNqB98hoGkrUbg/image.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
  color: var(--ancepInk);
}

body,
body p,
body li,
body span,
body label,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  color: var(--ancepInk);
}

body a {
  color: var(--ancepTeal);
  text-decoration-color: rgba(23, 130, 122, 0.35);
}

body a:hover {
  color: var(--ancepTealHover);
}

::selection {
  background: var(--ancepTeal);
  color: #ffffff;
}

/* Logo header: Ashby makes it sticky with a solid fill; let it scroll away and show the background */
div[class*="_navRoot_"] {
  position: relative !important;
  background-color: transparent !important;
}

/* Footer: no custom class */
body footer {
  background-color: transparent !important;
  border-top-color: var(--ancepBorder) !important;
}

/* Focus: swap Ashby's blue outline for a teal ring */
body input:focus,
body textarea:focus,
body select:focus,
body [role="combobox"]:focus {
  outline: none !important;
  border-color: var(--ancepTeal) !important;
  box-shadow: 0 0 0 3px rgba(23, 130, 122, 0.18) !important;
}

body button:focus-visible,
body a:focus-visible {
  outline: 2px solid var(--ancepTeal) !important;
  outline-offset: 2px;
}

/* ---------- Job board ---------- */

.ashby-job-board-heading {
  color: var(--ancepInk);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.ashby-job-board-heading-count {
  color: var(--ancepTeal);
}

.ashby-job-board-filters-label,
.ashby-job-board-reset-filters-label {
  color: var(--ancepTextMuted);
}

.ashby-job-board-reset-filters-label:hover {
  color: var(--ancepTeal);
}

.ashby-job-board-filter {
  background-color: var(--ancepField);
  border: 1px solid var(--ancepBorderStrong);
  border-radius: var(--borderRadiusControl);
  color: var(--ancepInk);
}

/* Back arrow on the posting page */
.ashby-job-board-back-to-all-jobs-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: var(--ancepTextMuted) !important;
  background-color: transparent !important;
  border-radius: 999px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.ashby-job-board-back-to-all-jobs-button svg,
.ashby-job-board-back-to-all-jobs-button svg path {
  fill: currentColor !important;
  color: inherit !important;
  opacity: 1 !important;
}

.ashby-job-board-back-to-all-jobs-button:hover,
.ashby-job-board-back-to-all-jobs-button:focus-visible {
  color: var(--ancepTeal) !important;
  background-color: var(--ancepTealTint) !important;
}

.ashby-department-heading,
.ashby-job-posting-brief-department-heading {
  color: var(--ancepInk);
  font-weight: 600;
}

.ashby-department-heading-level,
.ashby-job-posting-brief-department-heading-level {
  color: var(--ancepTextMuted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8em;
}

.ashby-job-posting-brief-list a {
  text-decoration: none;
}

/* Job cards: frosted glass */
.ashby-job-posting-brief {
  margin-bottom: 10px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.45) 100%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  border-radius: var(--borderRadiusContainer);
  box-shadow:
    0 8px 28px rgba(19, 19, 17, 0.07),
    0 1px 2px rgba(19, 19, 17, 0.05) !important;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.ashby-job-posting-brief:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.6) 100%) !important;
  box-shadow:
    0 12px 32px rgba(19, 19, 17, 0.1),
    0 1px 2px rgba(19, 19, 17, 0.05) !important;
  transform: translateY(-1px);
}

.ashby-job-posting-brief-title {
  color: var(--ancepInk);
  font-weight: 600;
}

.ashby-job-posting-brief:hover .ashby-job-posting-brief-title {
  color: var(--ancepTeal);
}

.ashby-job-posting-brief-details,
.ashby-job-posting-brief-details * {
  color: var(--ancepTextMuted);
}

/* ---------- Job posting page ---------- */

/* Ashby's default heading and label colour is a blue-grey; force ink */
.ashby-job-posting-header,
.ashby-job-posting-heading {
  color: var(--ancepInk) !important;
  letter-spacing: -0.02em;
}

/* Left pane: Ashby wraps the details in an unclassed white box; flatten it */
.ashby-job-posting-left-pane {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.ashby-job-posting-left-pane * {
  background-color: transparent !important;
  box-shadow: none !important;
}

.ashby-job-posting-left-pane hr,
.ashby-job-posting-left-pane div {
  border-color: var(--ancepBorder) !important;
}

.ashby-job-posting-left-pane h2,
.ashby-job-posting-left-pane h3 {
  color: var(--ancepTextMuted) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.75em;
}

.ashby-job-posting-left-pane p,
.ashby-job-posting-left-pane span,
.ashby-job-posting-left-pane a {
  color: var(--ancepInk) !important;
}

.ashby-job-posting-right-pane {
  color: var(--ancepInk);
}

/* Tab bar: no custom class; sticky with a white fill on mobile */
.ashby-job-posting-right-pane > nav,
.ashby-job-posting-right-pane nav[class*="tabs"] {
  background-color: rgba(250, 250, 247, 0.75) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-color: var(--ancepBorder) !important;
  box-shadow: none !important;
}

@media (min-width: 768px) {
  .ashby-job-posting-right-pane > nav,
  .ashby-job-posting-right-pane nav[class*="tabs"] {
    background-color: transparent !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

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

.ashby-job-posting-right-pane-overview-tab,
.ashby-job-posting-right-pane-application-tab {
  color: var(--ancepTextMuted);
}

/* Active state lives on the parent <a role="tab"> */
[aria-selected="true"] > .ashby-job-posting-right-pane-overview-tab,
[aria-selected="true"] > .ashby-job-posting-right-pane-application-tab,
a:hover > .ashby-job-posting-right-pane-overview-tab,
a:hover > .ashby-job-posting-right-pane-application-tab {
  color: var(--ancepInk);
}

.ashby-job-posting-description-container {
  background-color: transparent;
}

.ashby-job-posting-description,
.ashby-job-posting-description p,
.ashby-job-posting-description li,
.ashby-job-posting-description span {
  color: var(--ancepInk);
  line-height: 1.65;
}

.ashby-job-posting-description h1,
.ashby-job-posting-description h2,
.ashby-job-posting-description h3,
.ashby-job-posting-description strong {
  color: var(--ancepInk);
}

.ashby-job-posting-description hr {
  border-color: var(--ancepBorder);
}

.ashby-job-posting-description li::marker {
  color: var(--ancepTeal);
}

/* ---------- Application form: structure ---------- */

/* Ashby adds a drop shadow around the form on narrower screens */
.ashby-application-form-container,
.ashby-application-form-autofill-pane,
.ashby-survey-form-container {
  background-color: transparent !important;
  box-shadow: none !important;
  color: var(--ancepInk);
}

.ashby-application-form-section-container {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.ashby-application-form-section-header-title {
  color: var(--ancepInk);
  font-weight: 600;
}

.ashby-application-form-section-header-description,
.ashby-application-form-question-description,
.ashby-application-form-texting-consent-description,
.ashby-application-blocking-disclosure {
  color: var(--ancepTextMuted);
}

/* Hints like "Optional" are wrapped in a <p> */
.ashby-application-form-question-description *,
.ashby-application-form-section-header-description *,
.ashby-application-form-texting-consent-description * {
  color: var(--ancepTextMuted) !important;
}

.ashby-application-form-question-title,
.ashby-application-form-question-title * {
  color: var(--ancepInk) !important;
  font-weight: 500;
}

/* ---------- Application form: inputs ---------- */

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

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

.ashby-application-form-input-text:hover,
.ashby-application-form-input-textarea:hover,
.ashby-application-form-input-dropdown:hover,
.ashby-application-form-input-autocomplete:hover {
  border-color: rgba(19, 19, 17, 0.3) !important;
}

.ashby-application-form-input-autocomplete[aria-expanded="true"] {
  border-color: var(--ancepTeal) !important;
  box-shadow: 0 0 0 3px rgba(23, 130, 122, 0.18);
}

.ashby-application-form-input-dropdown[data-disabled] {
  opacity: 0.5;
}

.ashby-application-form-input-dropdown-icon {
  color: var(--ancepTextMuted);
  fill: var(--ancepTextMuted);
}

/* Popups: autocomplete and date picker */

.ashby-application-form-input-autocomplete-popup,
.ashby-application-form-input-date-popup {
  background-color: #ffffff;
  border: 1px solid var(--ancepBorder);
  border-radius: var(--borderRadiusControl);
  box-shadow: 0 12px 32px rgba(19, 19, 17, 0.12);
  color: var(--ancepInk);
}

.ashby-application-form-input-autocomplete-popup-result {
  color: var(--ancepInk);
}

.ashby-application-form-input-autocomplete-popup-result[aria-selected="true"],
.ashby-application-form-input-autocomplete-popup-result:hover {
  background-color: var(--ancepTealTint);
}

.ashby-application-form-input-autocomplete-popup-empty,
.ashby-application-form-input-autocomplete-popup-loading {
  color: var(--ancepTextMuted);
}

.ashby-application-form-input-date-popup-header-button {
  color: var(--ancepTextMuted);
  background: transparent;
}

.ashby-application-form-input-date-popup-header-button:hover {
  color: var(--ancepTeal);
}

/* Checkboxes and radios */

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

.ashby-application-form-input-checkbox-group-option[data-checked] .ashby-application-form-input-checkbox-group-option-checkbox,
.ashby-application-form-input-radio-group-option[data-checked] .ashby-application-form-input-radio-group-option-radio {
  background-color: var(--ancepTeal);
  border-color: var(--ancepTeal);
}

.ashby-application-form-input-checkbox-group-option[data-disabled],
.ashby-application-form-input-radio-group-option[data-disabled] {
  opacity: 0.5;
}

/* Yes / No */

.ashby-application-form-input-yesno[data-disabled] {
  opacity: 0.5;
}

.ashby-application-form-input-yesno-option {
  background-color: var(--ancepField);
  border: 1px solid var(--ancepBorderStrong);
  color: var(--ancepInk);
}

.ashby-application-form-input-yesno-option[aria-pressed="true"] {
  background-color: var(--ancepTeal);
  border-color: var(--ancepTeal);
  color: #ffffff;
}

/* File upload: Ashby draws the dashed box itself */

.ashby-application-form-input-file,
.ashby-application-form-input-file > div,
.ashby-application-form-input-file-dropzone > div {
  border-color: rgba(19, 19, 17, 0.22) !important;
  background-color: transparent !important;
}

.ashby-application-form-input-file-dropzone {
  background-color: rgba(255, 255, 255, 0.4) !important;
  border-radius: var(--borderRadiusControl);
}

.ashby-application-form-input-file-dropzone-instructions {
  color: var(--ancepTextMuted);
}

.ashby-application-form-input-file-dropzone-upload {
  background-color: #ffffff;
  border: 1px solid var(--ancepTeal);
  border-radius: var(--borderRadiusButton);
  color: var(--ancepTeal);
}

.ashby-application-form-input-file-dropzone-upload:hover {
  background-color: var(--ancepTealTint);
}

.ashby-application-form-input-file-item {
  background-color: var(--ancepField);
  border: 1px solid var(--ancepBorder);
  color: var(--ancepInk);
}

.ashby-application-form-input-file-item-delete:hover,
.ashby-application-form-input-education-entry-delete:hover {
  color: var(--ancepNegative);
}

/* Education history */

.ashby-application-form-input-education-entry {
  background-color: var(--ancepGlass);
  border: 1px solid var(--ancepBorder);
  border-radius: var(--borderRadiusControl);
}

.ashby-application-form-input-education-add {
  color: var(--ancepTeal);
  background: transparent;
}

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

.ashby-application-form-autofill-pane {
  background-color: transparent !important;
}

.ashby-application-form-autofill-input-root {
  background-color: var(--ancepGlass) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--borderRadiusContainer);
  box-shadow: 0 4px 16px rgba(19, 19, 17, 0.05);
}

.ashby-application-form-autofill-input-root[data-state="drag"] {
  border-color: var(--ancepTeal);
}

.ashby-application-form-autofill-input-drag-layer,
.ashby-application-form-autofill-input-pending-layer {
  background-color: rgba(250, 250, 247, 0.92);
  color: var(--ancepInk);
}

.ashby-application-form-autofill-input-title {
  color: var(--ancepInk);
  font-weight: 600;
}

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

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

.ashby-application-form-autofill-input-form-alert[data-highlight="negative"] {
  color: var(--ancepNegative);
}

.ashby-application-form-autofill-input-form-alert[data-highlight="positive"] {
  color: var(--ancepTeal);
}

/* ---------- Submit and result states ---------- */

.ashby-application-form-submit-button {
  background-color: var(--ancepTeal) !important;
  border: 1px solid var(--ancepTeal) !important;
  border-radius: var(--borderRadiusButton);
  color: #ffffff !important;
  font-weight: 600;
  transition: background-color 0.15s ease;
  /* Sits outside the form's side padding; line it up with the fields */
  width: calc(100% - 32px) !important;
  margin-left: 16px !important;
  margin-right: 16px !important;
}

.ashby-application-form-submit-button * {
  color: #ffffff !important;
}

.ashby-application-form-submit-button:hover {
  background-color: var(--ancepTealHover) !important;
  border-color: var(--ancepTealHover) !important;
}

.ashby-application-form-submit-button:disabled {
  opacity: 0.6;
}

.ashby-application-form-success-container,
.ashby-application-form-failure-container,
.ashby-application-form-blocked-application-container {
  background-color: var(--ancepGlass);
  border: 1px solid var(--ancepBorder);
  border-radius: var(--borderRadiusContainer);
  color: var(--ancepInk);
}

.ashby-application-form-success-container {
  border-color: var(--ancepTeal);
}

.ashby-application-form-failure-container {
  border-color: var(--ancepNegative);
}

/* "Your form needs corrections" box: no custom class */
.ashby-application-form-container [role="alert"] {
  background-color: rgba(194, 65, 12, 0.07) !important;
  border: 1px solid rgba(194, 65, 12, 0.3) !important;
  color: var(--ancepInk) !important;
}

.ashby-application-form-container [role="alert"] * {
  color: var(--ancepInk) !important;
}

.ashby-application-form-container [role="alert"] a {
  color: var(--ancepNegative) !important;
}