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

.site-header{

    position:sticky;

    top:0;

    z-index:1000;

    background:rgba(245,241,236,.88);

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

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

}

.header-inner{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:110px;

    gap:var(--space-xl);

}

/* ==========================================
   Logo
========================================== */

.site-branding{

    flex-shrink:0;

}

.site-logo img,
.custom-logo{

    display:block;

    width:390px;

    height:auto;

}

/* ==========================================
   Navigation
========================================== */

.main-nav{

    display:flex;

    align-items:center;

    gap:var(--space-lg);

    margin-left:auto;

}

.main-nav a{

    position:relative;

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

    font-size:.95rem;

    font-weight:500;

    color:var(--text-1);

    text-decoration:none;

    transition:color .25s ease;

}

.main-nav a:hover,
.main-nav a.active{

    color:var(--color-accent);

}

.main-nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:var(--color-accent);

    transition:width .25s ease;

}

.main-nav a:hover::after,
.main-nav a.active::after{

    width:100%;

}

/* ==========================================
   Tablet
========================================== */

@media (max-width:1024px){

    .site-logo img,
    .custom-logo{

        width:260px;

    }

    .main-nav{

        gap:var(--space-md);

    }

}

/* ==========================================
   Mobile
========================================== */

@media (max-width:768px){

    .header-inner{

        min-height:84px;

    }

    .site-logo img,
    .custom-logo{

        width:210px;

    }

    .main-nav{

        display:none;

    }

}