@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:  1.8rem;
		height: 1.8rem;	
	}
#hamburger:hover{
		color: #FFF;
	}
  
/*===============================================/
  HAMBURGER BUTTON (Toogler) 
================================================*/
/*É necessário criar um modulo custom em HTML*/
.toogler-area {
    padding: 0 0px 0 0;
  }
.toogler-area #mobile-cta {
  color: var(--secondary); 
  font-size: 2.3rem;
  cursor: pointer;
  background-color: transparent;
  border: none;
  padding: 05px;
}
.toogler-area #mobile-cta:hover {
  color: #62c933;
  font-weight: bold;
}
  .toogler {
    cursor: pointer;
  }

/*===============================================/
  OFFCANVAS module
================================================*/
  .offcanvas.module .mod-menu {
  margin-top: 35px;
}

/*===============================================/
  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 a{
  text-decoration: none;
}
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 {
  font-family: var(--font-text);
  font-size: .93rem;
  font-weight: 600;
  letter-spacing: 0.03rem;
  text-transform: uppercase;
}
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;
  }
}

/*
  MENUS - 1º Nível
--------------------------------*/
ul.menu-x > li {
  position: relative;
  margin: 0 .5rem;
}
ul.menu-x > li > a {
  padding: 0.3rem 0.1rem;
}
/* Links */
ul.menu-x a {
  display: block;
  padding: 0.6em 1em;
  text-decoration: none;
  color: #333;
}
/* Hover and focus states */
ul.menu-x a:hover,
ul.menu-x a:focus {
  font-style: normal;
  color: var(--secondary-color);
}
ul.menu-x > li.active > a,
ul.menu-x > li.alias-parent-active > a {
    color: var(--secondary-color);
}

/*barrinha horizontal abaixo do link*/
/* ul.menu-x > li > a::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  bottom: 0px;
  width: 0%;
  left: 0%;
  border-top: .1rem solid var(--secondary-color);
  border-bottom: .1rem solid var(--secondary-color);
  border-radius: 2px;
  transition: 0.2s ease-in;
    transition-timing-function: ease-in;
} */
/* ul.menu-x > li > a:hover::before {
  transition-timing-function: ease-in;
  width: 100%;
} */
/* ul.menu-x > li > a:focus::before {
    transition-timing-function: ease-in;
    width: 100%;
} */
 /* ul.menu-x > li.open > a::before {
    transition-timing-function: ease-in;
    width: 100%;
} */
/* ul.menu-x > li.active > a::before,
ul.menu-x > li.alias-parent-active > a::before {
    transition-timing-function: ease-in;
    width: 100%;
} */

/*
  SUBMENUS MENUS - 2º Nível
--------------------------------*/
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: .5s ease;
}
ul.menu-y > li.active > a {
  background-color: rgba(235, 240, 235,0.45);
  color: var(--secondary) !important;
}
ul.menu-y > li > a:hover,
ul.menu-y > li > a:focus {
  background-color: rgba(235, 240, 235,0.6);
  color: var(--secondary) !important;
}
/*
  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);
}





/*===============================================/
  ACTUALIZAÇÕES DE REGRAS NOS MENUS
================================================*/
#nav-middle .module {
  display: flex;
  align-items: center;
  width: initial !important;  
}

.container-nav-left {
  display: flex;
  justify-content: space-between;
  /* justify-content: right; */
  width: 100%;
  /* background-color: #555761; */
}
.container-nav-left .ul.menu-x{
  justify-content: right;
}
.nav-left.module.menu {
  /* background-color: #7d756b; */
}

.container-nav-right {
  display: flex;
  justify-content: space-between;
  /* justify-content: left; */
  width: 100%;
  /* background-color: #555761; */
}
.container-nav-right .ul.menu-x{
  justify-content: left;
}
.nav-right.module.menu {
  /* background-color: #7d756b; */
}


/*Definir a class hamburger, nas opções avançadas do modulo*/
/* @media (min-width: 992px) {
  #nav-middle .module.hamburger {
    display: none;
  }
} */
@media (min-width: 992px) {
  #hamburger {
    display: none;
  }
}

/*===============================================/
  PEDRO'S DROPDOWN MENU
================================================*/
div.dropdown{
    font-family: "Bould", Tahoma, sans-serif;
    max-width: 280px;
    min-width: 200px;
    position: relative;
    background-color: #f6f6f5;
    border: 2px solid #fff;
    border-radius: 50px;
    box-shadow: rgba(125, 128, 136, 0.6) 0px 0px 5px 0px;
}
div.dropdown:hover{            
    background-color: #ededed;
    background-color: hsl(70.1, 100%, 79%);
    border-color: hsl(70.1, 100%, 79%);
    /* background-color: hsl(67.6, 100%, 50%); */
    /* border-color: hsl(67.6, 100%, 50%); */
    /* background-color: hsl(70, 100%, 70%); */
    /* border-color: hsl(70, 100%, 70%); */
    box-shadow: rgba(91, 93, 100, 0.6) 0px 0px 5px 0px;
}
div.dropdown:hover button{
    color: #383c4c;                     
}
div.dropdown button{ 
    color: #383c4c;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    width: 100%;
    padding: .5rem 20px;
    font-size: 1rem;
    font-style: italic;
    text-decoration: none;
    text-transform: none;
    background-color: transparent;
    border: 2px solid #383c4c;
    border-radius: 50px;
    cursor: pointer;         
}
div.dropdown button * {
    pointer-events: none;
}
div.dropdown button i{
    /* font-family: arial;
    font-style: normal; */
    /* rotate: 90deg; */
    transition: rotate 0.1s ease-in-out;
}
div.dropdown.open button i{
    rotate: -180deg;
}
div.dropdown ul.dropdown-menu {
  font-size: .9rem;
  font-weight: 500;
    width: 100%;
    position: absolute;
    top: calc(100% + .1rem);
    left: 0;
    margin: 0;
    padding: .3rem;
    list-style: none;
    background: white;
    border-radius: .375rem;
    max-height: 450px;
    overflow-y: auto;
    box-shadow: 0 4px 7px rgba(0, 0, 0, .1);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, visibility 0.2s ease-in-out;
    z-index: 1000;
}
div.dropdown.open > button + ul.dropdown-menu{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}
div.dropdown ul.dropdown-menu li{
    border-bottom: 1px solid rgb(229, 226, 219);
}
div.dropdown ul.dropdown-menu li:last-child{
    border: none;
}
div.dropdown ul.dropdown-menu li a{
    display: block;
    color: #383c4c;
    text-decoration: none;
    padding: .7rem .9rem;
}
div.dropdown ul.dropdown-menu li:hover a{
    background-color:#f6f6f5;
}

/* Alternative arrow indicator */
.mod-articles-dropdown ul.dropdown-menu::after {
    content: "▼";
    position: absolute;
    right: 15px;
    transition: transform 0.3s ease;
}
/* Scrollbar styling (webkit browsers) */
div.dropdown ul.dropdown-menu::-webkit-scrollbar {
    width: 10px;
}
div.dropdown ul.dropdown-menu::-webkit-scrollbar-track {
    background: #f1f1f1;
    background: pink;
}
div.dropdown ul.dropdown-menu::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}
div.dropdown ul.dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: #555;
}