/* Upgrade 145: synchronize career local sticky nav with scroll-hide main header.
   When the public header is visible, the local nav sits directly below it.
   When the header hides, the local nav moves to the very top. */

:root {
  --job-local-nav-height: 60px;
}

.job-detail-page .job-section-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 990 !important;
  margin-top: 0 !important;
  transition: top .24s ease, border-radius .24s ease, box-shadow .24s ease;
}

body.public-header-visible .job-detail-page .job-section-nav {
  top: var(--site-header-height, 82px) !important;
  z-index: 990 !important;
  border-radius: 0 0 18px 18px !important;
}

body.public-header-hidden .job-detail-page .job-section-nav,
.site-header.nav-hidden ~ main .job-detail-page .job-section-nav {
  top: 0 !important;
}

/* Keep jump targets visible in both states. */
body.public-header-visible .job-detail-page .job-content-block {
  scroll-margin-top: calc(var(--site-header-height, 82px) + var(--job-local-nav-height, 60px) + 22px) !important;
}

body.public-header-hidden .job-detail-page .job-content-block {
  scroll-margin-top: calc(var(--job-local-nav-height, 60px) + 22px) !important;
}

/* Use :has as a CSS fallback if JS class has not been applied yet. */
body:has(.site-header:not(.nav-hidden)) .job-detail-page .job-section-nav {
  top: var(--site-header-height, 82px) !important;
}

body:has(.site-header.nav-hidden) .job-detail-page .job-section-nav {
  top: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .job-detail-page .job-section-nav {
    transition: none !important;
  }
}

@media (max-width: 980px) {
  body.public-header-visible .job-detail-page .job-section-nav,
  body.public-header-hidden .job-detail-page .job-section-nav,
  body:has(.site-header:not(.nav-hidden)) .job-detail-page .job-section-nav,
  body:has(.site-header.nav-hidden) .job-detail-page .job-section-nav {
    position: static !important;
    top: auto !important;
    border-radius: 18px !important;
  }
}