/* Wrapper Styling */
#menu-wrapper {
    padding-top: 10px ; 
    padding-left: 2rem;
    padding-right: 2rem;
    margin: 0.25rem 0.25rem; /* Center the wrapper and add vertical spacing */
    max-width: 900px; /* Limit the total width of the wrapper */
    width: 100%; 
    box-sizing: border-box; /* Include padding in total dimensions */
    text-align: center; /* Center contents horizontally */
}

/* Menu Toggle Button Styling */
#menu-toggle {
    font-family: var(--font-main);
    background-color: var(--accent-color);
    color: var(--background-alt);
    font-size: 1.2rem;
    border-radius: 14px;
    border: 10px double var(--background-alt);
    padding: 0.5rem 1rem; /* Interior padding (spacing inside the button) */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, color 0.3s ease;
    border: 10px double var(--background-alt);
    text-align: center; /* Center text horizontally */
    width: 100%; 
    display: block; /* Ensure it aligns properly within its container */
    box-sizing: border-box; /* Include padding and borders in the total width */
    overflow: hidden; /* Prevent overflow from breaking layout */
    font-weight: bold;
}

#menu-toggle:hover {
    background-color: var(--background-alt);
    transform: scale(1.05); /* Slight hover growth */
    border: 10px double var(--accent-color);
    border-radius: 25px;
    color: var(--accent-color);
    box-sizing: border-box; /* Ensure scaling respects containment */
}

/* Mobile Navigation Menu Styling */
#mobile-nav {
    display: none; /* Hidden by default */
    background-color: transparent;
    padding: 0.5rem; /* Add interior padding for spacing */
    max-width: 900px; /* Limit the width of the menu */ 
    width: 100%; /* Ensure it spans the full width of the parent container */
    box-sizing: border-box; /* Include padding and borders in width calculation */
    overflow: hidden; /* Prevent overflow */
    vertical-align: middle; /* Align to the top of the parent container */
}

#mobile-nav.visible {
    display: block; /* Show the menu when the 'visible' class is added */
}

/* List Item Styling */
#mobile-nav li {
    margin: 0; 
    width: 100%; /* Ensure the list items span the full width */
    overflow: hidden; /* Hide any overflowing content */
    padding-left: 2rem;
    padding-right: 2rem; 
}

/* List Container Styling */
#mobile-nav ul {
    list-style: none; /* Remove bullets */
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column; /* Stack items vertically */
    width: 100%;
}

/* Navigation Links Styling */
#mobile-nav a {
    display: block; /* Ensure the anchor takes up its container's width */
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    padding: 0.75rem 2rem; /* Inner spacing for buttons */
    color: var(--background-alt); /* Text color */
    background-color: var(--accent-color); /* Button background */
    border: 10px double var(--background-alt); /* Button border */
    border-radius: 14px; /* Rounded corners */
    transition: background-color 0.3s ease, transform 0.2s ease, color 0.3s ease;
    width: 100%; /* Make the button span the full width of the parent container */
    text-align: center; /* Ensure text is centered */
    box-sizing: border-box; /* Ensure padding and border are included in width */
    margin: 0.5rem 0; /* Add vertical spacing between menu items */
}

#mobile-nav a:hover {
    background-color: var(--background-alt); /* Flip background on hover */
    color: var(--accent-color); /* Flip text color on hover */
    border: 10px double var(--accent-color); /* Flip border color on hover */
    transform: scale(1.05); /* Slight hover growth */
    box-sizing: border-box; /* Prevent scaling from breaking containment */
    border-radius: 25px; /* Rounded corners */
}