/* =========================================================
   UPVOTE CAREERS
   SINGLE JOB TEMPLATE
   ========================================================= */


/* =========================================================
   DESIGN TOKENS
   ========================================================= */

.ucs-job-page {
  --job-blue: #2563eb;
  --job-blue-dark: #1d4ed8;

  --job-navy: #081a32;
  --job-navy-mid: #12345f;

  --job-heading: #0f172a;
  --job-text: #475569;
  --job-muted: #64748b;

  --job-border: #dfe7f0;
  --job-bg: #f6f8fb;
  --job-blue-soft: #eff6ff;

  width: 100%;
  max-width: none;
  min-width: 0;

  margin: 0;
  padding: 0;

  background: var(--job-bg);

  color: var(--job-text);

  font-family: Helvetica, Arial, sans-serif;
}


.ucs-job-page *,
.ucs-job-page *::before,
.ucs-job-page *::after {
  box-sizing: border-box;
}


.ucs-job-page a {
  text-decoration: none;
}


/* =========================================================
   ASTRA FULL WIDTH FIX
   ========================================================= */

body.single-job #content,
body.single-jobs #content,
body.single-job .site-content,
body.single-jobs .site-content {
  width: 100%;
  max-width: none;

  margin: 0;
  padding: 0;
}


body.single-job #content > .ast-container,
body.single-jobs #content > .ast-container {
  width: 100%;
  max-width: none;

  margin: 0;
  padding: 0;

  display: flex;
}


body.single-job #content > .ast-container > .ucs-job-page,
body.single-jobs #content > .ast-container > .ucs-job-page {
  width: 100%;
  max-width: none;

  flex: 1 1 100%;
  min-width: 0;

  margin: 0;
  padding: 0;
}


/* =========================================================
   SHARED INNER CONTAINER
   ========================================================= */

.job-container {
  width: 100%;
  max-width: 1200px;

  margin: 0 auto;

  padding-left: 24px;
  padding-right: 24px;
}


/* =========================================================
   HERO
   ========================================================= */

.job-hero {
  position: relative;

  width: 100%;

  overflow: hidden;

  padding: 120px 0 100px;

  background:
    radial-gradient(
      circle at 90% 30%,
      rgba(72, 135, 224, .20),
      transparent 30%
    ),
    linear-gradient(
      108deg,
      #06172c 0%,
      #0c294c 58%,
      #184b84 100%
    );

  color: #fff;
}


/* restrained geometry */
.job-hero::before {
  content: "";

  position: absolute;

  width: 470px;
  height: 470px;

  right: -120px;
  top: -210px;

  border-radius: 50%;

  border: 1px solid rgba(255,255,255,.065);

  box-shadow:
    0 0 0 72px rgba(255,255,255,.016),
    0 0 0 144px rgba(255,255,255,.010);

  pointer-events: none;
}


.job-hero-content {
  position: relative;
  z-index: 2;

  max-width: 960px;
}


/* =========================================================
   HERO TOP
   ========================================================= */

.job-hero-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 14px;

  margin-bottom: 28px;
}


.job-back-link {
  display: inline-flex;
  align-items: center;

  gap: 7px;

  color: rgba(255,255,255,.72) !important;

  font-size: .94rem;
  font-weight: 700;

  transition: color .2s ease;
}


.job-back-link:hover {
  color: #fff !important;
}


.job-department {
  display: inline-flex;
  align-items: center;

  min-height: 34px;

  padding: 0 14px;

  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.13);

  background: rgba(255,255,255,.075);

  color: #c6dcff;

  font-size: .78rem;
  font-weight: 800;

  letter-spacing: .075em;
  text-transform: uppercase;
}


/* =========================================================
   HERO TITLE
   ========================================================= */

.job-hero h1 {
  max-width: 940px;

  margin: 0 0 22px;

  font-family: "Items NormalBold", Helvetica, Arial, sans-serif;

  font-size: clamp(3rem, 4.6vw, 4.55rem);
  line-height: 1.04;

  letter-spacing: -.025em;

  color: #fff;
}


