@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Lexend", sans-serif;
}

header {
  display: flex;
  align-items: center; /* vertically center logo + nav */
  justify-content: space-between;
  padding: 10px 20px;
  box-sizing: border-box;
  background-color: white;
  padding: 15px 60px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
  position: fixed; /* changed from sticky */
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 60px; /* keep your spacing */
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto; /* push following nav and controls to the right on desktop */
}

.logo img {
  height: 40px;
}

.logo h1 {
  font-size: 22px;
  color: #1f2c6c;
  letter-spacing: 1px;
  text-decoration: none;
}

/* Home link (logo) - remove underline and inherit header color */
.home-link,
.logo h1 a {
  text-decoration: none;
  color: inherit;
  display: inline-block;
}
.home-link:hover,
.logo h1 a:hover {
  text-decoration: none;
}

/* Right-side wrapper to keep toggle + notifications aligned to the right
   When nav is hidden on mobile we attach the toggle and notif into this
   container so they remain on the right. */
.header-right-controls {
  margin-left: 0; /* reset: we'll use .logo to push right-side grouping */
  display: flex;
  gap: 8px;
  align-items: center;
}

/* NAVIGATION LINKS */
header nav {
  display: flex;
  align-items: center;
  margin-left: 0; /* reset: .logo will provide the auto spacing */
}
header nav ul {
  list-style: none;
  display: flex;
  gap: 18px;
  align-items: center;
  margin: 0;
  padding: 0;
  flex-direction: row;
  gap: 38px;
}

header nav a {
  text-decoration: none;
  font-size: 18px;
  color: #333;
  font-weight: 600;
  transition: color 0.3s, border-bottom 0.3s;
  padding-bottom: 3px;
}

header nav a:hover,
header nav a.active {
  color: #1f2c6c;
  border-bottom: 2px solid #1f2c6c;
}

/* RESPONSIVE NAVBAR */
@media (max-width: 768px) {
  /* keep header row on small screens so logo + toggle align horizontally
     (prevent menu items from centering vertically) */
  header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
  }

  /* stack nav links in dropdown only when opened; keep ul compact */
  header nav ul {
    flex-direction: column;
    width: auto;
    gap: 12px;
    margin: 0;
  }

  header nav a {
    display: inline-block;
    width: auto;
  }
}

/* ADDITIONAL NAVIGATION */
.nav-avatar {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  border: 2px solid rgba(0, 0, 0, 0.06);
}

.account-tab {
  padding-top: 20px 0 -5px 0;
  margin-bottom: -10px;
}

/* Icon images (bell etc.) */
header nav ul li img {
  display: inline-block;
  vertical-align: middle;
  height: 20px;
}

/* make header fixed to top and full width */
header {
  position: fixed; /* changed from sticky */
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 60px; /* keep your spacing */
  background-color: white;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
}

/* Mobile: hamburger toggle and dropdown full-width behavior */
@media (max-width: 900px) {
  header {
    padding: 8.5px 11px;
  }

  header nav {
    display: none;
  }

  header nav a:hover,
  header nav a.active {
    background-color: #1f2c6c;
    color: white;
    border: 2px solid #1f2c6c;
  }

  .home-link {
    text-decoration: none;
    color: #1f2c6c;
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: transparent;
    border: 0;
    padding: 6px;
    margin-left: 8px;
    cursor: pointer;
  }
  /* use supplied menu icon image for the toggle. Keep the old .bar hidden
     in case some pages still generate it. */
  .nav-toggle .bar {
    display: none; /* hide legacy bar spans */
  }

  .nav-toggle img,
  .nav-toggle .nav-toggle-icon {
    width: 23px; /* match desired visual size */
    height: 23px;
    display: block;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast; /* keep icon crisp */
  }

  /* Hide profile avatar on mobile to save space */
  .nav-avatar {
    display: none !important;
  }

  /* show dropdown when header has nav-open */
  header.nav-open nav {
    /* animate dropdown: use max-height + opacity to create slide-down */
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: 0 12px 40px rgba(8, 10, 25, 0.12);
    z-index: 1200;
    padding: 12px 16px;
    opacity: 1;
    max-height: 480px; /* enough for most menus */
    overflow: hidden;
  }
  header.nav-open nav ul {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }
  header.nav-open nav ul li {
    width: 100%;
  }
  header.nav-open nav ul li a {
    display: block;
    padding: 12px 10px;
    border-radius: 12.5px;
  }
}

/* Hide the nav-toggle on desktop; show it on small screens via the mobile media query */
@media (min-width: 901px) {
  .nav-toggle {
    display: none;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
  }
}

/* slide animation base state for mobile dropdown */
@media (max-width: 900px) {
  /* no slide animation: show/hide instantly */
  header nav {
    max-height: none;
    opacity: 1;
    overflow: visible;
  }
  header.nav-open nav {
    /* no transitions */
  }
}

/* ensure body/main content is pushed below header */
body {
  margin: 0; /* already set, keep it */
  padding-top: 72px; /* set to header height (adjust if different) */
  box-sizing: border-box;
}

/* if you have a .settings-container or main that also adds top margin, reset it */
.settings-container,
main {
  margin-top: 0;
}

/* If you prefer sticky instead, ensure no parent uses transform/overflow:
   check elements between <body> and <header> for transform/overflow properties */