/* Navigation and Dropdown Styles */

/* Dropdown styles */
.dropdown {
   position: relative;
   display: inline-block;
}

.dropdown-toggle {
   cursor: pointer;
}

.dropdown-menu {
   display: none;
   position: absolute;
   top: 100%;
   left: 0;
   background-color: #fff;
   min-width: 200px;
   box-shadow: 0 2px 5px rgba(0,0,0,0.2);
   z-index: 1000;
   padding: 0.5rem 0;
   list-style: none;
   margin: 0;
}

.dropdown-menu li {
   padding: 0;
}

.dropdown-menu a {
   display: block;
   padding: 0.5rem 1rem;
   color: #333;
   text-decoration: none;
   white-space: nowrap;
}

.dropdown-menu a:hover {
   background-color: #f5f5f5;
}

/* Dropdown menu headings */
.dropdown-menu p {
   font-weight: bold;
   text-transform: uppercase;
   color: #666;
   margin: 0.75rem 1rem 0.25rem 1rem;
   padding: 0;
   font-size: 0.8rem;
   letter-spacing: 0.05em;
}

.dropdown:hover .dropdown-menu {
   display: block;
}

/* Mobile styles */
@media (max-width: 768px) {
   .nav-links {
       display: none;
       width: 100%;
       position: absolute;
       top: 100%;
       left: 0;
       background: #fff;
       padding: 1rem;
       box-shadow: 0 2px 5px rgba(0,0,0,0.2);
       z-index: 999;  /* Above the overlay */
   }

   .nav-links.active {
       display: flex;
       flex-direction: column;
       align-items: flex-start;
   }

   .nav-links a {
       padding: 0.5rem 0;
       margin-left: 2rem;
       text-align: left;
   }

   .dropdown {
       width: 100%;
   }

   .dropdown-menu {
       position: static;
       display: block;
       background: none;
       box-shadow: none;
       padding-left: 3rem;
       width: 100%;
   }
   
   .dropdown-menu li {
       margin: 0.5rem 0;
   }
   
   .dropdown-menu a {
       padding: 0.25rem 0;
       margin-left: 0;
   }
   
   /* Mobile dropdown menu headings */
   .dropdown-menu p {
       margin: 0.75rem 0 0.25rem 0;
       padding: 0;
       font-weight: bold;
       text-transform: uppercase;
       color: #9a9a9a;
       font-size: 0.6rem;
       letter-spacing: 0.05em;
   }
   
   .dropdown-toggle {
       pointer-events: none;
       margin-left: 2rem;
   }

   .hamburger {
       display: block;
       cursor: pointer;
   }

   .menu-overlay.active {
       display: block;
   }
}

/* Desktop menu styles */
@media (min-width: 769px) {
   .hamburger {
       display: none;
   }

   .nav-links {
       display: flex;
       align-items: center;
   }

   .dropdown-menu {
       display: none;
       position: absolute;
       top: 100%;
       left: 0;
       background-color: #fff;
       min-width: 200px;
       box-shadow: 0 2px 5px rgba(0,0,0,0.2);
       z-index: 1000;
       padding: 0.5rem 0;
       list-style: none;
       margin: 0;
   }

   .dropdown:hover .dropdown-menu {
       display: block;
   }
}

/* Overlay styles */
.menu-overlay {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 998;  /* Just below the mobile menu */
}