/* 
    file:    menus.css
    author:  William Louis Gorden Jr.
    created: 07.07.2025
    updated: 06.01.2026
    content: Menu style sheet of bischoff-consulting.com

    English Version:
    © Copyright 2025 Helmut Bischoff and William Louis Gorden Jr. - All Rights Reserved
    The content of this file is subject to the protection of the copyright as well
    as other protection laws and may not be copied, distributed, changed or made
    accessible to third parties. The laws of the Federal Republic of Germany apply 
    exclusively to all legal relations arising from the Terms of Use for this 
    web site under exclusion of the UN Sales Convention (CISG). 
    
    Deutsche Version:
    © Copyright 2025 Helmut Bischoff und William Louis Gorden Jr. - Alle Rechte vorbehalten
    Der Inhalt dieser Datei unterliegt dem Schutz des Urheberrechts und anderer 
    Schutzgesetze und darf nicht kopiert, verbreitet, verändert oder Dritten 
    zugänglich gemacht werden. Für sämtliche Rechtsbeziehungen aus den 
    Nutzungsbedingungen für diese Website gilt ausschließlich das Recht der 
    Bundesrepublik Deutschland unter Ausschluss des UN-Kaufrechts (CISG). 
*/

/* =========================================================
   different screen sizes
============================================================ */

/* =========================================================
   menubar section
============================================================ */

@keyframes fademenu {
    0% {
        max-height: 0;
        transform: scaleY(0);
    }
    100% {
        max-height: 200;
        transform: scaleY(1);
    }
}

.menubar {
    position: relative;
    height: 100%;
    margin: 0;
    margin-top: 0.5rem;
    margin-bottom: 0.625rem;
    /* margin-left: 1rem; */
    padding: 0;
    font-size: var(--fs-menu);
    font-weight: var(--fw-menu);
    /* border: 1px solid red; */
}

.menubar_wide {
    display: block;
    z-index: 107;
}

.menubar_narrow {
    display: none;
    z-index: 108;
}

.menubar_phone {
    display: none;
    z-index: 109;
}

.menubar_button {
    position: relative;
    display: inline;
    height: 100%;
    margin: 0;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
    color: var(--fg-link);
    background-color: transparent;
    border-radius: 0.25em;
    outline: 3px solid transparent;
}

.menubar_button:hover {
    cursor: pointer;
    color: var(--fg-link-active);
    background-color: var(--bg-link-active);
    outline: 3px solid var(--fg-link-active);
}

.menubar_space {
    margin-left: 6px;
}

.menubar_button .menulist {
    display: none;
    max-height: 0;
    position: absolute;
    left: 0;
    margin-top: 0.15rem;
    background-color: var(--bg-menulist);
    z-index: 1;
}

.menubar_button:hover .menulist,
.menubar_button:focus .menulist,
.menubar_button:active .menulist {
    display: block;
    max-height: 300px;
    /* max-width: 600px; */
    animation: fademenu 0.25s forwards;
    transform-origin: top;
    color: var(--fg-link);
    background-color: var(--bg-menulist);
    outline: 1px solid var(--fg-separator);
}

.menubar_button .menulist a {
    display: block;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    text-decoration: none;
    text-align: left;
    color: var(--fg-link);
    border-radius: 0;
    /* border-bottom: 1px solid var(--fg-separator); */
}

.menubar_button .menulist a:hover {
    cursor: pointer;
    color: var(--fg-link-active);
    background-color: var(--bg-link-active);
    outline: 2px solid var(--fg-link-active);
}


/* =========================================================
   side menu section
============================================================ */

.sidemenu {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--min-header-height));
    width: 0;
    position: fixed;
    z-index: 1;
    top: calc(var(--min-header-height) + 1px);
    left: 0;
    background-color: var(--bg-sidemenu);
    border-right: 1px solid var(--fg-separator);
    overflow-x: hidden;
    overflow-y: hidden;
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

.sidemenu_container {
    flex-grow: 1;
    width: 100%;
    overflow-y: scroll;
}

.sidemenu_content {
    height: fit-content;
    width: 100%;
    padding-bottom: 2rem;
}

.sidemenu_group {
    /* position */
    position: relative;
    display: block;
    /* sizes */
    height: auto;
    margin: 0;
    padding-right: 1rem;
    padding-left: 1rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    text-align: left;
    color: var(--fg-main);
    /* border-radius: 0.25em; */
}

.sidemenu_entry {
    /* position */
    position: relative;
    display: block;
    /* sizes */
    height: auto;
    margin: 0;
    margin-bottom: 2px;
    padding-right: 1rem;
    padding-left: 1rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    text-decoration: none;
    text-align: left;
    color: var(--fg-menu);
    background-color: var(--bg-sidemenu);
    border-radius: 0.25em;
    /* border: 1px solid var(--fg-separator); */
    outline: none;
}

.sidemenu_entry:hover,
.sidemenu_entry:focus,
.sidemenu_entry:active {
    color: var(--fg-menu-active);
    background-color: var(--bg-menulist-active);
    outline: 2px solid var(--fg-menu-active);
}

/* space is too small for the full menu next to the title.
   combine all text menu items into a hamburger menu. */
@media screen and (max-width: 50rem) {

    /* full menu at the top made invisible */
    .menubar_wide {
        display: none;
    }

    /* hamburger menu at the top made invisible */
    .menubar_phone {
        display: none;
    }

    /* icon menu at the top made visible */
    .menubar_narrow {
        display: block;
    }

}

/* very narrow screens, telephone */
@media screen and (max-width: 35rem) {
    /* full menu at the top made disappears */
    .menubar_wide {
        display: none;
    }

    /* iconmenu at the top disappears */
    .menubar_narrow {
        display: none;
    }

    /* hamburger menu at the top made invisible */
    .menubar_phone {
        display: block;
    }
        
}

/* @media screen and (min-width: 50rem) {
    .sidemenu {
        width: 0;
    }
} */