/* ============================================
   LAYOUT — Navbar scroll states, footer, grids
   ============================================ */

/* Add a global transition to all these elements so they fade smoothly, not blink */
#navbar,
#navbar #logoText,
#navbar #navLinks a,
#navbar #langBtn,
#navbar #loginBtn,
#navbar #burgerBtn {
  transition: all 0.3s ease-in-out;
}

/* Navbar — when page is scrolled */
#navbar.scrolled {
  background: #1e3656;
  color: #fff;
}

#navbar.scrolled #logoText {
  color: var(--white);
}

#navbar.scrolled #navLinks a {
  color: var(--white);
}

#navbar.scrolled #navLinks a:hover {
  color: var(--accent-coral);
}

#navbar.scrolled #langBtn {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.3);
  /* Softer border */
}

#navbar.scrolled #langBtn:hover {
  border-color: var(--accent-coral);
}

#navbar.scrolled #loginBtn {
  color: var(--white);
}

#navbar.scrolled #loginBtn:hover {
  color: var(--accent-coral);
}

#navbar.scrolled #burgerBtn {
  color: #1e3656;
  /* Changed from #fff so you can see it against the light gray background */
  background: #f1f5f9;
}

/* Mobile menu open state */
#mobileMenu {
  transition: max-height 0.3s ease-in-out;
}

#mobileMenu.open {
  max-height: 600px;
}