.job-summary {
  max-width: 760px;

  margin: 0 0 30px;

  color: rgba(255,255,255,.82);

  font-size: 1.12rem;
  line-height: 1.65;
}


/* =========================================================
   META
   ========================================================= */

.job-meta {
  display: flex;
  flex-wrap: wrap;

  gap: 12px;

  margin-bottom: 30px;
}


.job-meta-item {
  min-width: 165px;

  padding: 12px 17px;

  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;

  background: rgba(255,255,255,.07);
}


.job-meta-label {
  display: block;

  margin-bottom: 4px;

  color: rgba(255,255,255,.56);

  font-size: .69rem;
  font-weight: 800;

  letter-spacing: .075em;
  text-transform: uppercase;
}


.job-meta-item strong {
  display: block;

  color: #fff;

  font-size: .96rem;
  font-weight: 700;
}


/* =========================================================
   PRIMARY BUTTON
   ========================================================= */

.job-primary-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 48px;

  padding: 0 23px;

  border-radius: 999px;

  background: var(--job-blue);

  color: #fff !important;

  font-size: .96rem;
  font-weight: 800;

  transition:
    background .2s ease,
    transform .2s ease;
}


.job-primary-button:hover {
  background: var(--job-blue-dark);

  transform: translateY(-1px);
}


/* =========================================================
   JOB CONTENT BAND
   ========================================================= */

.job-content-section {
  width: 100%;

  padding: 72px 0 86px;

  background: var(--job-bg);
}


/* =========================================================
   DESKTOP GRID
   ========================================================= */

.job-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 790px)
    minmax(260px, 310px);

  justify-content: space-between;

  gap: 58px;

  align-items: start;
}


/* =========================================================
   LEFT DOCUMENT
   ========================================================= */

.job-main-content {
  min-width: 0;
}


/* =========================================================
   JOB CONTENT BLOCKS
   ========================================================= */

.job-content-block {
  padding: 0 0 38px;

  margin: 0 0 38px;

  border-bottom: 1px solid var(--job-border);
}


.job-content-block:last-child {
  padding-bottom: 0;

  margin-bottom: 0;

  border-bottom: none;
}


/* =========================================================
   ABOUT
   ========================================================= */

.job-eyebrow {
  margin-bottom: 14px;

  color: var(--job-blue);

  font-size: .78rem;
  font-weight: 800;

  letter-spacing: .075em;
  text-transform: uppercase;
}


.job-about-text {
  max-width: 740px;

  font-size: 1.13rem;
}


/* =========================================================
   CONTENT TITLES
   ========================================================= */

.job-content-block h2 {
  margin: 0 0 20px;

  color: var(--job-heading);

  font-family: "Items NormalBold", Helvetica, Arial, sans-serif;

  font-size: clamp(1.8rem, 2.5vw, 2.3rem);
  line-height: 1.15;
}


/* =========================================================
   ACF / WYSIWYG CONTENT
   ========================================================= */

.job-rich-text {
  color: var(--job-text);

  font-size: 1.04rem;
  line-height: 1.76;
}


.job-rich-text p {
  margin: 0 0 16px;
}


.job-rich-text p:last-child {
  margin-bottom: 0;
}


/* real WYSIWYG lists */
.job-rich-text ul,
.job-rich-text ol {
  margin: 8px 0 0;

  padding-left: 23px;
}


.job-rich-text li {
  padding-left: 4px;

  margin-bottom: 13px;

  line-height: 1.68;
}


.job-rich-text li:last-child {
  margin-bottom: 0;
}


.job-rich-text li::marker {
  color: var(--job-blue);
}


/* =========================================================
   SKILLS
   ========================================================= */

.job-skills-block {
  border-bottom: none;
}


.job-skills {
  display: flex;
  flex-wrap: wrap;

  gap: 8px;
}


