/* ==========================================================================
   4.0 Site Header & Menu
   ========================================================================== */

nav ul {
    margin: 0;
    list-style: none;
}

/* Site Branding
   ========================================================================== */

.site-branding {
    padding: 0;
    font-size: 0;
    
    p {
        margin-bottom: 0;
    }
    
    .site-title {
        @include fontsize(28);
        font-weight: 700;
        line-height: 1.2;
        
        &:last-child {
            margin-bottom: 20px;
        }
    }
    
    .site-description {
        display: block;
        margin-top: 5px;
        @include fontsize(14);
        line-height: 1;
    }
    
    &.hide-title-tagline {
        .site-title,
        .site-description {
            position: absolute !important;
            overflow: hidden;
            clip: rect(1px, 1px, 1px, 1px);
            clip-path: inset(50%);
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            border: 0;
            word-wrap: normal !important;
        }
    }
    
    a {
        display: inline-block;
        color: inherit;
    }
    
    img {
        display: block;
    }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
    .site-branding img {
        width: 100% !important;
    }
}

// Menu Toggle Button
.menu-toggle {
    @include menuToggle;

    &.close-button {
        .menu-toggle-icon {
            display: none;
        }

        &:before, 
        &:after {
            top: 24px;
            left: 5px;
        }
    }
}

/* Site Header
   ========================================================================== */

.site-header {
    position: relative;
    z-index: 999;
    width: 100%;
    height: auto;
    
    > * {
        width: 100%;
    }
    
    .container {
        @include flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .site-header-main {
        position: relative;
        z-index: 3;
        background: #fff;
        color: #000;
        border-bottom: 1px solid #eee;
        
        &.with-bg {
            @include bgImgCover;
        }
    }
    
    .header-section {
        position: relative;
        z-index: 2;
        @include flex;
        @include flexCenter;
        
        &.branding {
            @include flex;
            @include flexWrap;
            @include flexColumn;
            @include flexVMiddle;
            overflow: hidden;
            max-width: calc(100% - 80px);
        }
        
        &.header-left {
            margin-left: 0;
            margin-right: auto;
        }
        
        &.header-right {
            margin-right: 0;
            margin-left: auto;
        }
    }
    
    &.site-header-layout-default {
        .header-section.menu,
        .touch & .header-section.menu {
            display: none; /* Hide menu on small screens */
        }
        
        &.overlap-header:not(.is-sticky):not(.sticky) {
            > * {
                background: transparent;
            }
        }
        
        .site-header-main {
            padding: 20px 0;
        }
        
        .touch & .menu-toggle {
            display: block;
        }
        
        .header-section.menu {
            margin: 0 0 0 auto;
        }
        
        .header-section.header-right {
            margin-left: 0;
            
            > *:first-child {
                margin-left: 20px;
            }
        }
    }
    
    &.overlap-header {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
    }
    
    &.sticky,
    &.is-sticky {
        .site-header-main {
            position: fixed !important;
            top: 0;
            left: 0;
            z-index: 999;
            
            .logged-in.admin-bar & {
                @media screen and (min-width: 601px) and (max-width: 782px) {
                    & {
                        top: 46px;
                    }
                }
                
                @media screen and (min-width: 783px) {
                    & {
                        top: 32px;
                    }
                }
            }
        }
    }
    
    &.sticky {
        .site-header-main {
            -webkit-animation: stickyHeaderShow 0.4s ease-out;
            animation: stickyHeaderShow 0.4s ease-out;
        }
    }
    
    &.is-sticky {
        .site-header-main {
            @include translateY(-100%);
        }
        
        &.show-header {
            .site-header-main {
                @include translateY(0);
                transition: transform 0.4s ease-out;
            }
        }
        
        &.hide-header {
            .site-header-main {
                @include translateY(-100%);
                transition: transform 0.4s ease-out;
            }
            
            ul.sub-menu {
                opacity: 0;
                pointer-events: none;
                visibility: hidden;
            }
        }
    }
    
    &.custom-sticky-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        
        &.is-sticky {
            & {
                @include translateY(-100%);
            }
            
            &.show-header {
                @include translateY(0);
                transition: transform 0.4s ease-out;
            }
            
            &.hide-header {
                @include translateY(-100%);
                transition: transform 0.4s ease-out;
                
                ul.sub-menu {
                    opacity: 0;
                    pointer-events: none;
                    visibility: hidden;
                }
            }
            
            .logged-in.admin-bar & {
                @media screen and (min-width: 601px) and (max-width: 782px) {
                    & {
                        top: 46px;
                    }
                }
                
                @media screen and (min-width: 783px) {
                    & {
                        top: 32px;
                    }
                }
            }
        }
        
        &.sticky {
            .logged-in.admin-bar & {
                @media screen and (min-width: 601px) and (max-width: 782px) {
                    & {
                        top: 46px;
                    }
                }
                
                @media screen and (min-width: 783px) {
                    & {
                        top: 32px;
                    }
                }
            }
        }
    }
}

