<header class="header" id="header">
   <section class="wrapper container">
      <a href="./index.html" class="brand">Brand</a>
      <div class="burger" id="burger">
         <span class="burger-line"></span>
         <span class="burger-line"></span>
         <span class="burger-line"></span>
      </div>
      <span class="overlay"></span>
      <nav class="navbar" id="navbar">
         <ul class="menu" id="menu">
            <li class="menu-item"><a href="#" class="menu-link">Home</a></li>
            <li class="menu-item menu-dropdown">
               <span class="menu-link" data-toggle="submenu">Feature<i class="bx bx-chevron-down"></i></span>
               <ul class="submenu">
                  <li class="submenu-item"><a href="#" class="submenu-link">Feature Link</a></li>
                  <li class="submenu-item"><a href="#" class="submenu-link">Feature Link</a></li>
                  <li class="submenu-item"><a href="#" class="submenu-link">Feature Link</a></li>
                  <li class="submenu-item"><a href="#" class="submenu-link">Feature Link</a></li>
               </ul>
            </li>
            <li class="menu-item menu-dropdown">
               <span class="menu-link" data-toggle="submenu">Discover<i class="bx bx-chevron-down"></i></span>
               <ul class="submenu">
                  <li class="submenu-item"><a href="#" class="submenu-link">Discover Link</a></li>
                  <li class="submenu-item"><a href="#" class="submenu-link">Discover Link</a></li>
                  <li class="submenu-item"><a href="#" class="submenu-link">Discover Link</a></li>
                  <li class="submenu-item"><a href="#" class="submenu-link">Discover Link</a></li>
               </ul>
            </li>
            <li class="menu-item menu-dropdown">
               <span class="menu-link" data-toggle="submenu">Resource<i class="bx bx-chevron-down"></i></span>
               <ul class="submenu">
                  <li class="submenu-item"><a href="#" class="submenu-link">Resource Link</a></li>
                  <li class="submenu-item"><a href="#" class="submenu-link">Resource Link</a></li>
                  <li class="submenu-item"><a href="#" class="submenu-link">Resource Link</a></li>
                  <li class="submenu-item"><a href="#" class="submenu-link">Resource Link</a></li>
               </ul>
            </li>
            <li class="menu-item"><a href="#" class="menu-link">Support</a></li>
         </ul>
      </nav>
   </section>
</header>

:root {
   --color-white-100: hsl(206, 5%, 100%);
   --color-white-200: hsl(206, 5%, 90%);
   --color-white-300: hsl(206, 5%, 80%);
   --color-white-400: hsl(206, 5%, 60%);
   --color-white-500: hsl(206, 5%, 50%);

   --color-black-100: hsl(213, 23%, 8%);
   --color-black-200: hsl(214, 21%, 6%);
   --color-black-300: hsl(210, 21%, 6%);
   --color-black-400: hsl(216, 22%, 4%);
   --color-black-500: hsl(220, 18%, 3%);

   --color-pink-100: hsl(326, 85%, 90%);
   --color-pink-200: hsl(327, 87%, 80%);
   --color-pink-300: hsl(329, 86%, 70%);
   --color-pink-400: hsl(330, 81%, 60%);
   --color-pink-500: hsl(333, 71%, 50%);

   --shadow-small: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
      0 1px 2px 0 rgba(0, 0, 0, 0.06);
   --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
      0 2px 4px -1px rgba(0, 0, 0, 0.06);
   --shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
      0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

*,
*::before,
*::after {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   list-style: none;
   list-style-type: none;
   text-decoration: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
}

html {
   font-size: 100%;
   box-sizing: inherit;
   scroll-behavior: smooth;
   height: -webkit-fill-available;
}

body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
   color: var(--color-black-500);
   background-color: var(--color-white-100);
}

a,
button {
   cursor: pointer;
   border: none;
   outline: none;
   user-select: none;
   background: none;
   box-shadow: none;
}

img,
video {
   display: block;
   max-width: 100%;
   height: auto;
   object-fit: cover;
}

// Elements
.container {
   max-width: 75rem;
   height: auto;
   margin: 0 auto;
   padding: 0 1.25rem;
}

.brand {
   font-family: inherit;
   font-size: 1.6rem;
   font-weight: 700;
   line-height: 1.25;
   letter-spacing: -1px;
   text-transform: uppercase;
   color: var(--color-pink-500);
}

// Header
.header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: auto;
   z-index: 100;
   margin: 0 auto;
   box-shadow: var(--shadow-medium);
   background-color: var(--color-white-100);
}

// Wrapper
.wrapper {
   display: flex;
   align-items: center;
   justify-content: space-between;
   column-gap: 1rem;
   row-gap: 2rem;
   width: 100%;
   height: 4rem;
   margin: 0 auto;
}

// Navbar
.navbar {
   @media screen and (max-width: 992px) {
      position: fixed;
      top: 0;
      left: -100%;
      width: 75%;
      height: 100%;
      z-index: 10;
      opacity: 0;
      overflow-y: auto;
      visibility: hidden;
      box-shadow: var(--shadow-medium);
      background-color: var(--color-white-100);
      transition: all 0.5s ease;

      &.active {
         left: 0rem;
         opacity: 1;
         visibility: visible;
      }
   }
}

