/**
 * navigation.css
 *
 * Navigation stylesheet for the BridgePoints Insight website.
 * Contains styles for the header navigation bar, language selector dropdown,
 * mobile sidebar menu, and responsive navigation behavior.
 */

/* ============================================
   Language Selector Dropdown
   ============================================ */

.language-container .menu-down {
  content: '';
  width: 90px;
  height: 0;
  overflow: hidden;
  background-color: #000000;
  position: absolute;
  top: 70px;
  left: 0;
  transition: height 0.5s ease;
}

.sidebar-btn {
  cursor: pointer;
}

/* ============================================
   Desktop Navigation (>= 1024px)
   ============================================ */

@media (min-width: 1024px) {
  .nav-item::after {
    content: '';
    width: 100%;
    height: 0;
    background-color: #fff;
    position: absolute;
    left: 0;
    bottom: 10px;
    transition: height 0.5s ease;
  }

  .nav-item:hover::after {
    height: 2px;
  }

  .nav-item.active::after {
    height: 2px;
  }

  .language-container:hover .menu-down {
    height: 100px;
  }
}

/* ============================================
   Mobile Navigation (< 1024px)
   ============================================ */

@media (max-width: 1024px) {
  .header-container {
    height: 70px;
    overflow: hidden;
    transition: height 0.5s ease;
  }

  .nav-box {
    height: calc(100vh - 70px);
  }

  .header-container::after {
    content: '';
    width: 100%;
    height: 0;
    background-color: #10122b;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    transition: height 0.6s ease;
  }

  .header-container.active::after {
    height: 100vh;
  }

  .header-container.active {
    height: 100vh;
  }

  .header-container.active .nav-box {
    display: block;
  }

  .header-container.active2 .language-box {
    display: block;
  }

  .header-container.active2::after {
    height: 200px;
  }

  .header-container.active2 {
    height: 200px;
  }
}