/*Base Structure*/
.wm-mega-menu-plugin {
  --mega-menu-max-width: 700px;
  --mega-menu-max-height: 90svh;

  --trigger-icon-size: 15px;
  --trigger-icon-gap: 4px;

  --mega-menu-border-width: 0px;
  --mega-menu-border-color: transparent;
  --mega-menu-border-radius: 0px;

  --background-overlay-opacity: 50%;
  --background-overlay-hsl: 0, 0%, 0%;
  --background-overlay-color: hsla(var(--background-overlay-hsl), var(--background-overlay-opacity));
  --background-overlay-blur: 10px;

  --mega-menu-arrow-color: var(--navigationLinkColor);
}

.wm-mega-menu {
  position: fixed;
  width: 100vw;
  top: 0px;
  left: 0;
  z-index: var(--z-index);
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  box-sizing: border-box;
  pointer-events: none;
}

.wm-mega-menu.open {
  opacity: 1;
  visibility: visible;
}
.wm-mega-menu[data-layout="inset"] {
  padding-top: var(--header-bottom);
  display: flex;
  z-index: 9;
}

.wm-mega-menu-plugin [data-header-style="theme"].header .header-announcement-bar-wrapper {
  transition: background-color 300ms ease 0ms;
}
.wm-mega-menu--open [data-header-style="theme"].header .header-announcement-bar-wrapper {
  background-color: var(--siteBackgroundColor);
}

/*Wrapper*/
.wm-mega-menu .mega-menu-wrapper {
  position: relative;
  background-color: var(--siteBackgroundColor);
  display: flex;
  overflow-y: hidden;
  overflow-x: hidden;
  min-height: 1px;
  height: var(--active-menu-height);
  max-height: var(--mega-menu-max-height);
  width: 100%;
  border: var(--mega-menu-border-width) solid var(--mega-menu-border-color);
  border-bottom: var(--mega-menu-bottom-border-width, var(--mega-menu-border-width)) solid var(--mega-menu-bottom-border-color, var(--mega-menu-border-color));
  pointer-events: auto;
  box-sizing: border-box;
}
.wm-mega-menu[data-layout="inset"] .mega-menu-wrapper {
  width: 100%;
  border-radius: var(--mega-menu-border-radius);
  max-height: calc(var(--mega-menu-max-height) - var(--header-bottom));
  transition: transform 0.3s ease, width 0.3s ease, height 0.3s ease, max-width 0.3s ease;
}
.wm-mega-menu[data-layout="full-width"] .mega-menu-wrapper {
  border-radius: 0 0 var(--mega-menu-border-radius) var(--mega-menu-border-radius);
  transition: transform 0.3s ease, width 0.3s ease, height 0.3s ease, max-width 0.3s ease;
}

.wm-mega-menu.open .mega-menu-wrapper {
  opacity: 1;
  z-index: var(--z-index);
}

/*Absolute*/
.wm-mega-menu .mega-menu-absolute {
  position: absolute;
  display: flex;
  height: var(--active-menu-height);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  overflow-x: hidden;
}

.wm-mega-menu-plugin[data-layout="full-width"].wm-mega-menu--open #header {
  background-color: transparent;
}
.wm-mega-menu[data-layout="full-width"] .mega-menu-wrapper {
  width: 100% !important;
}

.mega-menu-item {
  flex-grow: 1;
  flex-shrink: 0;
  width: 100%;
  align-self: flex-start;
  overflow-y: auto;
  height: var(--active-menu-height, 0px);
  max-height: var(--mega-menu-max-height);
}
.header-menu-nav-folder .mega-menu-item {
  overflow-y: hidden;
  height: unset;
  min-height: var(--active-menu-height, 0px);
  max-height: unset;
}
.header-menu-nav-folder .mega-menu-item .page-section:first-child {
  padding-top: 0px !important;
}

.mega-menu-item {
  opacity: 0;
  transition: opacity 0.3s ease, max-height 0.3s ease, height 0.3s ease;
}
.header-menu .mega-menu-item {
  opacity: 1;
}
.mega-menu-item.active {
  opacity: 1;
  transition: opacity 0.3s ease, max-height 0.3s ease, height 0.3s ease;
}

.header-menu .mega-menu-item .content-wrapper {
  opacity: 1;
  visibility: visible;
  transform: translateX(0px);
}

.mega-menu-item > .page-section:first-child {
  padding-top: var(--header-bottom, 0px) !important;
}

