/* RESET CSS MENU PHANTOM */
.phantom-megamenu .navbar {
  .navbar-collapsable {
    top: 0;
    height: 100%;
  }
}

@media (min-width: 992px) {
  .phantom-megamenu .navbar {
    & .navbar-collapsable {
      & .menu-wrapper {
        padding: 0rem;
        & ul.navbar-nav {
          & .nav-item.dropdown.megamenu {
            .dropdown-menu {
              position: relative;
              height: auto;
              left: auto;
              top: auto;
              transform: none;
            }
          }
          .nav-item.dropdown.megamenu .dropdown-menu.show {
            border-left: 0px;
            width: 100%;
          }
        }
      }
    }
  }
}

.phantom-megamenu .phantom-header-logo {
  @media (min-width: 1400px) {
    padding-left: 2rem;
  }
}

/* LAYOUT  */
@media (min-width: 992px) {
  .phantom-megamenu .navbar {
    & .navbar-collapsable {
      .menu-wrapper {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto auto;
        gap: 0px;
        padding: 64px 3rem 3rem 3rem;
        justify-content: normal;

        /* first col w logo + info */
        .brand-container {
          display: block;
          grid-column: 1 / span 3;
          grid-row: 1 / span 1;
          padding-right: 2rem;

          img {
            width: 80px;
            height: auto;
          }
        }

        /* menu items */
        .scroll-container-desktop {
          position: relative;
          overflow: hidden;
          grid-row: 1 / span 2;
          grid-column: 4 / span 6;

          .navbar-nav {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            padding: 0;
            width: calc(100% + 20px);
            overflow-y: scroll;
          }
        }

        /* social container*/
        .info-container {
          max-width: none;
          padding-right: 2rem;
          grid-column: 1 / span 3;
          grid-row: 2 / span 1;
          justify-content: end;
        }
      }
    }
  }

  /* expanded behaviour */
  .phantom-megamenu .navbar {
    .navbar-collapsable.expanded {
      display: block !important;
      background: green;
      height: 100%;
      position: fixed;
    }
  }
}

@media (min-width: 1200px) {
  .phantom-megamenu .navbar {
    & .navbar-collapsable {
      & .menu-wrapper {
        .brand-container {
          padding-right: 4rem;
        }
        .info-container {
          padding-right: 4rem;
        }
      }
    }
  }
}

/* container brand for desktop */
.brand-container {
  background-color: red;
  background-color: transparent;
  margin-bottom: 1rem;

  img {
    max-height: 100px;
    width: auto;
  }
}