/* Site Side Navigation Rail v1.1
   Reuses the locally validated Research rail design
   for non-Research pages.

   v1.1:
   - Preserves approved desktop behavior.
   - Prevents mobile/tablet rail from displaying inside the hero.
   - Mobile/tablet rail is displayed only when JavaScript applies
     the .is-visible state after the visitor exits the hero.
*/

:root{
  --sr-navy:#07182c;
  --sr-gold:#d6aa2c;
}


/* =========================================================
   DESKTOP RAIL
   ========================================================= */

.page-side-rail{
  position:fixed;
  right:20px;
  top:50%;
  transform:translateY(-50%);
  z-index:1000;

  width:160px;

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transition:
    opacity .25s ease,
    transform .25s ease,
    visibility .25s ease;
}


.page-side-rail.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(-50%);
}


.page-side-rail-toggle{
  display:none;
}


.page-side-rail-panel{
  width:160px;
  padding:.55rem .6rem;

  display:flex;
  flex-direction:column;
  gap:.45rem;

  background:var(--sr-navy);
  border:1px solid rgba(214,170,44,.55);
  border-radius:12px;

  box-shadow:0 18px 40px rgba(7,24,44,.24);

  overflow:hidden;
}


.page-side-rail-group{
  padding:.55rem 0;
  border-bottom:1px solid rgba(255,255,255,.10);
}


.page-side-rail-group:last-child{
  border-bottom:0;
}


.page-side-rail-group strong{
  display:block;
  margin:0 0 .45rem;

  color:var(--sr-gold);

  font-size:.60rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}


.page-side-rail-group a{
  display:block;

  padding:.28rem .42rem;
  margin-bottom:.12rem;

  border-radius:6px;

  color:rgba(255,255,255,.86);

  font-size:.69rem;
  line-height:1.35;

  text-decoration:none;

  transition:
    background .2s ease,
    color .2s ease,
    padding-left .2s ease;
}


.page-side-rail-group a:hover,
.page-side-rail-group a.is-active{
  background:rgba(214,170,44,.18);
  color:#fff;
  padding-left:.65rem;
}


/* Prevent anchored sections from hiding behind sticky header */

.page-side-rail-target{
  scroll-margin-top:92px;
}


/* Slightly narrower desktop rail */

@media(max-width:1180px){

  .page-side-rail{
    right:8px;
    width:132px;
  }

}


/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media(max-width:980px){

  /*
     IMPORTANT:

     The mobile rail is hidden by default.

     JavaScript adds .is-visible only after the visitor
     has exited the hero.

     This prevents "On this page" from overlapping or
     competing with "Explore this page."
  */

  .page-side-rail{
    position:sticky;
    top:76px;
    right:auto;

    transform:none;

    width:100%;
    margin:0;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    background:#fff;
    z-index:35;

    display:none;
  }


  /*
     Display the mobile navigation only after the
     JavaScript determines that the hero has been cleared.
  */

  .page-side-rail.is-visible{
    display:block;

    opacity:1;
    visibility:visible;
    pointer-events:auto;

    transform:none;
  }


  .page-side-rail-toggle{
    display:block;

    width:100%;
    padding:.75rem 1rem;

    background:var(--sr-navy);
    color:#fff;
    border:0;

    text-align:left;
    cursor:pointer;
  }


  .page-side-rail-panel{
    display:none;

    width:100%;

    border-radius:0;
  }


  .page-side-rail.is-open .page-side-rail-panel{
    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:.4rem 1rem;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media(max-width:680px){

  .page-side-rail.is-open .page-side-rail-panel{
    grid-template-columns:1fr;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

  .page-side-rail,
  .page-side-rail *{
    scroll-behavior:auto!important;
    transition:none!important;
  }

}