/* Desktop navigation layout. The parent theme continues to own colours and dropdowns. */
@media (min-width: 960px) {
  nav#site-navigation {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    width: 100%;

    & .primary-menu-group {
      min-width: 0;
    }

    & .sf-menu {
      display: flex;
      align-items: stretch;
      margin: 0;

      & > li {
        float: none;
        flex: 0 0 auto;

        & > a {
          padding: 23px 24px;
        }

        & > a.sf-with-ul {
          padding-right: 40px;

          &::after {
            right: 30px;
          }
        }
      }
    }

    & .nav-utilities-group {
      display: flex;
      flex: 0 0 auto;
      align-items: center;
      justify-content: flex-end;
      gap: 14px;

      & .widget {
        margin: 0;
      }

      & .search-form {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        margin-block: 0 !important;

        & input.search-field {
          width: 180px;
        }
      }

      & .social-ico {
        display: flex;
        align-items: center;
        gap: 10px;
      }
    }
  }
}

/* Coordinated wrapped state before the existing mobile header takes over. */
@media (min-width: 960px) and (max-width: 1279px) {
  nav#site-navigation {
    align-items: flex-start;
    gap: 20px;

    & .primary-menu-group {
      flex: 0 1 550px;
      max-width: 550px;
    }

    & .sf-menu {
      flex-wrap: wrap;

      & > li > a {
        padding-inline: 20px;
      }

      & > li > a.sf-with-ul {
        padding-right: 36px;

        &::after {
          right: 26px;
        }
      }
    }

    & .nav-utilities-group {
      flex: 1 1 auto;
      flex-wrap: wrap;
      align-self: stretch;
      align-content: space-evenly;
      row-gap: 0;
      padding-block: 0;

      & .widget_search,
      & .widget_custom_social_media_widget {
        flex: 0 0 100%;
      }

      & .social-ico {
        justify-content: flex-end;
      }
    }

    /* Top-row dropdowns replace the second-row space while open. */
    & .sf-menu > li.normal-item-pro:nth-child(-n + 4) > .sub-menu {
      top: 100% !important;
      z-index: 1000;
    }

    & .sf-menu > li > .sf-mega {
      top: 62px !important;
      z-index: 1000;
    }
  }
}