@import "var.css";

/* Universal Styling */
body{
    margin: 0;
    padding: 0;
    font-family: var(--mainFontFamily);
    display: flex;
    flex-direction: column;
    min-height: 100vh;

    .page {
        display: flex;
        flex: 1;

        main {
          display: flex;
          flex: 1;
          width: 100%;
        }
    }
}

header {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 1.5em;
    padding: 1em 2.5%;
    background-color: var(--lightBlue);
    box-shadow: var(--mainShadow);
    z-index: 10;

    .logo {
        height: clamp(4em, 6vw, 8em);
        width: auto;
        flex-shrink: 0;

        a {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            width: auto;
            height: 100%;

            img {
                display: block;
                width: auto;
                height: 100%;
                object-fit: contain;
            }
        }
    }

    .description {
        display: flex;
        flex-direction: column-reverse;
        align-items: flex-end;
        width: fit-content;
        margin: 0;
        flex-shrink: 0;

        h1 {
            color: var(--mainBlue);
            text-align: right;
            font-stretch: ultra-expanded;

            font-size: clamp(1.5rem, 2.5vw, 3rem);
            margin: 0;
        }
    }
}


nav {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    min-height: 10em;
    box-shadow: var(--mainShadow);
    z-index: 20;
    position: sticky;
    top: 0;             /*has been -6em -- for reference*/
    transition: top 0.5s ease;

    .menu {
        list-style: none;

        li {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            width: 100%;

            a {
                width: 100%;
                padding: 0.5em;
                margin: 0.5em;
                color: var(--mainTextColor);
                text-align: left;
                text-decoration: none;
                display: flex;
                align-items: center;
            }

            p {
              margin: 0;
              padding: 0;
            }
        }

        li svg {
            width: 1.5em;
            height: 1.5em;
            padding: 0 1em;
            background-color: var(--mainTextColor);
        }

        #home-icon {
            mask: url("../svg/home.svg") no-repeat center center;
        }
        #flasks-icon {
            mask: url("../svg/flask-vial-solid.svg") no-repeat center center;
        }
        #user-icon {
            mask: url("../svg/edit-user.svg") no-repeat center center;
        }
        #edit-users-icon {
            mask: url("../svg/users-gear-solid.svg") no-repeat center center;
        }
        #check-icon {
            mask: url("../svg/check.svg") no-repeat center center;
        }
        #health-icon {
            mask: url("../svg/notes-medical-solid.svg") no-repeat center center;
        }
        #login-icon {
            mask: url("../svg/login.svg") no-repeat center center;
        }
        #logout-icon {
            mask: url("../svg/logout.svg") no-repeat center center;
        }

    }

    ul li a:hover {
        transition: 0.3s ease;
        text-decoration: underline;
    }
}

/* Mobile Styling */
@media screen and (max-width: 720px) {
    header .description h1 {
        font-size: 1em;
    }

    .page {
      flex-direction: column;
    }

    nav {
        .menuToggle {
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-content: center;
            height: 5em;
            width: 5em;
            max-height: 100%;
            background-color: var(--mainRed);
            border: none;
            cursor: pointer;
            padding: 0.5em 10% 0.5em 5%;
            margin: 0;
            position: sticky;
            top: 0;
            z-index: 10;

            .bar {
                z-index: 20;
                width: 2em;
                height: 4px;
                background-color: white;
                border-radius: 3px;
                transition: all 0.3s ease;
            }
        }

        /* Zustand: geöffnetes Menü -> Kreuz */
        .menuToggle.open .bar:nth-child(1) {
            transform: rotate(45deg) translate(0.5em, 0.5em);
        }
        .menuToggle.open .bar:nth-child(2) {
            display: none;
        }
        .menuToggle.open .bar:nth-child(3) {
            transform: rotate(-45deg) translate(0.5em, -0.5em);
            background-color: var(--grey);
        }

        .menu {
            display: none;
            width: 0;
            height: 0;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            place-content: space-evenly;
            margin: 0;
            padding: 0;
            background-color: #bb271a;
            overflow: hidden;
            transition: all 0.5s ease;

            li a {
                white-space: nowrap;
            }
        }
    }
}

/* Desktop Styling */
@media screen and (min-width: 720px) {
    .page {
      flex-direction: row;
    }

    nav {
        .menuToggle {
            display: none;
        }

        .menu {
            width: fit-content;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-content: space-evenly;
            list-style: none;
            margin: 0;
            padding: 0 ;
            height: 4em;
            align-items: center;
            position: sticky;
            top: 0;
            background-color: var(--mainRed);

            li {
              padding: 0;
              height: 100%;
              min-width: 90px;
              width: fit-content;

              a {
                height: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                text-align: center;
                margin: 0;
                padding: 0;
                font-size: 0.95em;
                color: var(--mainTextColor);

                svg {
                      margin: 0.5em;
                  }
              }

              p {
                font-size: 0.75em;
                transition: all 0.5s ease;
              }
            }

            li:hover p {
              opacity: 1;
              visibility: visible;
              font-size: 1em;
            }
        }
    }
}