.dropdown-dark,
.sub-menu.dark-color {
    --sub-menu-bg: #090909;
    --sub-menu-color: #fff;
}

.dropdown-light,
.sub-menu.light-color {
    --sub-menu-bg: #fff;
    --sub-menu-color: #000;
}
    
.primary-menu {
    @include flex;
    @include flexWrap;
    
    li {
        position: relative;
    }
    
    li.menu-item-has-children > a:after {
        @include fontElegant;
        display: inline-block;
        @include fontsize(14);
    }
    
    > li {
        white-space: nowrap;
        
        > a {
            position: relative;
            display: block;
            padding: 0 15px;
            font-size: var(--nav-font-size);
            font-weight: var(--nav-font-weight);
            letter-spacing: var(--nav-font-letter-spacing);
            text-transform: var(--nav-font-transform);
            line-height: 60px;
            
            &:before {
                display: block;
                position: absolute;
                bottom: 15px;
                left: 15px;
                width: calc(100% - 30px);
                height: 1px;
                background: currentColor;
                content: "";
                transition: transform 0.2s ease;
                @include scaleX(0);
                transform-origin: 0 0;
            }
            
            .no-touch &:hover:before {
                @include scaleX(1);
            }
        }
        
        &.menu-item-has-children > a:before {
            width: calc(100% - 50px);
        }
        
        .site-header-layout-default &:last-child > a {
            margin-right: -15px;
        }
                
        > .sub-menu {
            bottom: 0;
            left: -15px;
            @include translateY(105%);
            
            .sub-menu {
                top: -20px;
                left: 100%;
                @include translateY(10px);
            }
        }
        
        &.current-menu-item > a:before,
        &.current-menu-ancestor > a:before {
            @include scaleX(1);
        }
        
        &.menu-item-has-children > a:after {
            margin-left: 5px;
            @include translateY(1px);
            content: "\33";
        }
    }
    
    .sub-menu {
        position: absolute;
        z-index: -1;
        display: block;
        min-width: 200px;
        padding: 20px 0;
        margin: 0;
        text-align: left;
        transition: 0.3s;
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        background: var(--sub-menu-bg);
        color: var(--sub-menu-color);
        
        li.menu-item-has-children > a:after {
            @include centered-vertical;
            right: 20px;
            content: "\35";
        }
        
        .sub-menu {
            padding-top: 20px;
        }
        
        &:not(.cozystay-dropdown-menu) li {
            white-space: nowrap;
        }
        
        &:not(.cozystay-dropdown-menu) a {
            position: relative;
            display: block;
            padding: 0 30px;
            @include fontsize(15);
            letter-spacing: 0;
            text-transform: capitalize;
            line-height: 36px;
            
            span {
                position: relative;
            }
            
            .no-touch &:hover {
                opacity: 1;
                color: var(--primary-color);
            }
        }

        li.current-menu-item > a {
            color: var(--primary-color);
        }
    }
    
    .no-touch & li:hover > .sub-menu,
    li.focus > .sub-menu {
        z-index: 99;
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
    }
    
    > li:hover > .sub-menu,
    > li.focus > .sub-menu {
        @include translateY(100%);
    }
    
    .sub-menu li:hover .sub-menu,
    .sub-menu li.focus .sub-menu {
        @include translateY(0); 
    }
}

