/* FEAR Squad V3.14: charcoal stone navigation. */
:root{
  --fear-nav-rock:url('../img/ui-charred-rock-nav-v14.webp');
}

/* The stone is part of the fixed masthead, including its compact mobile state. */
html body[data-fear-redesign="portal-v3"] header.nav.fear-portal-header,
html body.fear-portal-scrolled[data-fear-redesign="portal-v3"] header.nav.fear-portal-header{
  border:0!important;
  border-bottom:1px solid rgba(184,142,58,.58)!important;
  background-color:#070808!important;
  background-image:
    linear-gradient(180deg,rgba(1,2,2,.18),rgba(1,2,2,.48)),
    var(--fear-nav-rock)!important;
  background-position:center,center 48%!important;
  background-size:cover,cover!important;
  background-repeat:no-repeat,no-repeat!important;
  box-shadow:0 2px 0 #020303,0 14px 28px rgba(0,0,0,.78)!important;
}

/* Remove the stretched steel-panel image that previously covered the rock. */
html body[data-fear-redesign="portal-v3"] header.nav .fear-portal-nav-shell{
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  clip-path:none!important;
}

html body[data-fear-redesign="portal-v3"] header.nav .fear-portal-nav-shell::before,
html body[data-fear-redesign="portal-v3"] header.nav .fear-portal-nav-shell::after{
  content:none!important;
  display:none!important;
}

.fear-portal-utility{
  border-bottom:1px solid rgba(178,136,62,.21)!important;
  background:
    linear-gradient(180deg,rgba(2,3,3,.86),rgba(2,3,3,.72)),
    var(--fear-nav-rock) center 33%/cover no-repeat,#070808!important;
  box-shadow:none!important;
}

/* The desktop destinations sit in a recessed band of the same stone. */
@media(min-width:901px){
  html body[data-fear-redesign="portal-v3"] header.nav .fear-portal-nav-menu{
    border:1px solid rgba(113,91,53,.54)!important;
    border-bottom-color:rgba(222,174,73,.62)!important;
    background:
      linear-gradient(180deg,rgba(2,3,3,.50),rgba(2,3,3,.82)),
      var(--fear-nav-rock) center 66%/cover no-repeat,#070808!important;
    box-shadow:inset 0 1px rgba(221,181,103,.10),0 7px 17px rgba(0,0,0,.72)!important;
    clip-path:none!important;
  }
  html body[data-fear-redesign="portal-v3"] header.nav .nav-links>a{
    background:rgba(2,3,3,.20)!important;
  }
  html body[data-fear-redesign="portal-v3"] header.nav .nav-links>a:hover,
  html body[data-fear-redesign="portal-v3"] header.nav .nav-links>a[aria-current="page"]{
    background:linear-gradient(180deg,rgba(171,117,32,.20),rgba(2,3,3,.52))!important;
  }
}

@media(max-width:900px){
  html body[data-fear-redesign="portal-v3"] header.nav.fear-portal-header{
    background-position:center,center 51%!important;
  }
  html body[data-fear-redesign="portal-v3"] header.nav .nav-toggle{
    border:1px solid rgba(201,157,72,.65)!important;
    border-radius:2px!important;
    background:rgba(3,4,4,.79)!important;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.75),0 5px 12px rgba(0,0,0,.54)!important;
  }
  html body[data-fear-redesign="portal-v3"] header.nav .nav-toggle span{
    background:#f0c46a!important;
  }
  html body[data-fear-redesign="portal-v3"] header.nav .nav-toggle:focus-visible{
    outline:2px solid #f0c46a!important;
    outline-offset:3px!important;
  }
  html body[data-fear-redesign="portal-v3"] header.nav .fear-portal-nav-menu,
  html body[data-fear-redesign="portal-v3"] header.nav #fear-navigation{
    border-top:1px solid rgba(194,154,74,.54)!important;
    background:
      linear-gradient(180deg,rgba(2,3,3,.87),rgba(2,3,3,.96)),
      var(--fear-nav-rock) center top/cover no-repeat,#050606!important;
    box-shadow:inset 0 1px rgba(255,218,136,.07),0 18px 35px rgba(0,0,0,.80)!important;
  }
}