/********************************************************
    * Default Header *
********************************************************/

.asg-site-header-wrapper-default{
    position: sticky;
    padding: 0 30px;
    top: 0;
    background-color: color-mix(
        in srgb,
        var(--e-global-color-bg) 85%,
        transparent
    );
    border-bottom: 1px solid var(--e-global-color-border);
    backdrop-filter: blur(10px);
}

body.admin-bar .asg-site-header-wrapper-default{
    top: var(--wp-admin--admin-bar--height);
}

.asg-site-header-wrapper-default .asg-site-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.asg-site-header-wrapper-default .asg-site-branding img{
    width: 44px;
}

.asg-site-header-wrapper-default .asg-main-menu{
    display: flex;
}

/********************************************************
    * Default Mobile Offcanvas *
********************************************************/

.asg-offcanvas-wrapper-default-mobile{
    position: fixed;
    z-index: 1000;
    right: 0;
    background-color: var(--e-global-color-bg);
    width: 100%;
    transition: all var(--asg-transition-duration) ease;
    overflow-y: auto;
    overflow-x: hidden;
    height: stretch;
    top: var(--asg-header-original-height, 0px);
    overflow-y: scroll;
}

body.admin-bar .asg-offcanvas-wrapper-default-mobile{
    top: calc( var(--asg-header-original-height, 0px) + var(--wp-admin--admin-bar--height));
}

.asg-offcanvas-wrapper-default-mobile::-webkit-scrollbar{

    width: 10px;
}
.asg-offcanvas-wrapper-default-mobile::-webkit-scrollbar-thumb {
    background: var(--asg-scroll-thumb-color);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.asg-offcanvas-wrapper-default-mobile .asg-nav-menu{
    padding: 1rem 0.5rem;
    width: 100%;
}

.asg-offcanvas-wrapper-default-mobile:not(.is-active){
    visibility: hidden;
    transform: translateX(100vw);
}

.asg-site-header-wrapper-default .asg-main-menu .asg-menu-toggle i.asg-dropdown-icon,
.asg-offcanvas-wrapper-default-mobile .asg-menu-toggle i.asg-dropdown-icon{
    mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-3 -3 70 70'><path fill='none' stroke='%23202020' stroke-width='4' d='M20 26l11.994 14L44 26' stroke-linejoin='round' stroke-linecap='round'></path></svg>");
    display: block;
    position: relative;
    transition: all var(--asg-transition-duration) ease;
    background-color: currentColor;
    mask-repeat: no-repeat;
    mask-position: center;
}

.asg-site-header-wrapper-default .asg-main-menu .asg-menu-toggle i.asg-dropdown-icon{
    width: 1.5rem;
    height: 1.5rem;
    mask-size: contain;
}

.asg-offcanvas-wrapper-default-mobile .asg-menu-toggle i.asg-dropdown-icon{
    padding: 1rem;
    mask-size: 1.5rem;
}

.asg-site-header-wrapper-default .asg-main-menu-toggle{
    position: relative;
    width: 3rem;
    height: 3rem;
    color: var(--e-global-color-text_muted);
    border-color: transparent;
    margin: 1rem;
}

.asg-site-header-wrapper-default .asg-main-menu-toggle:hover,
.asg-site-header-wrapper-default .asg-main-menu-toggle:focus{
    background-color: transparent;
     color: var(--e-global-color-text_muted);
}

.asg-site-header-wrapper-default .asg-main-menu-toggle-line{
    position: absolute;
    width: 2rem;
    height: .125rem;
    left: calc(50% - 1rem);
    background-color: currentColor;
    border-radius: 1rem;
}

.asg-site-header-wrapper-default .asg-main-menu-toggle-line.top{
    transform: translateY(-0.5rem);
    --asg-main-menu-toggle-line-indent: -0.5rem;
    --asg-main-menu-toggle-line-rotate: 45deg;
   
}

.asg-site-header-wrapper-default .asg-main-menu-toggle-line.bottom{
    transform: translateY(0.5rem);
    --asg-main-menu-toggle-line-indent: .5rem;
    --asg-main-menu-toggle-line-rotate: -45deg;
}

.asg-site-header-wrapper-default .is-active .asg-main-menu-toggle-line.top,
.asg-site-header-wrapper-default .is-active .asg-main-menu-toggle-line.bottom {
    animation: asg-main-menu-default-toggle-fold var(--asg-transition-duration) ease forwards;
}

.asg-site-header-wrapper-default .non-active .asg-main-menu-toggle-line.top,
.asg-site-header-wrapper-default .non-active .asg-main-menu-toggle-line.bottom {
    animation: asg-main-menu-default-toggle-unfold var(--asg-transition-duration) ease forwards;
}

@keyframes asg-main-menu-default-toggle-fold {
    0% {
        transform: translateY(var(--asg-main-menu-toggle-line-indent)) rotate(0deg);
    }
    50% {
        transform: translateY(0) rotate(0deg);
    }
    100% {
        transform: translateY(0) rotate(var(--asg-main-menu-toggle-line-rotate));
    }
}

@keyframes asg-main-menu-default-toggle-unfold {
    0% {
        transform: translateY(0) rotate(var(--asg-main-menu-toggle-line-rotate));
    }
    50% {
        transform: translateY(0) rotate(0deg);
    }
    100% {
        transform: translateY(var(--asg-main-menu-toggle-line-indent)) rotate(0deg);
    }
}

@media (max-width: 1024px) {
    .asg-site-header-wrapper-default .asg-main-menu.asg-main-menu-layout-horizontal{
        display: none;
    }
}

@media (min-width: 1025px) {
    .asg-offcanvas-wrapper-default-mobile,
    .asg-site-header-wrapper-default .asg-main-menu-toggle{
        display: none;
    }
}