/*--------------------------------------------------------------

Mega Menu Styles
 
* NOTE: Appears for desktop in the main header of the site.

--------------------------------------------------------------*/
/**
 * Mega-menu styles.
 */
@media (min-width: 1466px) {
  .sub-menu:has(.megamenu) {
    background: linear-gradient(127.55deg, #03B9EF 0%, #002865 98.45%);
  }
}

.sub-menu .megamenu[class] {
  padding-block: calc(27/16*1rem);
  box-sizing: border-box;
  max-width: 89.8rem;
}

@media (max-width: 1465px) {
  .sub-menu .megamenu[class] {
    display: none;
  }
}

.sub-menu .megamenu__links ul {
  display: block;
}

.sub-menu .megamenu__links li {
  display: block;
  margin-bottom: 0.5rem;
}

.sub-menu .megamenu__links a {
  display: block;
  padding: 0.5rem 1rem;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  text-transform: uppercase;
}

.sub-menu .megamenu__links a:hover, .sub-menu .megamenu__links a:focus {
  text-decoration: underline;
}

.sub-menu .megamenu__post-list {
  display: flex;
  flex-flow: row nowrap;
  gap: 21px;
  overflow-x: scroll;
}

.sub-menu .megamenu__post {
  border: 1.06667px solid #964BD7;
  flex: 0 0 calc(288px - 21px);
  background-color: #000;
  position: relative;
  z-index: 1;
  border: 2px solid #964BD7;
}

.sub-menu .megamenu__post:focus-within {
  border: 2px solid white;
}

.sub-menu .megamenu__post .flex-container {
  flex-flow: row nowrap;
  height: 100%;
}

.sub-menu .megamenu__post .megamenu__post-image {
  width: 119px;
  height: 100%;
  flex: 0 0 119px;
}

.sub-menu .megamenu__post img {
  width: 119px;
  height: 100%;
  object-fit: cover;
}

.sub-menu .megamenu__post .megamenu__post-title {
  flex: 0 1 auto;
  padding: 0.5rem;
}

.sub-menu .megamenu__post h2 {
  color: white;
  font-weight: 700;
  font-size: calc(14/16*1rem);
  line-height: 1.3;
  text-transform: capitalize;
  color: #FFFFFF;
  margin-bottom: 0;
}

.sub-menu .megamenu__post h2 a {
  all: inherit;
  text-transform: capitalize !important;
  color: white !important;
  cursor: pointer;
}

.sub-menu .megamenu__post h2 a:hover, .sub-menu .megamenu__post h2 a:focus {
  text-decoration: underline;
}

/**
 * Sub-menu positioning.
 */
.header ul ul.sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  opacity: 0;
  background-color: black;
  /* border: 2px solid red; */
  border: 10px solid;
  border-image-slice: 2;
  border-width: 2px;
  border-image-source: linear-gradient(270deg, #00BBEF 0%, #8259DA 15.1%, #FE00C7 29.17%, #CE5BEC 43.23%, #E38E8D 57.29%, #ECB43D 70.83%, #F37627 84.9%, #FE3D00 100%);
  border-top: none;
  width: 100vw;
  height: auto;
  opacity: 0;
  pointer-events: none;
  transform: translate(0, -30px);
  transition: 0.1s 0.15s opacity;
}

.header ul ul.sub-menu li {
  margin: 0.5rem 0;
  padding: 0;
}

@media (min-width: 1466px) {
  .header ul li.menu-item:hover > ul.sub-menu {
    opacity: 1;
    pointer-events: auto;
  }
}

/**
 * Header height 
 * 
 * Fix to maintain the visiblity of a megamenu 
 * after a users hovers over the parent menu-item. 
 */
@media (min-width: 1466px) {
  .header__menu {
    transform: translateY(2px);
  }
  .header__menu ~ :is(a, ul) {
    height: calc(82/16*1rem);
  }
  .header__menu ~ ul {
    transform: translateY(-3px);
  }
  .header__menu ~ a {
    transform: translateY(3px);
  }
  .header__nav ul.menu {
    height: calc(82/16*1rem);
  }
}

/**
 * Site Logo
 * 
 * When a mega menu is visible then decrease the height 
 * of the site branding logo.
 */
.header .cell.shrink:has(+ .cell .header__menu .header__nav .menu li.menu-item-has-children:hover) .header__logo {
  margin-right: 35px;
  width: 146px;
}

/*# sourceMappingURL=megamenu.css.map */