/* Section menu for the Nexa bar on phones.

   polish.css hides every nav link but the first below 720px. On Home that is harmless -
   there is one link. On this page it removed Why Nexa / Pricing / Download / Reviews
   outright, and with the page running past 5,800px tall that left no way to reach pricing
   or reviews except scrolling the whole thing. The links collapse into a real menu now
   instead of disappearing.

   Loaded after polish.css so the un-hiding rule below wins on equal ground; it is also
   written one class heavier than polish's, so load order alone is not carrying it. */

/* Above the breakpoint the wrapper generates no box: the bar row lays out exactly as
   it did when these four links were direct children of .bar-links. */
.bar-sections { display: contents; }
.nav-tog { display: none; }

@media (max-width: 720px) {
  .nav-tog {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: var(--r-pill);
    cursor: pointer;
    color: var(--ink-60);
    background: var(--glass-tint);
    border: 1px solid var(--glass-border);
  }
  .nav-tog svg { width: 17px; height: 17px; }
  .nav-tog .ico-x { display: none; }
  .bar.is-nav-open .nav-tog { color: var(--ink); }
  .bar.is-nav-open .nav-tog .ico-bars { display: none; }
  .bar.is-nav-open .nav-tog .ico-x { display: block; }

  .bar-sections {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: clamp(22px, 4.5vw, 56px);
    left: clamp(22px, 4.5vw, 56px);
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    border-radius: var(--r-md);
    border: 1px solid var(--glass-border);
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
    backdrop-filter: blur(18px) saturate(135%);
    box-shadow: 0 24px 60px var(--glass-shadow);
  }
  .bar.is-nav-open .bar-sections { display: flex; }

  /* Outranks polish.css's `.bar-links a:not(.pill):not(:first-child) { display: none }`. */
  .bar .bar-links .bar-sections a:not(.pill) {
    display: block;
    padding: 11px 13px;
    border-radius: var(--r-sm);
    font-size: var(--fs-copy);
    letter-spacing: 0.01em;
    color: var(--ink);
  }
  /* polish.css draws a hover underline on bar links; inside the panel it reads as a bug. */
  .bar .bar-links .bar-sections a:not(.pill)::after { display: none; }
  .bar .bar-links .bar-sections a:not(.pill):hover,
  .bar .bar-links .bar-sections a:not(.pill):focus-visible { background: var(--field-sheen); }
}

@media (prefers-reduced-transparency: reduce) {
  .bar-sections {
    background: var(--bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}