@charset "utf-8";

:root {  
  --menu-color:        var(--primary-color);
  --menu-color-hover:  var(--secondary-color);
  --menu-color-active:  var(--secondary-color);
  --menu-color-active-hover: var(--link-color);
  --menu-bg:           transparent;
  --menu-bg-hover:     #e6e6e6;
  --menu-bg-active:    transparent;

}

/*===============================================/
  HAMBURGER BUTTON (Em SVG)
================================================*/
/*É necessário criar um modulo custom em HTML*/
.hamburger-container {
    padding: 0 5px;
    /* background-color: aqua; */
  }
#hamburger {
		color: #cdc7c7;
		background: none;
		border: none;
		padding: 0px;
		cursor: pointer;
    transition: all 0.3s ease-in-out; 	
	}
#hamburger svg{
		width:  2rem;
		height: 2rem;	
	}
#hamburger:hover{
		color: #FFF;
	}
  /*Definir a class hamburger, nas opções avançadas do modulo*/
@media (min-width: 992px) {
  .module.hamburger {
    display: none;
  }
}
/*===============================================/
  OFFCANVAS Toogler
================================================*/
/*É necessário criar um modulo custom em HTML*/
.toogler-area {
    padding: 0 0px 0 0;
    /* background-color: aqua; */
  }
  .toogler-area #mobile-cta {
    color: #FFF;
    font-size: 32px;
    cursor: pointer;
    background-color: transparent;
    border: none;
  }
  .toogler-area #mobile-cta:hover {
    color: #2c2631;
    font-weight: bold;
  }
  .toogler {
    cursor: pointer;
  }

/*===============================================/
  MENUS GERAL ( X & Y )
================================================*/
ul.mod-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.mod-menu li {
  position: relative;
}
ul.mod-menu li > a,
ul.mod-menu li > span {
  display: block; /*Faz com que o link ocupe todo o tamanho de li*/
  cursor: pointer;
  font-size: 1rem;
  font-weight: normal;
  text-decoration: none;
  letter-spacing: 0.02rem;  
}
/* Accessibility Focus Outline */
ul.mod-menu a:focus-visible {
    outline: 2px solid #0078d4;
    outline-offset: -2px;
}


/*===============================================/
  MENU HORIZONTAL MENU-X
================================================*/
/*estrutura:
 1º nivel <ul id="main-menu" clas="mod-menu">
 2º nivel <ul clas="mod-menu__sub">
 3º nivel <ul clas="mod-menu__sub">
*/

ul.menu-x {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 992px) {
  ul.mod-menu.menu-x {
    display: none;
  }
}

/* Top-level items */
ul.menu-x > li {
  position: relative;
}
ul.menu-x > li > a {
  padding: 0.2rem 0.6rem;  
}
/* Links */
ul.menu-x a {
  display: block;
  padding: 0.6em 1em;
  text-decoration: none;
  color: #f0f0f0;
}
/* Hover and focus states */
ul.menu-x a:hover,
ul.menu-x a:focus {
  font-style: normal;
  text-decoration: underline;
}

/* Submenus (hidden by default) */
ul.menu-x ul.mod-menu__sub {
  position: absolute;
  top: 100%;
  left: 0;
  list-style: none;
  margin: 0;
  padding: 0.5em 0;
  background: white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  z-index: 1000;
}
/* When open (via JS) */
ul.menu-x li.open > ul.mod-menu__sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Third-level submenu (opens to the right) */
ul.menu-x ul.mod-menu__sub ul.mod-menu__sub {
  top: 0;
  left: 100%;
}
/* Submenu links */
ul.menu-x ul.mod-menu__sub a {
  padding: 0.5em 1em;
  color: #333;
  white-space: nowrap;
}
/* Parent indicator arrow */
ul.menu-x li.parent > a::after {
  content: "▾";
  margin-left: 0.4em;
  font-size: 0.8em;
  transition: transform 0.3s ease;
}
ul.menu-x li.open > a::after {
  transform: rotate(180deg);
}

/*===============================================/
  MENU VERTICAL MENU-Y
================================================*/

.menu-container-y{
  width: 290px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
ul.menu-y {
  flex-direction: column;
  width: 100%;
}
/* menu links */
ul.menu-y a,
ul.menu-y span{
  padding: 1rem;
  padding-left: .8rem;
}
/*
  Links Top level-01
------------------------------------------------*/
ul.menu-y > li > a,
ul.menu-y > li > span {
  color: #333;
  font-weight: bold;
  text-transform: uppercase;
  background: #fff;
  transition: background 0.4s ease;
}
ul.menu-y > li > a:hover,
ul.menu-y > li > a:focus {
  background: #eee;
}
/*
  Links level-02 &(>)
------------------------------------------------*/
/* Submenu base state */
ul.menu-y ul.mod-menu__sub {
  overflow: hidden;
  height: 0;
  display: none;
  --menu-animation-duration: 250ms; /* customize per project */
  --menu-animation-easing: easeOutCubic; /* linear | easeInOutQuad | easeOutCubic */
}
/* Visible submenu */
ul.menu-y li.parent.open > ul.mod-menu__sub {
  display: block;
}

/* Submenu links */
ul.menu-y ul.mod-menu__sub li > a,
ul.menu-y ul.mod-menu__sub li > span {
  padding-left: 1rem;
}
ul.menu-y ul.mod-menu__sub a {
  display: block;
  color: #555;
  border-bottom: 1px solid #eee;
  background: #fff;
  transition: background 0.4s ease;
}
ul.menu-y ul.mod-menu__sub a:hover, 
ul.menu-y ul.mod-menu__sub a:focus {
  background: #eee;
}
/*
  Links level-03 &(>)
------------------------------------------------*/

/* Submenu links */
ul.menu-y ul.mod-menu__sub ul.mod-menu__sub li > a,
ul.menu-y ul.mod-menu__sub ul.mod-menu__sub li > span {
  padding-left: 2.5rem;
}
/*
  Arrow indicator
------------------------------------------------*/
ul.menu-y li.parent > a::after {
  content: "▸";
  position: absolute;
  right: 1em;
  transition: transform 0.3s ease;
}
ul.menu-y li.open > a::after {
  transform: rotate(90deg);
}