:root {
  --navbar-height: 60px;

  @media (min-width: 992px) {
    --navbar-height: 80px;
  }
}

.phantom-megamenu.phantom-megamenu.phantom-megamenu {
  .navbar {
    --megamenu-primary-color: #f0efef;

    height: var(--navbar-height);

    .navbar-nav.navbar-nav {
      width: 100%;
    }

    .close-div .close-menu {
      width: var(--navbar-height);
      height: var(--navbar-height);
      background-color: #a20453;

      @media (min-width: 992px) {
        background-color: #ee097e;
      }
    }

    .menu-wrapper {
      background: linear-gradient(180deg, #1d1049 0%, #1e55a5 100%);
      justify-content: flex-start;
      padding: 0.5rem 1.5rem 1rem;
      gap: 1.5rem;
      font-family: Karla, sans-serif;

      @media (min-width: 992px) {
        grid-template-rows: auto 1fr auto;
        padding: 6.375rem 3.5rem 3.5rem;
        column-gap: 1rem;
      }

      ul > li {
        > .dropdown-toggle.dropdown-toggle {
          display: flex;
          align-items: center;
          background-color: transparent;
          justify-content: space-between;
          border: none;
          border-block-end: 2px solid #c5c7c9 !important;
          padding: 1rem 0;

          &.show {
            text-decoration: none;
            border-block-end: 2px solid transparent !important;

            img {
              transform: rotate(45deg);
            }
          }

          img,
          .icon {
            transition: 0.2s ease;
            transform-origin: center;
            width: 2rem;
            height: 2rem;
          }

          span {
            font-size: 1.5rem;
            font-weight: 500;
            padding: 0;
            text-transform: none;

            @media (min-width: 1400px) {
              font-size: 3rem;
              line-height: 3.625rem;
            }
          }
        }

        > .nav-link.nav-link.nav-link {
          display: none;

          @media (min-width: 992px) {
            display: flex;
            align-items: center;
            gap: 1rem;

            .icon {
              order: -1;
              transform: rotate(180deg);
              margin: 0;
              fill: var(--bs-primary);
            }
          }

          span {
            padding: 0;
          }
        }
      }

      /* Secondary nav items */
      .megamenu .dropdown-menu .link-list-wrapper .link-list li a {
        padding: 0.5rem 0 !important;
        border-block-end: 2px solid #c5c7c9;
        font-weight: bold;

        span {
          font-size: 1.25rem;
          line-height: 2rem;
          padding: 0;
        }

        svg {
          width: 1.5rem;
          height: 1.5rem;
          margin: 0;
        }
      }

      .brand-container {
        margin: 0;
        padding: 0;

        @media (min-width: 992px) {
          grid-column: 1 / span 2;
        }

        img {
          width: 180px;

          @media (min-width: 992px) {
            width: 100%;
            height: auto;
            max-height: none;
          }
        }
      }

      /* Menu decoration */
      @media (min-width: 992px) {
        position: relative;

        &::after {
          content: "";
          width: 35%;
          height: 100%;
          position: absolute;
          pointer-events: none;
          top: 0;
          right: 0;
          background-image: url(../../images/decoration/decoration-logo-mdmc-bg-menu.svg);
          background-size: contain;
          background-repeat: no-repeat;
          background-position: bottom right;
        }
      }
    }

    .navbar-nav li.nav-item button.nav-link,
    .navbar-nav li > button.nav-link {
      border-bottom: 1px solid #d9d9d94d;
    }
  }

  /* Hamburger */
  .hamburger-button {
    width: var(--navbar-height);
    height: var(--navbar-height);
    background-color: #a20453;

    @media (min-width: 992px) {
      background-color: #ee097e;
    }

    svg {
      fill: #fff;
    }
  }

  .phantom-header-logo {
    @media (min-width: 1400px) {
      padding-inline-start: 4rem;
    }

    img {
      width: 166px;
      height: auto;

      @media (min-width: 992px) {
        width: 203px;
      }
    }
  }

  /* Socials */
  .socials-container.socials-container {
    /* @todo: define styles */
    display: none;
    h6 {
      text-transform: uppercase;
      font-weight: 400;
      font-size: 0.875rem;
    }
  }

  .info-container.info-container {
    padding: 0;

    @media (min-width: 992px) {
      grid-row: 3;
    }
  }

  .socials-container-desktop {
    display: none;

    @media (min-width: 992px) {
      display: block;
      margin-top: 2rem;
      border-bottom: 1px solid #ffffff70;
      padding-bottom: 1rem;
      padding-top: 1rem;
    }
  }

  .socials-container:not(.socials-container-desktop) {
    @media (min-width: 992px) {
      display: none;
    }
  }

  /* Organizers */
  .organizers-container {
    margin-block: 0;

    .label {
      color: #fff;
      font-size: 1rem;
      margin-block: 0 0.5rem;

      @media (min-width: 992px) {
        margin-block-end: 1rem;
      }
    }

    .logos-container {
      display: flex;
      flex-direction: row;
      gap: 0.75rem;
      align-items: center;
    }

    img {
      @media (min-width: 992px) {
        height: 4rem;
        max-width: 5.875rem;
      }
    }
  }

  .separator {
    width: 1px;
    height: 84px;
    background-color: #ffffff;
    margin-inline: 0.5rem;
    flex-shrink: 0;
  }

  .logo-organizers {
    margin: 0;
  }

  .scroll-container-desktop.scroll-container-desktop {
    @media (min-width: 992px) {
      grid-row: 1 / span 3;
    }
  }

  .loghi-container {
    img {
      max-width: 74px;
    }
  }
}

.megamenu__cta {
  @media (min-width: 992px) {
    grid-column: 1 / span 2;
    grid-row: 2;
  }
}

.bs-it-sticky-wrapper + *,
.phantom-megamenu + * {
  margin-top: var(--navbar-height) !important;
}

.top-separator {
  width: 1px;
  height: 2.5rem;
  background-color: #cdcdcd;
  margin: 0 1rem;
}