// Menu
.menu {
   &-item {
      position: relative;
      display: inline-block;
      margin-left: 1.5rem;
   }

   &-link {
      display: flex;
      justify-content: center;
      align-items: center;
      column-gap: 0.25rem;
      font-family: inherit;
      font-size: 1rem;
      font-weight: 500;
      line-height: inherit;
      cursor: pointer;
      text-transform: capitalize;
      color: var(--color-black-500);
      transition: all 0.3s ease-in-out;

      > i.bx {
         font-size: 1.35rem;
         line-height: 1.5;
         color: inherit;
      }

      &:hover {
         outline: none;
         color: var(--color-pink-500);
      }
   }

   // Responsive Media Query
   @media only screen and (min-width: 993px) {
      &-dropdown:hover {
         > .submenu {
            display: block;
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
         }
      }
   }

   // Responsive Media Query
   @media only screen and (max-width: 992px) {
      width: 100%;
      height: auto;
      padding: 1rem 0;

      &-item {
         display: block;
         margin: 0 auto;
      }

      &-link {
         justify-content: space-between;
         padding: 0.5rem 1.25rem;
      }
   }
}

// Submenu
.submenu {
   position: absolute;
   top: 2.35rem;
   left: -2rem;
   min-width: 13rem;
   height: auto;
   padding: 0 1rem 1rem;
   opacity: 0;
   visibility: hidden;
   transform: translateY(1rem);
   border-radius: 0 0 0.25rem 0.25rem;
   border-top: 2px solid var(--color-pink-400);
   box-shadow: var(--shadow-medium);
   background-color: var(--color-white-100);
   transition: all 0.3s ease-in-out;

   &-item {
      display: block;
      margin-top: 0.75rem;
   }

   &-link {
      font-family: inherit;
      font-size: 1rem;
      font-weight: 500;
      line-height: inherit;
      cursor: pointer;
      color: var(--color-black-500);
      transition: all 0.35s ease;

      &:hover {
         outline: none;
         color: var(--color-pink-500);
      }
   }

   // Responsive Media Query
   @media only screen and (max-width: 992px) {
      position: relative;
      top: -0.5rem;
      left: 2.5rem;
      width: 100%;
      max-height: 0;
      padding: 0px;
      border: none;
      outline: none;
      opacity: 1;
      overflow: hidden;
      visibility: visible;
      transform: translateY(0px);
      box-shadow: none;
      background: transparent;
   }
}

// Burger
.burger {
   position: relative;
   display: none;
   cursor: pointer;
   user-select: none;
   width: 1.6rem;
   height: 1.15rem;
   opacity: 0;
   visibility: hidden;
   background: transparent;

   &-line {
      position: absolute;
      display: block;
      right: 0;
      width: 100%;
      height: 2.1px;
      opacity: 1;
      border: none;
      outline: none;
      border-radius: 1rem;
      background: var(--color-black-500);

      &:nth-child(1) {
         top: 0px;
      }
      &:nth-child(2) {
         top: 0.5rem;
         width: 70%;
      }
      &:nth-child(3) {
         top: 1rem;
      }
   }

   // Responsive Media Query
   @media only screen and (max-width: 992px) {
      display: block;
      opacity: 1;
      visibility: visible;
   }
}

// Overlay
.overlay {
   position: fixed;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   z-index: 9;
   opacity: 0;
   visibility: hidden;
   transition: all 0.35s ease-in-out;
   background-color: rgba(0, 0, 0, 0.65);

   // Responsive Media Query
   @media only screen and (max-width: 992px) {
      &.active {
         display: block;
         opacity: 1;
         visibility: visible;
      }
   }
}

const navbarMenu = document.getElementById("navbar");
const burgerMenu = document.getElementById("burger");
const overlayMenu = document.querySelector(".overlay");

// Show and Hide Navbar Function
const toggleMenu = () => {
   navbarMenu.classList.toggle("active");
   overlayMenu.classList.toggle("active");
};

// Collapsible Mobile Submenu Function
const collapseSubMenu = () => {
   navbarMenu
      .querySelector(".menu-dropdown.active .submenu")
      .removeAttribute("style");
   navbarMenu.querySelector(".menu-dropdown.active").classList.remove("active");
};

// Toggle Mobile Submenu Function
const toggleSubMenu = (e) => {
   if (e.target.hasAttribute("data-toggle") && window.innerWidth <= 992) {
      e.preventDefault();
      const menuDropdown = e.target.parentElement;

      // If Dropdown is Expanded, then Collapse It
      if (menuDropdown.classList.contains("active")) {
         collapseSubMenu();
      } else {
         // Collapse Existing Expanded Dropdown
         if (navbarMenu.querySelector(".menu-dropdown.active")) {
            collapseSubMenu();
         }

         // Expanded the New Dropdown
         menuDropdown.classList.add("active");
         const subMenu = menuDropdown.querySelector(".submenu");
         subMenu.style.maxHeight = subMenu.scrollHeight + "px";
      }
   }
};

// Fixed Resize Window Function
const resizeWindow = () => {
   if (window.innerWidth > 992) {
      if (navbarMenu.classList.contains("active")) {
         toggleMenu();
      }
      if (navbarMenu.querySelector(".menu-dropdown.active")) {
         collapseSubMenu();
      }
   }
};

// Initialize Event Listeners
burgerMenu.addEventListener("click", toggleMenu);
overlayMenu.addEventListener("click", toggleMenu);
navbarMenu.addEventListener("click", toggleSubMenu);
window.addEventListener("resize", resizeWindow);