/**
 * Job details page — supplemental to styles.css (Figma node 9:103)
 */

:root {
  --color-neutral-500: #999997;
  --job-details-display-size: 52px;
  --job-details-sidebar-width: 356px;
}

/* Sticky apply header — slides into view once the intro title scrolls offscreen.
   See modern/jobDetailsModern.js (initStickyApplyHeader) for the toggle logic. */
.job-details-sticky-header {
  position: fixed;
  top: 0;
  /* When the modern admin sidebar is mounted, body[data-modern-sidebar="1"]
     (modern/sidebarModern.css) defines --modern-sidebar-pad and shifts the
     document flow right by that amount. Fixed elements ignore body padding,
     so we offset our left edge by the same custom property to keep this
     bar's inner .max-width container centred in the same viewport remainder
     as the page content. Falls back to 0 on applicant pages where the
     sidebar isn't mounted. */
  left: var(--modern-sidebar-pad, 0);
  right: 0;
  z-index: 1030;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-neutral-200);
  transform: translateY(-100%);
  /* Delay visibility flip until the slide-up transform finishes, so the header
     animates away on scroll-up instead of snapping out. The 'left' transition
     duration matches body[data-modern-sidebar="1"]'s padding-left transition
     so the sticky bar slides in lockstep with the sidebar's open/collapse. */
  transition: transform 0.25s ease, visibility 0s linear 0.25s, left 0.18s ease;
  pointer-events: none;
  visibility: hidden;
}

.job-details-sticky-header--visible {
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
  transition: transform 0.25s ease, visibility 0s linear 0s, left 0.18s ease;
}

.job-details-sticky-header__inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 16px var(--content-pad-x) 16px calc(var(--content-pad-x) + var(--modern-sidebar-hamburger-gutter, 0px));
}

.job-details-sticky-header__text {
  width: 100%;
  min-width: 0;
}

.job-details-sticky-header__title {
  margin: 0 0 4px;
  font-family: var(--font-dm);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-black);
}

.job-details-sticky-header__subtitle {
  margin: 0;
  font-family: var(--font-dm);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.032px;
  color: var(--color-neutral-500);
}

.job-details-sticky-header__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  padding: 16px 24px;
  border: none;
  border-radius: 6px;
  background: var(--color-black);
  font-family: var(--font-dm);
  font-size: 16px;
  font-weight: 600;
  line-height: 18px;
  color: var(--color-white);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.job-details-sticky-header__cta:hover,
.job-details-sticky-header__cta:focus {
  color: var(--color-white);
  opacity: 0.92;
}

@media (min-width: 768px) {
  .job-details-sticky-header__inner {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
  }

  .job-details-sticky-header__text {
    flex: 1 1 auto;
    width: auto;
  }

  .job-details-sticky-header__cta {
    flex: 0 0 auto;
    align-self: flex-start;
    width: auto;
    min-width: 200px;
    max-width: 300px;
    white-space: nowrap;
  }
}

@media (max-width: 767px) {
  .job-details-sticky-header__inner {
    gap: 12px;
    padding: 12px var(--content-pad-x) 12px calc(var(--content-pad-x) + var(--modern-sidebar-hamburger-gutter, 0px));
  }
  .job-details-sticky-header__title {
    font-size: 20px;
  }
  .job-details-sticky-header__subtitle {
    font-size: 14px;
    line-height: 1.35;
  }
  .job-details-sticky-header__cta {
    padding: 14px 20px;
    font-size: 16px;
  }
}

/* Hero uses same markup as homeModern: .modernApplicant-customer-logo + .hero-banner.hero-banner--compact (see homeModern.css + styles.css) */

/* Intro: full content width above the two-column row (title may span wider than col-8 main).
   Tight margin-top because the .application-toprow-wrap (Back to jobs / Share this job)
   now sits directly above the title — Figma node 9-103 shows only ~16px between the
   toprow row and the bold job title. */
.job-details-intro {
  margin-top: 25px;
  width: 100%;
}

.job-details-intro__title {
  margin: 0 0 8px;
  font-family: var(--font-dm);
  font-size: var(--job-details-display-size);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-black);
}

.job-details-intro__subtitle {
  margin: 0 0 24px;
  font-family: var(--font-dm);
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0.036px;
  color: var(--color-neutral-500);
}

.job-details-intro__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Figma badges use 12px radius */
.job-details-intro__tags .tag {
  border-radius: 12px;
}

/* ----- Two-column body ----- */
.job-details-body {
  margin-top: 48px;
}

.job-details-main {
  display: flex;
  flex-direction: column;
  gap: 48px;
  max-width: 736px;
}

/* Interest-only notice (Application-Process Figma 1094:1821 / node 363:8037):
   pale blue bar above job ad copy */
.job-details-main--interest {
  gap: 32px;
}

.job-details-main--interest .job-details-apply {
  margin-top: 16px;
}

.job-details-interest-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 8px;
  background: #cff4fc;
}

.job-details-interest-banner__icon {
  flex-shrink: 0;
  font-size: 24px;
  line-height: 1;
  color: #055160;
}

.job-details-interest-banner__text {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-dm);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  color: #055160;
}

.job-details-section h2 {
  margin: 0 0 19px;
  font-family: var(--font-dm);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-black);
}

.job-details-section__body {
  font-family: var(--font-dm);
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032px;
  color: var(--color-black);
}

.job-details-section__body p {
  margin: 0 0 12px;
}

.job-details-section__body p:last-child {
  margin-bottom: 0;
}

.job-details-section__body ul {
  margin: 0;
  padding-left: 1.5rem;
}

.job-details-section__body li {
  margin-bottom: 0;
  padding-left: 0.25rem;
}