.cozystay-dropdown-menu {
    white-space: normal;
    padding: 0;
    box-shadow: 0 0 30px 0 rgba(#000, 0.1);
    
    .primary-menu &.sub-menu {
        padding: 0;
    }
    
    > .container {
        display: block;
        padding: 0;
        max-width: none;
    }
    
    a.button span:before {
        display: none;
    }
    
    &.fullwidth {
        width: 100vw;
    }

    .no-touch & .elementor-widget-icon-list a:hover {
        color: var(--primary-color);
    }
}

// Main Navigation with dropdown menu
.site-header .main-navigation,
.main-navigation.not-mobile-menu {
    .dropdown-toggle {
        &:before {
            display: none;
        }

        .no-touch & {
            display: none;
        }

        .touch & {
            position: absolute;
            top: 50%;
            right: 0;
            @include translateY(-50%);
            width: 35px;
            height: 36px;
            background: none;
            border: none;
            color: inherit;
            cursor: pointer;
            transition: 0.4s;

            &.toggled-on + .sub-menu {
                z-index: 99;
                opacity: 1;
                pointer-events: auto;
                visibility: visible;
            }
        }
    }

    .touch & .primary-menu > li:hover > .sub-menu {
        @include translateY(105%);
    }

    .primary-menu > li > .dropdown-toggle.toggled-on + .sub-menu {
        @include translateY(100%);
    }
}

.site-header-search,
.cs-search-toggle {
    display: block;
    
    .toggle-button {
        z-index: 999;
        display: block;
        width: 40px;
        height: 40px;
        background: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
        color: inherit;
        font-size: 0;
        line-height: 40px;
        text-align: center;
        transition: 0.4s;
        cursor: pointer;
        
        &:after {
            position: relative;
            z-index: 3;
            @include fontAwesome;
            font-weight: 900;
            @include fontsize(15);
            line-height: 40px;
            content: "\f002";
        }
    }
}

/* Social Nav Icons
   ========================================================================== */

ul.social-nav {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    line-height: 1;
    list-style: none;
    
    li {
        display: block;
        
        &:not(:last-child) a {
            margin-right: 25px;
        }
        
        a {
            display: block;
            padding: 0;
            text-align: center;
            font-size: 0 !important;
            
            .no-touch .main &:hover {
                color: var(--primary-color);
            }
            
            &:before {
                @include fontAwesome;
                @include fontsize(16);
                content: "\f1e0"; /* Default share icon */
                
                .site-header & {
                    @include fontsize(14);
                }
            }
            
            &[title="website"]:before,
            &[title="Website"]:before {
                content: "\f0c1";
            }
            
            &[href*="mailto"]:before {
                content: "\f0e0";
            }
            
            &[href*="bloglovin"]:before {
                content: "\f004";
            }
            
            &[href*="twitter"],
            &[href*="facebook"],
            &[href*="google"],
            &[href*="pinterest"],
            &[href*="instagram"],
            &[href*="behance"],
            &[href*="vimeo"],
            &[href*="youtube"],
            &[href*="snapchat"],
            &[href*="medium"],
            &[href*="linkedin"],
            &[href*="flickr"],
            &[href*="etsy"],
            &[href*="dribbble"],
            &[href*="tumblr"],
            &[href*="vine"],
            &[href*="vk"],
            &[href*="del.icio"],
            &[href*="reddit"],
            &[href*="yelp"],
            &[href*="soundcloud"],
            &[href*="500px"],
            &[href*="digg"],
            &[href*="foursquare"],
            &[href*="houzz"],
            &[href*="tripadvisor"],
            &[href*="play.google"],
            &[href*="apple"],
            &[href*="slack"],
            &[href*="amazon"],
            &[href*="codepen"],
            &[href*="deviantart"],
            &[href*="github"],
            &[href*="wordpress"],
            &[href*="tiktok"],
            &[href*="unsplash"],
            &[href*="spotify"],
            &[href*="wa.me"],
            &[href*="airbnb"],
            &[href*="x.com"] {
                &:before {
                    @include fontAwesomeBrand;
                }
            }
            
            &[href*="twitter"]:before {
                content: "\f099";
            }
            
            &[href*="facebook"]:before {
                content: "\f39e";
            }
            
            &[href*="google"]:before {
                content: "\f0d5";
            }
            
            &[href*="pinterest"]:before {
                content: "\f0d2";
            }
            
            &[href*="instagram"]:before {
                content: "\f16d";
            }
            
            &[href*="behance"]:before {
                content: "\f1b4";
            }
            
            &[href*="vimeo"]:before {
                content: "\f27d";
            }
            
            &[href*="youtube"]:before {
                content: "\f167";
            }
            
            &[href*="snapchat"]:before {
                content: "\f2ac";
            }
            
            &[href*="medium"]:before {
                content: "\f3c7";
            }
            
            &[href*="linkedin"]:before {
                content: "\f0e1";
            }
            
            &[href*="flickr"]:before {
                content: "\f16e";
            }
            
            &[href*="etsy"]:before {
                content: "\f2d7";
            }
            
            &[href*="dribbble"]:before {
                content: "\f17d";
            }
            
            &[href*="tumblr"]:before {
                content: "\f173";
            }
            
            &[href*="vine"]:before {
                content: "\f1ca";
            }
            
            &[href*="/feed/"]:before,
            &[href*="?feed="]:before {
                content: "\f09e";
            }
            
            &[href*="vk"]:before {
                content: "\f189";
            }
            
            &[href*="del.icio"]:before {
                content: "\f1a5";
            }
            
            &[href*="reddit"]:before {
                content: "\f281";
            }
            
            &[href*="yelp"]:before {
                content: "\f1e9";
            }
            
            &[href*="soundcloud"]:before {
                content: "\f1be";
            }
            
            &[href*="500px"]:before {
                content: "\f26e";
            }
            
            &[href*="digg"]:before {
                content: "\f1a6";
            }
            
            &[href*="foursquare"]:before {
                content: "\f180";
            }
            
            &[href*="houzz"]:before {
                content: "\f27c";
            }
            
            &[href*="tripadvisor"]:before {
                content: "\f262";
            }
            
            &[href*="play.google"]:before {
                content: "\f3ab";
            }
            
            &[href*="apple"]:before {
                content: "\f179";
            }
            
            &[href*="slack"]:before {
                content: "\f198";
            }
            
            &[href*="amazon"]:before {
                content: "\f270";
            }
            
            &[href*="codepen"]:before {
                content: "\f1cb";
            }
            
            &[href*="deviantart"]:before {
                content: "\f1bd";
            }
            
            &[href*="github"]:before {
                content: "\f09b";
            }
            
            &[href*="wordpress"]:before {
                content: "\f411";
            }
            
            &[href*="tiktok"]:before {
                content: "\e07b";
            }
            
            &[href*="unsplash"]:before {
                content: "\e07c";
            }
            
            &[href*="spotify"]:before {
                content: "\f1bc";
            }

            &[href*="wa.me"]:before {
                content: "\f232";
            }

            &[href*="airbnb"]:before {
                content: "\f834";
            }

            &[href*="x.com"]:before {
                font-family: "Font Awesome 6 Brands";
                content: "\e61b";
            }
        }
    }
}

/* Side Menu
   ========================================================================== */

.sidemenu {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 100000;
    display: block;
    width: 100%;
    max-width: 375px;
    height: 100%;
    transition: 0.4s;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    
    &:before {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1;
        display: block;
        width: 100%;
        height: 100vh;
        background: rgba(#000,.75);
        content: "";
    }
    
    .no-touch & a:hover {
        opacity: 0.6;
    }
    
    .no-touch & a.button:hover {
        opacity: 1;
    }
    
    .container {
        position: relative;
        z-index: 9;
        @include translateX(100%);
        width: 100%;
        max-width: 100%;
        height: 100%;
        padding: 0 30px 60px;
        margin: 0;
        background-color: var(--secondary-color);
        color: #fff;
        @include fontsize(14);
        overflow: auto;
        transition: transform 0.4s;
        -ms-overflow-style: none;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        @include bgImgCover;
        
        &::-webkit-scrollbar {
            display: none;
        }
        
        > * {
            margin-bottom: 50px;
            
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
    
    &.slide-from-left {
        right: auto;
        left: 0;
        
        .container {
            @include translateX(-100%);
        }
    }
    
    &.fade-in {
        .container {
            @include transform(none);
        }
    }
    
    &.show {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
        
        .container {
            @include translateX(0);
        }
    }
    
    .sidemenu-header {
        @include flex;
        padding: 30px 0;
    }
    
    &.sidemenu-custom {
        .sidemenu-header {
            position: absolute;
            top: 0;
            right: 0;
            margin: 0;
            padding: 30px;
            width: auto;
            border: none;
        }
        
        .container {
            padding: 0;
        }
    }
    
    .close-button {
        position: relative;
        order: 2;
        margin-left: auto;
    }
    
    &.fullwidth {
        max-width: 100vw;
    }
}
    
.cs-menu-mobile .mobile-menu {
    display: block;
    --nav-font: var(--heading-font);
    
    li {
        position: relative;
        display: block;
    }
    
    a {
        position: relative;
        text-transform: capitalize;
        
        &:before,
        &:after {
            display: none !important;
        }
    }
    
    > li {
        padding: 0;
        
        > a {
            display: block;
            padding: 5px 0;
            @include fontsize(24);
            font-weight: 400;
            letter-spacing: 0;
            line-height: 1.35;
        }
    }
    
    li.current-menu-item > a,
    li.current-menu-ancestor > a {
        color: var(--primary-color);
    }
    
    ul.sub-menu {
        display: none;
        margin: 0 0 0 30px;
        
        li a {
            padding: 4px 0;
            @include fontsize(16);
            font-weight: 400;
            line-height: 40px;
        }
        
        .dropdown-toggle {
            top: 0;
        }
    }
}

.dropdown-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    transition: 0.4s;
    
    &:before {
        @include fontElegant;
        display: block;
        @include fontsize(21);
        content: "\35";
    }
    
    &.toggled-on {
        &:before {
            content: "\33";
        }
        
        + ul.sub-menu {
            display: block;
        }
    }
}

@include screen(desktop) {
    .site-header {
        &.site-header-layout-default {
            .menu-toggle {
                display: none;
            }
            
            .header-section.menu {
                display: block;
                max-width: calc(100% - 300px);
            }
        }
    }
    
    .cs-menu-mobile .mobile-menu {
        > li > a {
            @include fontsize(28);
        }
        
        .dropdown-toggle {
            top: 4px;
        }
    }
}