/* = Megamenu Base Styles
----------------------------------------------- */

/* Hide submenus by default */
.main-navigation li.megamenu > ul.sub-menu {
	display: none;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	left: 0;
	width: 100vw;
	top: 100%;
	z-index: 1000;
	background-color: #fff;
	transition: none;
}

/* Show submenu when parent is focused */
.main-navigation li.megamenu.focus > ul.sub-menu {
	display: block;
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

/* Limit inner content to container width */
.main-navigation li.megamenu > ul.sub-menu .megamenu-inner {
	width: 100%;
	max-width: 1200px; /* Adjust this to match your .container */
	margin: 0 auto;
	padding: 0;
	display: block;
	position: relative;
}

/* Remove default WP submenu styling */
.main-navigation li.megamenu > ul.sub-menu li {
	all: unset;
	display: block;
}

/* Ensure WPBakery spacing works naturally */
.main-navigation li.megamenu > ul.sub-menu .vc_row {
	margin-left: 0;
	margin-right: 0;
}


/*button and links animation*/

.main-navigation li.megamenu .vc_btn3-container.vc_btn3-inline {
  transition: transform 0.2s ease-out;
}

.main-navigation li.megamenu .vc_btn3-container.vc_btn3-inline:hover {
  transform: scale(1.03);
}


/* Initial hidden state */
.main-navigation li.megamenu > ul.sub-menu {
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Animate when opening */
.main-navigation li.megamenu.focus > ul.sub-menu {
  opacity: 1;
  transform: translateY(0);
}



/* Force megamenu buttons to stack vertically and reduce spacing */
.main-navigation li.megamenu .megamenu-inner .vc_btn3-container.vc_btn3-inline {
  display: block !important;
  margin-bottom: 6px !important;
  vertical-align: top !important;
}



/* Fake close icon for megamenu using ::after */
.megamenu-close-area {
  position: fixed;
  top: 10px;
  right: 16px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  cursor: pointer;
  pointer-events: auto;
}

.megamenu-close-icon {
  display: block;
  width: 16px;
  height: 16px;
  opacity: 0.4;
  transition: opacity 0.2s ease;
}

.megamenu-close-area:hover .megamenu-close-icon {
  opacity: 0.7;
}



/* Top nav links */
.main-navigation > ul > li > a {
  cursor: pointer !important;
}

/* Top nav items with no <a>, like .noLink */
.main-navigation > ul > li.noLink,
.main-navigation > ul > li.noLink > span {
  cursor: pointer !important;
}





/* anchor the absolute layer */
.site-header,
.main-navigation { position: relative; z-index: 1000; }

/* keep LIs from becoming positioning context */
.main-navigation > ul > li { position: static !important; }

/* one rule to place every mega submenu full‑width and centered */
.main-navigation li.megamenu > ul.sub-menu{
  left: 50% !important;          /* center to viewport */
  right: auto !important;
  transform: translateX(-50%) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 !important;
  overflow: visible;
}

/* center inner content container you already have */
.main-navigation li.megamenu > ul.sub-menu .megamenu-inner{
  max-width: 1200px;             /* match your container */
  margin: 0 auto;
  padding: 0 0;                  /* keep your padding choice */
}

/* ensure it sits above page content */
.main-navigation li.megamenu > ul.sub-menu { z-index: 2000; }

/* admin bar offset for fixed headers (optional) */
body.admin-bar .main-navigation li.megamenu > ul.sub-menu{
  top: calc(100%);               /* adjust if your header is fixed and taller */
}

/* if you ever want the layer to snap to the RIGHT edge instead of centered, swap block above with: */
/*
.main-navigation li.megamenu > ul.sub-menu{
  left: auto !important;
  right: 0 !important;
  transform: none;
  width: 100vw !important;
}

/* Make header the containing block that spans the viewport */
.site-header { position: fixed; left: 0; right: 0; width: 100%; z-index: 1000; }

/* Prevent inner wrappers from becoming containing blocks */
#site-navigation,
.main-navigation,
.main-navigation > ul,
.main-navigation > ul > li { position: static !important; }

/* One rule for every mega submenu: full-width on the viewport */
.main-navigation li.megamenu > ul.sub-menu{
  position: absolute;
  top: 100%;           /* sits right under the header */
  left: 0;
  right: 0;            /* now anchors to the header, not the <li> */
  width: 100vw;
  max-width: 100vw;
  margin: 0;
  transform: none;
  z-index: 2000;
}

/* Center your existing inner container */
.main-navigation li.megamenu > ul.sub-menu .megamenu-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

/* Admin bar offset if needed */
body.admin-bar .site-header { top: 32px; }
@media (max-width:782px){
  body.admin-bar .site-header { top: 46px; }
}