:root {
    --menu-text-color: var(--white);
    --menu-text-header-color-hover: #D7C1A5;
    --menu-text-color-sub-hover: #424242;
    --menu-text-color-sub: var(--color-paragraph);
    --menu-bg: var(--red);
    --menu-submenu-bg: var(--sand-alt);

    --menu-gutter-x: var(--safe-space);
    --menu-gutter-y: 10px;
}

.menu {
    font-family: var(--font-canela);
    font-size: 18px;
    color: var(--menu-text-color);
    background-color: var(--menu-bg);
    padding-top: var(--menu-gutter-y);
    padding-bottom: var(--menu-gutter-y);
    padding-left: var(--menu-gutter-x);
    padding-right: var(--menu-gutter-x);
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: space-between;

    & *, *::before {
        transition: all .3s;
        box-sizing: border-box;
    }
    & a.header {
        text-decoration: none;
    }
    & a:not(.logo, .action, .header, .social-icon), &.--closed .links > .links-container .header {
        text-decoration: none;
        color: var(--menu-text-color-sub) !important;
        position: relative;
        padding: 0;
        &::before {
            content: "";
            width: 10px;
            height: 2px;
            background-color: var(--menu-text-color-sub);
            display: block;
            opacity: 0;
            position: absolute;
            right: calc(100% + 5px);
            top: 50%;
            transform: translateY(-50%);
        }
        &:hover {
            color: var(--menu-text-color-sub-hover) !important;
            &::before {
                background-color: var(--menu-text-color-sub-hover);
                opacity: 1;
            }
        }
    }
    & .intro-menu {
        width: clamp(107px, 15%, 218px);
        & .social {
            margin-top: 20px;
            display: flex;
            gap: 10px;
            align-items: center;
        }
    }
    & .logo {
        width: 100%;
        display: block;
        &:hover::before {
            display: none;
        }
    }
    & .mobile-collapse {
        padding-right: 50px;
        display: flex;
        justify-content: flex-end;
        gap: 50px;
        flex: 1;

        & .mobile-overflow {
            display: flex;
            gap: var(--menu-gutter-x);

            & > .links-container > .header {
                line-height: 40px;
                padding: 0 5px 10px;
            }
        }
        & .links-container {
            height: 50%;
            position: relative;

            &.--closed .header {
                color: var(--menu-text-color);
            }

            &.--closed .links {
                max-height: 0;
                overflow: hidden;
                opacity: 0;
                transition: all .3s;
            }

            & .header {
                font-size: 18px;
                color: var(--menu-text-header-color-hover);
            }

            & .links {
                width: fit-content;
                min-width: 300px;
                max-height: unset;
                font-family: "Roboto", Sans-serif;
                background-color: var(--menu-submenu-bg);
                position: absolute;
                top: 100%;
                left: 0;
                z-index: 102;
                display: flex;
                flex-direction: column;
                gap: 15px;
                padding: calc(var(--menu-gutter-y) / 2) var(--menu-gutter-x);
                opacity: 1;
            }
        }
    }

    & .actions {
        display: flex;
        gap: 20px;
    }
    & .action {
        width: 40px;
        height: 40px;
        background-color: unset;
        border: 1px solid white;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        & svg {
            width: 20px;
            height: 20px;
        }
    }
}
@media (max-width: 1023.98px) {
    .menu {
        z-index: 100;
        & .logo .desktop {
            display: none;
        }
        & .mobile-collapse {
            width: 100%;
            height: 100vh;
            background-color: var(--menu-bg);
            transform: translateX(0);
            position: fixed;
            top: 0;
            left: 0;
            flex-direction: column;
            justify-content: flex-start;
            gap: 25px;
            padding: var(--menu-gutter-y) var(--menu-gutter-x) 50px;
            & .mobile-collapse-logo {
                max-width: 129px;
            }
            & .mobile-overflow {
                flex-direction: column;
                overflow: auto;
            }
            & .links-container {
                height: auto;
                & .header {
                    color: var(--menu-text-header-color-hover) !important;
                    padding: 0;
                }
                & .links {
                    background-color: transparent;
                    padding: 0;
                    & a {
                        color: var(--menu-text-color) !important;
                    }
                }
                &.--closed .links {
                    height: auto;
                    max-height: unset;
                    position: static;
                    opacity: 1;
                }
            }
        }
        &.--closed .mobile-collapse {
            transform: translateX(-100%);
        }
        & .mobile-close {
            border: none;
            flex-shrink: 0;
            position: absolute;
            top: var(--menu-gutter-y);
            right: var(--menu-gutter-x);
            margin-left: auto;
            & span {
                width: 80%;
                height: 3px;
                border-radius: 3px;
                background-color: var(--menu-text-header-color-hover);
                display: block;
                position: absolute;
                top: 50%;
                left: 12%;
                &:first-child {
                    transform: rotate(-45deg);
                }
                &:last-child {
                    transform: rotate(45deg);
                }
            }
        }
        
        & .intro-menu {
            & .social {
                display: none;
            }
        }
    }
}
@media (min-width: 1024px) {
    :root {
        --menu-gutter-x: 40px;
        --menu-gutter-y: 52px;
    }

    .menu {
        & .logo .mobile,
        .mobile-collapse .mobile-collapse-logo,
        .mobile-trigger,
        .mobile-close {
            display: none !important;
        }
        & .links {
            -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
            -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
            box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
            &::before {
                content: "";
                display: block;
                position: absolute;
                bottom: 100%;
                left: 0;
                width: 40px;
                height: 8px;
                background-color: var(--menu-submenu-bg);
            }
            & .links::before {
                display: none;
            }
        }
    }
}