#nav-area {
  position: sticky;
  top: 0; /* Default position */
  z-index: 1000;
  background-color: #333; /* Ensure it has a background so text doesn't overlap */
  
  /* Smoothly slide the navbar into view when it becomes active */
  transition: top 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* When scrolling down, force it out of view by matching its own height */
#nav-area.scroll-down {
  top: -80px; /* Adjust this value to match your navbar's actual height */
}

/* When scrolling up, stick it to the very top and add a shadow */
#nav-area.scroll-up {
  top: 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 1. When scrolling up/sticky, push it down below the admin bar */
.admin-bar #nav-area.scroll-up {
  top: 32px; /* Standard WordPress admin bar height on desktop */
}

/* 2. Responsive adjustment for mobile screens */
@media screen and (max-width: 782px) {
  .admin-bar #nav-area.scroll-up {
    top: 46px; /* WordPress admin bar height on smaller screens */
  }
}