/* Base Styles */
body {
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  font-family: Arial, sans-serif !important;
  overflow-x: hidden !important;
}

a {
  text-decoration: none !important;
  color: inherit !important;
}

/* Header Body (top strip) */
.header-body {
  background-color: white !important;
}

.top-nav-container {
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 15px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: relative !important; /* For hamburger positioning */
  z-index: 101 !important; /* Ensure top nav elements are above main nav when open */
  flex-wrap: wrap !important; /* Added for mobile layout: Allows content to wrap to next line */
}

.logo {
  font-size: 24px !important;
  font-weight: bold !important;
  color: #4c2d68 !important;
  display: flex !important;
  align-items: center !important;
}

.logo img {
  max-height: 40px !important;
  width: auto !important;
  flex-shrink: 0 !important; /* Added for mobile layout: Ensure logo doesn't shrink */
}

.top-nav-content {
  display: flex !important; /* Display as flex on desktop */
  gap: 30px !important; /* Space between top-menu and top-right */
  align-items: center !important;
  flex-grow: 1 !important; /* Allow content to grow */
  justify-content: flex-end !important; /* Push content to the right */
}

.top-menu {
  display: flex !important;
  gap: 30px !important;
  align-items: center !important;
}

.top-right {
  display: flex !important;
  gap: 20px !important;
  align-items: center !important;
}

.top-menu a,
.top-right a {
  color: #333 !important;
  font-size: 16px !important;
  font-weight: 550 !important;
  white-space: nowrap !important;
  padding: 5px 0 !important;
}

.language-select-wrapper {
  position: relative !important;
  display: inline-block !important;
}

.language-select {
  border: 1px solid #ccc !important;
  padding: 8px 15px !important;
  background: white !important;
  font-size: 16px !important;
  color: #333 !important;
  font-weight: bold !important;
  border-radius: 4px !important;
  min-width: 70px !important;
  text-align: center !important;
}

.login-btn {
  background-color: #4c2d68 !important;
  color: white !important;
  border: none !important;
  padding: 10px 20px !important;
  cursor: pointer !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  min-height: 48px !important;
  transition: background-color 0.2s ease !important;
  white-space: nowrap !important;
}

.login-btn:hover {
  background-color: #3a224f !important;
}

/* Main Header (purple bar) */
.header {
  padding: 20px 40px !important;
  background-color: transparent !important;
  position: relative !important; /* For sticky header positioning */
  z-index: 100 !important; /* Lower than top-nav-container for correct layering */
}

.nav-container {
  max-width: 1440px !important;
  margin: 0 auto !important;
  background-color: #4c2d68 !important;
  padding: 0 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px !important;
  position: relative !important; /* For hamburger and search */
}

.main-nav .nav-menu {
  display: flex !important;
  list-style: none !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

.main-nav .nav-link {
  display: block !important;
  padding: 32px 20px !important;
  color: white !important;
  font-size: 16px !important;
  font-weight: 550 !important;
  transition: background-color 0.2s ease !important;
  white-space: nowrap !important;
  border-bottom: 3px solid transparent !important;
}

.main-nav .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-bottom-color: white !important;
}

.search-container {
  /* Add styles for search bar if any */
}

/* Hide the checkbox input */
/* Assuming your checkbox has an ID of 'top-nav-toggle' */
#top-nav-toggle {
  display: none !important; /* Hides the checkbox visually */
}
/* If it has a class 'nav-toggle-checkbox', uncomment and use this */
/* .nav-toggle-checkbox {
  display: none !important;
} */

/* Hamburger Icon Styles (common) */
.hamburger {
  display: none !important; /* Hidden by default on desktop */
  cursor: pointer !important;
  width: 30px !important;
  height: 25px !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  z-index: 200 !important; /* Ensure it's above other content */
}

/* Only the top-nav hamburger exists in HTML now */
.hamburger-top-nav {
  /* The color is purple, as per your request */
}

.hamburger .bar {
  width: 100% !important;
  height: 3px !important;
  background-color: #6a0dad !important; /* Purple color for the top nav bars */
  border-radius: 5px !important;
  /* REMOVED transition for instant change */
  /* transition: all 0.3s ease-in-out !important; */
}

