/* Base styling for the specific navigation container */
#nav-area {
    position: sticky;
    top: 0;
    z-index: 9999;
    transition: transform 0.3s ease-in-out, top 0.3s ease-in-out;
}

/* The class JavaScript will apply to slide it out of view */
#nav-area.nav-hidden {
    transform: translateY(-100%);
}

/* Adjustments for logged-in users so it clears the WordPress admin bar */
.admin-bar #nav-area {
    top: 32px;
}
.admin-bar #nav-area.nav-hidden {
    transform: translateY(-150%); /* Pushes it further up to clear the admin bar */
}

@media screen and (max-width: 782px) {
    .admin-bar #nav-area {
        top: 46px;
    }
}