/*  ---------------------------- COLORS ----------------------------  */

/* header top bar closed */
header.phantom-megamenu .navbar {
  background-color: #ffffff;
}

/* opened menu wrapper */
header.phantom-megamenu .navbar {
  .menu-wrapper {
    background-color: #29344b;
  }
}

/* menu wrapper desktop opened */
@media (min-width: 992px) {
  .phantom-megamenu .navbar {
    & .navbar-collapsable {
      .menu-wrapper {
        background-color: #29344b;
      }
    }
  }
}

/* hamburger menu button */
header .hamburger-button {
  background-color: #1bba76;
  svg {
    fill: #fff;
  }
}

/* close menu button */
header.phantom-megamenu .navbar {
  .close-div button {
    background-color: #1bba76;
  }
}

/*  ---------------------------- /COLORS ----------------------------  */

/*  ---------------------------- FONTS (style, color, etc) ----------------------------  */

/* primary menu item */
header.phantom-megamenu .navbar .menu-wrapper ul > li button.nav-link {
  font-size: 1.25rem;
  font-weight: 500;
  span {
    font-weight: 400;
  }
  &.active {
    text-decoration: none;
    span {
      color: #1bba76;
      font-weight: 500;
    }
  }
}

/* secondary menu item */
.navbar
  .navbar-collapsable
  .menu-wrapper
  .nav-item.megamenu
  .dropdown-menu
  .link-list-wrapper
  ul.link-list
  li
  a
  span {
  font-size: 1rem;
}

/* socials  */
.socials-container h6 {
  text-transform: uppercase;
  font-weight: 400;
  font-size: 0.875rem;
}

/*  ---------------------------- /FONTS ----------------------------  */

/*  ---------------------------- LAYOUT (display, margins,padding alingment etc) ----------------------------  */

.phantom-megamenu .navbar {
  & .navbar-collapsable {
    .menu-wrapper {
      justify-content: flex-start;
    }
  }
}

/* secondary menu item */
.phantom-megamenu
  .navbar
  .navbar-collapsable
  .menu-wrapper
  .nav-item.megamenu
  .dropdown-menu
  .link-list-wrapper
  ul.link-list
  li
  a {
  padding: 8px 0px !important;

  svg {
    fill: #1bba76;
  }
  span {
    padding: 6px 0;
  }
}

@media (min-width: 992px) {
  /* secondary menu item  arrow */
  .phantom-megamenu
    .navbar
    .navbar-collapsable
    .menu-wrapper
    ul.navbar-nav
    .nav-item.dropdown.megamenu
    .dropdown-menu {
    padding-left: 0;
    .link-list-wrapper {
      ul.link-list li a {
        span {
          padding: 0px 0;
        }
        svg {
          display: none;
        }
      }
    }
  }
}

@media (min-width: 992px) {
  /* logo inside menu opned */
  .phantom-megamenu .navbar {
    & .navbar-collapsable {
      & .menu-wrapper {
        & .brand-container {
          img {
            width: 100%;
            height: auto;
            max-height: none;
            max-width: 180px;
          }
        }
      }
    }
  }

  /* primary menu item */
  .phantom-megamenu
    .navbar
    .navbar-collapsable
    .menu-wrapper
    ul
    > li
    button.nav-link {
    padding: 0.6rem 20px 0.6rem 0;
  }
}

@media (min-width: 1400px) {
  .phantom-megamenu .navbar {
    & .navbar-collapsable {
      & .menu-wrapper {
        & .brand-container {
          img {
            max-width: 230px;
          }
        }
      }
    }
  }
}

@media (min-width: 992px) {
  .logo-mobile {
    display: none;
  }
}

/* socials */
.info-container {
  padding: 1rem 0 1rem 0;
}

/* social desktop */
header .socials-container-desktop {
  display: none;
}

@media (min-width: 992px) {
  header .socials-container-desktop {
    display: block;
    margin-top: 2rem;
    border-bottom: 1px solid #ffffff70;
    padding-bottom: 1rem;
    padding-top: 1rem;
  }
  header .socials-container:not(.socials-container-desktop) {
    display: none;
  }
}

