/*
 * Everfit theme for the Ashby job board (jobs.ashbyhq.com/everfit).
 * Upload in Ashby: Admin > Job Boards > Theme (Job Board) > Custom CSS.
 * Source: Figma "Everfit Jobs", section "Ashby" (Default, Filter, Info page — 1440px only).
 * Set Brand color in Ashby to #000000 so the admin color matches the variables below.
 *
 * Layout rules use [class*="_name_"] for Ashby's hashed CSS-module classes, matching the
 * stable part of the name. Re-check them if Ashby ships a redesign.
 */

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

:root {
  --colorAppBackground: #ffffff;
  --colorPrimary900: #000000;
  --colorPrimary600: #222222;
  /* Ashby's focus ring colour, violet by default */
  --colorPrimary500A: rgba(0, 0, 0, 0.12);

  --navDesktopHeight: 100px;
  --navMobileHeight: 64px;

  /* Job list runs full width; the posting page is 1050px of content plus 80px gutters */
  --widthMaxContent: 1210px;
  --widthMaxJobBoard: none;
  --widthMaxSubscriptionPreferences: 600px;

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

  --fontFamily: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Everfit tokens, not read by Ashby */
  --ef-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ef-font-footer: "Chivo Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ef-gutter: 80px;
  --ef-text: #000000;
  --ef-text-body: #111111;
  --ef-text-muted: rgba(0, 0, 0, 0.5);
  --ef-text-body-muted: rgba(17, 17, 17, 0.5);
  --ef-line: #e7e7e7;
  --ef-line-soft: rgba(0, 0, 0, 0.08);
  --ef-fill: #f6f6f6;
  --ef-fill-strong: #eeeeee;
  --ef-footer-text: #eeeeee;
  --ef-input-border: #c7c7c7;
  --ef-input-border-hover: #636363;
  --ef-placeholder: rgba(20, 20, 20, 0.3);
  --ef-error: #f66042;
  --ef-ease: cubic-bezier(0.23, 1, 0.32, 1);
}

/* Black shows below the footer on short pages, matching the footer band */
html {
  background-color: #000000;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--colorAppBackground);
  color: var(--ef-text-body);
  font-family: var(--fontFamily);
}

/* Keeps the footer at the bottom of the viewport when there are few jobs:
   the content block (the element after the nav) grows to fill the gap.
   Ashby rejects id selectors, so the app root (#root) is matched by position. */
body > div:first-of-type {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body > div:first-of-type > [class*="_navRoot_"] + div {
  flex: 1 0 auto;
  width: 100%;
}

/* ---------- Nav ---------- */

/* Centre column hugs the logo so the Back pill has room on phones */
body [class*="_navContainer_"] {
  border-bottom: 0;
  grid-template-columns: 1fr auto 1fr;
  max-width: none;
  padding-inline: var(--ef-gutter);
}

body img[src*="org-theme-wordmark"] {
  height: 31px;
  max-height: none;
  width: auto;
}

/* Ashby renders an icon-only link; the label comes from ::after */
body .ashby-job-board-back-to-all-jobs-button {
  align-items: center;
  background-color: var(--ef-fill-strong);
  border-radius: 20px;
  color: var(--ef-text);
  display: inline-flex;
  font-family: var(--fontFamily);
  font-size: 14px;
  font-weight: 600;
  gap: 2px;
  letter-spacing: -0.04em;
  line-height: 1;
  padding: 6px 10px;
  text-transform: none;
  transition: background-color 0.2s ease;
  white-space: nowrap;
}

body .ashby-job-board-back-to-all-jobs-button::after {
  content: "Back";
}

body .ashby-job-board-back-to-all-jobs-button svg {
  fill: var(--ef-text);
  height: 11px;
  width: 16px;
}

body .ashby-job-board-back-to-all-jobs-button:hover {
  background-color: #e2e2e2;
  color: var(--ef-text);
}

body .ashby-job-board-back-to-all-jobs-button:hover svg {
  fill: var(--ef-text);
}

body .ashby-job-board-back-to-all-jobs-button:focus-visible {
  outline: 2px solid var(--ef-text);
  outline-offset: 2px;
}

/* ---------- Page title (both pages) ---------- */

body [class*="_titles_"] {
  margin: 0;
  max-width: none;
  padding: 60px var(--ef-gutter) 0;
}

.ashby-job-board-heading {
  color: var(--ef-text);
  font-family: var(--fontFamily);
  font-size: 80px;
  font-weight: 400;
  letter-spacing: -0.07em;
  line-height: 1;
}

body .ashby-job-board-heading {
  padding: 0;
}

/* Ashby trims headings with a negative-margin ::before; Figma spacing assumes no trim */
.ashby-job-board-heading::before,
.ashby-job-posting-heading::before,
.ashby-job-posting-brief-title::before {
  display: none;
}

/* The design has no job count next to the title */
.ashby-job-board-heading-count {
  display: none;
}

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

body [class*="_section_"] > [class*="_content_"] {
  margin-bottom: 0;
  padding: 0;
}

body [class*="_filtersContainer_"] {
  background: none;
  margin-top: 24px;
  min-height: 0;
  padding: 0 var(--ef-gutter);
}

.ashby-job-board-filter {
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--ef-fill);
  /* Ashby paints a white gradient over the select */
  background-image: none;
  border: 0;
  border-radius: 10px;
  color: var(--ef-text-muted);
  cursor: pointer;
  font-family: var(--fontFamily);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.2;
  padding: 8px 37px 8px 12px;
}

