/* ==========================================================================
   Red Box Software - site navigation
   --------------------------------------------------------------------------
   The styling for the shared navigation, lifted out of style.css so that any
   page can show the nav correctly without also inheriting the whole legacy
   stylesheet. The document signing pages use their own light theme and do not
   load style.css at all; before this file existed their nav rendered as raw
   bulleted lists with the mobile menu permanently open.

   scripts2/build-nav.js links this file on every page it manages, alongside
   the nav markup and scripts/nav.js. Edit nav styling here and nowhere else.
   ========================================================================== */

#logo {
  width: 150px;
  height: auto;
}

#burger {
  display: none;
}

.dropdown-content {
  position: fixed;
  background-color: #ff2c3c;

  display: none;
  z-index: 999;
}

.nav-links {
  display: flex;

  justify-content: space-around;
  align-items: center;
  width: 50%;
  list-style: none;
  column-gap: 20px;
  padding: 10px;
  margin: 0;
  margin-right: 30px;
  gap: 10px;
}

#webNav {
  display: flex;
  flex-wrap: wrap;
}

.line {
  width: 30px;
  height: 10px;
  background-color: #ff2c3c;
  transition: background-color 0.2s ease;
  will-change: background-color;
}

nav {
  background-color: #0f0f0f;
  color: #fff;
  display: flex;
  padding: 0;
  justify-content: space-between;
  align-self: center;
  align-items: center;
  width: 100vw !important;
  min-width: 100vw !important;
  max-width: 100vw !important;
  z-index: 995;
}

nav .navBtnsCont {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  overflow-y: scroll;
}

.sign-out-btn {
  display: none;
  background-color: #ff2c3c;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

nav a {
  color: #fff;
  text-decoration: none;
  width: auto;
  height: auto;
}

nav li {
  display: inline-block;
  border: 1px solid #1f1f1f;
  column-gap: 20px;
  padding: 10px;
  width: auto;
  height: auto;
  transition: all 0.3s ease;
}

nav li:hover:not(.active) {
  border: 1px solid #ff2c3c;
  width: auto;
  height: auto;
}

nav a.active {
  width: auto;
  height: auto;
  background-color: #ff2c3c;
}

.logo {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 60px;
  height: 60px;
  margin: 20px;
  row-gap: 10px;
  color: #ff2c3c;
  gap: 20px;
}

.tools-dropdown {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.tools-dropdown li {
  text-wrap: nowrap;
}

.tools-dropdown-content {
  display: none;
  position: absolute;
  top: 100%;

  background-color: #0f0f0f;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 11;
}

.tools-dropdown:hover .tools-dropdown-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.tools-dropdown-content a {
  display: flex;
  padding: 12px 16px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.tools-dropdown-content a:hover {
  background-color: #ff2c3c;
}

@media (max-width: 970px) {
  #burger {
      display: flex !important;
      flex-direction: column;
      justify-content: space-around;
      position: absolute;
      right: 20px;
      row-gap: 5px;
      gap: 5px;
      width: 30px;
      height: 30px;
      padding: 20px;
      margin: 0;
      transition: background-color 0.2s ease;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      z-index: 10;
    }
  #burger:hover,
    #burger:active {
      background-color: #000;
    }
  .shadow {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      display: none !important;
      transition: opacity 0.2s ease, visibility 0.2s ease;
      z-index: 996;
      will-change: opacity;
      backface-visibility: hidden;
    }
  .shadow.show {
      pointer-events: auto !important;
      z-index: 996;
      display: block !important;
    }
  .dropdown-content {
      display: none;
      position: fixed;
      background-color: #ff2c3c;
      top: 80px;
      right: 20%;
      left: 20%;
      width: 58%;
      padding: 2%;
      height: auto;
      max-height: 70vh;
      transform: translateY(-20px);
  
      overflow-y: auto;
      overflow-x: hidden;
      transition: transform 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;
      z-index: 999;
      will-change: transform, opacity;
  
      -webkit-font-smoothing: antialiased;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: 20px;
      scrollbar-color: #ff2c3c #1a1a1a;
    }
  .dropdown-content.show {
      display: block !important;
      transform: translateY(0);
  
      z-index: 999;
      overflow-y: auto;
    }
  .nav-links {
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #ff2c3c;
      width: 100%;
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
  #webNav {
      display: none;
    }
}

@media (max-width: 800px) {
  .tools-dropdown-content {
      position: relative;
      box-shadow: 11;
      width: 100%;
    }
}