/* Hamming job board theme for Ashby
   Matches the new site's dark "mono" palette, Switzer type, 2px corners, and
   hairline role rows. Upload in Ashby under Admin > Theme (Job Board) > Custom CSS.
   Selectors stay on .ashby-* classes and plain elements because Ashby's hashed
   classes change between releases and its validator rejects them. */

@font-face {
  font-family: "Switzer";
  src: url("https://cdn.fontshare.com/wf/BLNB4FAQFNK56DWWNF7PMGTCOTZHOEII/ST3WKSSDMBK2MIQQO3MAVYWLF4FTOLFV/6IN5WOLRCYP4G4MOCOHOMXNON6Q7MDAR.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("https://cdn.fontshare.com/wf/OYB4CXKJQXKTNSLJMTDQOIVUL2V5EL7S/WYO2P7DQVV5RNXGMCUO2HL4RJP4VFUAS/6XPIMU23OJVRY676OG5YVJMWEHWICATX.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("https://cdn.fontshare.com/wf/5SZVFDB7V52TI6ULVC6J3WQZQCIZVDV5/ODYPSTCUDMKSTYIPTV4CLQ7URIK7XYBJ/YS3VPNVO4B3TOJMEXDGFZQ4TLZGGSRZC.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --colorPrimary900: #ffffff;
  --colorPrimary600: #f1f0ea;
  --colorAppBackground: #010101;
  --fontFamily: "Switzer", "Helvetica Neue", Arial, sans-serif;
  --widthMaxJobBoard: 1040px;
  --borderRadiusContainer: 2px;
  --borderRadiusControl: 2px;
  --borderRadiusButton: 2px;

  --hm-paper: #010101;
  --hm-paper-deep: #0c0c0c;
  --hm-cell: #141516;
  --hm-rule: #2f3234;
  --hm-ink: #ffffff;
  --hm-ink-soft: #f1f0ea;
  --hm-graphite: #b0b0a9;
  --hm-fault: #ff3535;
}

html,
body {
  background: var(--hm-paper);
  color: var(--hm-ink-soft);
}

* {
  font-family: var(--fontFamily);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Nav logo: Ashby has no .ashby-* class for it */
ul li a img {
  height: auto !important;
  width: 114px !important;
}

/* Board header */
.ashby-job-board-heading {
  color: var(--hm-ink);
  font-size: 2.5rem;
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.1;
  margin-bottom: 40px;
  margin-top: 56px;
}

.ashby-job-board-heading-count {
  color: var(--hm-graphite);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.01em;
  vertical-align: super;
}

/* Filters */
.ashby-job-board-filters-label {
  color: var(--hm-graphite);
  font-size: 14px;
  font-weight: 400;
}

.ashby-job-board-reset-filters-label {
  background: transparent !important;
  border: 1px solid var(--hm-rule);
  border-radius: 2px;
  color: var(--hm-graphite);
}

.ashby-job-board-filter {
  background: var(--hm-paper);
  background-image: none;
  border: 1px solid var(--hm-rule);
  border-radius: 2px;
  box-shadow: none;
  color: var(--hm-ink-soft);
  font-size: 15px;
}

.ashby-job-board-filter:hover,
.ashby-job-board-filter:focus {
  border-color: var(--hm-graphite);
  outline: none;
}

.ashby-job-board-filter + div svg {
  color: var(--hm-graphite);
  fill: var(--hm-graphite);
}

.ashby-job-board-filter option {
  background: var(--hm-paper-deep);
  color: var(--hm-ink-soft);
}

/* Role list: hairline rows, like the careers page */
.ashby-department-heading {
  color: var(--hm-graphite);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-top: 88px;
  padding-bottom: 16px;
}

.ashby-job-posting-brief-list {
  border-top: 1px solid var(--hm-rule);
  margin: 0 16px 0 12px;
}

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

.ashby-job-posting-brief {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hm-rule);
  border-radius: 0;
  box-shadow: none;
  display: block;
  margin: 0 !important;
  padding: 24px 0;
  transition: padding-left 160ms ease;
}

.ashby-job-posting-brief:hover {
  background: transparent;
  padding-left: 8px;
}

.ashby-job-posting-brief-title {
  color: var(--hm-ink);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}

.ashby-job-posting-brief-details,
.ashby-job-posting-brief-details * {
  color: var(--hm-graphite);
  font-size: 15px;
  letter-spacing: -0.004em;
}

/* Posting page */
.ashby-job-posting-heading {
  color: var(--hm-ink);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.ashby-job-board-back-to-all-jobs-button,
.ashby-job-board-back-to-all-jobs-button * {
  background: transparent;
  color: var(--hm-graphite);
  fill: var(--hm-graphite);
}

.ashby-job-board-back-to-all-jobs-button:hover,
.ashby-job-board-back-to-all-jobs-button:hover * {
  color: var(--hm-ink);
  fill: var(--hm-ink);
}

.ashby-job-posting-left-pane,
.ashby-job-posting-left-pane * {
  background: transparent;
  border-color: var(--hm-rule);
  box-shadow: none;
}

.ashby-job-posting-left-pane h2 {
  color: var(--hm-graphite);
  font-size: 14px;
  font-weight: 400;
}

.ashby-job-posting-left-pane p,
.ashby-job-posting-left-pane span,
.ashby-job-posting-left-pane a {
  color: var(--hm-ink-soft);
}

/* The description block is painted white by Ashby. Its own class is not on the
   known-validated list, so it is reached through the right pane's divs. */
.ashby-job-posting-right-pane,
.ashby-job-posting-right-pane div {
  background: transparent !important;
}

.ashby-job-posting-right-pane p,
.ashby-job-posting-right-pane li {
  color: var(--hm-ink-soft);
  font-size: 17px;
  letter-spacing: -0.008em;
  line-height: 1.55;
}

.ashby-job-posting-right-pane h1,
.ashby-job-posting-right-pane h2,
.ashby-job-posting-right-pane h3,
.ashby-job-posting-right-pane h4,
.ashby-job-posting-right-pane strong {
  color: var(--hm-ink);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.ashby-job-posting-right-pane p a,
.ashby-job-posting-right-pane li a {
  color: var(--hm-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Overview and Application tabs: labels take the active colour from Ashby, so
   set the primary colour in the theme admin too. */
.ashby-job-posting-right-pane-overview-tab,
.ashby-job-posting-right-pane-application-tab {
  color: inherit;
  font-size: 16px;
  font-weight: 500;
}

.ashby-job-posting-right-pane nav {
  background: var(--hm-paper) !important;
}

.ashby-job-posting-right-pane-tab-slider {
  background: var(--hm-ink);
  height: 1px;
}

/* Application form */
.ashby-application-form-container,
.ashby-survey-form-container {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--hm-ink-soft);
}

.ashby-application-form-section-header-title,
.ashby-application-form-question-title,
.ashby-application-form-question-title * {
  color: var(--hm-ink);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.ashby-application-form-section-header-description,
.ashby-application-form-question-description,
.ashby-application-form-question-description * {
  color: var(--hm-graphite);
}

.ashby-application-form-field-entry label,
.ashby-application-form-field-entry p,
.ashby-application-form-field-entry span {
  color: var(--hm-ink-soft);
}

.ashby-application-form-container input,
.ashby-application-form-container textarea,
.ashby-application-form-container select {
  background: var(--hm-paper);
  background-image: none;
  border: 1px solid var(--hm-rule);
  border-radius: 2px;
  box-shadow: none;
  color: var(--hm-ink);
}

.ashby-application-form-container input:focus,
.ashby-application-form-container textarea:focus,
.ashby-application-form-container select:focus {
  border-color: var(--hm-ink-soft);
  outline: none;
}

.ashby-application-form-container input::placeholder,
.ashby-application-form-container textarea::placeholder {
  color: #7d7d78;
}

.ashby-application-form-container button {
  background: transparent;
  border: 1px solid var(--hm-rule);
  border-radius: 2px;
  box-shadow: none;
  color: var(--hm-ink-soft);
}

.ashby-application-form-container button:hover {
  border-color: var(--hm-ink-soft);
  color: var(--hm-ink);
}

/* Autofill box */
.ashby-application-form-autofill-pane {
  background: transparent;
}

.ashby-application-form-autofill-input-root {
  background: var(--hm-paper-deep);
  border: 1px solid var(--hm-rule);
  border-radius: 2px;
  box-shadow: none;
}

.ashby-application-form-autofill-input-title {
  color: var(--hm-ink);
}

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

.ashby-application-form-autofill-input-icon,
.ashby-application-form-autofill-input-icon * {
  color: var(--hm-ink-soft);
  fill: var(--hm-ink-soft);
}

/* "Apply for this Job" at the end of a posting: the only linked button in the pane */
.ashby-job-posting-right-pane a button {
  background: var(--hm-ink) !important;
  border: 0;
  border-radius: 2px;
  color: var(--hm-paper) !important;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.ashby-job-posting-right-pane a button * {
  color: var(--hm-paper) !important;
}

.ashby-job-posting-right-pane a button:hover {
  background: var(--hm-graphite) !important;
}

/* Footer rule: hairline instead of Ashby's light grey */
footer {
  border-color: var(--hm-rule) !important;
}

/* Primary action: white block, like the site's nav button */
.ashby-application-form-container button.ashby-application-form-submit-button,
.ashby-application-form-submit-button {
  background: var(--hm-ink);
  border: 0;
  border-radius: 2px;
  color: var(--hm-paper);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 16px;
  width: calc(100% - 32px);
}

.ashby-application-form-submit-button * {
  color: var(--hm-paper);
}

.ashby-application-form-submit-button:hover,
.ashby-application-form-container button.ashby-application-form-submit-button:hover {
  background: var(--hm-graphite);
  color: var(--hm-paper);
}

/* Phones: Ashby collapses the filters into a light panel with no .ashby-* class.
   The panel is the sibling right before the role list. If the validator rejects
   :has(), delete this block and recheck the filter label at phone width. */
div:has(+ div > .ashby-department-heading) {
  background: transparent !important;
}

div:has(+ div > .ashby-department-heading) > button {
  background: var(--hm-paper) !important;
  border: 1px solid var(--hm-rule) !important;
  border-radius: 2px;
  color: var(--hm-ink-soft) !important;
  text-decoration: none;
}

/* Phone width */
@media (max-width: 640px) {
  .ashby-job-board-heading {
    font-size: 2.25rem;
    margin-bottom: 24px;
    margin-top: 32px;
  }

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

  .ashby-job-posting-brief {
    padding: 20px 0;
  }
}