.wm-mega-menu-plugin .header-nav-item--mega-menu a.mega-menu-link {
  display: inline-flex;
  align-items: center;
  gap: var(--trigger-icon-gap);
  position: relative;
}
.header-nav-item:not(:has(svg)) > a[href*="#wm-mega"] {
  margin-right: calc(var(--trigger-icon-size, 15px) + var(--trigger-icon-gap, 4px));
}
.mega-menu-link > svg {
  width: var(--trigger-icon-size);
  height: var(--trigger-icon-size);
  transition: transform 0.3s ease;
  animation: wmMoveUpFadeIn 0.3s ease-out;
}

/*Squarespace Icons*/
.mega-menu-link .mega-menu-dropdown-icon {
  width: var(--trigger-icon-size, 15px);
  height: var(--trigger-icon-size, 15px);
  display: flex;
  align-items: center;
}
.mega-menu-link .mega-menu-dropdown-icon svg{
  fill: var(--navigationLinkColor);
  stroke: var(--navigationLinkColor);
  width:100%;
  height:100%;
  transition: transform 0.3s ease;
  transform-origin: center center;
}
.wm-mega-menu-plugin:has(.mega-menu-dropdown-icon) {
  --active-menu-icon-transform: rotate(180deg);
}

@keyframes wmMoveUpFadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.header-nav-item--mega-menu.mega-menu--active a.mega-menu-link svg,
.header-nav-item--mega-menu a.mega-menu-link:hover svg {
  transform: var(--active-menu-icon-transform, translate(0px, 2px));
}

/*Overlay*/
.mega-menu-page-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: var(--background-overlay-color);
  backdrop-filter: blur(var(--background-overlay-blur));
  z-index: 99;
  animation: wmFadeOut 0.3s ease-out forwards;
}
.mega-menu-page-overlay + #sections {
  z-index: 1;
}
.wm-mega-menu--open .mega-menu-page-overlay {
  animation: wmFadeIn 0.3s ease-out forwards;
}

@keyframes wmFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes wmFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Swing animation */
body:not(.header--menu-open) #header:has(.wm-mega-menu[data-open-animation="swing"]) {
  perspective: 1000px;
  transform-style: preserve-3d;
}
.wm-mega-menu[data-open-animation="swing"] {
  transform-origin: center top;
  backface-visibility: hidden;
}

/*Mobile Folders*/
.mobile-mega-menu-folder.header-menu-nav-folder {
  justify-content: start;
}
.mobile-mega-menu-folder .mega-menu-item {
  text-align: initial;
  width: 100% !important;
}
.mobile-mega-menu-folder .header-menu-nav-folder-content {
  flex-grow: 0;
}
/*Hide duplicate dropdown icon*/
[data-folder-id] .header-dropdown-icon + .header-dropdown-icon,
[data-folder] .header-dropdown-icon + .header-dropdown-icon {
  display: none;
}

.site-wrapper .header-menu:not(:has([data-folder="root"].header-menu-nav-folder--open)) .header-menu-bg {
  /* transition: background-color 0.3s ease 0.3s; */
  will-change: background-color;
}

.header-nav-folder-title.mega-menu-link + .header-nav-folder-content {
  display: none !important;
}

/*Inset Layout*/
.wm-mega-menu[data-layout="inset"] .mega-menu-item .page-section:first-child {
  padding-top: 0px !important;
}
.wm-mega-menu[data-layout="inset"] .mega-menu-item {
  width: var(--mega-menu-max-width);
  max-height: calc(var(--mega-menu-max-height) - var(--header-bottom));
}
@media (min-width: 768px) {
  .wm-mega-menu[data-layout="inset"] .mega-menu-item .fluid-engine {
    --container-width: min(var(--sqs-site-max-width, 1500px), calc(var(--mega-menu-max-width) - var(--sqs-site-gutter, 4vw) * 2 - var(--inset-padding)));
  }
}

/*Arrow*/
.wm-mega-menu[data-layout="inset"] .mega-menu-arrow {
  display: none;
  position: absolute;
  display: inline-block;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  opacity: 0;
  transform: rotate(45deg);
  background-color: var(--mega-menu-arrow-color, white);
}
.wm-mega-menu[data-layout="inset"].open .mega-menu-arrow {
  display: block;
}

/*Force Gallery Section as Grid to Show*/
/*Really the data-show attribute should get added to this parent...*/
.mobile-mega-menu-folder .gallery-grid--layout-grid .gallery-grid-item-wrapper {
  opacity: 1;
}

/*=== Buttons in Mobile Mega Menu Override*/
.site-wrapper .header-menu .header-menu-nav .page-section a.sqs-button-element--primary:not(.btn) {
  color: var(--primaryButtonTextColor);
}
.site-wrapper .header-menu .header-menu-nav .page-section a.sqs-button-element--secondary:not(.btn) {
  color: var(--secondaryButtonTextColor);
}
.site-wrapper .header-menu .header-menu-nav .page-section a.sqs-button-element--tertiary:not(.btn) {
  color: var(--tertiaryButtonTextColor);
}

