/* =====================
   MENU BASE
===================== */

.menu {
  display: flex;
  justify-content: center;
  width: 100%;
}

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

.menu-item {
  margin: 4px 0;
}

.menu-list a,
.menu-links a,
.menu-item a {
  text-decoration: none !important;
  color: var(--color-offwhite) !important;
  font-family: "Nunito Sans", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}

.menu-list a:hover,
.menu-list a:focus,
.menu-list a:active,
.menu-links a:hover,
.menu-links a:focus,
.menu-links a:active {
  text-decoration: none !important;
  color: var( --color-terracota) !important;
  outline: none;
}

.menu-list a:visited,
.menu-links a:visited {
  color: var(--color-offwhite) !important;
  text-decoration: none !important;
}

.menu-list a,
.menu-links a {
  -webkit-text-decoration-skip: none;
  text-decoration-skip-ink: none;
}


/* Barra superior fixa */
.menu-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
}

/* Links expansíveis */
.menu-links {
  display: none;
  /* escondidos por padrão */
  flex-direction: column;
  align-items: center;
}

/* Quando o menu abre */
.menu-list.open .menu-links {
  display: flex;
}

/* Logo */
.menu-logo img {
  height: 40px;
  display: block;
}

.logo-desktop {
  display: inline;
}

.logo-mobile {
  display: none;
}

/* Toggle */
.menu-toggle button {
  background: none;
  border: none;
  font-size: 1.8rem;
  color: var(--color-offwhite);
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

/* =====================
   MOBILE + TABLET
===================== */
@media (max-width: 1023px) {

.menu-glass{
    background: rgba(255, 255, 255, 0.15); /* vidro */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); /* Safari sendo Safari */
  overflow: hidden !important;
  z-index: 10000;
  position: relative;

}

  /* Mostra logo mobile */
  .logo-desktop {
    display: none !important;
  }

  .logo-mobile {
    display: block !important;
  }

  /* Mostra botão central e toggle */
  .menu-button {
    display: block !important;
  }

  .menu-toggle {
    display: block !important;
  }

  /* Esconde o item com btn-glass dentro dos links no mobile */
  .menu-links .btn-glass {
    display: none !important;
  }
}

/* =====================
   DESKTOP
===================== */
@media (min-width: 1024px) {

  /* Garante que a linha do menu seja um flex container alinhado verticalmente */
  .menu {
    display: flex;
    align-items: center;
    /* centraliza verticalmente todo o conteúdo do nav */
    width: 100%;
  }

  /* A lista principal também alinha verticalmente seus itens */
  .menu-list {
    display: flex;
    align-items: center;
    /* centraliza logo e links na mesma linha */
    width: 100%;
    gap: 0;
  }

  /* Topbar ocupa apenas o espaço da logo no desktop */
  .menu-topbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    /* apenas o necessário para a logo */
    margin-right: 24px;
    /* separação entre logo e links (ajuste conforme necessário) */
  }

  /* Normaliza a altura do logo para evitar desalinhamentos */
  .menu-logo {
    display: flex;
    align-items: center;
    height: 56px;
    /* altura da área do logo; ajuste conforme seu design */
  }

  .menu-logo img {
    height: 40px;
    /* altura visual do símbolo; ajuste conforme necessário */
    width: auto;
    display: block;
  }

  /* Faz os links ocuparem o restante da linha e alinharem verticalmente */
  .menu-links {
    display: flex !important;
    /* ocupa o espaço restante */
    align-items: center;
    /* centraliza verticalmente os itens do menu */
    justify-content: flex-end;
    gap: 0;
    /* espaçamento entre itens do menu */
  }

  /* Cada item do menu como inline-flex para alinhamento interno consistente */
  .menu-links .menu-item {
    display: inline-flex;
    align-items: center;
  }

  /* Esconde controles mobile no desktop (mantido por segurança) */
  .menu-button,
  .menu-toggle {
    display: none !important;
  }


  .menu-button,
  .menu-toggle {
    display: none !important;
  }

  .logo-desktop {
    display: inline !important;
  }

  .logo-mobile {
    display: none !important;
  }

  .menu-links {
    display: flex !important;
    flex-direction: row;
    justify-content: flex-end;
  }

  .menu-links .menu-item {
    margin-left: 25px;
  }
}