/*  ---------------------------- /LAYOUT (display, margins,padding alingment etc) ----------------------------  */

/*  ---------------------------- OTHER ----------------------------  */

/* main logo header top bar */
.phantom-header-logo img {
  width: 240px;
  height: auto;
}

/* list items menu priumary */
header.phantom-megamenu
  .navbar
  .navbar-collapsable
  .navbar-nav
  li.nav-item
  button.nav-link,
header.phantom-megamenu
  .navbar
  .navbar-collapsable
  .navbar-nav
  li
  > button.nav-link {
  border-bottom: 1px solid #d9d9d94d;
}

/* plus icon  */
header.phantom-megamenu .navbar .menu-wrapper ul > li button.nav-link img {
  transition: 0.2s ease;
  transform-origin: center;
}
header.phantom-megamenu .navbar .menu-wrapper ul > li button.nav-link.show img {
  transform: rotate(45deg);
}

/* decoration bg menu */
@media (min-width: 992px) {
  .menu-wrapper {
    position: relative;
    &::after {
      content: "";
      width: 20%;
      height: 100%;
      position: absolute;
      pointer-events: none;
      top: 0;
      right: 0;
      background-image: url(../../images/decoration/deco-megamenu.svg);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: top left;
    }
  }
}

/*  ---------------------------- /OTHER ----------------------------  */

/* logo in top header */
@media (min-width: 992px) {
  .right-side-container .loghi-container {
    gap: 20px;

    /* sissa logo */
    a:first-child {
      img {
        height: 32px;
      }
    }

    /* ilas logo */
    a:nth-child(2) {
      img {
        height: 38px;
      }
    }

    /* ictp logo */
    a:nth-child(3) {
      margin-left: 4px;
      position: relative;
      border-left: 1px solid #d4d4d4;
      padding-left: 21px;
      img {
        height: 43px;
      }
    }
  }
}

/* organizers logos  */
header .organizers-container {
  .logos-container > div:not(.logo-desktop),
  .logos-container {
    display: flex;
    flex-direction: row;
  }

  .logos-container {
    gap: 20px;

    a {
      margin-right: 0;
      img {
        height: 50px;
      }
    }
  }

  .company-name {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-decoration: none;

    div {
      font-size: 1.125rem;
      color: #fff;
    }
    a {
      font-size: 1rem;
      text-decoration: underline;
      color: #fff;
    }
  }
}

@media (min-width: 992px) {
  header {
    .organizers-container {
      margin-bottom: 0;
    }
    .info-container {
      padding-bottom: 0;
    }
  }

  header .organizers-container {
    .logos-container {
      display: grid;
      grid-template-columns: auto auto;
      grid-template-rows: auto auto;

      & > div:nth-child(5),
      & {
        border-top: 1px solid #535353;
        margin-top: 1px;
        padding-top: 17px;
      }

      /* sissa circle logo */
      > div:first-child {
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
      }

      /* logo sissa */
      > div:nth-child(2) {
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
      }

      /* logo il */
      > div:nth-child(4) {
        grid-column: 2 / span 1;
        grid-row: 1 / span 1;
      }

      /* logo il */
      > div:nth-child(5) {
        grid-column: 1 / span 2;
        grid-row: 2 / span 1;
        img {
          width: 100%;
          height: auto;
        }
      }

      .company-name,
      div.logo-mobile {
        display: none;
      }
    }
  }
}

@media (min-width: 1200px) {
  header .organizers-container {
    margin-bottom: 0;
    & .logos-container {
      & a {
        img {
          height: 60px;
        }
      }

      /* logo il */
      > div:nth-child(5) {
        img {
          width: auto;
          height: 60px;
        }
      }
    }
  }
}

@media (min-width: 1400px) {
  header .organizers-container {
    & .logos-container {
      grid-template-columns: 70px auto;
      & a {
        img {
          height: 70px;
        }
      }

      /* logo il */
      > div:nth-child(5) {
        img {
          width: auto;
          height: 70px;
        }
      }
    }
  }
}