/**
 * Navbar scroll-transition CSS — hero2
 * Pairs with hero2-navbar-scroll.js
 * MOBILE ONLY (max-width: 1023px)
 */

@media (max-width: 1023px) {
  header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    background-color: transparent;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
  }

  header.hero2-navbar--scrolled {
    background-color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  /* If nav links/logo need to invert from white (over hero) to dark (over white bg),
     scope them under the same active class: */
  header .menu a,
  header .nav-link {
    color: #FFFFFF;
    transition: color 0.3s ease;
  }

  header.hero2-navbar--scrolled .menu a,
  header.hero2-navbar--scrolled .nav-link {
    color: #262626;
  }
}