/* ===================================================================
   FILE        : menu-home.css
   PROJECT     : Lexvora Consulting
   PURPOSE     : HOME header/navigation container styling only.
   NOTE        : All submenu panels live in menu-common-sub.css.
   =================================================================== */

.main-nav {
  position: relative;
}

.main-nav > ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2vw, 31px);
  list-style: none;
}

.main-nav li {
  position: relative;
}

.main-nav a {
  color: #fff;
  font-size: clamp(11px, .78vw, 13px);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  opacity: .94;
  display: inline-block;
}

.main-nav > ul > li > a {
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: all .24s ease;
}

.main-nav > ul > li > a:hover,
.main-nav > ul > li > a:focus-visible,
.main-nav > ul > li > a.menu-hovered {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: #fff;
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 10px 24px rgba(184,132,69,.24);
  transform: translateY(-1px);
}

.main-nav > ul > li > a.is-pressed {
  background: transparent;
  color: #fff;
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

.main-nav a.active {
  color: var(--gold-light);
}

.main-nav > ul > li > a.active {
  background: transparent;
  color: var(--gold-light);
}

.main-nav > ul > li > a.active:hover,
.main-nav > ul > li > a.active.menu-hovered {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: #fff;
}
/* Tablet / mobile collapsed navigation */
@media (max-width: 1180px) {
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: rgba(7,20,33,.98);
    padding: 12px 24px 22px;
    max-height: calc(100vh - 90px);
    max-height: calc(100dvh - 90px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .main-nav.open {
    display: flex;
  }

  .main-nav > ul {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .main-nav > ul > li {
    width: 100%;
  }

  .main-nav a {
    width: 100%;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }

  .main-nav ul ul {
    position: static;
    display: none;
    min-width: 100%;
    padding: 0 0 0 14px;
    background: transparent;
    border: 0;
    box-shadow: none;
    margin: 0;
  }

  .main-nav li.open > ul {
    display: flex;
  }

  .main-nav ul ul a {
    padding: 10px 0 10px 8px;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }

}