/*Outline Buttons in Mobile Mega Menu Override*/
body.primary-button-style-outline .site-wrapper .header-menu .header-menu-nav .page-section a.sqs-button-element--primary:not(.btn) {
  color: var(--primaryButtonBackgroundColor);
}
body.secondary-button-style-outline .site-wrapper .header-menu .header-menu-nav .page-section a.sqs-button-element--secondary:not(.btn) {
  color: var(--secondaryButtonBackgroundColor);
}
body.tertiary-button-style-outline .site-wrapper .header-menu .header-menu-nav .page-section a.sqs-button-element--tertiary:not(.btn) {
  color: var(--tertiaryButtonBackgroundColor);
}
@media (hover: hover) {
  body.primary-button-style-outline .site-wrapper .header-menu .header-menu-nav .page-section a.sqs-button-element--primary:hover,
  body.primary-button-style-outline .tock-block div#Tock_widget_container > div.TockWidgetWrapper .TockButton-blue.sqs-button-element--primary:hover {
    background: var(--primaryButtonBackgroundColor);
    color: var(--primaryButtonTextColor);
  }
  body.secondary-button-style-outline .site-wrapper .header-menu .header-menu-nav .page-section a.sqs-button-element--secondary:hover,
  body.secondary-button-style-outline .tock-block div#Tock_widget_container > div.TockWidgetWrapper .TockButton-blue.sqs-button-element--secondary:hover {
    background: var(--secondaryButtonBackgroundColor);
    color: var(--secondaryButtonTextColor);
  }
  body.tertiary-button-style-outline .site-wrapper .header-menu .header-menu-nav .page-section a.sqs-button-element--tertiary:hover,
  body.tertiary-button-style-outline .tock-block div#Tock_widget_container > div.TockWidgetWrapper .TockButton-blue.sqs-button-element--tertiary:hover {
    background: var(--tertiaryButtonBackgroundColor);
    color: var(--tertiaryButtonTextColor);
  }
}

/**
* Fix odd visibiltiy of summary links within Mega Menu
**/
body:not(.wm-mega-menu--open) .wm-mega-menu .sqs-block-summary-v2 .summary-item {
  visibility: hidden !important;
}
body.wm-mega-menu--open .wm-mega-menu .sqs-block-summary-v2 .summary-item {
  visibility: visible;
} 

/**
* With Tabs Plugin
**/
.wm-mega-menu:not(.open) .wm-tabs{
  height: 0px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
/* .wm-mega-menu.open .wm-tabs{
  display:block;
} */

/*Account Link*/
.wm-mega-menu-plugin #accountFrame{
  z-index: 20002;
}

/*Hide Duplicate Dropdown Icons*/
.wm-mega-menu-plugin .header-nav-item:not(.header-nav-item--mega-menu) span.header-dropdown-icon {
  display: flex;
}
.header-nav-item--mega-menu:has(.mega-menu-dropdown-icon) .header-dropdown-icon {
  display:none;
}
.header-nav-item--mega-menu:has(.mega-menu-link > svg)  .header-dropdown-icon {
  display:none;
}

/*Hide duplicate dropdown icon*/
#header .header-dropdown-icon ~ .header-dropdown-icon{
  display: none !important;
}


/*Hide dropdown flash w/ mega menu*/
.header-nav-item--folder:has([href*="-wm-mega-"].header-nav-folder-title) .header-nav-folder-content{
  display:none;
}

/*Editor Placeholder*/
.mega-menu-editor-placeholder {
  padding: 40px 20px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  background: var(--siteBackgroundColor);
}
.mega-menu-placeholder-content {
  text-align: center;
  max-width: 500px;
}
.mega-menu-placeholder-message h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
  color: var(--headingLargeColor);
}
.mega-menu-placeholder-message p {
  margin: 0 0 12px 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--paragraphMediumColor);
}
.mega-menu-placeholder-message code {
  background: hsla(var(--safeDarkAccent-hsl), 0.1);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 13px;
}
.mega-menu-placeholder-link {
  display: inline-block;
  margin-top: 8px;
  padding: 10px 20px;
  background: var(--primaryButtonBackgroundColor);
  color: var(--primaryButtonTextColor) !important;
  text-decoration: none !important;
  border-radius: 4px;
  font-size: 14px;
  transition: opacity 0.2s ease;
}
.mega-menu-placeholder-link:hover {
  opacity: 0.85;
}