/*
 * This file controls the visibility of elements based on login state.
 * By default, we assume the user is logged out. The "Login" button will be
 * visible. JavaScript will add the 'logged-in' class to the body to swap
 * visibility for the "Profile" button.
*/

/* Hide elements that require a user to be logged IN by default. */
.requires-login {
    display: none !important; /* Use !important to override other styles if necessary */
}

/* When the 'logged-in' class is added to the body: */

/* 1. Show the elements that require a login. */
body.logged-in .requires-login {
    display: flex !important; /* Use flex to match navbar item styling */
}

/* 2. Hide the elements that are for logged-out users. */
body.logged-in .requires-logout {
    display: none !important;
}