/* Job portal interaction layer. Entrances are controlled by jobs-premium.js. */
.jobs-premium {
  --jc-ease: cubic-bezier(.2, .75, .25, 1);
}

/* Keyboard feedback also works when motion is unavailable or disabled. */
.jobs-premium .jm-paths > a:focus-visible {
  border-color: #cfa8dc;
  box-shadow: 0 14px 30px #5027630c;
}
.jobs-premium .category-grid > a:focus-visible {
  border-color: #c895d0;
  box-shadow: 0 12px 30px rgba(84, 24, 93, .065);
}
.jobs-premium .job-card:focus-within,
.jobs-premium .company-card:focus-within,
.jobs-premium .content-card:focus-within,
.jobs-premium .guide-card:focus-within {
  border-color: #cfabd9;
  box-shadow: 0 14px 35px rgba(63, 22, 77, .07);
}
.jobs-premium .nav-wrap nav > a:not(.button),
.jobs-premium .job-footer .footer-grid > div > a,
.jobs-premium .topic-nav a {
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: .35em;
}
.jobs-premium .nav-wrap nav > a:not(.button):focus-visible,
.jobs-premium .job-footer .footer-grid > div > a:focus-visible,
.jobs-premium .topic-nav a:focus-visible {
  text-decoration-color: currentColor;
}

@media (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  .jobs-premium .jm-paths > a,
  .jobs-premium .category-grid > a,
  .jobs-premium .job-card,
  .jobs-premium .company-card {
    transition: transform .38s var(--jc-ease), border-color .25s ease, box-shadow .3s ease;
  }
  .jobs-premium .content-card,
  .jobs-premium .guide-card {
    transition: border-color .3s ease, box-shadow .35s ease;
  }
  .jobs-premium .jm-path-icon,
  .jobs-premium .jm-path-arrow,
  .jobs-premium .category-grid > a > span,
  .jobs-premium .job-card .company-logo,
  .jobs-premium .company-card .company-logo,
  .jobs-premium .steps article > div,
  .jobs-premium .guide-card .card-number {
    transition: transform .42s var(--jc-ease), box-shadow .3s ease;
  }
  .jobs-premium .candidate-cta .button {
    transition: transform .35s var(--jc-ease), box-shadow .35s ease, background .2s ease;
  }
  .jobs-premium .nav-wrap nav > a:not(.button),
  .jobs-premium .topic-nav a {
    transition: color .2s ease, text-decoration-color .25s ease;
  }
  .jobs-premium .job-footer .footer-grid > div > a {
    transition: transform .3s var(--jc-ease), color .2s ease, text-decoration-color .25s ease;
  }
}

/* Only small, self-contained cards move; sticky panels and their parents do not. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  .jobs-premium .jm-paths > a:hover,
  .jobs-premium .category-grid > a:hover,
  .jobs-premium .job-card:hover {
    transform: translateY(-3px);
  }
  .jobs-premium .company-card:hover {
    transform: translateY(-2px);
    border-color: #cfabd9;
    box-shadow: 0 14px 35px rgba(63, 22, 77, .07);
  }
  .jobs-premium .jm-paths > a:hover .jm-path-icon {
    transform: rotate(-4deg);
  }
  .jobs-premium .jm-paths > a:hover .jm-path-arrow {
    transform: translate(3px, -3px);
  }
  .jobs-premium .category-grid > a:hover > span {
    transform: translateY(-2px) rotate(-4deg);
    box-shadow: 0 5px 12px rgba(84, 24, 93, .065);
  }
  .jobs-premium .job-card:hover .company-logo,
  .jobs-premium .company-card:hover .company-logo {
    transform: scale(1.035);
  }
  .jobs-premium .steps article:hover > div {
    transform: translateY(-3px) rotate(-4deg);
    box-shadow: 0 6px 15px rgba(128, 0, 128, .1), inset 0 1px 0 #fff;
  }
  .jobs-premium .steps article:nth-child(2):hover > div {
    transform: translateY(-3px) rotate(4deg);
  }
  .jobs-premium .content-card:hover,
  .jobs-premium .guide-card:hover {
    border-color: #cfabd9;
    box-shadow: 0 14px 35px rgba(63, 22, 77, .07);
  }
  .jobs-premium .guide-card:hover .card-number {
    transform: translateX(3px);
  }
  .jobs-premium .candidate-cta .button:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 0 3px #ffffff14, 0 10px 25px rgba(48, 16, 55, .2);
  }
  .jobs-premium .nav-wrap nav > a:not(.button):hover,
  .jobs-premium .job-footer .footer-grid > div > a:hover,
  .jobs-premium .topic-nav a:hover {
    text-decoration-color: currentColor;
  }
  .jobs-premium .job-footer .footer-grid > div > a:hover {
    transform: translateX(3px);
  }
  .jobs-premium .jm-paths > a:active,
  .jobs-premium .category-grid > a:active,
  .jobs-premium .candidate-cta .button:active {
    transform: translateY(0);
    transition-duration: .12s;
  }
}

/* Override the earlier hover lifts as well, so touch does not retain a raised card. */
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce), (forced-colors: active) {
  .jobs-premium .jm-paths > a:hover,
  .jobs-premium .category-grid > a:hover,
  .jobs-premium .job-card:hover,
  .jobs-premium .company-card:hover,
  .jobs-premium .candidate-cta .button:hover {
    transform: none;
  }
}

@media (forced-colors: active) {
  .jobs-premium .jm-paths > a:focus-visible,
  .jobs-premium .category-grid > a:focus-visible,
  .jobs-premium .job-card:focus-within,
  .jobs-premium .company-card:focus-within,
  .jobs-premium .content-card:focus-within,
  .jobs-premium .guide-card:focus-within {
    border-color: Highlight;
    box-shadow: none;
  }
  .jobs-premium .nav-wrap nav > a:not(.button):focus-visible,
  .jobs-premium .job-footer .footer-grid > div > a:focus-visible,
  .jobs-premium .topic-nav a:focus-visible {
    text-decoration-color: LinkText;
  }
}