/* ******************************************** */
/** COMPONENTS: HEADER
/* ******************************************** */


/* HEADER FIXED */

.is-fixed .c-header__holder{
    height: var(--header-xs);
    position: fixed;
    left: 0;
    top: 0;
    background-color: var(--color-primary);
    box-shadow: 0 -12px 20px 4px var(--color-darker-30);
}

.is-fixed .c-header__holder{
    animation: headerFixed 650ms cubic-bezier(0.22, 0.61, 0.36, 1);
    box-shadow: rgba(0,0,0,.15) 0px 4px 12px;
}


/* SUBMENU */

.c-submenu{
    display: none;
    max-height: 0;
    transition: max-height 350ms ease-out;
}

.c-submenu__item.is-active{
    color: var(--color-active);
}

/* open */

.c-nav__item.is-open > .c-submenu{
    display: block;
    transition: max-height 350ms ease-out;
}

.c-nav__item.is-open > .c-nav__link:after{
    transform: rotate(180deg);
    color: var(--color-hover);
    transition: transform 350ms ease-out;
}

.c-nav__item.is-open > .c-nav__link{
    color: var(--color-hover);
}




/* Not Desktop */

@media (max-width: 979px){


    .c-header__actions {
        margin-top: 30px;
    }

    /* Nav */

    .c-nav{
        --navDelay: 500ms;
        display: none;
        width: 100%;
        height: 100vh;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 1;
        overflow: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;

    }

    .c-nav__overlay{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100vh;
        background-color: rgb(var(--color-primary-rgb)/80%);
        backdrop-filter: blur(4px);
    }

    .c-nav__holder {
        width: 100%;
        padding: 95px 30px 55px;
        background-color: rgb(var(--color-primary-rgb)/90%);
        background: linear-gradient(180deg, var(--color-secondary) -60%, var(--color-primary) 100%);
        opacity: 0;

    }

    .c-nav__item{
        padding: .9em 0;
        font-size: 1.7rem;
    }

    .c-nav__item:first-child{
        margin-top: 0;
    }

    .c-nav__link{
        display: inline-block;
        font-size: 1em;
    }

    /* SUBMENU */

    .c-submenu{
        overflow: hidden;
    }

    .c-submenu__list {
        font-size: 1.5rem;
        transform: translateY(-100%);
        padding: 25px 15px 0;
        opacity: 0;
    }
    .has-submenu .c-submenu__list{
        padding-top:12px
    }
    
    .c-submenu__item:not(:first-child) {
        margin-top: 1.4em;
    }

    .c-nav__item.is-open .c-submenu__list {
        animation: showSubmenuMobile 350ms ease-out forwards;
    }

    .c-nav__item.is-closing .c-submenu__list {
        animation: hideSubmenuMobile 350ms ease-out forwards;
    }



    /* INTERACTION */

    /* nav-visible */

    .nav-visible{
        overflow: hidden; /* Prevent body's scrolling underneath */
    }

    .nav-visible .c-nav{
        display: block;
    }

    .nav-visible .c-nav__overlay{
        animation: navOverlay var(--navDelay) ease-out forwards;
    }

    .nav-visible .c-nav__holder{
        animation: showNav var(--navDelay) ease-out forwards;
        animation-delay: 200ms;
    }


    /* nav-closing */

    .nav-closing .c-nav__overlay{
        animation: navOverlayHide var(--navDelay) ease-out forwards;
        animation-delay: 100ms;
    }

    .nav-closing .c-nav__holder{
        animation: hideNav var(--navDelay) ease-out forwards;
    }

    /* Header BTN */

    .c-header__btn-bar{
        --barDuration: 800ms;
        transition:
            background-color var(--barDuration) ease-out,
            transform var(--barDuration) var(--easeOutCubic);
    }
    .c-header__btn-bar:before,
    .c-header__btn-bar:after{
        transition: transform var(--barDuration) var(--easeOutCubic) 100ms;
    }
    .nav-visible .c-header__btn-bar{
        background-color: transparent;
        -webkit-transform: rotate(360deg) rotateZ(0);
        -moz-transform: rotate(360deg) rotateZ(0);
        transform: rotate(360deg) rotateZ(0);
    }
    .nav-visible .c-header__btn-bar:before{
        -webkit-transform: translate3d(0, 0%, 0) rotate(45deg);
        -moz-transform: translate3d(0, 0%, 0) rotate(45deg);
        transform: translate3d(0, 0%, 0) rotate(45deg);
    }
    .nav-visible .c-header__btn-bar:after{
        -webkit-transform: translate3d(0, 0%, 0) rotate(-45deg);
        -moz-transform: translate3d(0, 0%, 0) rotate(-45deg);
        transform: translate3d(0, 0%, 0) rotate(-45deg);
    }



}



/* ********************** de Mobile a TABLET ********************** */

@media (min-width: 768px) and (max-width: 979px) and (min-height: 668px){

    .c-nav__item{
        font-size: 2rem;
    }
}



