/* nav scroll */

html * {
    box-sizing: border-box;
}

header {
    transition: 0.6s ease all;
}

header {
    width: 100%;
}

body.scrolled-top header {
    transition-delay: .2s;
    padding: var(--space-2xs) var(--space-2xl);
}

body.scroll-down header {
    transform: translateY(-100%);
}

body.scroll-up header {
    transform: translateY(0);
}

header:before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--bg-body);
    z-index: -1;
    transition: 0.6s ease all;
}

/* nav menu */
#main-nav,
#main-nav ul {
    padding: 0;
    list-style: none;
    margin: 0;
}

#main-nav>li.menu-item a {
    cursor: pointer;
}

#main-nav>li.menu-item>a {
    padding: var(--space-m) var(--space-xs);
}

/* nav menu */
.scroll-up header:after,
.scrolled-top header:hover:after {
    height: calc(100% - 1px);
}

/* language */
#nav-action li.menu-item a span {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
}

/* sub-menu */
.menu-item-has-children {
    position: relative;
}

header .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    visibility: hidden;
    pointer-events: none;
    background: var(--light);
}

body:not(.scroll-down) header .menu-item-has-children:hover .sub-menu {
    visibility: visible;
    pointer-events: auto;
}

header .sub-menu>li>a {
    display: block;
}

header .sub-menu>li:hover>a {
    background: var(--dark-5);
}

/* media queries */
@media (max-width: 991px) {
    body.m-open {
        overflow: hidden;
    }

    body {
        --nav-height: 80px;
    }

    #nav-principal {
        position: fixed;
        top: var(--nav-height);
        right: 0;
        width: 100%;
        height: calc(100% - var(--nav-height));
        transform: translateX(100%);
        background: var(--dark);
        padding: var(--space-xl);
        z-index: 100;
        transition: 0.3s ease all;
    }

    #nav-principal>ul {
        flex-direction: column;
        align-items: stretch;
    }

    #nav-principal a {
        font-size: var(--text-l);
        text-align: left;
    }

    #nav-principal .sub-menu {
        display: none;
    }

    body.m-open #nav-principal {
        transform: translateX(0);
    }

    #nav-action {
        position: fixed;
        z-index: 1000;
        padding: 0.5rem;
        top: unset;
        bottom: 0;
        left: 0;
        width: 100%;
        transform: translateY(100%);
        transition: 0.3s ease all;
    }

    #nav-action ul {
        width: 100%;
        align-items: stretch;
    }

    #nav-action ul li:last-child {
        width: 100%;
    }

    #nav-action ul li:last-child a {
        text-align: center;
    }

    body:is(.scroll-down, .scrolled-top, .m-open) #nav-action {
        top: unset;
        transform: translateX(0);
    }
}