/* Checkbox Hack - Hamburger Active State */
/* Transform hamburger when checkbox is checked - no transition */
#top-nav-toggle:checked + .hamburger-top-nav .bar:nth-child(1) {
  transform: translateY(11px) rotate(45deg) !important;
  /* REMOVED transition for instant change */
  /* transition: transform 0s !important; */
}
#top-nav-toggle:checked + .hamburger-top-nav .bar:nth-child(2) {
  opacity: 0 !important;
  /* REMOVED transition for instant change */
  /* transition: opacity 0s !important; */
}
#top-nav-toggle:checked + .hamburger-top-nav .bar:nth-child(3) {
  transform: translateY(-11px) rotate(-45deg) !important;
  /* REMOVED transition for instant change */
  /* transition: transform 0s !important; */
}

/*
  ==========================================
  MEDIA QUERIES FOR RESPONSIVENESS
  ==========================================
*/

@media (max-width: 1200px) {
  .nav-container {
    padding: 0 20px !important;
  }
  .main-nav .nav-link {
    padding: 32px 15px !important;
  }
}

@media (max-width: 992px) {
  .top-nav-container {
    padding: 10px 20px !important;
  }
  .top-menu,
  .top-right {
    gap: 20px !important;
  }
  .header {
    padding: 10px 20px !important;
  }
  .nav-container {
    padding: 0 20px !important;
  }
}

@media (max-width: 768px) {
  /* Mobile Devices */

  /* Top Navigation */
  .top-nav-container {
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-bottom: 15px !important;
  }

  .logo {
    order: 1 !important;
    flex-grow: 0 !important;
    margin-right: auto !important;
  }

  .hamburger-top-nav {
    display: flex !important; /* Show hamburger icon on mobile */
    order: 2 !important;
    position: static !important;
    transform: none !important;
    align-self: center !important;
  }

  .top-nav-content {
    display: none !important; /* Hide by default */
    flex-direction: column !important;
    width: 100% !important;
    order: 3 !important;
    text-align: center !important;
    background-color: white !important;
    padding: 10px 0 !important;
    gap: 10px !important;
    /* Only transition max-height and opacity for the menu slide */
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out !important;
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
  }

  /* When checkbox is checked, show the top nav content */
  #top-nav-toggle:checked ~ .top-nav-content {
    display: flex !important;
    max-height: 500px !important;
    opacity: 1 !important;
  }

  .top-menu,
  .top-right {
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }

  .top-menu a,
  .top-right a,
  .login-btn,
  .language-select {
    width: 90% !important;
    padding: 10px 0 !important;
    margin: 0 auto !important;
  }

  .language-select-wrapper {
    width: 100% !important;
  }

  /* Main Navigation (purple bar) */
  .header {
    padding: 0 !important;
  }

  .nav-container {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 10px 20px !important;
    border-radius: 0 !important;
  }

  .hamburger-main-nav {
    display: none !important;
  }

  .main-nav {
    width: 100% !important;
    display: block !important;
    background-color: #4c2d68 !important;
    padding-bottom: 10px !important;
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
  }

  .main-nav .nav-menu {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .main-nav .nav-item {
    width: 100% !important;
  }

  .main-nav .nav-link {
    padding: 15px 20px !important;
    text-align: left !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  }

  .main-nav .nav-item:last-child .nav-link {
    border-bottom: none !important;
  }

  .search-container {
    width: 100% !important;
    margin-top: 10px !important;
  }
}

@media (max-width: 480px) {
  .top-nav-container {
    padding: 10px !important;
  }
  .logo img {
    max-height: 35px !important;
  }
  .hamburger {
    width: 25px !important;
    height: 20px !important;
  }
  /* Adjusted for slightly smaller bar spacing if needed for 25px width */
  .nav-toggle-checkbox:checked + .hamburger-top-nav .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg) !important;
  }
  .nav-toggle-checkbox:checked + .hamburger-top-nav .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg) !important;
  }
}