/* Lexithra — main nav: logo · Home · Products dropdown · Leaderboard · Contact · Login */

.lx-main-nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(22, 22, 26, 0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #323236;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03);
}

.lx-main-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0 1rem;
  max-width: 1120px;
  margin: 0 auto;
  height: 4.5rem;
  overflow: visible;
}

@media (min-width: 640px) {
  .lx-main-nav-inner { padding: 0 1.5rem; gap: 1rem; }
}

.lx-main-nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: #fafafa;
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.lx-main-nav-brand img {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 0.45rem;
}

.lx-main-nav-menu {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  flex: 1;
  min-width: 0;
  padding: 0 0.5rem;
  overflow: visible;
}

@media (min-width: 1024px) {
  .lx-main-nav-menu { display: flex; gap: 0.75rem; }
}

/* Base pill — always keep variant colors */
.lx-main-nav .lx-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  background-clip: padding-box;
  -webkit-background-clip: padding-box;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

@media (min-width: 1280px) {
  .lx-main-nav .lx-nav-btn { font-size: 0.8125rem; padding: 0.42rem 0.85rem; }
}

.lx-main-nav .lx-nav-btn i { font-size: 0.65rem; opacity: 0.9; }

.lx-main-nav .lx-nav-btn-tag {
  display: none;
  font-weight: 400;
  opacity: 0.8;
}

@media (min-width: 1280px) {
  .lx-main-nav .lx-nav-btn-tag { display: inline; }
}

.lx-main-nav .lx-nav-btn--casequest,
.lx-main-nav .lx-nav-btn--casequest:link,
.lx-main-nav .lx-nav-btn--casequest:visited {
  color: #93c5fd;
  background: linear-gradient(135deg, rgba(30, 58, 95, 0.72), rgba(59, 130, 246, 0.28));
  border-color: rgba(59, 130, 246, 0.55);
}

.lx-main-nav .lx-nav-btn--casequest:hover,
.lx-main-nav .lx-nav-btn--casequest.active {
  color: #bfdbfe;
  background: linear-gradient(135deg, rgba(30, 58, 95, 0.88), rgba(59, 130, 246, 0.38));
  border-color: rgba(59, 130, 246, 0.75);
}

.lx-main-nav .lx-nav-btn--commercequest,
.lx-main-nav .lx-nav-btn--commercequest:link,
.lx-main-nav .lx-nav-btn--commercequest:visited {
  color: #6ee7b7;
  background: linear-gradient(135deg, rgba(6, 78, 59, 0.72), rgba(16, 185, 129, 0.28));
  border-color: rgba(16, 185, 129, 0.55);
}

.lx-main-nav .lx-nav-btn--commercequest:hover,
.lx-main-nav .lx-nav-btn--commercequest.active {
  color: #a7f3d0;
  background: linear-gradient(135deg, rgba(6, 78, 59, 0.88), rgba(16, 185, 129, 0.38));
  border-color: rgba(16, 185, 129, 0.75);
}

.lx-main-nav .lx-nav-btn--tibbquest,
.lx-main-nav .lx-nav-btn--tibbquest:link,
.lx-main-nav .lx-nav-btn--tibbquest:visited {
  color: #5eead4;
  background: linear-gradient(135deg, rgba(17, 94, 89, 0.72), rgba(20, 184, 166, 0.28));
  border-color: rgba(20, 184, 166, 0.55);
}

.lx-main-nav .lx-nav-btn--tibbquest:hover,
.lx-main-nav .lx-nav-btn--tibbquest.active {
  color: #99f6e4;
  background: linear-gradient(135deg, rgba(17, 94, 89, 0.88), rgba(20, 184, 166, 0.38));
  border-color: rgba(20, 184, 166, 0.75);
}

