/*==================================================
# HEADER
==================================================*/

.mgr-header {

    position: fixed;

    inset: 0 auto auto 0;

    width: 100%;
    height: 80px;

    background: transparent;

    z-index: 1000;

    transition:
        height .35s ease,
        background .35s ease,
        backdrop-filter .35s ease,
        box-shadow .35s ease;
}

.mgr-header.is-scrolled {

    height: 40px;

    background: rgba(var(--mgr-brand-rgb), 0.5);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    box-shadow: 0 8px 30px rgba(0, 0, 0, .08);
}

/*==================================================
# HEADER - PÀGINES INTERIORS
==================================================*/

body:not(.home) .mgr-header {
    background: transparent;


}

body:not(.home) .mgr-header .mgr-header__link {
    color: var(--mgr-dark);
}

body:not(.home) .mgr-header .mgr-header__link::before {
    background: var(--mgr-dark);
}

body:not(.home) .mgr-header .mgr-header__link:hover::after {
    background: var(--mgr-dark);
}

body:not(.home) .mgr-header.is-scrolled {
    background-color: rgba(var(--mgr-brand-rgb), 0.5);
}

body:not(.home) .mgr-header.is-scrolled .mgr-header__link  {
    color: #fff;
}


/*==================================================
# NAV
==================================================*/

.mgr-header__nav {

    width: min(1400px, calc(100% - 80px));

    height: 100%;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 5fr 1fr 5fr;

    align-items: center;
}


/*==================================================
# MENUS
==================================================*/

.mgr-header__menu {

    display: flex;

    align-items: center;

    gap: 42px;
}

.mgr-header__menu--left {

    justify-content: flex-end;

    padding-right: 60px;
}

.mgr-header__menu--right {

    justify-content: flex-start;

    padding-left: 60px;
}


/*==================================================
# HEADER LOGO
==================================================*/

.mgr-header-logo {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    text-decoration: none;
}

.logo-img {

    width: 50px;
    max-width: 50px;

    transition:
        width .35s ease,
        max-width .35s ease;
}

.logo-img img {

    display: block;

    width: 100%;
    height: auto;
}


/*--------------------------------------------------
# LOGO SCROLLED
--------------------------------------------------*/

.mgr-header.is-scrolled .logo-img {

    width: 30px;
    max-width: 30px;
    filter: brightness(0) invert(1);
}


/*==================================================
# LINKS
==================================================*/

.mgr-header__link {

    position: relative;

    display: flex;

    align-items: center;

    box-sizing: border-box;

    height: 28px;

    padding: 0 10px;

    border: none;

    text-decoration: none;

    text-transform: uppercase;

    font-size: .95rem;

    font-weight: 600;

    letter-spacing: .08em;

    line-height: 1;

    white-space: nowrap;

    transition:
        color .3s ease,
        opacity .3s ease,
        font-size .35s ease;
}


/*==================================================
# LÍNIA SUPERIOR
==================================================*/

.mgr-header__link::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 2px;

    background: transparent;

    transition:
        background-color .3s ease,
        opacity .3s ease;
}


/*==================================================
# LÍNIA INFERIOR
==================================================*/

.mgr-header__link::after {

    content: "";

    position: absolute;

    bottom: 0;
    left: 0;

    width: 100%;
    height: 2px;

    background: transparent;

    opacity: 0;

    transition:
        background-color .3s ease,
        opacity .3s ease;
}


/*==================================================
# LINK FOSC
==================================================*/

.mgr-header__link--dark {

    color: var(--mgr-dark);
}

.mgr-header__link--dark::before {

    background: var(--mgr-dark);
}

.mgr-header__link--dark:hover {

    color: var(--mgr-dark);
}

.mgr-header__link--dark:hover::after {

    background: var(--mgr-dark);

    opacity: 1;
}


/*==================================================
# LINK CLAR
==================================================*/

.mgr-header__link--light {

    color: #fff;
}

.mgr-header__link--light::before {

    background: var(--mgr-light);
}

.mgr-header__link--light:hover {

    color: #fff;
}

.mgr-header__link--light:hover::after {

    background: #fff;

    opacity: 1;
}


/*==================================================
# SCROLLED
==================================================*/