/* Ashby marks a filter with a value set; unset ones stay grey */
body .ashby-job-board-filter[class*="_filterActive_"] {
  color: var(--ef-text);
}

/* Figma has no hover or focus state for the pills. Chrome treats a mouse click on a
   <select> as :focus-visible, so both are cleared to keep the pill unchanged. */
body .ashby-job-board-filter:focus,
body .ashby-job-board-filter:focus-visible {
  background-color: var(--ef-fill);
  box-shadow: none;
  outline: none;
}

body [class*="_filterIconContainer_"] {
  right: 12px;
}

body [class*="_filterIconContainer_"] svg {
  fill: var(--ef-text);
  height: 13px;
  opacity: 0.5;
  width: 13px;
}

.ashby-job-board-filters-label {
  display: none;
}

.ashby-job-board-reset-filters-label {
  align-items: center;
  color: var(--ef-text-muted);
  font-family: var(--fontFamily);
  font-size: 16px;
  font-weight: 500;
  gap: 4px;
  letter-spacing: -0.04em;
  line-height: 22px;
  text-transform: none;
  transition: color 0.2s ease;
}

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

/* Only shown once a filter is set, as in the Figma "Filter" frame */
body .ashby-job-board-reset-filters-label:disabled {
  display: none;
}

/* Desktop: one row of pills followed by "Reset filters". Below 768px Ashby collapses
   the filters behind its own toggle button, so that layout is left alone. */
@media (min-width: 768px) {
  body [class*="_filtersContainer_"] {
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 15px;
  }

  body [class*="_filtersHeader_"] {
    display: contents;
  }

  body [class*="_filtersContainer_"] .ashby-job-board-reset-filters-label {
    order: 1;
  }

  body [class*="_filters_"]:not([class*="_filtersContainer_"]):not([class*="_filtersHeader_"]) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
}

body [class*="_departments_"] {
  margin-top: 0;
}

/* Department heading with the square marker used on everfit.io/careers */
.ashby-department-heading,
.ashby-job-posting-brief-department-heading {
  align-items: center;
  color: var(--ef-text-body);
  display: flex;
  flex-wrap: nowrap;
  font-family: var(--fontFamily);
  font-size: 16px;
  font-weight: 600;
  gap: 8px;
  letter-spacing: -0.04em;
  line-height: 1;
}

body .ashby-department-heading {
  margin: 80px 0 24px;
  padding: 0 var(--ef-gutter);
}