.lx-main-nav .lx-nav-btn--leaderboard,
.lx-main-nav .lx-nav-btn--leaderboard:link,
.lx-main-nav .lx-nav-btn--leaderboard:visited {
  color: #fde68a;
  background: linear-gradient(135deg, rgba(120, 53, 15, 0.72), rgba(245, 158, 11, 0.28));
  border-color: rgba(245, 158, 11, 0.55);
}

.lx-main-nav .lx-nav-btn--leaderboard:hover,
.lx-main-nav .lx-nav-btn--leaderboard.active {
  color: #fef3c7;
  background: linear-gradient(135deg, rgba(120, 53, 15, 0.88), rgba(245, 158, 11, 0.38));
  border-color: rgba(245, 158, 11, 0.75);
}

.lx-main-nav .lx-nav-btn--contact,
.lx-main-nav .lx-nav-btn--contact:link,
.lx-main-nav .lx-nav-btn--contact:visited {
  color: #fafafa;
  background: #222226;
  border-color: #46464d;
}

.lx-main-nav .lx-nav-btn--contact:hover,
.lx-main-nav .lx-nav-btn--contact.active {
  color: #fafafa;
  background: #2a2a2e;
  border-color: #5c5c65;
}

.lx-main-nav .lx-nav-btn.active {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 4px 12px rgba(0, 0, 0, 0.28);
}

.lx-main-nav .lx-nav-util-link {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #b0b0b8;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s;
}

.lx-main-nav .lx-nav-util-link:hover { color: #fafafa; }
.lx-main-nav .lx-nav-util-link.active { color: #fafafa; }

/* Products & Services dropdown */
.lx-nav-dropdown {
  position: relative;
}

.lx-nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s;
}

.lx-nav-dropdown-trigger.lx-nav-util-link {
  color: #b0b0b8;
}

.lx-nav-dropdown-trigger i {
  font-size: 0.6rem;
  opacity: 0.75;
  transition: transform 0.15s;
}

.lx-nav-dropdown:hover .lx-nav-dropdown-trigger,
.lx-nav-dropdown.open .lx-nav-dropdown-trigger,
.lx-nav-dropdown.active .lx-nav-dropdown-trigger {
  color: #fafafa;
}

.lx-nav-dropdown.open .lx-nav-dropdown-trigger i,
.lx-nav-dropdown:hover .lx-nav-dropdown-trigger i {
  transform: rotate(180deg);
}

/* Invisible bridge so hover stays active while moving to panel */
.lx-nav-dropdown::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 0.65rem;
  display: none;
}

.lx-nav-dropdown:hover::after,
.lx-nav-dropdown.open::after {
  display: block;
}

.lx-nav-dropdown-panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 14rem;
  padding: 0.5rem;
  border-radius: 0.85rem;
  background: #1c1c20;
  border: 1px solid #323236;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s, visibility 0.15s, transform 0.15s;
  z-index: 320;
}

.lx-nav-dropdown:hover .lx-nav-dropdown-panel,
.lx-nav-dropdown.open .lx-nav-dropdown-panel,
.lx-nav-dropdown:focus-within .lx-nav-dropdown-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.lx-nav-dropdown-panel .lx-nav-btn {
  width: 100%;
  justify-content: flex-start;
}

.lx-main-nav-utils {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.lx-main-nav-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid #323236;
  border-radius: 0.65rem;
  background: #222226;
  color: #b0b0b8;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.lx-main-nav-menu-btn:hover {
  color: #fafafa;
  background: #2a2a2e;
}

@media (min-width: 1024px) {
  .lx-main-nav-menu-btn { display: none; }
}

.lx-main-nav-drawer {
  display: none;
  border-top: 1px solid #323236;
  background: #16161a;
  padding: 0.75rem 1rem 1rem;
  max-width: 1120px;
  margin: 0 auto;
}

.lx-main-nav-drawer.open { display: block; }

.lx-main-nav-drawer-link,
.lx-main-nav-drawer-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.65rem 0.85rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 0.35rem;
  border: 1px solid transparent;
}

