/* =========================================================
   Supa — Ashby job board theme
   Upload at: Admin > Job Boards > Theme (Job Board) > Custom CSS
   Based on Supa Brand Guidelines v1.0 (Lunar Agency, Oct 2026)
   ========================================================= */

/* stylelint-disable */

/* Brand fonts: Geist (main) and Roboto Serif (accent), from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;700&family=Roboto+Serif:ital,opsz,wght@1,8..144,400&display=swap');

/* ---------- Brand settings Ashby reads across the whole page ---------- */
:root {
  /* Supa palette */
  --supa-ink: #211D1C;
  --supa-paper: #F5F5EF;
  --supa-margin: #FFFFFF;
  --supa-electro-yellow: #FEEC01;
  --supa-magneto-red: #FE572B;

  /* Ashby settings */
  --fontFamily: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --colorPrimary600: #211D1C;          /* links and buttons: Ink */
  --colorPrimary900: #FE572B;          /* hover / pressed: Magneto Red */
  --colorAppBackground: #F5F5EF;       /* page background: Paper */
  --widthMaxJobBoard: 880px;           /* leaves generous white space */
  --borderRadiusContainer: 12px;
  --borderRadiusControl: 8px;
  --borderRadiusButton: 999px;         /* pill buttons */
}

/* ---------- Job board page (the list of roles) ---------- */

/* Main heading, e.g. "Open positions": big and confident */
.ashby-job-board-heading {
  font-family: var(--fontFamily);
  font-size: 56px;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.0;
  color: var(--supa-ink);
  margin-top: 24px;
}

/* The number of open roles: Roboto Serif italic accent */
.ashby-job-board-heading-count {
  font-family: "Roboto Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--supa-ink);
  background: none;
}

/* Any italic text you write in the descriptions becomes the
   Roboto Serif italic accent from the brand guide */
em, i {
  font-family: "Roboto Serif", Georgia, serif;
  font-style: italic;
}

/* Images placed in the descriptions (e.g. the hero banner) */
img {
  max-width: 100%;
  height: auto;
  border-radius: var(--borderRadiusContainer);
}

@media (max-width: 600px) {
  .ashby-job-board-heading { font-size: 38px; }
}

/* Department and team headings (e.g. "Operations") */
.ashby-department-heading,
.ashby-job-posting-brief-department-heading {
  font-family: var(--fontFamily);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--supa-ink);
}

.ashby-department-heading-level,
.ashby-job-posting-brief-department-heading-level {
  font-family: var(--fontFamily);
  font-weight: 400;
  color: var(--supa-ink);
}

/* Each job in the list: white card on Paper */
.ashby-job-posting-brief {
  background: var(--supa-margin);
  border: 1px solid rgba(33, 29, 28, 0.10);
  border-radius: var(--borderRadiusContainer);
  margin-bottom: 12px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

/* Hovering over a job: the card lifts and gets a Magneto Red frame */
.ashby-job-posting-brief:hover {
  transform: translateY(-2px);
  border-color: var(--supa-magneto-red);
  box-shadow: 4px 4px 0 var(--supa-magneto-red);
}

.ashby-job-posting-brief-title {
  font-family: var(--fontFamily);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--supa-ink);
}

.ashby-job-posting-brief-details {
  color: rgba(33, 29, 28, 0.70);
}

/* Filter drop-downs */
.ashby-job-board-filter {
  font-family: var(--fontFamily);
  background: var(--supa-margin);
  border-radius: var(--borderRadiusControl);
  color: var(--supa-ink);
}

/* When a filter is clicked: swap the red glow for a clean Ink border.
   (Keeps a visible outline for people using a keyboard.) */
.ashby-job-board-filter:focus,
.ashby-job-board-filter:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--supa-ink);
  border-color: var(--supa-ink);
}


/* ---------- Hero banner ----------
   A strip of the six building photos from the Supa website,
   above the "Open positions" heading.
   NOTE: these load from the website's current (staging) address.
   When the site moves to its live address, update these six links. */
.ashby-job-board-heading {
  display: block;
  padding-top: calc((100% - 40px) / 6 + 36px);
  background-image:
    url("https://wordpress-1618071-6711050.cloudwaysapps.com/wp-content/uploads/2026/10/home-building-1-sq.jpg"),
    url("https://wordpress-1618071-6711050.cloudwaysapps.com/wp-content/uploads/2026/10/home-building-2-sq.jpg"),
    url("https://wordpress-1618071-6711050.cloudwaysapps.com/wp-content/uploads/2026/10/home-building-3-sq.jpg"),
    url("https://wordpress-1618071-6711050.cloudwaysapps.com/wp-content/uploads/2026/10/home-building-4-sq.jpg"),
    url("https://wordpress-1618071-6711050.cloudwaysapps.com/wp-content/uploads/2026/10/home-building-5-sq.jpg"),
    url("https://wordpress-1618071-6711050.cloudwaysapps.com/wp-content/uploads/2026/10/home-building-6-sq.jpg");
  background-repeat: no-repeat;
  background-size: calc((100% - 40px) / 6) auto;
  background-position: 0% 0, 20% 0, 40% 0, 60% 0, 80% 0, 100% 0;
}

/* ---------- Single job page ---------- */

.ashby-job-posting-heading {
  font-family: var(--fontFamily);
  font-size: 48px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.0;
  color: var(--supa-ink);
}

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

.ashby-application-form-container {
  background: var(--supa-margin);
  border-radius: var(--borderRadiusContainer);
}

.ashby-application-form-section-header-title {
  font-family: var(--fontFamily);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--supa-ink);
}

.ashby-application-form-question-title {
  font-family: var(--fontFamily);
  font-weight: 500;
  color: var(--supa-ink);
}

.ashby-application-form-question-description,
.ashby-application-form-section-header-description {
  color: rgba(33, 29, 28, 0.70);
}

/* Submit button: Magneto Red with Ink text
   (the brand guide says text on red should be Ink, not white) */
.ashby-application-form-submit-button {
  background: var(--supa-magneto-red);
  border-color: var(--supa-magneto-red);
  color: var(--supa-ink);
  font-family: var(--fontFamily);
  font-size: 17px;
  font-weight: 500;
  border-radius: var(--borderRadiusButton);
  padding: 14px 32px;
  box-shadow: 4px 4px 0 var(--supa-ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Button presses in like a real button on hover */
.ashby-application-form-submit-button:hover {
  background: var(--supa-magneto-red);
  color: var(--supa-ink);
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--supa-ink);
}

/* "Thanks for applying" message */
.ashby-application-form-success-container {
  font-family: var(--fontFamily);
  background: var(--supa-margin);
  border-radius: var(--borderRadiusContainer);
}