/* =========================================================
   GLOBAL
========================================================= */

:root {

    --lux-primary: #171715;
    --lux-body: #5B5954;

    --lux-background: #F5F3EE;
    --lux-secondary-background: #ECE8E1;

    --lux-accent: #A39482;

    --lux-white: #F5F3EE;
    --lux-pure-white: #FFFFFF;

    --lux-dark: #11110F;

    --lux-header-bg: rgba(17, 17, 15, 0.90);
    --lux-menu-bg: rgba(17, 17, 15, 0.95);

    --lux-border-light: rgba(245, 243, 238, 0.22);
    --lux-muted-light: rgba(245, 243, 238, 0.68);

    --lux-font-primary: "Manrope", Arial, sans-serif;
    --lux-font-accent: "Instrument Serif", Georgia, serif;

    --lux-header-height: 92px;

    --lux-side-padding: 48px;

    --lux-transition: cubic-bezier(0.22, 1, 0.36, 1);
}


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

.lux-header,
.lux-header * {
    box-sizing: border-box;
}


.lux-header {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 9999;

    font-family: var(--lux-font-primary);

    color: var(--lux-white);
}


body.admin-bar .lux-header {
    top: 32px;
}


/* =========================================================
   HEADER BAR
========================================================= */

.lux-header__bar {

    position: relative;

    z-index: 3;

    width: 100%;

    height: var(--lux-header-height);

    background: transparent;

    transition:
        background-color 350ms ease,
        backdrop-filter 350ms ease;
}


.lux-header:hover .lux-header__bar,
.lux-header:focus-within .lux-header__bar,
.lux-header.is-open .lux-header__bar {

    background: var(--lux-header-bg);

    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}


/* =========================================================
   HEADER INNER
========================================================= */

.lux-header__inner {

    width: 100%;

    height: 100%;

    padding-left: var(--lux-side-padding);
    padding-right: var(--lux-side-padding);

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);

    align-items: center;
}


/* =========================================================
   LEFT
========================================================= */

.lux-header__left {

    justify-self: start;

    display: flex;

    align-items: center;
}


/* =========================================================
   TOGGLE BUTTON
========================================================= */

.lux-menu-toggle {

    width: 58px;
    height: 58px;

    border: 0;

    padding: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 7px;

    cursor: pointer;

    background:
        rgba(17, 17, 15, 0.16);

    transition:
        background-color 300ms ease;
}


/*
Header hover = slightly visible box
*/

.lux-header:hover
.lux-menu-toggle {

    background:
        rgba(245, 243, 238, 0.09);
}


/*
Toggle hover
*/

.lux-menu-toggle:hover {

    background:
        rgba(245, 243, 238, 0.16) !important;
}


/*
Open state
*/

.lux-header.is-open
.lux-menu-toggle {

    background:
        rgba(245, 243, 238, 0.12);
}


/* hamburger lines */

.lux-menu-toggle__line {

    display: block;

    width: 30px;
    height: 2px;

    background:
        var(--lux-pure-white);

    transform-origin: center;

    transition:
        transform 400ms var(--lux-transition),
        opacity 250ms ease;
}


/* X */

.lux-header.is-open
.lux-menu-toggle__line:nth-child(1) {

    transform:
        translateY(9px)
        rotate(45deg);
}


.lux-header.is-open
.lux-menu-toggle__line:nth-child(2) {

    opacity: 0;
}


.lux-header.is-open
.lux-menu-toggle__line:nth-child(3) {

    transform:
        translateY(-9px)
        rotate(-45deg);
}


/* =========================================================
   LOGO
========================================================= */

.lux-header__brand {

    justify-self: center;

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;
}


.lux-header__logo {

    display: block;

    width: 180px;

    max-height: 58px;

    object-fit: contain;
}


.lux-header__brand-text {

    font-family:
        var(--lux-font-primary);

    font-size: 28px;

    font-weight: 600;

    letter-spacing: -0.03em;

    color:
        var(--lux-pure-white);
}


/* =========================================================
   RIGHT
========================================================= */

.lux-header__right {

    justify-self: end;

    display: flex;

    align-items: center;
}


/* =========================================================
   HEADER CTA
========================================================= */

