/* Phone/tablet navigation, shared by every page except the editor.

   Two bands, because a tablet has room for the links but not for the buttons:

     >= 821px   desktop bar, no sticky
     601-820px  tablet: brand + links + language stay in the bar; the two
                buttons move to the sticky bar
     <= 600px   phone: brand + hamburger only; links and language move into the
                panel, buttons stay in the sticky bar

   Before this the links simply disappeared below 820px with nothing in their
   place, so Instruments / Library / Blog were unreachable on a phone. */

/* ---- both bands: both buttons leave the bar, because the sticky bar below is
   already showing them - two Download buttons on one screen is just noise.
   Above 820px there is no sticky bar, so the nav keeps them (the pages used to
   drop Download from ~1080px down on their own; that hiding is gone). */
@media (max-width: 820px) {
  .nav-in > .nav-download,
  .nav-in > .btn.cta-dl,
  .nav-in > .nav-cta,
  .nav-in > .btn.cta { display: none !important; }
  .nav-in > .nav-links { margin-right: auto; }
}

/* ---- phone: links and language leave too, hamburger appears ---- */
@media (max-width: 600px) {
  .nav-in > .nav-links,
  .nav-in > .nav-lang,
  .nav-in > .lang { display: none !important; }

  .nav-in { justify-content: space-between; }
  .nav-in .brand { margin-right: auto; }
  .mnav-burger { display: inline-flex !important; }

  /* Narrow bar: the Apple mark carries the meaning, so the label folds away
     rather than the whole button disappearing. */
  .nav-in > .nav-download,
  .nav-in > .btn.cta-dl { gap: 0; padding: 10px 13px; }
  .nav-in > .nav-download span,
  .nav-in > .btn.cta-dl span { display: inline-block; width: 0; overflow: hidden; white-space: nowrap; }
}

/* ---- hamburger button ---- */
.mnav-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  flex: none;
  padding: 0;
  border: none;
  border-radius: var(--r-pill);
  background: rgba(24, 21, 9, .06);
  color: var(--on-paper);
  cursor: pointer;
}
.mnav-burger:hover { background: rgba(24, 21, 9, .11); }
.mnav-burger svg { width: 21px; height: 21px; display: block; }
.mnav-burger .mnav-x { display: none; }
.mnav-burger[aria-expanded="true"] .mnav-x { display: block; }
.mnav-burger[aria-expanded="true"] .mnav-bars { display: none; }

/* ---- panel ---- */
.mnav-panel {
  display: none;
  position: absolute;
  left: 50%; transform: translateX(-50%);
  top: calc(100% + 8px);
  width: min(calc(100vw - 28px), 420px);
  background: var(--paper);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-pop);
  padding: 14px;
  z-index: 60;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.mnav-panel.open { display: block; }
/* The panel only exists on phones; on a tablet the links are still in the bar. */
@media (min-width: 601px) { .mnav-panel { display: none !important; } }

/* The cloned link row stacks; the instruments mega-menu becomes a plain list. */
.mnav-panel .nav-links { display: flex; flex-direction: column; align-items: stretch; gap: 2px; margin: 0; }
.mnav-panel .nav-links > a,
.mnav-panel .nav-trigger {
  display: block; width: 100%;
  font: 800 17px 'Hanken Grotesk', sans-serif;
  color: var(--on-paper); text-decoration: none;
  padding: 13px 14px; border-radius: 14px;
  text-align: left; background: none; border: none;
}
.mnav-panel .nav-links > a:hover,
.mnav-panel .nav-trigger:hover { background: rgba(24, 21, 9, .05); }
.mnav-panel .nav-item { display: block; position: static; }
.mnav-panel .nav-trigger svg { display: none; }
.mnav-panel .nav-menu {
  display: grid; position: static; grid-template-columns: 1fr;
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  box-shadow: none; background: none; padding: 0 0 4px; margin: 0; min-width: 0; gap: 8px;
}
.mnav-panel .nav-card { height: auto; min-height: 74px; padding: 12px 14px; border-radius: 16px; }
.mnav-panel .nav-card img { width: 84px; right: -10px; }

.mnav-sep { height: 1px; background: rgba(24, 21, 9, .1); margin: 10px 4px; }

/* ---- language (phone panel) ----
   The bar's dropdown is moved in here, so it needs to sit full width and open
   downward inside the panel rather than hanging off the header. */
.mnav-langslot { padding: 2px 4px 4px; }
.mnav-langslot .langsel { width: 100%; }
.mnav-langslot .langsel-btn {
  width: 100%;
  justify-content: flex-start;
  font-size: 16px;
  padding: 12px 14px;
  border-radius: 14px;
}
.mnav-langslot .langsel-chev { margin-left: auto; }
/* The panel scrolls (overflow-y: auto), which clips an absolutely-positioned
   menu at its edge. Inside the panel the menu is a plain block instead: it
   pushes the panel taller and scrolls with it, so every option is reachable. */
.mnav-langslot .langsel-menu {
  position: static;
  min-width: 0;
  margin-top: 6px;
  padding: 4px;
  box-shadow: none;
  background: rgba(24, 21, 9, .04);
  border-radius: 14px;
  max-height: none;
}
.mnav-langslot .langsel-opt { font-size: 16px; padding: 12px 12px; }

/* ---- sticky bottom CTAs ---- */
.mnav-cta-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  background: var(--green);
  box-shadow: 0 -10px 30px rgba(24, 21, 9, .16);
  pointer-events: none;
}
.mnav-cta-stack {
  display: flex; flex-direction: column; gap: 8px;
  max-width: 520px; margin: 0 auto;
}
/* On the green bar the buttons invert: a solid white primary reads far better
   than the old near-black pill, which went muddy against the green. */
.mnav-cta {
  pointer-events: auto;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%;
  font: 800 16.5px 'Hanken Grotesk', sans-serif;
  background: var(--paper); color: var(--on-paper);
  border-radius: var(--r-pill);
  padding: 16px 22px;
  text-decoration: none;
  box-shadow: var(--shadow-lift);
}
/* Secondary: the same shape, outlined in white. */
.mnav-cta-2 {
  background: transparent;
  color: var(--on-green);
  border: 2px solid var(--hairline-on-dark);
  padding: 13px 22px;
  font-size: 15.5px;
  box-shadow: none;
}
.mnav-cta-2:hover { border-color: var(--on-green); }
.mnav-cta svg { width: 18px; height: 18px; flex: none; }

@media (max-width: 820px) {
  .mnav-cta-bar { display: block; }
  /* Keep the last of the page clear of the bar - taller when it holds two. */
  body { padding-bottom: 96px; }
  body.mnav-two-cta { padding-bottom: 150px; }
}

/* The sticky bar already carries "Open Ritmik" at every scroll position, so the
   in-page copies of the same button are noise on a phone or tablet - the melody
   one lands directly above the bar, saying the same thing twice. Buttons with a
   different job (play the example, create a composition) stay. */
@media (max-width: 820px) {
  .sm-hero .btn[href*="Rithmic"],
  .melody-cta .btn[href*="Rithmic"],
  .practice-cta .btn[href*="Rithmic"],
  .final .fbtn[href*="Rithmic"] { display: none; }
  /* Without the button the "it's free" line under it is dangling. */
  .final .free { display: none; }
}