/* header.css */

/* Header Section */
.main-header {
  background-color: #B3BEFF; /* White header background */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 15px 0; /* Vertical padding for the header */
  width: 100%; /* Ensure header takes full width */
  position: sticky; /* Make header sticky */
  top: 0;
  z-index: 1000; /* Ensure header is above other content */
  transition: background-color 0.3s ease;
}

.main-header > .container {
  max-width: none; /* Allow it to fill the header's width */
  gap: 15px; /* Adds space between header-left, searchBarContainer, and header-right-group */
  flex-wrap: nowrap; /* MODIFIED: Ensure header items stay in a single line, overriding global .container rule */
}

.header-left {
  display: flex;
  align-items: center;
  flex-shrink: 0; /* Prevent logo/title from shrinking too much */
}

.logo-link {
  display: flex;
  align-items: center;
  gap: 15px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease;
}

.logo-link:hover {
  transform: scale(1.05);
}

/* Styles for the logos */
.logo-link img {
    height: 50px; /* Adjust height as needed */
    width: auto;
    display: block;
}

.logo-link .dark-logo {
    display: none; /* Hide dark logo by default */
}

.logo-link .light-logo {
    display: block; /* Show light logo by default */
}

.main-header h1 {
  font-size: 1.8em;
  margin: 0;
  color: #1d3557;
  transition: color 0.3s ease;
}

/* Search Bar Container Styles */
#searchBarContainer {
  display: flex; /* For aligning input and button inside */
  align-items: center;
  width: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden; /* Hide content when collapsed */
  transition: width 0.4s ease-in-out, opacity 0.3s ease-in-out 0.1s, visibility 0s linear 0.4s;
  /* Delay opacity and visibility transitions */
  flex-shrink: 0; /* Prevent search bar from shrinking when active and space is tight */
}

#searchBarContainer.active {
  width: 250px; /* Adjust width as needed */
  opacity: 1;
  visibility: visible;
  padding: 0 10px; /* Add some padding when active */
  transition: width 0.4s ease-in-out, opacity 0.3s ease-in-out, visibility 0s linear 0s;
}

#searchBarContainer input {
  flex-grow: 1;
  border: 1px solid #ddd;
  padding: 8px 12px;
  border-radius: 5px 0 0 5px; /* Rounded left corners */
  font-size: 1em;
  outline: none;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  min-width: 0; /* Allow input to shrink if necessary */
}

#searchBarContainer .close-search {
  background-color: #f0f0f0; /* Match input style */
  border: 1px solid #ddd;
  border-left: none; /* Remove left border to join with input */
  cursor: pointer;
  color: #555;
  font-size: 1em; /* Adjusted for better fit */
  padding: 8px 10px; /* Match input padding */
  border-radius: 0 5px 5px 0; /* Rounded right corners */
  transition: color 0.3s ease, background-color 0.3s ease;
  line-height: 1.25; /* Align text vertically */
}

#searchBarContainer .close-search:hover {
  color: #1d3557;
  background-color: #e0e0e0;
}


.header-right-group {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-left: auto; /* Pushes this group to the far right */
  flex-shrink: 0; /* Prevent this group from shrinking excessively */
}

.main-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 25px;
}

.main-nav a {
  text-decoration: none;
  color: #555;
  font-weight: 600;
  transition: color 0.3s ease;
}

.main-nav a:hover {
  color: #1d3557;
}

/* === Redesigned Dark Mode Toggle Button === */
.dark-mode-toggle {
  background-color: #B3BEFF;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow: none;
  transition: all 0.3s ease-in-out;
}

.dark-mode-toggle:hover {
  box-shadow: none;
}

.dark-mode-toggle:active {
    box-shadow: none;
}

.dark-mode-toggle svg {
  position: absolute;
  transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

.dark-mode-toggle .sun-icon {
  transform: translateY(50px) rotate(90deg);
  opacity: 0;
  color: #f39c12;
}

.dark-mode-toggle .moon-icon {
  transform: translateY(0) rotate(0deg);
  opacity: 1;
  color: #122940;
}

.dark-mode-toggle:hover .moon-icon {
  color: #cacaca;}

/* --- Dark Mode Header Styles --- */
body.dark-mode .main-header {
  background-color: #1e1e1e;
  box-shadow: 0 2px 5px rgba(255, 255, 255, 0.05);
}

/* Switch logos in dark mode */
body.dark-mode .logo-link .dark-logo {
    display: block;
}

body.dark-mode .logo-link .light-logo {
    display: none;
}

body.dark-mode .main-header h1 { color: #a8dadc; }
body.dark-mode .main-nav a { color: #90caf9; }
body.dark-mode .main-nav a:hover { color: #a8dadc; }

body.dark-mode #searchBarContainer input { 
    background-color: #3a3a3a; 
    color: white; 
    border-color: #555; 
}
body.dark-mode #searchBarContainer .close-search { 
    background-color: #3a3a3a;
    color: #90caf9; 
    border-color: #555;
}
body.dark-mode #searchBarContainer .close-search:hover { 
    color: #a8dadc; 
    background-color: #4f4f4f;
}

/* Styles for the toggle button in dark mode */
body.dark-mode .dark-mode-toggle {
  background-color: #1e1e1e;
  box-shadow: none;
}

body.dark-mode .dark-mode-toggle:hover {
    box-shadow: none;
}

body.dark-mode .dark-mode-toggle:active {
    box-shadow: none;
}

/* Animate icons for dark mode */
body.dark-mode .dark-mode-toggle .sun-icon {
  transform: translateY(0) rotate(0deg);
  opacity: 1;
}

body.dark-mode .dark-mode-toggle .moon-icon {
  transform: translateY(-50px) rotate(-90deg);
  opacity: 0;
}


/* --- Responsive Header Design --- */
@media (max-width: 992px) { /* Adjusted breakpoint for better search bar handling */
    .main-header > .container {
        padding: 0 15px; /* Reduce padding earlier for more space */
    }
    #searchBarContainer.active {
        width: 200px; /* Slightly smaller search bar on tablets */
    }
    .main-nav ul {
        gap: 15px; /* Reduce nav gap */
    }
}

@media (max-width: 768px) {
  .header-left { 
    flex-grow: 0; 
  }
   .main-header h1 {
    font-size: 1.5em; 
  }
  .logo-link img {
    height: 35px;
  }

  #searchBarContainer.active {
    width: 150px; 
    padding: 0 5px;
  }
   #searchBarContainer input {
    font-size: 0.9em;
    padding: 6px 8px;
  }
  #searchBarContainer .close-search {
    font-size: 0.9em;
    padding: 6px 8px;
  }

  .header-right-group { 
    gap: 10px; 
  }
  .main-nav ul { 
    gap: 10px; 
  }
   .main-nav a {
    font-size: 0.9em; 
  }
  .search-icon svg {
    width: 18px; height: 18px; 
  }
  .dark-mode-toggle {
    width: 40px; 
    height: 40px; 
  }
   .dark-mode-toggle svg {
    width: 20px; 
    height: 20px;
  }
}

@media (max-width: 480px) {
  .main-header h1 { 
    font-size: 1.2em; 
  } 
  .logo-link img {
      height: 30px;
  }
   .main-header > .container { gap: 5px; } 
   #searchBarContainer.active {
    width: 120px; 
  }
  .main-nav ul { display: none; } 
  .search-icon { display: block !important;  }
}