.job-details-section__body li:last-child {
  margin-bottom: 0;
}

/* Video embed placeholders */
.job-details-video-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 8px;
  background: var(--color-neutral-50);
  color: var(--color-black);
  font-family: var(--font-dm);
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0.032px;
}

.job-details-video-placeholder--large {
  aspect-ratio: 736 / 413;
  max-height: 70vh;
}

.job-details-video-placeholder--small {
  height: 200px;
}

/* Apply CTA (Figma: black pill, max 300px wide) */
.job-details-apply {
  margin-top: 8px;
}

.job-details-apply .btn-apply {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  max-width: 300px;
  width: 100%;
  padding: 16px 24px;
  border: none;
  border-radius: 6px;
  background: var(--color-black);
  font-family: var(--font-dm);
  font-size: 16px;
  font-weight: 600;
  line-height: 18px;
  color: var(--color-white);
  cursor: pointer;
  text-decoration: none;
}

.job-details-apply .btn-apply:hover {
  opacity: 0.92;
  color: var(--color-white);
}

/* ----- Sidebar ----- */
.job-details-sidebar {
  position: sticky;
  top: 16px;
}

.job-details-sidebar__heading {
  margin: 0 0 24px;
  font-family: var(--font-dm);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-black);
}

.job-details-sidebar__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.job-details-sidebar__list > li {
  border-bottom: 1px solid var(--color-neutral-200);
}

.job-details-sidebar__list > li:last-child {
  border-bottom: none;
}

.job-details-sidebar__row,
.job-details-sidebar__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  font-family: var(--font-dm);
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.032px;
  color: var(--color-black);
}

.job-details-sidebar__item {
  text-decoration: none;
}

.job-details-sidebar__item:hover {
  text-decoration: underline;
}

.job-details-sidebar__row .ph,
.job-details-sidebar__item .ph {
  flex-shrink: 0;
  font-size: 28px;
  color: var(--color-neutral-900);
}

.job-details-sidebar__video {
  margin-top: 24px;
}

/* Bootstrap: match home.html content width inside gutter */
.job-details-page .hero-spacer .container-fluid,
.job-details-page .application-intro-wrap .container-fluid,
.job-details-page .job-details-body .container-fluid {
  padding-left: 0;
  padding-right: 0;
  max-width: var(--content-width);
}

/* Job-location and Desired-hours modal CSS lives in
   inc/modernApplicantJobDetailsSidebar.inc.php so every consumer page
   (jobDetailsModern, jobApplicationModern, processApplicationModern,
   checklistModern) gets identical styling without each having to load
   jobDetailsModern.css. */

@media (max-width: 991px) {
  :root {
    --job-details-display-size: 36px;
  }

  /* Gap between Back to jobs row and mobile job-details card. Cannot use + because
     .job-details-intro (d-none on mobile) sits between toprow and card in the DOM. */
  .job-details-page .application-toprow-wrap ~ .jam-mobile-job-details-card {
    margin-top: 16px;
  }

  .job-details-page .jam-mobile-job-details-card + .job-details-body {
    margin-top: 24px;
  }

  .job-details-sidebar {
    position: static;
    margin-top: 48px;
    max-width: 100%;
  }

  .job-details-intro {
    max-width: 100%;
  }
}

/* Templated job ad (legacy #jobAdTemplate) inside modern layout */
.job-details-templated-jobad {
  max-width: 736px;
}

.job-details-templated-jobad #jobAdTemplate {
  width: 100%;
  border-collapse: collapse;
}

/* Job-ad masthead (template-masthead): one full-width cell — legacy 3-column row left gaps */
.job-details-templated-jobad #jobAdTemplate .job-details-masthead-cell {
  width: 100%;
  padding: 0;
  vertical-align: top;
}

.job-details-templated-jobad #jobAdTemplate .job-details-masthead-cell img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  vertical-align: top;
}

.job-details-freeform img {
  max-width: 100%;
  height: auto;
}

/* Safety net: pasted job ad markup must not inherit layout .page shell rules */
.job-ad-user-content .page,
.job-details-freeform .page {
  max-width: none;
  margin: 0;
  min-height: 0;
  position: static;
}

/* Bootstrap reboot gives p/ul/ol margin-bottom: 1rem; legacy ad copy does not */
.job-ad-user-content p,
.job-details-freeform p,
.job-ad-user-content li > p,
.job-details-freeform li > p {
  margin-top: 0;
  margin-bottom: 0;
}

.job-ad-user-content ul,
.job-ad-user-content ol,
.job-details-freeform ul,
.job-details-freeform ol {
  margin-top: 0;
  margin-bottom: 0;
}

/* Division footer strip (PHP-set background; mirrors microsite template-footer assets) */
.job-details-brand-footer {
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
  min-height: 120px;
  border-radius: 8px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Register-your-interest CTA (Application-Process Figma 1075:8669): white fill, black border, black label */
.job-details-sticky-header__cta--interest {
  border: 1px solid var(--color-black);
  background: var(--color-white);
  color: var(--color-black);
}

.job-details-sticky-header__cta--interest:hover,
.job-details-sticky-header__cta--interest:focus {
  opacity: 1;
  color: var(--color-black);
  background: var(--color-neutral-25);
  text-decoration: none;
}

.job-details-apply .btn-apply--interest {
  border: 1px solid var(--color-black);
  background: var(--color-white);
  color: var(--color-black);
}

.job-details-apply .btn-apply--interest:hover,
.job-details-apply .btn-apply--interest:focus {
  opacity: 1;
  color: var(--color-black);
  background: var(--color-neutral-25);
  text-decoration: none;
}

@media (max-width: 767px) {
  .job-details-apply .btn-apply {
    display: flex;
    width: 100%;
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
  }
}