*,
*:before,
*:after {
  box-sizing: border-box;
}

/* New Menu */
:root {
  --sb-wide-content-one-thirds: calc(var(--wp--style--global--wide-size) / 3);
}

/* Top-level items */
.sb-main-menu__item {
  gap: 0 !important;
  width: 100%;
}

.sb-main-menu__item > a {
  border-radius: var(--wp--preset--spacing--30);
  font-size: var(--wp--preset--font-size--larger);
  padding: var(--wp--preset--spacing--40);
  width: calc(100% - 1px) !important;
}

.sb-main-menu__item > a:hover,
.sb-main-menu__item > a.is-active {
  background-color: var(--wp--preset--color--blue);
}

/* Sub-menus */

.sb-main-menu__item > .wp-block-navigation__submenu-container {
  background-color: transparent !important;
  border-radius: var(--wp--preset--spacing--30);
  display: block !important;
  height: max-content !important;
  padding-block: var(--wp--preset--spacing--spacing-00) !important;
  width: 100% !important;
}

.sb-main-menu__item > .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  font-size: var(--wp--preset--font-size--large) !important;
  padding-block: var(--wp--preset--spacing--spacing-e-30) !important;
  width: 100%;
}

@media screen and (min-width: 960px) {
  .sb-main-menu {
    padding-block: 1.5rem;
    margin-block-start: 1.5rem;
  }

  .sb-main-menu__item > a:hover,
  .sb-main-menu__item > a.is-active + .wp-block-navigation__submenu-container {
    display: block !important;
  }

  .sb-main-menu__item > .wp-block-navigation__submenu-container {
    display: none !important;
    background-color: var(--wp--preset--color--blue) !important;
    columns: 2;
    margin-left: var(--sb-wide-content-one-thirds);
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    transition: none !important;
    width: calc(2 * var(--sb-wide-content-one-thirds)) !important;
  }

}

.sb-main-menu-overlay {
  /*background-blend-mode: overlay;*/
  background-image: url('/app/themes/sb/assets/images/menu.webp');
  background-position: center center;
  background-size: cover;
}