/* Altaha Screener — Navigation styles */

.legacy-nav { display: none !important; }

.navwrap {
  margin: 0 0 26px;
  border-bottom: 1px solid var(--rule);
}

.navmain {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-bottom: 1px solid var(--rule);
}

.navmain-btn {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 16px 10px 15px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--mono);
  font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--mute);
  transition: color .18s var(--ease, ease), background .18s var(--ease, ease);
}
.navmain-btn svg { width: 17px; height: 17px; flex: 0 0 auto; }
.navmain-btn:hover { color: var(--ink-2); }
.navmain-btn:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 2px; }

.navmain-btn.on { color: var(--ink); }
.navmain-btn.on::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--gold);
}

.navsub {
  display: flex; align-items: stretch; gap: 12px;
  padding: 0 2px;
  min-height: 52px;
}
.navsub.empty { min-height: 0; padding: 0; }
.navsub.empty .navsub-inner { display: none; }

.navsub-inner {
  display: flex; gap: 2px; flex: 1 1 auto;
  overflow-x: auto; scrollbar-width: none;
}
.navsub-inner::-webkit-scrollbar { display: none; }

.navsub-btn {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 15px 11px;
  background: none; border: 0; cursor: pointer; text-align: left;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: border-color .18s ease, color .18s ease;
}
.navsub-lbl {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--mute);
  transition: color .18s ease;
}
.navsub-hint {
  font-size: 11px; color: var(--mute); opacity: .62;
}
.navsub-btn:hover .navsub-lbl { color: var(--ink-2); }
.navsub-btn.on { border-bottom-color: var(--ink); }
.navsub-btn.on .navsub-lbl { color: var(--ink); }
.navsub-btn.on .navsub-hint { opacity: .85; }
.navsub-btn:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 2px; }

.navlearn {
  align-self: center;
  background: none; border: 1px solid var(--rule); border-radius: 2px;
  padding: 7px 13px; cursor: pointer;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--mute);
  transition: border-color .18s ease, color .18s ease;
  flex: 0 0 auto;
}
.navlearn:hover, .navlearn.on { border-color: var(--gold); color: var(--gold-dp); }
.navlearn:focus-visible { outline: none; box-shadow: var(--ring); }

.navblurb {
  margin: 0; padding: 11px 2px 13px;
  font-size: 12.5px; color: var(--mute);
}

.navmob { display: none; }

@media (max-width: 780px) {
  .navmob {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    background: var(--glass, var(--paper));
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--rule);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .navmob-inner { display: grid; grid-template-columns: repeat(5, 1fr); }

  .navmob-btn {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 9px 4px 8px; min-height: 52px;
    background: none; border: 0; cursor: pointer; color: var(--mute);
  }
  .navmob-btn svg { width: 20px; height: 20px; }
  .navmob-btn span {
    font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em;
    text-transform: uppercase;
  }
  .navmob-btn.on { color: var(--gold-dp); }

  body { padding-bottom: 66px; }

  .navmain { display: none; }
  .navwrap { border-bottom: 0; margin-bottom: 10px; }
  .navsub { border-bottom: 1px solid var(--rule); min-height: 44px; gap: 8px; }
  .navsub-btn { padding: 9px 12px; }
  .navsub-hint { display: none; }
  .navblurb { display: none; }

  header { padding-top: 18px !important; }
  header .brand { font-size: 34px !important; }
  .pitch, .badges, .hero-candles, .metal { display: none !important; }
}

@media (max-width: 560px) {
  .navsub-lbl { font-size: 10px; letter-spacing: .08em; }
  .navlearn { padding: 6px 10px; }
}

/* Hide the extra Social tab that another script still paints on the desktop bar. */
.navmain #altaha-social-open,
.navmain > *:not(.navmain-btn) { display: none !important; }