/* SpinOut U V16.3.6 — persistent marketplace navigation rails
   Keeps the Student Opportunity Worlds rail and Campus receiving-environment rail
   visible beneath the primary header while the page scrolls. */

:root{
  --spinoutu-sticky-header-desktop:136px;
  --spinoutu-sticky-header-tablet:154px;
  --spinoutu-sticky-header-mobile:144px;
}

/* One stable sticky header stack: primary controls + horizontal context rail. */
.site-header-v4,
.campus-market-header{
  position:sticky!important;
  top:0!important;
  z-index:120!important;
  overflow:visible!important;
  isolation:isolate;
}

/* The Student rail must remain available on destination pages as well as home. */
body.post-homepage-route .site-header-v4 .focus-nav-v4,
body.header-compact.post-homepage-route .site-header-v4 .focus-nav-v4,
.site-header-v4 .focus-nav-v4,
.campus-market-header .campus-world-nav{
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
  height:52px!important;
  min-height:52px!important;
  overflow:hidden!important;
  background:rgba(255,255,255,.985)!important;
  border-top:1px solid #f0ede9!important;
  border-bottom:1px solid #e8e4df!important;
  box-shadow:none!important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.campus-market-header .campus-world-nav{
  height:48px!important;
  min-height:48px!important;
}

.site-header-v4 .focus-nav-inner,
.site-header-v4 .focus-links-v4{
  height:52px!important;
  min-height:52px!important;
}
.campus-market-header .campus-world-nav .focus-nav-inner,
.campus-market-header .campus-world-nav .focus-links{
  height:48px!important;
  min-height:48px!important;
}

/* Horizontal browsing should feel native and never wrap into page content. */
.site-header-v4 .focus-links-v4,
.campus-market-header .campus-world-nav .focus-links{
  overflow-x:auto!important;
  overflow-y:hidden!important;
  white-space:nowrap!important;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none!important;
  touch-action:pan-x pan-y;
}
.site-header-v4 .focus-links-v4::-webkit-scrollbar,
.campus-market-header .campus-world-nav .focus-links::-webkit-scrollbar{display:none!important}

/* Keep the rail visually attached to the header while scrolling, without resizing it. */
body.header-scrolled .site-header-v4,
body.header-compact .site-header-v4,
body.header-scrolled .campus-market-header,
body.header-compact .campus-market-header{
  box-shadow:0 5px 18px rgba(20,20,20,.08)!important;
}

/* Full-screen discovery overlays can intentionally own the viewport. */
body.discovery-open .site-header-v4 .focus-nav-v4,
body.themes-open .site-header-v4 .focus-nav-v4{
  display:none!important;
  height:0!important;
  min-height:0!important;
  border:0!important;
}

/* Anchored destinations should not disappear beneath the persistent rail stack. */
html{scroll-padding-top:calc(var(--spinoutu-sticky-header-desktop) + 12px)}

@media(max-width:980px){
  .site-header-v4 .focus-nav-v4,
  body.post-homepage-route .site-header-v4 .focus-nav-v4,
  body.header-compact.post-homepage-route .site-header-v4 .focus-nav-v4{
    height:46px!important;
    min-height:46px!important;
  }
  .site-header-v4 .focus-nav-inner,
  .site-header-v4 .focus-links-v4{
    height:46px!important;
    min-height:46px!important;
  }
  .campus-market-header .campus-world-nav,
  .campus-market-header .campus-world-nav .focus-nav-inner,
  .campus-market-header .campus-world-nav .focus-links{
    height:46px!important;
    min-height:46px!important;
  }
  html{scroll-padding-top:calc(var(--spinoutu-sticky-header-tablet) + 10px)}
}

@media(max-width:620px){
  .site-header-v4 .focus-nav-v4,
  body.post-homepage-route .site-header-v4 .focus-nav-v4,
  body.header-compact.post-homepage-route .site-header-v4 .focus-nav-v4,
  .campus-market-header .campus-world-nav{
    height:46px!important;
    min-height:46px!important;
  }
  .site-header-v4 .focus-nav-inner,
  .site-header-v4 .focus-links-v4,
  .campus-market-header .campus-world-nav .focus-nav-inner,
  .campus-market-header .campus-world-nav .focus-links{
    height:46px!important;
    min-height:46px!important;
  }
  .site-header-v4 .focus-links-v4,
  .campus-market-header .campus-world-nav .focus-links{
    gap:20px!important;
    padding-inline:2px!important;
  }
  .site-header-v4 .focus-links-v4 button,
  .campus-market-header .campus-world-nav .focus-links button{
    min-height:46px!important;
    height:46px!important;
    flex:0 0 auto!important;
  }
  html{scroll-padding-top:calc(var(--spinoutu-sticky-header-mobile) + 10px)}
}

/* V16.3.7 — persistent local section navigation on rendered detail pages.
   The marketplace uses the URL hash as an application router, so these links are
   treated as local scroll targets by the public interaction runtime instead of routes. */
.detail-body{
  overflow:visible!important;
}
.detail-nav{
  display:block!important;
  position:sticky!important;
  top:calc(var(--spinoutu-sticky-header-desktop) + 18px)!important;
  align-self:start!important;
  z-index:34!important;
  max-height:calc(100dvh - var(--spinoutu-sticky-header-desktop) - 42px);
  overflow-y:auto;
  padding:6px 16px 10px 0;
  scrollbar-width:none;
}
.detail-nav::-webkit-scrollbar{display:none}
.detail-nav a{
  position:relative;
  display:block!important;
  padding:9px 10px 9px 15px!important;
  border-radius:10px;
  color:#667085!important;
  text-decoration:none!important;
  font-size:13px!important;
  line-height:1.25;
  font-weight:760!important;
  transition:background-color .16s ease,color .16s ease,transform .16s ease;
}
.detail-nav a::before{
  content:"";
  position:absolute;
  left:0;
  top:9px;
  bottom:9px;
  width:2px;
  border-radius:999px;
  background:transparent;
}
.detail-nav a:hover,
.detail-nav a:focus-visible,
.detail-nav a.is-active,
.detail-nav a[aria-current="location"]{
  color:#151515!important;
  background:#f6f6f4;
  outline:none;
}
.detail-nav a.is-active::before,
.detail-nav a[aria-current="location"]::before{background:#1769ff}
.detail-body .content-block{
  scroll-margin-top:calc(var(--spinoutu-sticky-header-desktop) + 20px)!important;
}

@media(max-width:1100px){
  .detail-nav{
    display:flex!important;
    position:sticky!important;
    top:var(--spinoutu-sticky-header-tablet)!important;
    z-index:88!important;
    width:100%!important;
    max-width:100%!important;
    max-height:none!important;
    margin:0!important;
    padding:6px 0!important;
    gap:4px;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    white-space:nowrap;
    background:rgba(255,255,255,.985);
    border-bottom:1px solid #ece9e5;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    box-shadow:0 6px 15px rgba(15,23,42,.04);
    scrollbar-width:none;
  }
  .detail-nav a{
    flex:0 0 auto;
    padding:9px 12px!important;
    border-radius:999px;
    font-size:12px!important;
  }
  .detail-nav a::before{display:none}
  .detail-nav a.is-active,
  .detail-nav a[aria-current="location"]{
    background:#171717!important;
    color:#fff!important;
  }
  .detail-body .content-block{
    scroll-margin-top:calc(var(--spinoutu-sticky-header-tablet) + 58px)!important;
  }
}

@media(max-width:620px){
  .detail-nav{
    top:var(--spinoutu-sticky-header-mobile)!important;
    margin-inline:-16px!important;
    width:calc(100% + 32px)!important;
    max-width:calc(100% + 32px)!important;
    padding:6px 16px!important;
  }
  .detail-body .content-block{
    scroll-margin-top:calc(var(--spinoutu-sticky-header-mobile) + 58px)!important;
  }
}

/* V16.3.7 — detail-page visual normalization. */
.detail-body main{min-width:0}
.detail-body .content-block h2{
  max-width:980px;
  font-size:clamp(27px,3vw,42px)!important;
  line-height:1.04!important;
  letter-spacing:-.04em!important;
  font-weight:680!important;
}
.detail-body .content-block>p,
.detail-body .content-block>.claim{
  max-width:980px;
  font-size:16px!important;
  line-height:1.62!important;
}
.detail-body .info-grid{gap:14px!important}
.detail-body .info-card{padding:18px!important;border-radius:15px!important}
.detail-body .info-card h3{font-size:clamp(18px,1.7vw,24px)!important;line-height:1.15!important}
.detail-body .info-card p{font-size:14px!important;line-height:1.5!important}
@media(max-width:760px){
  .detail-body{padding-top:20px!important;gap:18px!important}
  .detail-body .content-block{padding:26px 0!important}
  .detail-body .content-block h2{font-size:clamp(25px,8vw,34px)!important}
  .detail-body .info-grid{grid-template-columns:1fr!important}
}

/* V16.3.8 — live-site persistence hardening.
   The browser-facing marketplace header is fixed with a measured spacer so the
   primary controls and active horizontal rail remain available on every rendered view.
   This is a fallback-safe replacement for relying on position:sticky alone. */
:root{
  --su-live-header-stack:136px;
  --su-live-header-stack-gap:148px;
}
body.su-persistent-navigation .site-header-v4{
  position:fixed!important;
  inset:0 0 auto 0!important;
  width:100%!important;
  max-width:none!important;
  z-index:500!important;
  transform:none!important;
  will-change:auto!important;
}
.su-persistent-header-spacer{
  display:block!important;
  width:100%!important;
  height:var(--su-live-header-stack)!important;
  min-height:var(--su-live-header-stack)!important;
  pointer-events:none!important;
  visibility:hidden!important;
}
/* Older compatibility CSS hid interaction on post-homepage rails. Visibility alone
   was not enough: restore pointer ownership explicitly. */
body.post-homepage-route .site-header-v4 .focus-nav-v4,
body.post-homepage-route .site-header-v4 .focus-nav-v4 *,
.site-header-v4 .focus-nav-v4,
.site-header-v4 .focus-nav-v4 *,
.campus-market-header .campus-world-nav,
.campus-market-header .campus-world-nav *{
  pointer-events:auto!important;
}
body.post-homepage-route .site-header-v4 .focus-nav-v4,
body.header-compact.post-homepage-route .site-header-v4 .focus-nav-v4{
  transform:none!important;
}
/* Keep local opportunity navigation inside the same measured sticky stack. */
#app,
#campusApp,
.detail-body,
.detail-body>main{
  overflow:visible!important;
  transform:none!important;
  contain:none!important;
}
.detail-body{position:relative!important}
.detail-nav{
  position:-webkit-sticky!important;
  position:sticky!important;
  top:calc(var(--su-live-header-stack) + 16px)!important;
  height:max-content!important;
  max-height:calc(100dvh - var(--su-live-header-stack) - 30px)!important;
}
.detail-body .content-block{
  scroll-margin-top:calc(var(--su-live-header-stack) + 20px)!important;
}
@media(max-width:1100px){
  .detail-nav{
    top:var(--su-live-header-stack)!important;
    max-height:none!important;
  }
  .detail-body .content-block{
    scroll-margin-top:calc(var(--su-live-header-stack) + 58px)!important;
  }
}
@media(max-width:620px){
  .detail-nav{top:var(--su-live-header-stack)!important}
  .detail-body .content-block{
    scroll-margin-top:calc(var(--su-live-header-stack) + 58px)!important;
  }
}

/* Desktop local-navigation fallback: use measured fixed positioning after the
   opportunity content reaches the header stack. Main content is pinned to column 2
   so the page never reflows when the navigation changes positioning mode. */
@media(min-width:1101px){
  .detail-body>main{grid-column:2!important}
  .detail-nav.su-detail-nav-fixed{
    position:fixed!important;
    top:calc(var(--su-live-header-stack) + 16px)!important;
    left:var(--su-detail-nav-left)!important;
    width:var(--su-detail-nav-width)!important;
    z-index:110!important;
  }
  .detail-nav.su-detail-nav-bottomed{
    position:absolute!important;
    top:var(--su-detail-nav-bottom-top)!important;
    left:0!important;
    width:var(--su-detail-nav-width)!important;
    z-index:40!important;
  }
}


/* V16.3.13 — scroll + mobile interaction stability */
body.su-cinematic-home .su-persistent-header-spacer{
  height:0!important;
  min-height:0!important;
}
#departmentBar:not(.is-open),
#discoveryPanel:not(.is-open),
.search-discovery-v2:not(.is-open){pointer-events:none!important}
@media(max-width:1100px){
  #app .destination-page button,
  #app .destination-page a,
  #app .detail-body button,
  #app .detail-body a,
  #campusApp button,
  #campusApp a{pointer-events:auto!important;-webkit-tap-highlight-color:transparent}
}