.lux-header-cta {

    width: 212px;
    height: 52px;

    padding:
        0
        20px
        0
        22px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    background:
        var(--lux-background);

    border:
        1px solid
        var(--lux-background);

    color:
        var(--lux-primary);

    text-decoration: none;

    font-family:
        var(--lux-font-primary);

    font-size: 13px;

    line-height: 1;

    font-weight: 600;

    letter-spacing: 0;

    border-radius: 0;

    transition:
        background-color 300ms ease,
        border-color 300ms ease,
        color 300ms ease;
}


.lux-header-cta__arrow {

    font-size: 17px;

    line-height: 1;

    transition:
        transform 300ms var(--lux-transition);
}


.lux-header-cta:hover {

    background:
        transparent;

    color:
        var(--lux-pure-white);

    border-color:
        rgba(245, 243, 238, 0.55);
}


.lux-header-cta:hover
.lux-header-cta__arrow {

    transform:
        translateX(4px);
}


/* =========================================================
   MEGA MENU
========================================================= */

.lux-mega-menu {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    background:
        var(--lux-menu-bg);

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

    backdrop-filter:
        blur(10px);

    padding-top:
        calc(
            var(--lux-header-height) + 70px
        );

    padding-bottom: 42px;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        translateY(-28px);

    z-index: 2;

    transition:
        opacity 400ms ease,
        transform 500ms var(--lux-transition),
        visibility 0s linear 500ms;
}


.lux-header.is-open
.lux-mega-menu {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateY(0);

    transition:
        opacity 400ms ease,
        transform 500ms var(--lux-transition),
        visibility 0s;
}


/* =========================================================
   MEGA MENU CONTAINER
========================================================= */

.lux-mega-menu__container {

    width: 100%;

    padding-left:
        var(--lux-side-padding);

    padding-right:
        var(--lux-side-padding);
}


/* =========================================================
   GRID
========================================================= */

.lux-mega-menu__grid {

    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    column-gap:
        clamp(30px, 4vw, 75px);
}


/* =========================================================
   GROUP ANIMATION
========================================================= */

.lux-menu-group {

    opacity: 0;

    transform:
        translateY(-15px);

    transition:
        opacity 450ms ease,
        transform 550ms var(--lux-transition);
}


.lux-header.is-open
.lux-menu-group {

    opacity: 1;

    transform:
        translateY(0);
}


.lux-header.is-open
.lux-menu-group:nth-child(1) {
    transition-delay: 80ms;
}

.lux-header.is-open
.lux-menu-group:nth-child(2) {
    transition-delay: 120ms;
}

.lux-header.is-open
.lux-menu-group:nth-child(3) {
    transition-delay: 160ms;
}

.lux-header.is-open
.lux-menu-group:nth-child(4) {
    transition-delay: 200ms;
}

.lux-header.is-open
.lux-menu-group:nth-child(5) {
    transition-delay: 240ms;
}


/* =========================================================
   MENU TITLE
========================================================= */

.lux-menu-group__title {

    width: fit-content;

    margin:
        0
        0
        24px;

    padding-bottom: 8px;

    border-bottom:
        1px solid
        rgba(245, 243, 238, 0.45);

    color:
        var(--lux-white);

    font-family:
        var(--lux-font-accent);

    font-size: 22px;

    font-weight: 400;

    line-height: 1.1;
}


/* =========================================================
   MENU LINKS
========================================================= */

.lux-menu-group__links {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 16px;
}


.lux-menu-group__links a {

    position: relative;

    color:
        rgba(245, 243, 238, 0.82);

    text-decoration: none;

    font-family:
        var(--lux-font-primary);

    font-size: 15px;

    font-weight: 400;

    line-height: 1.4;

    letter-spacing: -0.01em;

    transition:
        color 250ms ease,
        transform 300ms var(--lux-transition);
}


.lux-menu-group__links a:hover {

    color:
        var(--lux-pure-white);

    transform:
        translateX(4px);
}


/* =========================================================
   MENU BOTTOM
========================================================= */

.lux-menu-bottom {

    margin-top: 65px;

    padding-top: 28px;

    border-top:
        1px solid
        var(--lux-border-light);

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}


/* =========================================================
   LANGUAGES IN MEGA MENU
========================================================= */

.lux-menu-language {

    display: flex;

    align-items: center;

    gap: 22px;
}


