/* The modal menu */

/* In order to keep the mobile menu open to work on this run this command in browser console:
  document.querySelector('.wp-block-navigation__responsive-container')?.classList.add('has-modal-open', 'is-menu-open'); 
*/

.wp-block-navigation {

  /* hide the mobile only bits of the nav  */
  @media (min-width:600px){

    .wp-block-site-logo, 
    .wp-block-site-title,
    .wp-block-social-links,
    .wp-block-search {
      display: none;
    }
  }

  
  /* Main mobile nav container */
  .wp-block-navigation__responsive-container.is-menu-open {
    padding-left: 0;
    padding-right: 0;

    /* The close button */
    .wp-block-navigation__responsive-container-close {
      padding-right: clamp(1rem, var(--wp--style--root--padding-right), 20rem);
    }

    .wp-block-navigation__responsive-container-content {

      padding-top: calc(1rem + 12px);
      gap: 0;

      .wp-block-search {
        /* padding-left: clamp(1rem, var(--wp--style--root--padding-left), 20em); */
        width: 100%;
        margin-top: 30px;

        .wp-block-search__inside-wrapper {
          margin: auto;
        }
      }

      .wp-block-navigation__container {
        width: 100%;
        gap: 0;

        /* normal navigation menu items */
        .wp-block-navigation-item:has(.wp-block-navigation-item__content) {
          width: 100%;
          align-items: flex-start;
          margin-left: clamp(1rem, var(--wp--style--root--padding-left), 20em);
          margin-bottom: 0.2rem;

          &.current-menu-item,
          &:has(.current-menu-item) {
            a.wp-block-navigation-item__content {
              /* color: var(--wp--preset--color--primary); */
              /* color: var(--wp--preset--color--secondary); */
              color: var(--wp--preset--color--accent);
            }
          }

          a.wp-block-navigation-item__content {
            /* font-size:20px; */
            /* text-decoration: underline; */
            /* text-decoration-color: var(--wp--preset--color--primary); */

            display: block;
            width: 90%;
            border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--base-contrast) 35%, transparent);
            font-size: 16px;
            font-weight: 500;
            line-height: 23px;
            /* color: #1e1e1e; */
            text-transform: uppercase;
            padding: 0.5rem 0;
          }

          .wp-block-navigation__submenu-container {
            padding-top: 5px;
            padding-left: 0;
            width: 95%;

            .wp-block-navigation-item {
              margin-bottom: 5px;

              a.wp-block-navigation-item__content {
                font-size: 15px;
                font-style: italic;
                color: color-mix(in srgb, currentColor 70%, transparent);
                text-transform: none;
                font-weight: 400;
                width: 80%;
              }

              &.current-menu-item {
                a.wp-block-navigation-item__content {
                  color: var(--wp--preset--color--primary);
                }
              }
            }
          }
        }
        

        
  
        /* annoyingly the editor and render verision of the site logo in nav don't line up :/ */
        .wp-block-navigation-item:has(.wp-block-site-logo) {
          width: 100%;
          margin-top: 1rem;
        }

        .wp-block-site-logo {
          width: 100%;
          background-color: var(--wp--preset--color--base-contrast);
          padding-top: 1rem;
          margin-top: 1rem;
          margin: auto;
          text-align: center;
        }

        .wp-block-navigation-item:has(.wp-block-social-links) {
          width: 100%;
        }
        .wp-block-social-links {
          background-color: var(--wp--preset--color--base-contrast);
          justify-content: center;
          width: 100%;
          padding: 20px 0;
          padding-bottom: 50px;
        }
      }
    }
  }
}