.lx-main-nav-drawer-link--text {
  color: #dbdbde;
  font-weight: 500;
  background: transparent;
  border-color: transparent;
}

.lx-main-nav-drawer-link--text:hover { background: #222226; color: #fafafa; }

.lx-nav-drawer-details {
  margin-bottom: 0.35rem;
  border-radius: 0.75rem;
}

.lx-nav-drawer-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.65rem 0.85rem;
  border-radius: 0.75rem;
  border: 1px solid #46464d;
  background: #222226;
  color: #dbdbde;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  list-style: none;
  transition: color 0.15s, background 0.15s;
}

.lx-nav-drawer-summary::-webkit-details-marker { display: none; }

.lx-nav-drawer-summary i {
  font-size: 0.65rem;
  transition: transform 0.15s;
}

.lx-nav-drawer-details[open] .lx-nav-drawer-summary,
.lx-nav-drawer-details.active .lx-nav-drawer-summary {
  color: #fafafa;
  background: #2a2a2e;
}

.lx-nav-drawer-details[open] .lx-nav-drawer-summary i {
  transform: rotate(180deg);
}

.lx-nav-drawer-group-panel {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.45rem 0 0.15rem;
}

.lx-main-nav-drawer-btn--contact {
  color: #fafafa;
  background: #222226;
  border-color: #46464d;
}

.lx-main-nav-drawer-btn--casequest {
  color: #93c5fd;
  background: linear-gradient(135deg, rgba(30, 58, 95, 0.78), rgba(59, 130, 246, 0.32));
  border-color: rgba(59, 130, 246, 0.6);
}

.lx-main-nav-drawer-btn--commercequest {
  color: #6ee7b7;
  background: linear-gradient(135deg, rgba(6, 78, 59, 0.78), rgba(16, 185, 129, 0.32));
  border-color: rgba(16, 185, 129, 0.6);
}

.lx-main-nav-drawer-btn--tibbquest {
  color: #5eead4;
  background: linear-gradient(135deg, rgba(17, 94, 89, 0.78), rgba(20, 184, 166, 0.32));
  border-color: rgba(20, 184, 166, 0.6);
}

.lx-main-nav-drawer-btn--leaderboard {
  color: #fde68a;
  background: linear-gradient(135deg, rgba(120, 53, 15, 0.78), rgba(245, 158, 11, 0.32));
  border-color: rgba(245, 158, 11, 0.6);
}

.lx-main-nav-drawer-auth {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #323236;
}

.lx-main-nav-drawer-auth:empty { display: none; }

/* Keep header nav vivid when auth/section gates are active */
body.lx-page-locked .lx-main-nav,
body.lx-page-locked .lx-main-nav *,
body.lx-section-locked .lx-main-nav,
body.lx-section-locked .lx-main-nav * {
  filter: none !important;
  opacity: 1 !important;
}

body.lx-section-locked .lx-nav-dropdown-panel .lx-nav-btn--commercequest,
body.lx-section-locked .lx-nav-dropdown-panel .lx-nav-btn--tibbquest,
body.lx-section-locked .lx-nav-drawer-group-panel .lx-main-nav-drawer-btn--commercequest,
body.lx-section-locked .lx-nav-drawer-group-panel .lx-main-nav-drawer-btn--tibbquest {
  pointer-events: none;
  cursor: not-allowed;
}

body.cq-hub .lx-main-nav,
body.cmq-hub .lx-main-nav,
body.tq-hub .lx-main-nav,
body.tq-body .lx-main-nav {
  position: fixed;
  left: 0;
  right: 0;
}

body.cq-hub .cq-hub-hero,
body.cmq-hub .cmq-hub-hero,
body.tq-hub .tq-hub-hero,
body.tq-hub .tq-module-hero,
body.tq-body .tq-main {
  padding-top: 4.5rem;
}