/*
* menu_style.css
* Enthält: Styles für .header
* Abhängig von: main_style.css (Variablen, Reset)
* Aufbau: Basis-Styles oben, Media Queries unten
*/

/********** Top Menu *********/
.top-menu {
    height: 35px;
    font-size: 0.7rem;
    background: var(--light-gray);
}

.top-menu__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    height: 100%;
    margin: 0 auto;
}

.top-menu__link-wrapper {
    display: flex;
    gap: 24px;
}

.top-menu__username {
    color: var(--dark-blue);
    font-size: 0.8rem;
}

.top-menu__link {
    display: flex;
    align-items: center;
    gap: 6px;
}

.top-menu__link-icon {
    width: 16px;
}

.top-menu__link-text {
    color: var(--dark-blue);
    font-size: 0.8rem;
}

/* end of Top Menu */

/************* dark menu ************/
.dark-menu {
    background: var(--dark-blue);
}

.dark-menu__logo {

}

.dark-menu__logo--fc {
     justify-self: start;
     grid-area: logo-fc;
}

.dark-menu__logo--fie {
    justify-self: end;
    grid-area: logo-fie;
}

.dark-menu__logo--mobile {
    display: none;
    width: 30px;
}

.dark-menu__logo--desktop {
    display: block;
    width: 200px;
}

.dark-menu__container {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    gap: 24px;
    margin: 0 auto;
    padding: 20px 0;
    grid-template-areas:
        "logo-fc form logo-fie";
}

.dark-menu__form-wrapper {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    grid-area: form;
}

.dark-menu__form {
    display: flex;
    gap: 12px;
}

.dark-menu__form--hidden {
    display: none;
}

.dark-menu__form-select {
    outline: 0;
    height: 1.7rem;
    width: 14rem;
    padding-left: 0.3125rem;
    border: thin solid var(--light-gray);
    border-radius: 0.1875rem;
    color: var(--light-gray);
    font-size: 0.8rem;
    background: var(--dark-blue) url(../images/menu/chevron-down-solid-white.svg) no-repeat;
    background-size: 0.7rem;
    -moz-appearance: none;
    -webkit-appearance: none;
    background-position-x: calc(100% - 0.6rem);
    background-position-y: 50%;
    padding-right: 1.7rem;
}

.dark-menu__form-input {
    outline: 0;
    width: 14rem;
    height: 1.7rem;
    padding: 0 0.3125rem;
    border: thin solid var(--light-gray);
    border-radius: 0.1875rem;
    background: var(--dark-blue);
    color: var(--light-gray);
}

.dark-menu__form-input::placeholder {
    color: var(--light-gray);
}

.dark-menu__form-input:focus::placeholder {
    color: transparent;
}

.dark-menu__form-submit {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border: thin solid var(--light-gray);
    border-radius: 0.1875rem;
    background: radial-gradient(rgb(112, 130, 148) -10%, rgb(54, 71, 81) 100%);
    color: var(--light-gray);
    cursor: pointer;
}

.dark-menu__form-submit:hover {
    background: var(--dark-blue);
}

.dark-menu__form-icon {
    width: 0.7rem;
}

.dark-menu__toggle {
    display: none;
    align-items: center;
    justify-self: center;
    gap: 6px;
    background: transparent;
    border: none;
}

.dark-menu__toggle--filter {
    grid-area: toggle-filter;
}

.dark-menu__toggle--search {
    grid-area: toggle-search;
}

.dark-menu__toggle-icon {
    width: 20px;
}

.dark-menu__toggle-text {
    color: var(--light-gray);
}

.login-menu-options button:hover,
.login-btn:hover,
.add-account-btn:hover {
    background: var(--dark-blue);
}
/* end of dark-menu */


/************* expand Menu ************/
.expand-menu {
    width: 100%;
    height: 2.5rem;
    background: var(--light-gray);
    color: var(--dark-blue);
    font-size: 0.9rem;
}

.expand-menu__container {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}

.expand-menu__button {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 2.5rem;
    padding: 0 0.3125rem;
    cursor: default;
}

.expand-menu__button.is-open {
    background-color: var(--white);
}

.expand-menu__button--link {
    cursor: pointer;
}

.expand-menu__button:hover {
    background-color: var(--white);
}

.expand-menu__text {
    color: var(--dark-blue);
    white-space: nowrap;
}

.expand-menu__icon {
    width: 20px;
}

.shopping-cart-icon {
    height: 1.0625rem;
}

.icon {
    height: 3.4375rem;
}

.login-icon, .logout-icon {
    margin-right: 10px;
    height: 1.5625rem;
}

/* end of expand-menu */

/************* mobile Menu ************/
.burger-menu {
    display: none;
}

/************* Media Queries ************/

@media screen and (max-width: 1400px) {
    .dark-menu__container {
        grid-template-columns: 200px auto 200px;
        grid-template-areas:
        "logo-fc . logo-fie"
        "form form form";
    }
}

/* <= 1200px - Tablets und kleine Laptops */

@media screen and (max-width: 75rem) {
    .dark-menu {
        height: unset;
        flex-wrap: wrap;
        row-gap: 0.625rem;
    }

    .dark-menu-forms {
        order: 2;
        width: 100%;
        justify-content: center;
    }
}

/* <= 992px - Tablets */
@media screen and (max-width: 62rem) {
    .top-menu {
        height: unset;
        padding: 8px 0;
    }

    .top-menu__link-wrapper {
        display: none;
    }

    .dark-menu {
        font-size: 1rem;
    }

    .expand-menu {
        display: none;
    }

    .dark-menu__container {
        grid-template-columns: 150px 1fr 1fr 150px;
        gap: 0 24px;
        grid-template-areas:
            "logo-fc toggle-filter toggle-search logo-fie"
            "form form form form";
    }

    .dark-menu__logo--desktop {
        width: 150px;
    }

    .dark-menu__toggle {
        display: flex;
    }

    .dark-menu__form-wrapper {
        flex-direction: column;
        gap: 0;
    }

    .dark-menu__form {
        gap: 24px;
        margin-top: 24px;
        width: 100%;
    }

    .dark-menu__form-label--group {
        flex: 0 0 calc(50% - 12px);
    }

    .dark-menu__form-label--single {
        flex: 0 0 calc(100% - 60px);
    }

    .dark-menu__form-select {
        width: 100%;
        height: 36px;
        padding-left: 12px;
        font-size: 16px;
    }

    .dark-menu__form-input {
        width: 100%;
        height: 36px;
        padding-left: 12px;
        font-size: 16px;
    }

    .dark-menu__form-submit {
        width: 2.25rem;
        height: 2.25rem;
    }

    .dark-menu__form-icon {
        width: 1rem;
    }
}

/* <= 768px - Mobile und kleine Tablets */

@media screen and (max-width: 48rem) {
    .search-btn {
        display: flex;
        margin: 0;
    }

    .shopping-cart-icon, .myfaro-icon {
        height: 1.25rem;
        padding-inline-end: 0;
    }
}

@media screen and (max-width: 576px) {
    .dark-menu__container {
        grid-template-columns: 30px 1fr 1fr 30px;
        gap: 0 24px;
        grid-template-areas:
            "logo-fc toggle-filter toggle-search logo-fie"
            "form form form form";
    }

    .dark-menu__logo--mobile {
        display: block;
    }

    .dark-menu__logo--desktop {
        display: none;
    }

    .dark-menu__form--group {
        flex-direction: column;
    }

    .dark-menu__form-label--group {
        flex: 0 1 auto;
    }
}