:root {
    --numDays: 5;
    --numHours: 10;
    --timeHeight: 60px;
    --calBgColor: #fff1f8;
    --primaryForeColor: #ffc180;
    --primaryBackgroundColor: #331a00;
    --SecondaryBackgroundColor: #502a01;
}/* --- Basic Styling --- */


.main-navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
    background: #333;
}
.main-navigation li {
    position: relative;
    float: left; /* Desktop horizontal */
}
.main-navigation a {
    display: block;
    padding: 15px 20px;
    color: var(--primaryForeColor);
    text-decoration: none;
}
.main-navigation li:hover > a {
    color: var(--SecondaryBackgroundColor);
    background-color: var(--primaryForeColor);
}

/* --- Multi-level Dropdown (Hidden by default) --- */
.main-navigation ul ul {
    position: absolute;
    top: 100%;
    left: 0;
    display: none; /* Hide submenu */
    min-width: 200px;
    z-index: 99999;
}
.main-navigation ul ul li {
    float: none; /* Submenu items vertical */
    width: 100%;
}
.main-navigation ul ul ul {
    top: 0;
    left: 100%; /* Second level flyout */
}

/* --- Display Submenu on Hover --- */
.main-navigation ul li:hover > ul {
    display: block;
}

/* --- Mobile Toggle Button (Hidden on Desktop) --- */
.menu-toggle {
    display: none;
    background: #222;
    color: #fff;
    padding: 15px;
    cursor: pointer;
}

/* --- Responsive Media Query --- */
@media screen and (max-width: 768px) {
    .menu-toggle {
        display: block; /* Show hamburger */
    }
    .main-navigation ul {
        display: none; /* Hide menu items */
        width: 100%;
        float: none;
    }
    .main-navigation li {
        width: 100%;
        float: none;
    }
    .main-navigation ul ul {
        position: static; /* Dropdowns become accordions */
    }
    /* Show menu on active state (requires tiny JS or checkbox hack) */
    .toggled-on {
        display: block;
    }
}