/* Subheader styles for container with nav button and logo*/
.subheader {
    display: inline-block; /* needed to not add a gap at top of page */
    background-color: rgb(249, 239, 227);
    height: 50px;
    width: 100%;
    margin: 0;
    padding: 0;
    z-index: -1;
}
/* Styles specific to the hamburger menu button */
.menubar {
    display: inline-block; /* Allow button to sit next to text */
    position: absolute; /* Make button absolute for top-left corner */
    top: 15px; /* Adjust position from top */
    left: 20px; /* Adjust position from left */
    z-index: 10;
}
.menu-button {
    font-size: 1em;
    opacity: 1; 
    z-index: 15;
    position: relative;
    background: transparent; /* Make button transparent */
    border: none; /* Remove button border */
    cursor: pointer; /* Set cursor to pointer on hover */
    padding: 0; /* Remove button padding */
}
.menu-button::after {
    content: "Expand menu"; /* Display the alt text as tooltip content */
    position: absolute; /* Position the tooltip relative to the button */
    top: 50%; /* Position vertically at the image's center */
    left: 100%; /* Position horizontally to the right of the image */
    transform: translateY(-50%); /* Adjust vertical placement for better alignment */
    padding: 5px 10px; /* Add some padding to the tooltip */
    background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black background */
    color: white; /* White text color */
    font-size: 0.6em; /* Adjust tooltip text size if needed */
    border-radius: 5px; /* Rounded corners for the tooltip */
    visibility: visible;/* Initially hide the tooltip */
    opacity: 0;  /* Set initial opacity to 0 */
    transition: visibility 0.3s, opacity 0.3s ease-in-out; /* Smooth transition */
}
.menu-button:hover {
    box-shadow: none; /* Removes the shadow */
    padding: 5px; /* Add some padding for better text placement */
}
.menu-button:hover::after {
    visibility: visible; /* Show the tooltip on hover */
    opacity: 1; /* Make the tooltip fully opaque */
}
.menu-button img {
    vertical-align: middle; /* Align image vertically within button */
    height: 20px;
    width: 20px;
    border-radius: unset;
    visibility: visible;
    opacity: 1;
    position: relative;
    z-index: 15;
}
.menu-button.menu-open-text::after {
    /* Inherit styles from the existing tooltip rule */
    content: "Collapse menu";
    position: absolute;
    top: 50%; /* Position vertically at the image's center */
    left: 100%; /* Position horizontally to the right of the image */
    transform: translateY(-50%); /* Adjust vertical placement for better alignment */
    padding: 5px 10px;
    font-size: 0.6em;
  }

/* Styles for the navigation menu */
.navigation {
    position: absolute; /* Make navigation absolute relative to viewport */
    top: 0px; /* Start at top of viewport */
    left: -120px; /* Hide navigation off-screen by default */
    width: 120px; /* Set navigation width */
    background-color: transparent; /* Set background color */
    transition: left 0.3s ease-in-out; /* Smooth slide-in animation */
    z-index: 5;
}
.navigation.menu-open { /* Navigation open state styles */
    left: 0; /* Slide navigation into view */
    background-color: white;
    z-index: 5;
}
.menu-list {
    list-style-type: none; /* Remove default list styling */
    padding: 0; /* Remove default padding */
    margin: 75px 0 0 0; /* Remove default margin */
    text-indent: 10px;
    z-index: 10;
}
.menu ul {
    list-style-type: none;
    margin: 0 0 0 0;
    padding: 0;
    width: 100px;
    background-color: #f1f1f1;
}

.menu-item {
    margin: 0 0 0 0px; /* Add spacing between menu items */
}

.menu-item a {
    color: goldenrod; /* Text color for menu items */
    text-decoration: none; /* Remove underline from links */
    padding: 8px 16px; /* Add padding to menu items */
    display: block; /* Make menu items display as blocks */
    text-align: left; /* Align text to the left */
    border-radius: unset;
    font-size: smaller;
    margin: 0 0 0 0;
    border-top: 1px solid black;
}
.menu-item a:hover{
    background-color: #555;
    color: white;
}
.logged-out-menu {
    visibility: visible;
}
.logged-in-menu {
    visibility: visible;
}
/* Logo area */
.logo {
    color:slateblue;
    text-align: center;
    margin-top: 10px;
    font-size: 1.5em;
    font-weight: bold;
}