html, body {
    height: 100%;
    margin: 0;  
}

body {
    min-height: 100dvh; /* handles mobile browser UI better than 100vh */
    display: flex;
    flex-direction: column; 
    padding: 5px;
}
.wrapper {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

/* Your main content wrapper */
main {
    flex: 1; /* pushes footer to the bottom when content is short */
}

footer {
 
}

 /*Mobile: stack vertically */

@media (min-width: 768px) {
    .nav01 {
        padding: 25px;
    }
}
/* Desktop */
a {
    color: darkgreen; /* your chosen text color */
    text-decoration: none; /* removes underline */
}

    a:hover {
        color: seagreen; /* optional hover color */
        text-decoration: none; /* keep underline off */
    }
/* Or align to the right */
.ms-auto {
    margin-left: auto !important;
}

.bg-success {
    background-color: darkgreen !important; /* forest green */
}

.dropdown-menu {
    display: none;
    position: absolute;
    padding: 10px;
    background-color: #C0C0C0;
    color: forestgreen;
    text-decoration: none !important; /* removes underline */
    margin-right: 0;

}

.nav-item:hover > .dropdown-menu {
    display: block;
}
/* Hide grandchildren by default */
.dropdown-item {
    display: block;
    color: darkgreen; /* text color */
    text-decoration: none !important; /* no underline */
    background: #C0C0C0;
    padding: 10px;
}
/* new code  */
/* 1) Parent anchor/container that the fly-out sits next to */
.child-item {
    position: relative; /* anchor for the absolute submenu */
}

    /* 2) The fly-out menu itself */
    .child-item > .grandchild-menu {
        list-style: none; /* remove bullets */
        padding: 10px; /* keep your spacing */
        margin: 0; /* remove browser default indent */

        position: absolute;
        top: 0;
        left: 100%;
        z-index: 999;
        display: none;
        background: #C0C0C0;
        color: forestgreen;
        box-sizing: border-box;
        width: max-content;
        min-width: 100%;
    }

    /* 3) Show on hover/focus */
    .child-item:hover > .grandchild-menu,
    .child-item:focus-within > .grandchild-menu {
        display: block;
    }

    

/* Ensure ancestors don't clip the menu */
.menu, .menu * {
    overflow: visible; /* only if you encounter clipping; otherwise omit */
}


/* Mobile */

@media (max-width: 768px) {
    .accordion-button {
        font-size: 1rem;
        padding: 0.75rem;
    }

    .accordion-body a {
        display: block;
        padding: 0.5rem 0;
        border-bottom: 1px solid #eee;
    }
}