/*==================================================
MAISON CINNAMONN
HEADER
==================================================*/


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

.site-header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 110px;

    z-index: 99999;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        background .45s ease,
        opacity .8s ease,
        visibility .8s ease,
        backdrop-filter .45s ease;

    overflow: visible;
}


.site-header.visible {

    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


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

.header-container {

    width: min(1700px, 92%);

    height: 100%;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    position: relative;

    z-index: 100000;
}


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

.logo {

    display: flex;

    align-items: center;

    flex-shrink: 0;

    position: relative;

    z-index: 100002;
}


.logo img {

    width: 185px;

    height: auto;

    display: block;

    transition: .35s ease;
}


/*==================================================
DESKTOP NAVIGATION
==================================================*/

.main-navigation ul {

    display: flex;

    align-items: center;

    gap: 48px;
}


.main-navigation a {

    position: relative;

    font-family: var(--font-sans);

    font-size: .72rem;

    font-weight: 500;

    letter-spacing: .30em;

    text-transform: uppercase;

    color: #FFFFFF;

    text-decoration: none;

    transition: .35s ease;
}


.main-navigation a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -10px;

    width: 0;

    height: 1px;

    background: #FFFFFF;

    transition: .35s ease;
}


.main-navigation a:hover::after {

    width: 100%;
}


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

.site-header.scrolled {

    background: rgba(248,246,242,.97);

    backdrop-filter: blur(18px);

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

    border-bottom: 1px solid rgba(0,0,0,.06);
}


.site-header.scrolled .main-navigation a {

    color: var(--color-text);
}


.site-header.scrolled .main-navigation a::after {

    background: var(--color-text);
}


/*==================================================
MOBILE MENU BUTTON
==================================================*/

.mobile-menu-toggle {

    display: none;

    width: 42px;

    height: 42px;

    padding: 8px;

    border: 0;

    background: transparent;

    cursor: pointer;

    flex-direction: column;

    align-items: flex-end;

    justify-content: center;

    gap: 5px;

    position: relative;

    z-index: 100003;

    -webkit-tap-highlight-color: transparent;
}


.mobile-menu-toggle span {

    display: block;

    width: 25px;

    height: 1px;

    background: #FFFFFF;

    transition:
        transform .35s ease,
        opacity .35s ease,
        background .35s ease;
}


/*==================================================
SCROLLED MOBILE BUTTON
==================================================*/

.site-header.scrolled
.mobile-menu-toggle span {

    background: var(--color-text);
}


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

.mobile-navigation {

    display: none;
}


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

@media (max-width: 1000px) {

    /*------------------------------------------
    HEADER
    ------------------------------------------*/

    .site-header {

        height: 78px;

        overflow: visible;
    }


    .header-container {

        width: 90%;

        position: relative;

        z-index: 100000;
    }


    /*------------------------------------------
    LOGO
    ------------------------------------------*/

    .logo img {

        width: 150px;
    }


    /*------------------------------------------
    HIDE DESKTOP NAVIGATION
    ------------------------------------------*/

    .site-header
    > .header-container
    > .main-navigation {

        display: none !important;
    }


    /*------------------------------------------
    SHOW HAMBURGER
    ------------------------------------------*/

    .mobile-menu-toggle {

        display: flex !important;

        pointer-events: auto;

        touch-action: manipulation;
    }


    /*------------------------------------------
    MOBILE MENU
    ------------------------------------------*/

    .site-header .mobile-navigation {

        position: fixed !important;

        top: 78px !important;

        left: 0 !important;

        width: 100vw !important;

        max-height: calc(100vh - 78px);

        overflow-y: auto;

        box-sizing: border-box;

        padding: 25px 7% 35px !important;

        background: rgba(248,246,242,.99) !important;

        backdrop-filter: blur(18px);

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

        border-top: 1px solid rgba(0,0,0,.08);

        display: flex !important;

        flex-direction: column;

        opacity: 0 !important;

        visibility: hidden !important;

        pointer-events: none !important;

        transform: translateY(-15px) !important;

        z-index: 100001 !important;

        transition:
            opacity .3s ease,
            visibility .3s ease,
            transform .3s ease;
    }


    /*------------------------------------------
    MOBILE MENU OPEN
    ------------------------------------------*/

    .site-header.mobile-menu-open
    .mobile-navigation {

        opacity: 1 !important;

        visibility: visible !important;

        pointer-events: auto !important;

        transform: translateY(0) !important;
    }


    /*------------------------------------------
    MOBILE LIST
    ------------------------------------------*/

    .site-header .mobile-navigation ul {

        display: flex !important;

        flex-direction: column !important;

        align-items: stretch !important;

        width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        gap: 0 !important;

        list-style: none !important;
    }


    .site-header .mobile-navigation li {

        display: block !important;

        width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        border-bottom: 1px solid rgba(0,0,0,.08);
    }


    .site-header .mobile-navigation li:last-child {

        border-bottom: none;
    }


    /*------------------------------------------
    MOBILE LINKS
    ------------------------------------------*/

    .site-header .mobile-navigation a {

        display: block !important;

        width: 100% !important;

        box-sizing: border-box;

        padding: 18px 0 !important;

        color: #1B1B1B !important;

        font-family: var(--font-sans);

        font-size: .72rem;

        font-weight: 500;

        letter-spacing: .25em;

        text-transform: uppercase;

        text-decoration: none;
    }


    .site-header .mobile-navigation a::after {

        display: none !important;
    }


    /*------------------------------------------
    HAMBURGER → X
    ------------------------------------------*/

    .site-header.mobile-menu-open
    .mobile-menu-toggle
    span:nth-child(1) {

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


    .site-header.mobile-menu-open
    .mobile-menu-toggle
    span:nth-child(2) {

        opacity: 0;
    }


    .site-header.mobile-menu-open
    .mobile-menu-toggle
    span:nth-child(3) {

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

}


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

@media (max-width: 480px) {

    .header-container {

        width: 90%;
    }


    .logo img {

        width: 135px;
    }


    .mobile-menu-toggle {

        width: 40px;

        height: 40px;
    }


    .site-header .mobile-navigation {

        padding-left: 7% !important;

        padding-right: 7% !important;
    }

}