/* Shared Fullscreen Overlay Navigation Styles (Reusable)
   Derived from pages/fieldwork/overlay-nav.css
   Usage: Include this stylesheet and overlay-nav.js, then place markup:
     <div class="fw-overlay-navigation overlay-navigation" aria-hidden="true"> ... </div>
     <button class="fw-open-overlay open-overlay" aria-label="Open navigation" aria-expanded="false">...</button>
*/
.fw-overlay-navigation.overlay-navigation{position:fixed;z-index:200;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.97);transform:translateY(-100%);} 
.fw-overlay-navigation.overlay-navigation.overlay-slide-down{transition:all .4s ease-in-out;transform:translateY(0);} 
.fw-overlay-navigation.overlay-navigation.overlay-slide-up{transition:all .6s ease-in-out;transform:translateY(-100%);} 
.fw-overlay-navigation nav,.fw-overlay-navigation nav ul{width:100%;height:100%;margin:0;padding:0;} 
.fw-overlay-navigation nav ul{display:flex;list-style:none;} 
.fw-overlay-navigation nav ul li{flex-basis:20%;justify-content:center;align-items:center;height:100%;overflow:hidden;transform:translateY(-100%);display:flex;} 
.fw-overlay-navigation nav li a{position:relative;top:0;color:#fff;text-transform:uppercase;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;font-weight:300;letter-spacing:2px;text-decoration:none;display:block;text-align:center;font-size:.9rem;padding:.25rem 0;width:100%;}
.fw-overlay-navigation nav li a:after{content:attr(data-content);font-size:.7rem;transition:all .2s ease;opacity:0;position:absolute;z-index:100;color:rgba(255,255,255,0.6);display:block;left:0;right:0;bottom:-50px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;font-weight:300;letter-spacing:0;}
.fw-overlay-navigation nav li a:hover:after{transform:translateY(15px);opacity:1;} 
.fw-overlay-navigation nav li:nth-of-type(1){background-color:#0a0a0a}
.fw-overlay-navigation nav li:nth-of-type(2){background-color:#1a1a1a}
.fw-overlay-navigation nav li:nth-of-type(3){background-color:#2a2a2a}
.fw-overlay-navigation nav li:nth-of-type(4){background-color:#3a3a3a}
.fw-overlay-navigation nav li:nth-of-type(5){background-color:#4a4a4a} 
.fw-overlay-navigation .slide-in-nav-item{animation:fw-slide-in-nav-item .4s linear 1 .2s both;} 
.fw-overlay-navigation .slide-in-nav-item-delay-1{animation:fw-slide-in-nav-item .4s linear 1 .4s both;} 
.fw-overlay-navigation .slide-in-nav-item-delay-2{animation:fw-slide-in-nav-item .4s linear 1 .6s both;} 
.fw-overlay-navigation .slide-in-nav-item-delay-3{animation:fw-slide-in-nav-item .4s linear 1 .8s both;} 
.fw-overlay-navigation .slide-in-nav-item-delay-4{animation:fw-slide-in-nav-item .4s linear 1 1s both;} 
.fw-overlay-navigation .slide-in-nav-item-reverse{animation:fw-slide-in-nav-item-reverse .3s linear 1 .5s both;} 
.fw-overlay-navigation .slide-in-nav-item-delay-1-reverse{animation:fw-slide-in-nav-item-reverse .3s linear 1 .4s both;} 
.fw-overlay-navigation .slide-in-nav-item-delay-2-reverse{animation:fw-slide-in-nav-item-reverse .3s linear 1 .3s both;} 
.fw-overlay-navigation .slide-in-nav-item-delay-3-reverse{animation:fw-slide-in-nav-item-reverse .3s linear 1 .2s both;} 
.fw-overlay-navigation .slide-in-nav-item-delay-4-reverse{animation:fw-slide-in-nav-item-reverse .3s linear 1 both;} 
.fw-open-overlay.open-overlay{position:absolute;right:2rem;top:1.5rem;z-index:210;width:42px;display:block;cursor:pointer;background:transparent;border:none;padding:6px 4px;}
.fw-open-overlay.open-overlay span{display:block;height:2px;background-color:#fff;cursor:pointer;margin-top:7px;width:100%;} 
.animate-top-bar{animation:fw-animate-top-bar .6s linear 1 both;} 
.animate-bottom-bar{animation:fw-animate-bottom-bar .6s linear 1 both;} 
.animate-middle-bar{animation:fw-animate-middle-bar .6s linear 1 both;} 
.animate-out-top-bar{animation:fw-animate-out-top-bar .6s linear 1 both;} 
.animate-out-bottom-bar{animation:fw-animate-out-bottom-bar .6s linear 1 both;} 
.animate-out-middle-bar{animation:fw-animate-out-middle-bar .6s linear 1 both;} 
@keyframes fw-slide-in-nav-item{from{transform:translateY(-100%);}to{transform:translateY(0);}} 
@keyframes fw-slide-in-nav-item-reverse{from{transform:translateY(0);}to{transform:translateY(-100%);}} 
@keyframes fw-animate-top-bar{0%{background:#fff;}50%{transform:translateY(9px);}80%{transform:translateY(5px);background:#fff;}100%{transform:translateY(0);background:#0a0a0a;}}
@keyframes fw-animate-bottom-bar{0%{background:#fff;}50%{transform:translateY(-9px);}80%{transform:translateY(-5px);background:#fff;}100%{transform:translateY(0);background:#0a0a0a;}}
@keyframes fw-animate-middle-bar{0%{background:#fff;}80%{background:#fff;}100%{background:#0a0a0a;}}
@keyframes fw-animate-out-top-bar{0%{background:#0a0a0a;}50%{transform:translateY(9px);}80%{transform:translateY(5px);background:#0a0a0a;}100%{transform:translateY(0);background:#fff;}}
@keyframes fw-animate-out-bottom-bar{0%{background:#0a0a0a;}50%{transform:translateY(-9px);}80%{transform:translateY(-5px);background:#0a0a0a;}100%{transform:translateY(0);background:#fff;}}
@keyframes fw-animate-out-middle-bar{0%{background:#0a0a0a;}80%{background:#0a0a0a;}100%{background:#fff;}} 
@media (max-width:640px){.fw-overlay-navigation nav ul li a{font-size:11px;}.fw-open-overlay.open-overlay{right:1rem;}} 
.fw-overlay-navigation nav li a:focus{outline:2px solid #fff;outline-offset:4px;}

/* Mobile vertical stack with horizontal expansion (<=640px) */
@media (max-width:640px){
  .fw-overlay-navigation nav ul{flex-direction:column;height:100%;}
  .fw-overlay-navigation nav ul li{
    flex:1 1 20%;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    transform:scaleX(0);
    transform-origin:left center;
    opacity:0;
  }
  /* Remap existing animation classes to scaleX grow */
  .fw-overlay-navigation .slide-in-nav-item{animation:fw-grow-in .42s ease-out .18s forwards;}
  .fw-overlay-navigation .slide-in-nav-item-delay-1{animation:fw-grow-in .42s ease-out .34s forwards;}
  .fw-overlay-navigation .slide-in-nav-item-delay-2{animation:fw-grow-in .42s ease-out .50s forwards;}
  .fw-overlay-navigation .slide-in-nav-item-delay-3{animation:fw-grow-in .42s ease-out .66s forwards;}
  .fw-overlay-navigation .slide-in-nav-item-delay-4{animation:fw-grow-in .42s ease-out .82s forwards;}
  .fw-overlay-navigation .slide-in-nav-item-reverse{animation:fw-grow-out .28s ease-in .10s forwards;}
  .fw-overlay-navigation .slide-in-nav-item-delay-1-reverse{animation:fw-grow-out .28s ease-in .08s forwards;}
  .fw-overlay-navigation .slide-in-nav-item-delay-2-reverse{animation:fw-grow-out .28s ease-in .06s forwards;}
  .fw-overlay-navigation .slide-in-nav-item-delay-3-reverse{animation:fw-grow-out .28s ease-in .04s forwards;}
  .fw-overlay-navigation .slide-in-nav-item-delay-4-reverse{animation:fw-grow-out .28s ease-in 0s forwards;}
}
@keyframes fw-grow-in{0%{transform:scaleX(0);opacity:0;}60%{opacity:1;}100%{transform:scaleX(1);opacity:1;}}
@keyframes fw-grow-out{0%{transform:scaleX(1);opacity:1;}100%{transform:scaleX(0);opacity:0;}}