/* Base Header styles */
.siteHeader {
  background: #ffffff;
  padding: 25px 0;
  border-bottom: 1px solid #ececec;
  margin: 0 0 30px 0;
  width: 100%;
}

.siteHeader .container {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "logo nav buttons";
  align-items: center;
  gap: 5px;
  padding: 0 60px;
}

.siteHeader-left {
  grid-area: logo;
}

.mainNav {
  grid-area: nav;
}

.header-right {
  grid-area: buttons;
}

/* Logo and Title styles */
.siteHeader-name {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.custom-logo {
  width: 58px;
  height: auto;
  transition: width 0.3s ease;
}

.custom-logo svg {
  width: 100%;
  height: 100%;
  fill: var(--corLogo);
}

.site-title {
  font-family: 'Maven Pro', sans-serif;
  font-size: 24px;
  font-weight: 600;
  margin-right: 15px;
  text-transform: uppercase;
  transition: font-size 0.3s ease;
}

/* Navigation styles */
.mainNav-list {
  display: flex; 
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

.mainNav-list li {
  margin-right: 10px;
  position: relative;
}

.mainNav-list a {
  color: #5a5a5a;
  text-decoration: none;
  font-family: 'Maven Pro', sans-serif;
  font-size: 16px;
  font-weight: lighter;
  letter-spacing: 0.5px;
  padding: 8px 8px;
  border: 2px solid transparent;
}

.mainNav-list a:hover {
  border-color: #e9e9e998;
  border-radius: 15px;
}

.searchToggle {
  position: absolute;
  right: 60px;
  background: none;
  border: none;
  color: #4f4f4f;
  font-size: 24px;
  cursor: pointer;
  transition: color 0.3s ease;
  display: flex;
  align-items: center;
  z-index: 1000;
  margin-left: -20px;
}

.searchToggle .material-symbols-outlined {
  font-size: 24px;
}

/* Submenu styles */
.mainNav-list .menu-item-has-children {
  position: relative;
}

.mainNav-list .menu-item-has-children > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  white-space: nowrap;
}

.mainNav-list .menu-item-has-children > a::after {
  content: 'keyboard_arrow_down';
  font-family: 'Material Symbols Outlined';
  font-size: 18px;
  margin-left: 10px;
  font-weight: bold;
  transition: none;
}

.mainNav-list .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #ebebeb;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 0;
  min-width: 200px;
  z-index: 4000;
  overflow: hidden;
}

.mainNav-list .sub-menu li {
  display: block;
  margin: 0;
  width: 100%;
}

.mainNav-list .sub-menu a {
  background-color: #ececec;
  font-family: 'Maven Pro', sans-serif;
  display: block;
  padding: 22px 20px;
  color: #646464;
  font-size: 14px;
  font-weight: 400;
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-radius: 0;
}

.mainNav-list .sub-menu a:hover {
  background-color: #d4d4d4;
}

