/* Simple Hamburger Menu CSS */

/* Hamburger Button Container */
.hamburger-menu-container {
  display: none; /* Hidden by default, shown on mobile */
}

/* Hamburger Button */
.hamburger-menu {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 30px;
  height: 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1001;
  position: relative;
}

.hamburger-menu:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

/* Hamburger Lines */
.hamburger-line {
  width: 100%;
  height: 3px;
  background: #fff !important;
  border-radius: 2px;
  transition: all 0.3s ease;
  transform-origin: center;
}

/* Hamburger Animation when Active */
.hamburger-menu.active .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
  background: #fff !important;
}

.hamburger-menu.active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.hamburger-menu.active .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
  background: #fff !important;
}

/* Force white hamburger lines - override any conflicting styles */
.hamburger-menu .hamburger-line,
.hamburger-menu-container .hamburger-line,
.hamburger-menu span {
  background-color: #fff !important;
  background: #fff !important;
  color: #fff !important;
  border-color: #fff !important;
}

.hamburger-menu.active .hamburger-line:nth-child(1),
.hamburger-menu.active .hamburger-line:nth-child(3) {
  background-color: #fff !important;
  background: #fff !important;
}

/* Ensure hamburger button itself has no background that could interfere */
.hamburger-menu {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
}

/* Mobile Styles */
@media (max-width: 992px) {
  /* Show hamburger menu on mobile */
  .hamburger-menu-container {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1001;
  }
  
  /* Hide regular navbar on mobile by default */
  .navbar-nav {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: #fff !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
    z-index: 1000 !important;
    flex-direction: column !important;
    padding: 1rem 0 !important;
    margin: 0 !important;
    border-radius: 0 0 8px 8px !important;
    list-style: none !important;
  }
  
  /* Show navbar when active */
  .navbar-nav.active {
    display: flex !important;
  }
  
  /* Style navbar items on mobile */
  .navbar-nav li {
    width: 100% !important;
    margin: 0 !important;
  }
  
  .navbar-nav li a {
    color: #333 !important;
    padding: 1rem 2rem !important;
    display: block !important;
    text-decoration: none !important;
    border-bottom: 1px solid #eee !important;
    transition: all 0.3s ease !important;
  }
  
  .navbar-nav li:last-child a {
    border-bottom: none !important;
  }
  
  .navbar-nav li a:hover,
  .navbar-nav li a.active {
    background: #f8f9fa !important;
    color: #007bff !important;
    padding-left: 2.5rem !important;
  }
  
  /* Dropdown styling on mobile */
  .navbar-nav .dropdown-menu {
    position: static !important;
    display: none !important;
    background: #f8f9fa !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .navbar-nav .dropdown.active .dropdown-menu {
    display: block !important;
  }
  
  .navbar-nav .dropdown-menu a {
    color: #666 !important;
    padding: 0.75rem 3rem !important;
    font-size: 0.9rem !important;
    background: #f8f9fa !important;
  }
  
  .navbar-nav .dropdown-menu a:hover {
    background: #e9ecef !important;
    color: #007bff !important;
  }
  
  /* Ensure navbar container has relative positioning */
  .navbar {
    position: relative !important;
  }
  
  .navbar .container {
    position: relative !important;
  }
}

/* Desktop Styles */
@media (min-width: 993px) {
  /* Hide hamburger menu on desktop */
  .hamburger-menu-container {
    display: none !important;
  }
  
  /* Show regular navbar on desktop */
  .navbar-nav {
    display: flex !important;
  }
}