.job-skills span {
  display: inline-flex;

  align-items: center;

  padding: 7px 12px;

  border: 1px solid #d5e4fa;
  border-radius: 999px;

  background: var(--job-blue-soft);

  color: #1e40af;

  font-size: .84rem;
  font-weight: 700;
}


/* =========================================================
   APPLY SIDEBAR
   ========================================================= */

.job-sidebar {
  position: sticky;

  top: 110px;
}


.job-apply-card {
  padding: 26px;

  border-radius: 18px;

  background: #0d1b32;

  color: #fff;

  box-shadow:
    0 14px 34px rgba(15,23,42,.10);
}


.job-apply-eyebrow {
  display: block;

  margin-bottom: 12px;

  color: #93c5fd;

  font-size: .72rem;
  font-weight: 800;

  letter-spacing: .075em;
  text-transform: uppercase;
}


.job-apply-card h3 {
  margin: 0 0 15px;

  color: #fff;

  font-size: 1.28rem;
  line-height: 1.35;
}


.job-apply-meta {
  display: flex;
  flex-wrap: wrap;

  gap: 7px;

  margin-bottom: 21px;
}


.job-apply-meta span {
  padding: 5px 9px;

  border-radius: 999px;

  background: rgba(255,255,255,.08);

  color: rgba(255,255,255,.74);

  font-size: .77rem;
  font-weight: 600;
}


.job-apply-button {
  width: 100%;
}


.job-all-positions {
  display: block;

  margin-top: 16px;

  text-align: center;

  color: rgba(255,255,255,.62) !important;

  font-size: .84rem;
  font-weight: 700;
}


.job-all-positions:hover {
  color: #fff !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media only screen and (max-width: 1024px) {

  .job-hero {
    padding-top: 68px;
    padding-bottom: 64px;
  }


  .job-layout {
    grid-template-columns: 1fr;

    gap: 38px;
  }


  .job-sidebar {
    position: static;
  }


  .job-apply-card {
    max-width: none;

    display: grid;

    grid-template-columns: 1fr auto;

    align-items: center;

    column-gap: 26px;
  }


  .job-apply-eyebrow,
  .job-apply-card h3,
  .job-apply-meta {
    grid-column: 1;
  }


  .job-apply-button {
    grid-column: 2;

    grid-row: 1 / span 3;

    width: auto;

    min-width: 150px;
  }


  .job-all-positions {
    grid-column: 1;

    text-align: left;

    margin-top: 4px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media only screen and (max-width: 767px) {

  .job-container {
    padding-left: 18px;
    padding-right: 18px;
  }


  .job-hero {
    padding: 52px 0 50px;
  }


  .job-hero::before {
    width: 300px;
    height: 300px;

    right: -150px;
    top: -100px;
  }


  .job-hero-top {
    display: block;

    margin-bottom: 21px;
  }


  .job-department {
    display: flex;

    width: fit-content;

    margin-top: 13px;
  }


  .job-hero h1 {
    font-size: 2.55rem;

    line-height: 1.07;
  }


  .job-summary {
    font-size: 1rem;
  }


  .job-meta {
    display: grid;

    grid-template-columns: 1fr;

    gap: 9px;
  }


  .job-meta-item {
    min-width: 0;
  }


  .job-primary-button {
    width: 100%;
  }


  .job-content-section {
    padding: 46px 0 56px;
  }


  .job-content-block {
    margin-bottom: 30px;

    padding-bottom: 30px;
  }


  .job-content-block h2 {
    font-size: 1.75rem;
  }


  .job-about-text {
    font-size: 1.04rem;
  }


  .job-rich-text {
    font-size: .98rem;
  }


  .job-sidebar {
    margin-top: 4px;
  }


  .job-apply-card {
    display: block;

    padding: 23px 20px;
  }


  .job-apply-card h3 {
    font-size: 1.22rem;
  }


  .job-apply-button {
    width: 100%;
  }


  .job-all-positions {
    margin-top: 15px;

    text-align: center;
  }

}