:root {
  --mainmenu-textalign: center;
  --mainmenu-weight:600;
  --megamenu-textalign: left;
  --megamenu-weight:600;
  --megamenu-subcat-weight:400;
  --megamenu-gap: min(2vw, 2rem);
  --megamenu-maxwidth: 200px;
  --megamenu-button-padding-inline: 1rem;
  --megamenu-button-padding-vertical: 0.5rem;
  --megamenu-lineheight: 2;
}


/*------------------------------
OVERRIDE CORE DEFAULTS
------------------------------*/

.cmsHorizontalMenu ul > li {
  margin: 0;
  position:unset;
}

.cmsHorizontalMenu ul > li:hover > ul {
  display: grid !important;
}

/*2nd Level*/
.cmsHorizontalMenu ul > li > ul,
.cmsHorizontalMenu ul#nav > li > ul{
  min-width: 0;
  max-width: none;
  background-color: [WSCOL_MENU];
}

/*3rd Level*/
.cmsHorizontalMenu ul#nav ul ul{
    position:relative;
    display: block
}
.cmsHorizontalMenu ul#nav ul > li:hover > ul{
  left: 0% !important;
}


/*------------------------------
MEGA MENU
------------------------------*/


#menu {
  background-color:inherit;
  text-align: var(--mainmenu-textalign);
  line-height: var(--megamenu-lineheight);
  padding: 0px;
  margin: 0px;
}

#menu button.toggle{display:none;}

#menu #nav {
  display: inline-block;
  margin: 0;
}

#menu ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}


/*------------------------------
MEGA BUTTON STYLING
------------------------------*/

#menu li a {
  color: black;
  color: [WSCOL_BUTTON_TEXT];
  padding:var(--megamenu-button-padding-vertical);
  padding-inline: var(--megamenu-button-padding-inline);
  text-decoration: none;
  display: block;
  font-weight:var(--mainmenu-weight);
}

#menu li>a:hover, #menu li:hover>a, #menu>a:visited:hover {
  color: white;
  color:[WSCOL_BUTTON_TEXT_HOVER];
  background-color: #666;
  background-color:[WSCOL_BUTTON_HOVER];
}


/*Mega Menu top-level categories*/
#menu li li > a{
    font-weight:var(--megamenu-weight);
}
/*Mega Menu sub categories*/
#menu li li li > a{
    font-weight:var(--megamenu-subcat-weight);
    font-size:90%;
    line-height: 1.2;
}



/*------------------------------
DROPDOWN 2ND LEVEL
------------------------------*/

#menu ul#nav > li > ul{
    display:none;
    grid-template-columns: repeat(auto-fill, minmax(var(--megamenu-maxwidth), 1fr));
    gap: var(--megamenu-gap);
    background-color:[WSCOL_MENU];
    padding:var(--megamenu-gap);
    box-sizing:border-box;
    position: absolute;
    left: 0;
    right: 0;
    text-align:var(--megamenu-textalign);
}

#menu ul#nav > li:hover > ul{
  display:grid;
}



/*------------------------------
@MEDIA
------------------------------*/

@media (min-width:600px) {
  #menu li {
    display: inline-block;
  }

  #menu li li {
    position: relative;
    display: inline-block;
    width: 100%;
  }

  /* Submenu Look and Feel */
  #menu li li a {}

  #menu li li a:hover, #menu li li a:visited:hover {}
}