@media ( min-width: 749px ) {
  .wp-block-navigation.nav-primary--mobile {
    display: none;
  }
  .wp-block-site-logo.header-logo{
    position: absolute;
    a{

      position: relative;
      top: -10px;
    }
  }

  .wp-block-navigation.nav-primary--desktop {
    /* trick was adding the  */
    --towmads-background-tape: url("data:image/svg+xml,%3Csvg width='68' height='30' viewBox='0 0 68 30' fill='none' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2_8)'%3E%3Cpath d='M0.600001 1L-1.3 3.3L7.15256e-07 5.8L0.300001 7.6L0.900001 8.7L2.4 10.5L1.9 10.8L2.4 11.9V12.8L2.1 13.8L1.3 14.7L1.9 15.8L2.4 16.8L2 17.5L1.5 18.1L0.200001 20.2L1.4 21.5L2.2 24.1L1.4 25.4L0.500001 27.4V27.8L1.2 28.3L2.1 28.5L2.9 29H12.8V1H0.600001Z' fill='%23F2F1EA'/%3E%3C/g%3E%3Cpath d='M64 1L64.2 2.1L64.6 2.9V3.3L64.8 3.7V4.3L65 5V5.7V6.3L64.5 6.7L64.8 7.3L65 7.8L65.6 8.3V8.6L65.5 8.9L65.6 9.9V10.5L66.4 11.6L66.1 12L66.4 12.2L65.8 12.8L65.4 13.5L65.6 13.7H65.9L66 13.9L65.5 15.1L64.8 16L63.1 17.7L63.7 18.2L63.3 19L63.7 19.8L63.6 20.6L63.7 21.5L63.6 21.9V22.3L64.1 22.8L63.6 23.6L63.7 24V24.2L63.9 24.4L63.5 24.7L63.3 25.4V25.9L62.8 26.2L62.5 27.1L62.8 27.8L63.4 28.6L61.8 29H54.9V1H64Z' fill='%23F2F1EA'/%3E%3Cg clip-path='url(%23clip1_2_8)'%3E%3Crect x='12' y='1' width='44' height='28' fill='%23F2F1EA'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2_8'%3E%3Crect width='15.7' height='30' fill='white'/%3E%3C/clipPath%3E%3CclipPath id='clip1_2_8'%3E%3Crect width='44' height='28' fill='white' transform='translate(12 1)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");

    .wp-block-navigation__container {

      flex-wrap: nowrap;
      gap: 0.8rem;


      & > li {
        padding: 8px 15px 8px 10px;
        background-image: var(--towmads-background-tape);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 0% 100%;
        transition: 
          color .2s ease-out,
          background-size .2s ease-out;

        &.current-menu-item,
        &:has(.current-menu-item),
        &:hover {
          color: var(--wp--preset--color--primary);
          /* background-color: #f2f1ea; */
          background-image: var(--towmads-background-tape);
          background-size: 100% 100%;
        }

        & > .wp-block-navigation-item__content {
          /* font-size: 16px; */
          font-weight: 600;
          /* color: #1e1e1e; */
          text-transform: uppercase;
        }
      }

      .wp-block-navigation__submenu-container.wp-block-navigation-submenu {
        color: var(--wp--preset--color--base-contrast);
        background-color: #f2f1ea;

        /* keep menu items from wrapping */
        width: max-content;

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

          a {
            text-decoration: underline;
            text-decoration-color: color-mix(in srgb, var(--wp--preset--color--primary) 40%, transparent);
            transition: color 200ms, text-decoration-color 300ms;
            font-style: italic;
  
            &:hover {
              color: var(--wp--preset--color--primary);
              text-decoration-color: var(--wp--preset--color--primary);              
            }
          }
        }
      }
    }
  }
}

@media ( max-width: 748px ) {
  .wp-block-navigation.nav-primary--desktop {
    display: none;
  }
  .wp-block-site-logo.header-logo{position: absolute;left: 0;}
  .wp-block-site-logo.header-logo a{position: relative;top: -13px;}

  /* The hamburger menu button */
  .wp-block-navigation.nav-primary--mobile .wp-block-navigation__responsive-container-open {
    margin-left: 55px;
  }

  /* The modal menu */
  .wp-block-navigation.nav-primary--mobile {

    /* float it over to the right */
    margin-left: auto;
    margin-right: 1rem;
    
    /* Main 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(2rem + 24px); */  
        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-social-links {
          background-color: #242625;
          justify-content: center;
          width: 100%;
          padding: 20px 0;
          padding-bottom: 50px;
        }


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

          
          
          /* normal navigation menu items */
          .wp-block-navigation-item:has(.wp-block-navigation-item__content) {

            width: 100%;
            /* border-bottom: 1px solid #e1e1e1; */
            margin-left: clamp(1rem, var(--wp--style--root--padding-left), 20em);
            /* margin-right: clamp(1rem, var(--wp--style--root--padding-right), 20em); */

            
            /* padding-left: clamp(1rem, var(--wp--style--root--padding-left), 20em); */
            /* padding:clamp(1rem, var(--wp--style--root--padding-top), 20rem) clamp(1rem, var(--wp--style--root--padding-right), 20rem) clamp(1rem, var(--wp--style--root--padding-bottom), 20rem) clamp(1rem, var(--wp--style--root--padding-left), 20em); */
            margin-bottom: .2rem;

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

            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 #e1e1e1;
              font-size: 16px;
              font-weight: 600;
              line-height: 23px;
              color: #1e1e1e;
              text-transform: uppercase;
              padding: .5rem 0;


            }

            .wp-block-navigation__submenu-container {
              padding-top: 5px;
              padding-left: 1rem;
              width: 90%;

              .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: #242625;
            padding-top: 1rem;
            margin-top: 1rem;
            margin: auto;
            text-align: center;;
          }
        }
      }
    }
  } 
}

/* All for slider to show behind nav on homepage */
.home.page-template-default {
  header {
    position: absolute;
    z-index: 99;
    width: 100vw;

    & > div {
      background: none;
    }
  }

  main {
    margin-block-start: 0;
  }
}