/*
 * Reco theme.
 *
 * Use it:
 *   JOB_BOARD_PROVIDER=comeet
 *   NEXT_PUBLIC_TENANT_ID=reco
 *   COMEET_COMPANY_SLUG=reco
 *   COMEET_COMPANY_UID=3A.00D
 *   NEXT_PUBLIC_COMPANY_NAME=Reco
 *   NEXT_PUBLIC_THEME_CSS=/themes/reco.css
 */

:root {
  --brand-navy: #132031;
  --brand-blue: #0046c1;
  --brand-mist: #f3f6fb;
  --brand-ink: #132031;
  --brand-lime: #dff95a;
  --brand-sky: #dcecff;
  --brand-font: Onest, Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif;
}

body {
  background:
    linear-gradient(180deg, rgba(248, 251, 255, 0.94), rgba(244, 247, 251, 1) 560px),
    #f4f7fb;
}

header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: rgba(19, 32, 49, 0.96) !important;
  backdrop-filter: blur(14px);
}

header img {
  height: 34px !important;
}

header span {
  letter-spacing: 0 !important;
}

header > div > div:last-child {
  border: 1px solid rgba(223, 249, 90, 0.34);
  border-radius: 999px;
  background: rgba(223, 249, 90, 0.09);
  padding: 8px 12px;
  color: #eaf3ff !important;
}

header svg {
  color: var(--brand-lime) !important;
}

main > section:first-child {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  border-bottom: 0 !important;
  background:
    linear-gradient(90deg, rgba(19, 32, 49, 0.94) 0%, rgba(19, 32, 49, 0.82) 48%, rgba(19, 32, 49, 0.28) 100%),
    url('https://cdn.prod.website-files.com/644fc991ce69ff0d3bdbeb63/69764906296144f6c5901709_Reco%20Career%20Page%20Hero%20%281%29_poster.0000000.jpg')
      center right / cover no-repeat !important;
}

main > section:first-child::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(223, 249, 90, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(223, 249, 90, 0.12) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.55), transparent 78%);
}

main > section:first-child > div {
  position: relative;
  padding-top: 118px !important;
  padding-bottom: 118px !important;
}

main > section:first-child p:first-child {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(223, 249, 90, 0.42);
  border-radius: 999px;
  background: rgba(223, 249, 90, 0.12);
  padding: 8px 14px;
  color: var(--brand-lime) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
}

main > section:first-child h1 {
  max-width: 760px !important;
  color: #ffffff;
  font-family: 'Space Grotesk', Onest, Inter, sans-serif;
  font-size: 56px !important;
  line-height: 1.02 !important;
  letter-spacing: 0 !important;
}

main > section:first-child p:last-child {
  max-width: 650px !important;
  color: #d9e6f7 !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
}

main > div {
  margin-top: -58px;
  border: 1px solid rgba(19, 32, 49, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 24px 70px rgba(19, 32, 49, 0.13);
}

main > div > p:first-child {
  display: inline-flex;
  border-radius: 999px;
  background: #eef6ff;
  padding: 8px 12px;
  color: var(--brand-blue) !important;
  font-weight: 700;
}

main h2 {
  color: var(--brand-blue) !important;
  letter-spacing: 0.05em !important;
}

main ul {
  border-color: rgba(19, 32, 49, 0.12) !important;
  background: #ffffff;
  box-shadow: 0 12px 34px rgba(19, 32, 49, 0.06);
}

main li a {
  background:
    linear-gradient(90deg, rgba(223, 249, 90, 0.12), transparent 42%),
    #ffffff;
}

main li a:hover {
  background: #f3f8ff !important;
}

main li p:first-child {
  color: #132031 !important;
}

main li span {
  color: var(--brand-blue) !important;
}

footer {
  border-top: 0 !important;
  background: #132031 !important;
}

footer p,
footer a {
  color: #d9e6f7 !important;
}

footer svg {
  color: var(--brand-lime) !important;
}

@media (max-width: 720px) {
  header > div {
    height: 72px !important;
  }

  header img {
    height: 28px !important;
  }

  main > section:first-child {
    min-height: 520px;
    background:
      linear-gradient(180deg, rgba(19, 32, 49, 0.96) 0%, rgba(19, 32, 49, 0.86) 58%, rgba(19, 32, 49, 0.7) 100%),
      url('https://cdn.prod.website-files.com/644fc991ce69ff0d3bdbeb63/69764906296144f6c5901709_Reco%20Career%20Page%20Hero%20%281%29_poster.0000000.jpg')
        center / cover no-repeat !important;
  }

  main > section:first-child > div {
    padding-top: 84px !important;
    padding-bottom: 96px !important;
  }

  main > section:first-child h1 {
    font-size: 40px !important;
  }

  main > section:first-child p:last-child {
    font-size: 15px !important;
  }

  main > div {
    margin-top: -32px;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }
}