/**
 * Mega Menu styles
 */

/* Menu Toggle
--------------------------------------------- */

/* Remove the toggle right margin */
.mega-toggle-block {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.mega-toggle-block:after {
  margin-left: 0 !important;
}

/* Adjust the space between the menu toggle and the menu */
.mega-menu-toggle {
  margin-bottom: 13px !important;
}

@media (min-width: 768px) {
  .mega-menu-toggle {
    margin-bottom: 18px !important;
  }
}

/* Primary Menu
--------------------------------------------- */

#mega-menu-primary {
  visibility: hidden !important;
  margin-left: -1.25rem !important;
  margin-right: -1.25rem !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* Show the long labels for mobile only */
@media (max-width: 1023px) {
  #mega-menu-primary .mega-menu-label-long {
    display: initial;
  }

  #mega-menu-primary .mega-menu-label-short {
    display: none;
  }

  #mega-menu-primary .mega-menu-label-very-short {
    display: none;
  }
}

/* Shows the very short labels */
@media (min-width: 1024px) {
  #mega-menu-primary {
    left: 20vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }

  #mega-menu-primary .mega-menu-label-long,
  #mega-menu-primary .mega-menu-label-short {
    display: none;
  }
}

/* Shows the short labels */
@media (min-width: 1280px) {
  #mega-menu-primary {
    left: 18vw !important;
  }

  #mega-menu-primary .mega-menu-link {
    font-size: 15px !important;
  }

  #mega-menu-primary .mega-menu-label-long {
    display: none;
  }

  #mega-menu-primary .mega-menu-label-short {
    display: initial;
  }

  #mega-menu-primary .mega-menu-label-very-short {
    display: none;
  }
}

/* Shows the long labels */
@media (min-width: 1380px) {
  #mega-menu-primary .mega-menu-label-long {
    display: initial;
  }

  #mega-menu-primary .mega-menu-label-short {
    display: none;
  }

  #mega-menu-primary .mega-menu-label-very-short {
    display: none;
  }
}

/*
 * Locks the menu alignment to the content area left margin
 * Note: The left property is set via the theme customizer so menu items can be easily updated
 */
@media (min-width: 1660px) {
  #mega-menu-primary {
    text-align: center !important;
  }
}

/* Sub-menu
--------------------------------------------- */

#mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
  letter-spacing: 1px !important;
  padding-left: 25px !important;
  padding-right: 25px !important;
  height: 50px !important;
  line-height: 50px !important;
}

#mega-menu-primary .mega-link-highlight a {
  color: #368e42 !important;
  font-weight: bold !important;
}

#mega-menu-primary .mega-link-highlight a:hover {
  color: #67c574 !important;
}

/* Desktop Sub-menu
--------------------------------------------- */

@media (min-width: 1024px) {
  #mega-menu-primary .mega-sub-menu {
    margin-top: 8px !important;
  }

  #mega-menu-primary > .mega-menu-item > .mega-sub-menu {
    box-shadow: 0 8px 8px -5px rgba(0, 0, 0, 0.3) !important;
  }

  /* Adds a border to columns */
  #mega-menu-primary .mega-column-border {
    padding-left: 40px !important;
    border-left: 2px solid #368e42 !important;
  }

  /* Sets the styling for the sub-menu items */
  #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* Sets sub-menu content to two columns */
  #mega-menu-primary .mega-two-columns .mega-sub-menu .mega-sub-menu {
    column-count: 2;
  }

  /* Sets sub-menu content to three columns */
  #mega-menu-primary .mega-three-columns .mega-sub-menu .mega-sub-menu {
    column-count: 3;
  }

  /* Sets sub-menu content to four columns */
  #mega-menu-primary .mega-four-columns .mega-sub-menu .mega-sub-menu {
    column-count: 4;
  }

  /* Forces columns to inherit their parents sub-menu height */
  #mega-menu-primary .mega-menu-row .mega-sub-menu:first-child {
    display: flex !important;
  }
}