body .ashby-department-heading::before,
body .ashby-job-posting-brief-department-heading::before {
  background-color: #ff3130;
  content: "";
  display: block;
  flex: 0 0 auto;
  height: 12px;
  width: 12px;
}

/* Brand squares (Innovator, Creative Thinker, Team Player). CSS can't randomise and
   Ashby has no department colours, so they rotate by position. */
body .ashby-department-heading:nth-of-type(3n + 2)::before {
  background-color: #ff59ca;
}

body .ashby-department-heading:nth-of-type(3n)::before {
  background-color: #ffcb31;
}

body .ashby-department-heading-level,
body .ashby-job-posting-brief-department-heading-level {
  color: inherit;
  flex: 0 1 auto;
  font: inherit;
  letter-spacing: inherit;
}

.ashby-job-posting-brief-list {
  border-top: 1px solid var(--ef-line);
  margin-bottom: 0;
}

/* Each role is a full-width row, not a card */
body .ashby-job-posting-brief-list .ashby-job-posting-brief {
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--ef-line);
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  padding: 24px var(--ef-gutter);
  transition: background-color 0.24s var(--ef-ease);
}

body .ashby-job-posting-brief-list .ashby-job-posting-brief:hover {
  background-color: var(--ef-fill);
  box-shadow: none;
}

body .ashby-job-posting-brief-list a:focus-visible {
  outline: none;
}

body .ashby-job-posting-brief-list a:focus-visible > .ashby-job-posting-brief {
  box-shadow: inset 0 0 0 2px var(--ef-text);
}

.ashby-job-posting-brief-title {
  color: var(--ef-text);
  font-family: var(--fontFamily);
  font-size: 48px;
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin: 0 0 12px;
}

body .ashby-job-posting-brief-details {
  margin: 0;
}

