@media (min-width: 1017px) {

    /* instead of normal underline, use a border bottom that is spaced out */
    .wp-block-navigation {
        a {
            text-decoration: none;
            transition: border-color 0.3s ease;
        }
        
        .wp-block-navigation__submenu-icon{
            margin-top: -11px;
        }

        .wp-block-navigation__submenu-container {
            border: none !important;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.06);
            &.wp-block-navigation-submenu {
                margin-top: 4px;
                z-index: 10;
                li:hover {
                    background-color: var(--wp--preset--color--tertiary);
                    border-color: transparent;
                    transition: all 0.3s ease;
                    a {
                        border-color: transparent;
                    }
                }
            }
        }
    }
}

/* mobile */
@media (max-width: 1016px) {
    /* Custom slide-in-from-right animation for mobile navigation */
    @keyframes overlay-menu__slide-in-from-right {
        0% {
            opacity: 0;
            transform: translateX(100%);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /* Override the default fade-in animation with slide-in-from-right for mobile */
    @media not (prefers-reduced-motion) {
        .wp-block-navigation__responsive-container.is-menu-open {
            animation: overlay-menu__slide-in-from-right 0.25s ease-out !important;
            animation-fill-mode: forwards;
        }
    }

    .wp-block-navigation.mobile {
        .wp-block-navigation__responsive-container-close{
            padding: var(--wp--preset--spacing--small) var(--wp--preset--spacing--medium);
            margin-top: 8px !important;
        }
        .wp-block-navigation__responsive-container.is-menu-open{
            background-color: var(--wp--preset--color--main-accent) !important;
        }
        .wp-block-navigation__container{
            width: 100%;
            gap: 0 !important;
            padding: 0 var(--wp--preset--spacing--medium);
            li, a{
                width: 100%;
                text-align: left;
                text-decoration: none;
            }
            li{
                padding: 16px 0;
                border-bottom: 1px solid #DDDBD9;
                &:last-child{
                    border-bottom: none;
                }
            }
        }
        .wp-block-navigation-item,
        .wp-block-navigation-item span{
            font: 700 20px/28px "Museo Sans";
            font-weight: 200;
            color: #3d3a36 !important;
        }
    }
}

/* hack to avoid the mobile menu interfering with sticky elements */
html.has-modal-open {
    main ,
    footer {
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease-out, visibility 0s linear 0.3s;
    }
  }