.mgr-header.is-scrolled .mgr-header__link {

    color: #fff;

    font-size: .8rem;

    font-weight: 400;
}


/*--------------------------------------------------
# ELIMINAR LÍNIA SUPERIOR
--------------------------------------------------*/

.mgr-header.is-scrolled .mgr-header__link::before {

    opacity: 0;
}


/*--------------------------------------------------
# ELIMINAR LÍNIA INFERIOR
--------------------------------------------------*/

.mgr-header.is-scrolled .mgr-header__link::after {

    opacity: 0;
}


/*==================================================
# LÍNIES LATERALS SCROLLED
==================================================*/

.mgr-header.is-scrolled .mgr-header__link {

    --mgr-link-line: #fff;

    background-image:
        linear-gradient(
            to bottom,
            var(--mgr-link-line),
            var(--mgr-link-line)
        );

    background-repeat: no-repeat;

    background-position: left top;

    background-size: 2px 0;

    transition:
        color .3s ease,
        font-size .35s ease,
        background-size .3s ease;
}


/*--------------------------------------------------
# LÍNIA ESQUERRA
--------------------------------------------------*/

.mgr-header.is-scrolled .mgr-header__link:hover {

    background-size: 2px 100%;

    box-shadow:
        2px 0 0 0 var(--mgr-link-line);
}


/*==================================================
# HAMBURGER
==================================================*/

/*
 * La hamburguesa queda desactivada.
 * El menú sempre és visible.
 */

.mgr-header__toggle {

    display: none;
}


/*==================================================
# TABLET
==================================================*/

@media (max-width: 1024px) {

    .mgr-header {

        height: 80px;
    }

    .mgr-header.is-scrolled {

        height: 40px;
    }

    .mgr-header__nav {

        width: calc(100% - 40px);



    }

    .mgr-header__menu {

        gap: 20px;
    }

    .mgr-header__menu--left {

        padding-right: 20px;
    }

    .mgr-header__menu--right {

        padding-left: 20px;
    }

    .mgr-header__link {

        height: 28px;

        padding: 0 7px;

        font-size: .85rem;

        letter-spacing: .06em;
    }


    /*--------------------------------------------------
    # LOGO TABLET
    --------------------------------------------------*/

    .logo-img {

        width: 45px;
        max-width: 45px;
    }

    .mgr-header.is-scrolled .logo-img {

        width: 28px;
        max-width: 28px;
    }
}


/*==================================================
# MOBILE
==================================================*/

@media (max-width: 768px) {

    .mgr-header {

        height: 72px;
    }

    .mgr-header.is-scrolled {

        height: 40px;
    }

    .mgr-header__nav {

        width: 100%;

    }

    .mgr-header__menu {

        gap: 8px;
    }

    .mgr-header__menu--left {

        padding-right: 4px;
    }

    .mgr-header__menu--right {

        padding-left: 4px;
    }

    .mgr-header__link {

        height: 26px;

        padding: 0 5px;

        font-size: .72rem;

        letter-spacing: .04em;
    }


    /*--------------------------------------------------
    # LOGO MOBILE
    --------------------------------------------------*/

    .logo-img {

        width: 40px;
        max-width: 40px;
        padding: 0px 4px;
    }

    .mgr-header.is-scrolled .logo-img {

        width: 25px;
        max-width: 25px;
    }


    /*--------------------------------------------------
    # COLOR MÒBIL
    --------------------------------------------------*/

    .mgr-header__link--dark {

        color: var(--mgr-brand);
    }

    .mgr-header__link--dark::before {

        background: var(--mgr-brand);

        height: 1px;
    }

    .mgr-header__link--dark:hover::after {

        background: var(--mgr-brand);

        height: 1px;
    }

    .mgr-header__link--light {

        color: var(--mgr-brand);
    }

    .mgr-header__link--light::before {

        background: var(--mgr-brand);

        height: 1px;
    }

    .mgr-header__link--light:hover::after {

        background: var(--mgr-brand);

        height: 1px;
    }


    /*--------------------------------------------------
    # SCROLLED MÒBIL
    --------------------------------------------------*/

    .mgr-header.is-scrolled .mgr-header__link {

        font-size: .68rem;
    }
}