/* Ashby joins the details into one string, so they sit in a single chip */
body .ashby-job-posting-brief-details p {
  background-color: var(--ef-fill);
  border-radius: 20px;
  color: var(--ef-text-muted);
  display: inline-block;
  font-family: var(--ef-font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 18px;
  margin: 0;
  padding: 4px 10px;
  text-transform: uppercase;
}

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

.ashby-job-posting-heading {
  color: var(--ef-text);
  font-family: var(--fontFamily);
  font-size: 48px;
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1;
}

body .ashby-job-posting-heading {
  padding: 0;
}

body [class*="_content_"][class*="_details_"] {
  margin-bottom: 0;
  margin-top: 40px;
  padding: 0 var(--ef-gutter);
}

/* Info card: label/value rows in a hairline box */
body .ashby-job-posting-left-pane[class] {
  align-self: start;
  background-color: #ffffff;
  border: 1px solid var(--ef-line-soft);
  border-radius: 10px;
  box-shadow: none;
  color: var(--ef-text-body);
  font-family: var(--fontFamily);
  margin-top: 0;
  padding: 0 20px;
}

/* Ashby removes the top border with a :not(...):first-child rule; the doubled class outranks it */
body .ashby-job-posting-left-pane.ashby-job-posting-left-pane[class] {
  border-top: 1px solid var(--ef-line-soft);
}

body .ashby-job-posting-left-pane[class] > div {
  border-bottom: 1px solid var(--ef-line-soft);
  padding: 20px 0;
}

body .ashby-job-posting-left-pane[class] > div:last-child {
  border-bottom: 0;
}

body .ashby-job-posting-left-pane h2 {
  color: var(--ef-text-body-muted);
  font-family: var(--fontFamily);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0 0 8px;
  text-transform: none;
}

body .ashby-job-posting-left-pane h2::before {
  display: none;
}

body .ashby-job-posting-left-pane p {
  color: var(--ef-text-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0;
}

/* Design order: description left, info card right */
@media (min-width: 1024px) {
  body [class*="_content_"][class*="_details_"] {
    column-gap: 100px;
    grid-template-columns: minmax(0, 1fr) 250px;
  }

  body .ashby-job-posting-left-pane[class] {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: calc(var(--navDesktopHeight) + 24px);
  }

  body .ashby-job-posting-right-pane {
    grid-column: 1;
    grid-row: 1;
  }
}

/* Tabs: two equal halves, black underline on the active one */
body .ashby-job-posting-right-pane > nav {
  background-color: var(--colorAppBackground);
  border-radius: 0;
  box-shadow: none;
  margin-top: 0;
}

body .ashby-job-posting-right-pane > nav > a {
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 var(--ef-line-soft);
  flex: 1 1 0;
  margin: 0;
  padding: 0 0 15px;
  text-align: center;
  transition: box-shadow 0.2s ease;
  width: auto;
}

body .ashby-job-posting-right-pane > nav > a[aria-selected="true"] {
  box-shadow: inset 0 -2px 0 var(--ef-text);
}

body .ashby-job-posting-right-pane > nav > a:not([aria-selected="true"]):hover {
  border-bottom: 0;
}

.ashby-job-posting-right-pane-tab-slider {
  display: none;
}

.ashby-job-posting-right-pane-overview-tab,
.ashby-job-posting-right-pane-application-tab {
  color: var(--ef-text-body);
  font-family: var(--fontFamily);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  transition: color 0.2s ease;
}

/* aria-selected is the stable tab state; Ashby's own state classes are hashed */
[role="tab"][aria-selected="false"] > .ashby-job-posting-right-pane-overview-tab,
[role="tab"][aria-selected="false"] > .ashby-job-posting-right-pane-application-tab {
  color: var(--ef-text-body-muted);
}

[role="tab"][aria-selected="false"]:hover > .ashby-job-posting-right-pane-overview-tab,
[role="tab"][aria-selected="false"]:hover > .ashby-job-posting-right-pane-application-tab {
  color: var(--ef-text-body);
}

/* Description and application form sit flat under the tabs */
body .ashby-job-posting-right-pane > div[class] {
  background-color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 40px 0 0;
}

.ashby-job-posting-description {
  color: var(--ef-text-body);
  font-family: var(--fontFamily);
  font-size: 16px;
  letter-spacing: -0.02em;
  line-height: 1.35;
}

.ashby-job-posting-description h1,
.ashby-job-posting-description h2,
.ashby-job-posting-description h3,
.ashby-job-posting-description h4 {
  color: var(--ef-text-body);
  font-family: var(--fontFamily);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
  margin: 0;
}

.ashby-job-posting-description strong {
  font-weight: 700;
}

.ashby-job-posting-description a {
  color: var(--ef-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

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

/* "Apply for this Job" has no ashby-* class; match it to the form's Submit button */
body .ashby-job-posting-description-container a[href*="/application"] > button {
  box-shadow: none;
  font-family: var(--fontFamily);
  font-weight: 600;
  letter-spacing: -0.04em;
  min-height: 54px;
  transition: background-color 0.2s ease;
}

body .ashby-job-posting-description-container a[href*="/application"] > button:hover {
  background-color: #222222;
  box-shadow: none;
}

body .ashby-job-posting-description-container a[href*="/application"]:focus-visible {
  outline: none;
}

body .ashby-job-posting-description-container a[href*="/application"]:focus-visible > button {
  outline: 2px solid var(--ef-text);
  outline-offset: 2px;
}

/* ---------- Application form ---------- */

.ashby-application-form-container {
  letter-spacing: -0.02em;
}

/* Flat like the description; Ashby draws it as a shadowed card */
body .ashby-application-form-container[class] {
  background-color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 24px 0 0;
}

body .ashby-application-form-autofill-input-base-layer button {
  font-family: var(--fontFamily);
}

/* Ashby pads the autofill pane 16px each side; align it with the form fields and
   give it the same 40px gap under the tabs as the Overview description */
body .ashby-application-form-autofill-pane[class] {
  background-color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  padding: 40px 0 0;
}

.ashby-application-form-section-header-title {
  color: var(--ef-text);
  font-family: var(--fontFamily);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.04em;
}

.ashby-application-form-section-header-description,
.ashby-application-form-question-description,
.ashby-application-form-texting-consent-description {
  color: var(--ef-text-muted);
  font-size: 14px;
  letter-spacing: -0.02em;
}

.ashby-application-form-question-title {
  color: var(--ef-text);
  font-family: var(--fontFamily);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.ashby-application-form-input-text,
.ashby-application-form-input-textarea,
.ashby-application-form-input-date,
.ashby-application-form-input-autocomplete,
.ashby-application-form-input-dropdown-select {
  background-color: #ffffff;
  border: 1px solid var(--ef-input-border);
  border-radius: 8px;
  color: #141414;
  cursor: text;
  font-family: var(--fontFamily);
  font-size: 15px;
  letter-spacing: -0.02em;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ashby-application-form-input-text:hover,
.ashby-application-form-input-textarea:hover,
.ashby-application-form-input-date:hover,
.ashby-application-form-input-autocomplete:hover,
.ashby-application-form-input-dropdown-select:hover {
  border-color: var(--ef-input-border-hover);
}

/* Ashby draws the ring itself as an outline in --colorPrimary500A */
body .ashby-application-form-input-text:focus,
body .ashby-application-form-input-textarea:focus,
body .ashby-application-form-input-date:focus,
body .ashby-application-form-input-autocomplete:focus,
body .ashby-application-form-input-dropdown-select:focus {
  border-color: var(--ef-text);
}

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

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

/* The file input's outer box carries the dashed frame; the inner dropzone stays plain */
body .ashby-application-form-input-file,
.ashby-application-form-autofill-input-root {
  background-color: var(--ef-fill);
  border: 1px dashed var(--ef-input-border);
  border-radius: var(--borderRadiusContainer);
}

body .ashby-application-form-input-file-dropzone {
  background-color: transparent;
  border: 0;
}

.ashby-application-form-input-file-dropzone-upload,
.ashby-application-form-input-education-add {
  border-radius: var(--borderRadiusButton);
  font-family: var(--fontFamily);
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* Flat buttons with a black focus ring, replacing Ashby's tinted shadow and pink ring */
body .ashby-application-form-input-file-dropzone-upload,
body .ashby-application-form-input-education-add,
body .ashby-application-form-autofill-input-base-layer button,
body .ashby-application-form-submit-button {
  box-shadow: none;
}

body .ashby-application-form-input-file-dropzone-upload:hover,
body .ashby-application-form-input-education-add:hover,
body .ashby-application-form-autofill-input-base-layer button:hover,
body .ashby-application-form-submit-button:hover {
  box-shadow: none;
}

body .ashby-application-form-input-file-dropzone-upload:focus-visible,
body .ashby-application-form-input-education-add:focus-visible,
body .ashby-application-form-autofill-input-base-layer button:focus-visible {
  outline: 2px solid var(--ef-text);
  outline-offset: 2px;
}

.ashby-application-form-input-yesno-option {
  border-color: var(--ef-input-border);
  font-family: var(--fontFamily);
  font-weight: 500;
}

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

.ashby-application-form-input-radio-group-option[data-checked] .ashby-application-form-input-radio-group-option-radio,
.ashby-application-form-input-checkbox-group-option[data-checked] .ashby-application-form-input-checkbox-group-option-checkbox {
  accent-color: var(--ef-text);
}

.ashby-application-form-submit-button {
  background-color: var(--ef-text);
  border: 0;
  border-radius: var(--borderRadiusButton);
  color: #ffffff;
  font-family: var(--fontFamily);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.04em;
  min-height: 54px;
  transition: background-color 0.2s ease;
}

body .ashby-application-form-submit-button:hover {
  background-color: #222222;
}

body .ashby-application-form-submit-button:focus-visible {
  outline: 2px solid var(--ef-text);
  outline-offset: 2px;
}

.ashby-application-form-failure-container .ashby-application-form-field-entry,
.ashby-application-form-autofill-input-form-alert[data-highlight="negative"] {
  color: var(--ef-error);
}

.ashby-application-form-success-container {
  color: var(--ef-text);
  font-family: var(--fontFamily);
  letter-spacing: -0.02em;
}

/* ---------- Footer ---------- */

/* Full-width black band; ::before/::after draw the white panel's 40px rounded bottom */
body footer[class] {
  align-items: center;
  background-color: #000000;
  border-top: 0;
  /* Covers a hairline seam when the footer lands on a half pixel */
  box-shadow: 0 2px 0 #000000;
  color: var(--ef-footer-text);
  font-family: var(--ef-font-footer);
  font-size: 14px;
  line-height: 18px;
  margin: 120px 0 0;
  max-width: none;
  padding: 40px var(--ef-gutter);
  position: relative;
  text-transform: uppercase;
}

body footer::before,
body footer::after {
  content: "";
  height: 40px;
  left: 0;
  position: absolute;
  right: 0;
  top: -40px;
}

/* 1px shorter than ::after so its top edge never peeks out above the white curve */
body footer::before {
  background-color: #000000;
  height: 39px;
  top: -39px;
}

body footer::after {
  background-color: var(--colorAppBackground);
  border-radius: 0 0 40px 40px;
}

body footer a[href] {
  color: var(--ef-footer-text);
  text-decoration: none;
}

body footer a[href]:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* Ashby's "Powered by " already ends in a no-break space (8.4px in Chivo Mono 14px);
   pull the wordmark back so the visible gap is the Figma 7px */
body footer[class] svg {
  fill: var(--ef-footer-text);
  height: 14px;
  margin-left: -1.4px;
}

body footer[class] a[href]:hover svg {
  fill: #ffffff;
}

body footer p {
  display: flex;
  flex-direction: row;
  gap: 40px;
  margin: 0;
}

body footer p > a[href] + a[href] {
  margin: 0;
}

/* ---------- Tablet ---------- */

@media (max-width: 1023px) {
  :root {
    --ef-gutter: 40px;
  }

  .ashby-job-board-heading {
    font-size: 64px;
  }

  .ashby-job-posting-brief-title {
    font-size: 40px;
  }

  body .ashby-job-posting-left-pane[class] {
    margin-right: 24px;
  }
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
  :root {
    --ef-gutter: 20px;
  }

  body img[src*="org-theme-wordmark"] {
    height: 24px;
  }

  body [class*="_titles_"] {
    padding-top: 32px;
  }

  .ashby-job-board-heading {
    font-size: 48px;
  }

  body [class*="_filtersContainer_"] {
    margin-top: 20px;
  }

  /* Ashby shows an icon-only grey circle here on phones; match the desktop text link */
  body .ashby-job-board-reset-filters-label {
    background-color: transparent;
    border-radius: 0;
    height: auto;
    padding: 0;
    width: auto;
  }

  body .ashby-job-board-reset-filters-label::after {
    content: "Reset filters";
  }

  body [class*="_filtersHeader_"] {
    margin-bottom: 12px;
  }

  body .ashby-department-heading {
    margin-top: 48px;
  }

  body .ashby-job-posting-brief-list .ashby-job-posting-brief {
    padding: 20px var(--ef-gutter);
  }

  .ashby-job-posting-brief-title {
    font-size: 28px;
    font-weight: 400;
  }

  .ashby-job-posting-heading {
    font-size: 32px;
  }

  body [class*="_content_"][class*="_details_"] {
    margin-top: 24px;
  }

  body .ashby-job-posting-left-pane[class] {
    margin: 0 0 24px;
  }

  body .ashby-job-posting-right-pane > div[class],
  body .ashby-application-form-autofill-pane[class] {
    padding-top: 24px;
  }

  .ashby-application-form-submit-button {
    width: 100%;
  }

  body footer[class] {
    align-items: flex-start;
    flex-direction: column;
    gap: 24px;
    margin-top: 80px;
    padding: 32px var(--ef-gutter);
  }

  body footer p {
    flex-direction: column;
    gap: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ashby-job-posting-brief,
  .ashby-job-board-filter,
  .ashby-job-board-back-to-all-jobs-button,
  .ashby-application-form-submit-button,
  body .ashby-job-posting-description-container a[href*="/application"] > button {
    transition: none;
  }
}