.lux-menu-language__label {

    font-family:
        var(--lux-font-primary);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 0.10em;

    text-transform: uppercase;

    color:
        var(--lux-muted-light);
}


.lux-menu-language__options {

    display: flex;

    align-items: center;

    gap: 7px;
}


.lux-menu-language__options a {

    width: 42px;
    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(245, 243, 238, 0.24);

    color:
        rgba(245, 243, 238, 0.72);

    font-family:
        var(--lux-font-primary);

    font-size: 11px;

    font-weight: 600;

    text-decoration: none;

    transition:
        background-color 250ms ease,
        color 250ms ease,
        border-color 250ms ease;
}


.lux-menu-language__options a:hover {

    color:
        var(--lux-pure-white);

    border-color:
        rgba(245, 243, 238, 0.60);
}


.lux-menu-language__options a.is-active {

    background:
        var(--lux-background);

    border-color:
        var(--lux-background);

    color:
        var(--lux-primary);
}


/* =========================================================
   MEGA MENU CTA
========================================================= */

.lux-menu-cta {

    width: 212px;
    height: 52px;

    padding:
        0
        20px
        0
        22px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background:
        var(--lux-background);

    color:
        var(--lux-primary);

    border:
        1px solid
        var(--lux-background);

    text-decoration: none;

    font-family:
        var(--lux-font-primary);

    font-size: 13px;

    font-weight: 600;

    transition:
        background-color 300ms ease,
        color 300ms ease,
        border-color 300ms ease;
}


.lux-menu-cta:hover {

    background:
        transparent;

    border-color:
        rgba(245, 243, 238, 0.55);

    color:
        var(--lux-pure-white);
}


/* =========================================================
   BODY LOCK
========================================================= */

body.lux-menu-open {
    overflow: hidden;
}


/* =========================================================
   REMOVE ASTRA HEADER
========================================================= */

#masthead {
    display: none !important;
}


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

@media (max-width: 1024px) {

    :root {

        --lux-header-height: 80px;

        --lux-side-padding: 30px;
    }


    .lux-header__logo {

        width: 155px;
    }


    .lux-menu-toggle {

        width: 52px;

        height: 52px;
    }


    .lux-header-cta {

        width: 190px;

        height: 48px;

        font-size: 12px;
    }


    .lux-mega-menu {

        height: 100svh;

        overflow-y: auto;

        padding-top:
            calc(
                var(--lux-header-height) + 50px
            );
    }


    .lux-mega-menu__grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            45px
            60px;
    }


    .lux-menu-bottom {

        margin-top: 50px;
    }

}


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

@media (max-width: 767px) {

    :root {

        --lux-header-height: 72px;

        --lux-side-padding: 20px;
    }


    body.admin-bar .lux-header {

        top: 46px;
    }


    .lux-header__inner {

        grid-template-columns:
            1fr auto 1fr;
    }


    .lux-menu-toggle {

        width: 46px;

        height: 46px;
    }


    .lux-menu-toggle__line {

        width: 26px;
    }


    .lux-header__logo {

        width: 125px;
    }


    .lux-header-cta {

        display: none;
    }


    .lux-header__right {

        min-width: 46px;
    }


    .lux-mega-menu {

        height: 100svh;

        overflow-y: auto;

        padding-top:
            calc(
                var(--lux-header-height) + 34px
            );

        padding-bottom: 30px;
    }


    .lux-mega-menu__grid {

        display: block;
    }


    .lux-menu-group {

        margin-bottom: 28px;

        padding-bottom: 28px;

        border-bottom:
            1px solid
            rgba(245, 243, 238, 0.14);
    }


    .lux-menu-group__title {

        margin-bottom: 17px;

        font-size: 20px;
    }


    .lux-menu-group__links {

        gap: 12px;
    }


    .lux-menu-group__links a {

        font-size: 15px;
    }


    .lux-menu-bottom {

        margin-top: 10px;

        padding-top: 28px;

        flex-direction: column;

        align-items: stretch;
    }


    .lux-menu-language {

        align-items: flex-start;

        flex-direction: column;

        gap: 14px;
    }


    .lux-menu-language__options {

        width: 100%;
    }


    .lux-menu-language__options a {

        flex: 1;
    }


    .lux-menu-cta {

        width: 100%;
    }

}