/* Estilos específicos para o primeiro item do submenu */
.mainNav-list .sub-menu li:first-child a {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

/* Estilos específicos para o último item do submenu */
.mainNav-list .sub-menu li:last-child a {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* Remove estilos específicos para itens do meio */
.mainNav-list .sub-menu li:not(:first-child):not(:last-child) a {
  border-radius: 0;
}

.mainNav-list .menu-item-has-children:hover > .sub-menu,
.mainNav-list .menu-item-has-children.active > .sub-menu {
  display: block;
}

.mainNav-list .menu-item-has-children:hover > a::after,
.mainNav-list .menu-item-has-children.active > a::after {
  transform: none;
}

/* Active state for menu items with children */
.mainNav-list .menu-item-has-children.active > a {
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-bottom: none;
}

/* Media Queries - Organized by breakpoint */
@media (min-width: 768px) {
  .siteHeader .container {
    padding: 0 60px;
    max-width: 1400px;
    margin: 0 auto;
  }
}

@media (max-width: 1090px) {
  .siteHeader .container {
    padding: 0 30px;
  }
}

@media (max-width: 800px) {
  .siteHeader {
    padding: 0;
  }

  .siteHeader .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    height: 50px;
  }
}

@media (max-width: 798px) {
  .siteHeader .container {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    height: auto;
  }

  .siteHeader-left {
    grid-column: 1;
    grid-row: 1;
    margin-left: 0;
  }

  .mainNav {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
  }

  .mainNav-list {
    justify-content: flex-start;
    gap: 15px;
    flex-wrap: wrap;
  }

  .searchToggle {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (max-width: 767px) {
  .siteHeader {
    padding: 0;
    border-bottom: 1px solid #f2f2f2;
  }

  .siteHeader .container {
    padding: 0 10px;
    height: 50px;
  }

  .siteHeader-logo {
    width: 30px;
    height: 30px;
  }

  .custom-logo svg {
    width: 30px;
  }

  .site-title {
    font-size: 20px;
    margin-top: 5px;
    padding-left: 8px;
  }

  .custom-logo {
    width: 35px;
  }

  .searchToggle {
    top: 15px;
  }
}

@media (max-width: 360px) {
  .siteHeader .container {
    padding: 0 8px;
  }

  .custom-logo {
    width: 30px;
  }

  .site-title {
    font-size: 16px;
    padding-left: 6px;
  }
}

@media (max-width: 800px) {
  .siteHeader .container {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    padding: 10px 15px;
    height: 50px;
  }

  .siteHeader-left {
    grid-column: 1;
  }

  .mainNav {
    display: none;
  }

  .header-right {
    grid-column: 3 / span 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
  }

  .searchToggle,
  .menu-toggle {
    position: static;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Esconde o menu hambúrguer por padrão */
.menu-toggle {
  display: none;
}

@media (max-width: 800px) {
  .siteHeader {
    padding: 0;
    border-bottom: 1px solid #ececec;
  }

  .siteHeader .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    height: 50px;
  }

  /* Esconde a navegação em telas pequenas */
  .mainNav {
    display: none;
  }

  /* Mostra o menu hambúrguer */
  .menu-toggle {
    display: flex;
    background: none;
    border: none;
    padding: 0;
    width: 40px;
    height: 40px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
  }

  .searchToggle {
    background: none;
    border: none;
    padding: 0;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .searchToggle .material-symbols-outlined,
  .menu-toggle .material-symbols-outlined {
    font-size: 28px;
    color: #333;
    font-variation-settings:
      'FILL' 0,
      'wght' 300,
      'GRAD' 0,
      'opsz' 24;
  }

  /* Ajusta o título e logo */
  .custom-logo {
    width: 25px !important;
    height: auto;
  }

  .site-title {
    font-size: 12px;
    margin-left: 6px;
    font-weight: 400;
  }
}

.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.menu-toggle {
  display: none;
}

@media (max-width: 800px) {
  .mainNav {
    display: none;
  }

  .menu-toggle {
    display: flex;
    background: none;
    border: none;
    padding: 0;
    width: 40px;
    height: 40px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 800px) {
  .header-right {
    display: flex;
    align-items: center;
    gap: 15px;
    height: 100%;
  }

  .search-wrapper {
    height: 100%;
    display: flex;
    align-items: center;
  }

  .mobile-menu-wrapper {
    height: 100%;
    display: flex;
    align-items: center;
  }

  .searchToggle,
  .menu-toggle {
    display: flex;
    align-items: center;
  }

  /* Remove o pseudo-elemento caso ainda exista */
  .search-wrapper::after {
    display: none;
  }
}

@media (max-width: 770px) {
  .siteHeader {
    margin-bottom: 30px; /* Adiciona espaço abaixo do header */
  }
}

/* Mobile Menu styles */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: auto;
  height: 100%;
  background: #fff;
  z-index: 9999;
  transform: translateX(-100%);
  overflow-y: auto;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  padding: 35px 0 0;
}

.mobile-menu.active {
  transform: translateX(0);
}

.mobile-menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  width: 100%;
}

.mobile-menu-list li {
  margin: 0;
  border-bottom: 1px solid #ececec;
}

.mobile-menu-list a {
  color: #4F4F4F;
  text-decoration: none;
  font-size: 16px;
  font-family: "Maven Pro", sans-serif;
  display: block;
  padding: 10px 20px;
  width: auto;
}

/* Estilos para submenu */
.mobile-menu-list .sub-menu {
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #E5E5E5;
}

.mobile-menu-list .sub-menu li:last-child {
  border-bottom: none;
}

.mobile-menu-list .sub-menu a {
  padding: 10px 20px;
  width: 260px;
  font-size: 14px;
}

/* Quando o menu está aberto */
body.menu-open {
  overflow: hidden;
}

/* Quando o menu está aberto - escurece o resto da tela */
body.menu-open::after {
  content: '';
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9998;
}

.close-menu {
  position: fixed;
  top: 30px;
  left: 300px;
  background: #000;
  border: none;
  width: 50px;
  height: 50px;
  cursor: pointer;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
}

.close-menu i {
  font-size: 35px;
  color: #ffffff;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.menu-open .close-menu {
  display: flex;
}

/* Remove the old mobile-menu-close styles */
.mobile-menu-close {
  display: none;
}

@media (max-width: 1570px) {
  html {
  }
}

@media (max-width: 1005px) {
  .siteHeader .container {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas: 
      "logo . buttons"
      "nav nav nav";
    row-gap: 20px;
    gap: 5px;
  }

  .mainNav {
    width: 100%;
  }

  .mainNav-list {
    justify-content: flex-start;
    gap: 15px;
    flex-wrap: wrap;
  }

  .searchToggle {
    grid-column: 2;
    grid-row: 1;
  }
}

/* Breakpoint para menu descer */
@media (max-width: 1005px) {
  .siteHeader .container {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas: 
      "logo . buttons"
      "nav nav nav";
    row-gap: 20px;
    gap: 5px;
  }

  .mainNav {
    width: 100%;
  }

  .mainNav-list {
    justify-content: flex-start;
    gap: 15px;
    flex-wrap: wrap;
  }
}

/* Layout mobile em 900px */
@media (max-width: 900px) {
  .siteHeader {
    padding: 0;
    border-bottom: 1px solid #ececec;
  }

  .siteHeader .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    height: 60px;
  }

  .mainNav {
    display: none;
  }

  .header-right {
    display: flex;
    align-items: center;
    gap: 15px;
  }

  /* Mostra o menu hambúrguer */
  .menu-toggle {
    margin-right: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Ajustes para os botões */
  .searchToggle,
  .menu-toggle {
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  .searchToggle {
    position: static;
    margin-left: 0;
  }
}

/* Ajuste o wrapper do search */
.search-wrapper {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

/* Adicione a borda usando pseudo-elemento */
.search-wrapper::after {
  content: '';
  position: absolute;
  left: -15px; /* Ajuste conforme necessário */
  height: 20px; /* Altura da borda */
  width: 1px;
  background-color: #ececec; /* Mesma cor da borda do header */
}

/* Atualize o header-right */
.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Ajuste para mobile */
@media (max-width: 900px) {
  .search-wrapper::after {
    display: none; /* Remove a borda em mobile */
  }
}