/* ========================================================================================================
                                            FULL SCREEN MENU MOBILE
   ======================================================================================================== */

@keyframes slideIn {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
}

.main-header-bar-navigation.toggle-on{
    padding-left: 20px;
    padding-right: 20px;
    z-index: 100;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--ast-global-color-8);
    /*animation: slideIn 1s ease-in-out forwards;*/
}



.dmc-mobile-menu-close-btn{
    background-color: var(--ast-global-color-8) !important;
    color: var(--ast-global-color-8) !important;
    
}

.dmc-mobile-menu-close-btn-icon{
    width: 24px;
    height: 24px;
    text-align: end;
    color: var(--ast-global-color-5) !important;
}

.dmc-mobile-menu-close-btn-icon:hover{
    color: var(--ast-global-color-7) !important;
}

.dmc-mobile-menu-ul{
    background-color: var(--ast-global-color-8) !important;
    font-weight: 500;
    text-transform: uppercase;
}

.dmc-mobile-social-icons-container{
    position: absolute;
    bottom: 0;
    padding: 0 20px;
}

.dmc-mobile-lang-switcher{
    padding: 0 20px;
    margin: 20px 0;
}

.dmc-mobile-wordpressmenu-li a{
    color: var(--ast-global-color-5) !important;
}

.dmc-mobile-wordpressmenu-li a:hover{
    background-color: var(--ast-global-color-8) !important;
    color: var(--ast-global-color-7) !important;
}

.dmc-mobile-hr-wrapper{
    padding: 0 20px;
}

.dmc-mobile-hr{
    background-color: var(--ast-global-color-5);
    height: 1px;
    width: 100%;
    margin: 20px 0;
}

.dmc-mobile-menu-login-li {   
    padding: 0 20px;
}


/* ========================================================================================================
                                            SECTION 1       

    Brand logo
   ======================================================================================================== */

   .dotb-site-title{
    font-size: 1.625rem;
    font-weight: 600;
   }
   
   .dotb-site-title a{
    color: var(--ast-global-color-8);
   }

   .dotb-diocesi-logo{
    width: 100px;
    height: 100%;
   }

   .dotb-tourism-site-title{
    font-size: 1.625rem;
    font-weight: 600;
   }
   
   .dotb-tourism-site-title a{
    color: var(--ast-global-color-8);
   }

/* ========================================================================================================
                                            SECTION 2       

    Wordpress menu "menu_header_desktop"
   ======================================================================================================== */

.dmc-header-desktop-navigation-ul {
    margin: 0;
}

.dmc-mobile-menu-vertical {
    display: flex;
    flex-direction: column;
    background-color: unset !important;
}


   /* ========================================================================================================
                                            SECTION 3       
    DESKTOP:
    Icons used for the profile page link, cart, and language switcher.
    TABLET/MOBILE:
    Hamburger icon used to open the full screen menu.
   ======================================================================================================== */

.dmc-header-desktop-icons {
    font-size: 1.2em;
    color: var(--ast-global-color-8);
}
.dmc-tourism-header-desktop-icons {
    font-size: 1.2em;
    color: var(--ast-global-color-8);
}

.dmc-header-mobile-icons {
    font-size: 1.1em;
    color: var(--ast-global-color-8);
}

.ast-builder-html-element{
    color: var(--ast-global-color-8);
/*     display: flex; */
    align-items: center;
    gap:10px;
}

.ast-tourism-builder-html-element{
    color: var(--ast-global-color-8);
    display: flex;
    align-items: center;
    gap:10px;
}

.dotb-header-language-switcher{
    display: inline-block;
}

.ast-mobile-svg{
    fill: var(--ast-global-color-8) !important;
}

.dotb-mobile-cart-icon{
    height: 20px;
}

.ast-button-wrap{
    display: flex;
    gap: 20px;
    align-items: center;
}


.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--diocesi-global-color-black);
    color: white;
    display: none; /* Hidden by default */
    flex-direction: column;
    align-items: flex-start;
    z-index: 1000;
    padding: 20px;
  }

  .dmc-header-menu-mobile-close-icons{
    font-size: 22px;
    color: var(--ast-global-color-5);
  }

  .dmc-mobile-menu-wpmenus-ls-container{
    flex: 1 0 auto; /* This will fill the available space */
    overflow-y: auto;
    width: 100%;    
    display: flex ;
    flex-direction: column;
    gap: 30px;
    padding-top: 60px;
    font-size: 22px;
  }

  .dmc-mobile-menu-close-btn-container{
    display: flex;
    width: 100%;
    height: 40px;
    justify-content: flex-end;
    align-items: center;
}

.dmc-mobile-menu-wpmenu-social-container {
    flex: 0 1 auto; /* Take its natural size, no grow or shrink */
    width: 100%;
    display: flex;
    align-items: center;
    gap: 24px;
  }

.dmc-mobile-menu-social-icons-container{
    display: flex;
    gap: 10px;
}
 

/* ========================================================================================================
                                            OVERRIDES
                                        
    Classes that must be overriden, as in some cases it is not possible to attach support classes.
   ======================================================================================================== */

/*Remove any form of background for the active menu item */
.menu-item.current-menu-item > .menu-link {
    background-color: rgba(0,0,0,0) !important;
}

/*TOBEDISCUSSED since it overrides the position:relative of the site-header*/
.site-header{
    position:fixed;
    width: 100%;
    transition: top 0.5s;
    animation: dropFromTop 0.8s ease-out;
}

@keyframes dropFromTop {
    from {
        top: -80px;
    }
    to {
        top: 0;
    }
}

.ast-button-wrap .menu-toggle.main-header-menu-toggle{
    padding: 0;
}