/* ═══════════════════════════════════════════════════════════
   MOBILE NAV FOR THE APP LANDING PAGES

   FallGuard, VANTA//SSH and WaveLink Pro each hide their nav links below
   768px and never put anything in their place, so on a phone those links
   were simply unreachable — wavelinkpro's stylesheet even labels it
   "simple mobile behavior". This adds the missing toggle.

   It has to sit on top of three different naming conventions
   (.nav__links, .nav-links) coming from three stylesheets, each of which
   sets a hard `display: none` inside its own media query. The `!important`
   on display below is deliberate and is the narrow case it exists for:
   re-showing something another sheet has switched off.

   Colours are inherited (currentColor / translucent black) so the panel
   reads correctly on all three dark themes without per-app overrides.
   ═══════════════════════════════════════════════════════════ */

.app-burger {
  display: none;
  position: relative;
  z-index: 2;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;              /* 44px keeps it at the minimum touch target */
  height: 44px;
  padding: 0;
  margin-left: auto;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
}

.app-burger span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 0 auto;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

/* Bars fold into a cross while the panel is open */
.app-nav-open .app-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.app-nav-open .app-burger span:nth-child(2) { opacity: 0; }
.app-nav-open .app-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
  .app-burger { display: flex; }

  /* Each app's own rule is a single class inside a media query; these are
     more specific and load later, but display is forced regardless because
     the value being overridden is `none`. */
  .app-nav-open .nav-links,
  .app-nav-open .nav__links,
  .app-nav-open ul.nav-links,
  .app-nav-open ul.nav__links {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0.5rem 0;
    list-style: none;
    background: rgba(8, 8, 14, 0.97);
    border-top: 1px solid rgba(140, 200, 255, 0.15);
    border-bottom: 1px solid rgba(140, 200, 255, 0.15);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
    max-height: calc(100vh - 100%);
    overflow-y: auto;
  }

  .app-nav-open .nav-links li,
  .app-nav-open .nav__links li { width: 100%; }

  .app-nav-open .nav-links a,
  .app-nav-open .nav__links a {
    display: block;
    padding: 0.85rem 1.25rem;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
  }

  /* The dropdown is absolutely positioned, so the bar has to be a positioning
     context. Applied only where the bar is otherwise `static` - the class is
     added by the script after checking the computed value. Setting it
     unconditionally overrode FallGuard's `position: fixed` header and dropped
     the whole bar out of the viewport. */
  .app-nav-anchor { position: relative; }
}

@media (prefers-reduced-motion: reduce) {
  .app-burger span { transition: none; }
}