/* ********************** de Tablet a DESKTOP ********************** */

@media (min-width: 980px) {

    .c-header__link:hover,
    .c-header__link:focus{
        color: var(--color-hover);
    }

    .c-header__lang .c-header__lang-arrow{
        transition: color 250ms ease-out;
    }

    .c-header__lang .c-header__lang-flag{
        transition: box-shadow 250ms ease-out;
    }

    .c-header__lang:is(:hover,:focus) .c-header__lang-arrow{
        color: var(--color-hover);
        transition: color 250ms ease-out;
    }

    .c-header__lang:is(:hover,:focus) .c-header__lang-flag{
        box-shadow: rgba(0, 0, 0, 0.55) 0px 5px 10px;
        transition: box-shadow 250ms ease-out;
    }

    .c-header__brand-text{
        transition: color 400ms ease-out;
    }

    .c-header__brand-link:is(:hover,:focus) .c-header__brand-text{
        color: var(--color-hover);
        transition: color 400ms ease-out;
    }



    /* NAV */

    .c-nav__item.has-submenu .c-nav__link{
        position: relative;
    
    }
    .c-submenu__list .c-nav__item.has-submenu .c-nav__link{
    
            text-transform: none;
    font-size: 1em;
    padding: 15px 0px 0px;
    text-align: left
    }

    .c-nav__item.has-submenu .c-nav__link:before{
        content: "";
        display: block;
        width: calc(100% + 10px);
        min-width: var(--tap-size);
        height: var(--tap-size);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .c-nav__link:hover{
        color: var(--color-hover);
    }


    /* Submenu */

    html[dir="rtl"] .c-nav__submenu{
        right: 0;
    }

    html[dir="ltr"]  .c-nav__submenu{
        left: 0;
    }
    
    .c-submenu__list .c-nav__submenu{
        top: -10px !important;
        left: 140px !important;
    }

    .c-submenu{
        transform: translate3d(0,10px,0);
        position: absolute;
        top: calc(100% + 5px);
    }

    .c-submenu__list{
        background: linear-gradient(145deg, var(--color-primary-brighter) 0%, var(--color-primary) 100%);
        box-shadow: rgb(22 22 22 / 60%) 0px 12px 30px -10px;
        padding: 20px;
        border-radius: 20px;
        font-size: 1.3rem;
        font-weight: 400;
        min-width: 200px;
    }

    .c-submenu__item:not(:last-child){
        border-bottom: 1px solid var(--color-skyblue);
    }

    .c-submenu__item:not(:first-child,:last-child){
        padding: .7em 0;
    }

    .c-submenu__item:last-child{
        padding-top: .7em;
    }

    .c-submenu__item:first-child{
        padding-bottom: .7em;
    }

    .c-submenu__link:is(:hover,:focus){
        color: var(--color-hover);
    }


    /* open */

    .c-nav__item.is-open > .c-submenu{
        z-index: 100;
        animation: showSubmenu 350ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    }

    .c-nav__item.is-closing .c-submenu{
        animation: hideSubmenu 350ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    }


}

/* ********************** de Desktop 2 a HD ********************** */

@media (min-width: 1400px) {

    .c-submenu__list{
        font-size: 1.5rem;
    }

}



/* Header fixed Animations */

@keyframes headerFixed{
    0%{
        -webkit-transform: translate3d(0,-100%,0);
        -moz-transform: translate3d(0,-100%,0);
        transform: translate3d(0,-100%,0);
        /* opacity: 0; */
    }
    100%{
        -webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
        /* opacity: 1; */
    }
}

/* Nav Animations */

@keyframes showNav{
    0%{
        opacity: 0;
        transform: translate3d(0,-100px,0);
    }
    100%{
        opacity: 1;
        transform: translate3d(0,0,0);
    }
}

@keyframes hideNav{
    0%{
        opacity: 1;
        transform: translate3d(0,0,0);
    }
    100%{
        opacity: 0;
        transform: translate3d(0,-100px,0);
    }
}


@keyframes navOverlay{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}


@keyframes navOverlayHide{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}



/* Submenu Animations */


@keyframes showSubmenu{
    0%{
        opacity: 0;
        transform: translate3d(0,10px,0);
    }
    100%{
        opacity: 1;
        transform: translate3d(0,0,0);
    }
}


@keyframes hideSubmenu{
    0%{
        opacity: 1;
        transform: translate3d(0,0,0);
    }
    100%{
        opacity: 0;
        transform: translate3d(0,10px,0);
    }
}

@keyframes showSubmenuMobile{
    0%{
        opacity: 0;
        transform: translate3d(0,-100%,0);
    }
    100%{
        opacity: 1;
        transform: translate3d(0,0,0);
    }
}


@keyframes hideSubmenuMobile{
    0%{
        opacity: 1;
        transform: translate3d(0,0,0);
    }
    100%{
        opacity: 0;
        transform: translate3d(0,-100%,0);
    }
}