/* =====================================================
   SMART FARM HEADER
   Mobile First
   ===================================================== */

.site-header{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    z-index:999;
    color:#fff;
    border-bottom:1px solid rgba(255,255,255,.15);
    transition:
        background .3s ease,
        border-color .3s ease,
        backdrop-filter .3s ease;
}

.site-header__inner{
    height:78px;
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:20px;
}

.site-brand{
    display:inline-flex;
    flex-direction:column;
    justify-content:center;
    width:max-content;
    text-decoration:none;
    color:#fff;
}

.site-brand__main{
    font-size:19px;
    line-height:1;
    font-weight:600;
    letter-spacing:3px;
    white-space:nowrap;
}

.site-brand__main em{
    color:#8fb36a;
    font-style:normal;
}

.site-brand__sub{
    margin-top:7px;
    color:#8b8b8b;
    font-size:7px;
    line-height:1;
    font-weight:400;
    letter-spacing:3px;
}

.desktop-nav{
    display:none;
}

.header-actions{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:18px;
}

.language-button{
    display:none;
    align-items:center;
    gap:6px;
    padding:8px 0;
    border:0;
    background:none;
    color:#fff;
    font-size:11px;
    font-weight:400;
    letter-spacing:1px;
    cursor:pointer;
}

.language-arrow{
    color:#777;
    font-size:12px;
}

.menu-toggle{
    width:42px;
    height:42px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-end;
    gap:5px;
    border:0;
    padding:0;
    background:transparent;
    cursor:pointer;
}

.menu-toggle span{
    display:block;
    height:1px;
    background:#fff;
    transition:.25s ease;
}

.menu-toggle span:nth-child(1),
.menu-toggle span:nth-child(3){
    width:24px;
}

.menu-toggle span:nth-child(2){
    width:18px;
}

/* Animate hamburger */
.menu-toggle[aria-expanded="true"] span:nth-child(1){
    transform:translateY(6px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] span:nth-child(2){
    width:0;
    opacity:0;
}
.menu-toggle[aria-expanded="true"] span:nth-child(3){
    transform:translateY(-6px) rotate(-45deg);
}

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

.mobile-menu{
    position:fixed;
    top:78px;
    left:0;
    width:100%;
    height:calc(100dvh - 78px);
    background:
        linear-gradient(
            145deg,
            rgba(0,0,0,.985),
            rgba(12,18,10,.985)
        );
    transform:translateX(100%);
    visibility:hidden;
    transition:
        transform .38s cubic-bezier(.76,0,.24,1),
        visibility .38s;
    overflow:auto;
}

.mobile-menu.open{
    transform:translateX(0);
    visibility:visible;
}

.mobile-menu__inner{
    padding:40px 24px 30px;
}

.mobile-link{
    min-height:68px;
    display:flex;
    align-items:center;
    gap:22px;
    border-bottom:1px solid rgba(255,255,255,.12);
    color:#eee;
    font-size:20px;
    font-weight:300;
    text-decoration:none;
}

.mobile-link span{
    width:24px;
    color:#585858;
    font-size:9px;
    letter-spacing:1px;
}

.mobile-link.is-active{
    color:#baa274;
}

.mobile-link.is-active span{
    color:#baa274;
}

.mobile-menu__footer{
    margin:15px 24px 30px;
    padding-top:22px;
    display:flex;
    justify-content:space-between;
    border-top:1px solid rgba(255,255,255,.15);
    color:#606060;
    font-size:8px;
    letter-spacing:2px;
}

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

@media (min-width:768px){
    .site-header__inner{
        height:84px;
    }

    .site-brand__main{
        font-size:21px;
    }

    .language-button{
        display:flex;
    }

    .mobile-menu{
        top:84px;
        height:calc(100dvh - 84px);
    }
}

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

@media (min-width:1024px){
    .site-header__inner{
        height:96px;
        grid-template-columns:auto 1fr auto;
        gap:55px;
    }

    .site-brand__main{
        font-size:23px;
        letter-spacing:4px;
    }

    .site-brand__sub{
        font-size:7px;
        letter-spacing:3.5px;
    }

    .desktop-nav{
        height:100%;
        display:flex;
        align-items:center;
        justify-content:center;
        gap:36px;
    }

    .nav-link{
        position:relative;
        height:100%;
        display:flex;
        align-items:center;
        color:#d0d0d0;
        font-size:11px;
        font-weight:400;
        letter-spacing:.3px;
        text-decoration:none;
        white-space:nowrap;
        transition:color .25s ease;
    }

    .nav-link::after{
        content:"";
        position:absolute;
        left:50%;
        bottom:24px;
        width:0;
        height:1px;
        background:#baa274;
        transform:translateX(-50%);
        transition:width .25s ease;
    }

    .nav-link:hover{
        color:#fff;
    }

    .nav-link:hover::after{
        width:18px;
    }

    .nav-link.is-active{
        color:#baa274;
    }

    .nav-link.is-active::after{
        width:24px;
    }

    .menu-toggle{
        display:none;
    }

    .mobile-menu{
        display:none;
    }
}

/* =====================================================
   LARGE DESKTOP
   ===================================================== */

@media (min-width:1280px){
    .site-header__inner{
        gap:72px;
    }

    .desktop-nav{
        gap:44px;
    }

    .nav-link{
        font-size:12px;
    }
}

/* =====================================================
   STICKY / SCROLL STATE
   ===================================================== */

.site-header.is-scrolled{
    position:fixed;
    background:rgba(0,0,0,.94);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom-color:rgba(255,255,255,.08);
}