/*
 * Mobile nav menu.
 *
 * Below 660px the marketing nav hid every non-CTA link — `.links a:not(.cta)
 * {display:none}` — and put nothing in their place. On a phone the bar showed
 * two buttons and nothing else, so How it works, Conditions, Who it's for and
 * Pricing were unreachable. Hiding links is a reasonable response to a narrow
 * bar; hiding them with no way to get them back is the bug.
 *
 * This adds the missing half: a toggle that appears at the same breakpoint the
 * links disappear at, and a panel that lists them. The two are tied to one
 * breakpoint variable-by-convention (660px) — if the hiding rule ever moves,
 * this file moves with it, or the button appears while the links are still
 * visible.
 *
 * Loaded alongside search.css on every page carrying the nav, so the marketing
 * root and the generated conditions pages get identical behaviour from one
 * definition.
 */

.menu-btn {
  display: none; /* shown only at the breakpoint below */
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: var(--ink2, #c2cdda);
  cursor: pointer;
  transition: color .18s, background .18s, border-color .18s;
}
.menu-btn:hover { color: var(--ink, #e9f0f9); background: var(--lift, #142338); }
.menu-btn[aria-expanded="true"] {
  color: var(--ink, #e9f0f9);
  background: var(--lift, #142338);
  border-color: var(--line-hot, #2a4062);
}
.menu-btn:focus-visible { outline: 2px solid var(--apex, #3b8ff5); outline-offset: 2px; }

.menu-panel {
  position: fixed;
  top: 74px;
  left: 16px;
  right: 16px;
  background: var(--navy, #0e1a2c);
  border: 1px solid var(--line-hot, #2a4062);
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
  padding: 8px;
  z-index: 190;
}
.menu-panel[hidden] { display: none; }

.menu-panel a {
  display: block;
  padding: 13px 14px;
  border-radius: 7px;
  font-size: 16.5px;
  color: var(--ink2, #c2cdda);
  text-decoration: none;
}
.menu-panel a + a { border-top: 1px solid var(--line, #1c2c45); }
.menu-panel a:hover, .menu-panel a:focus-visible { background: var(--lift, #142338); color: var(--ink, #e9f0f9); }

@media (max-width: 660px) {
  /* The breakpoint the links vanish at. Button appears exactly here. */
  .menu-btn { display: grid; }

  /* ── Making the bar actually fit ──────────────────────────────────────────
     A phone screenshot showed "Request a record" sliced in half at the right
     edge. The bar was being asked to hold a 56px shield, a 27px wordmark, two
     40px icon buttons and TWO call-to-action buttons inside ~390px. It does
     not fit, and flexbox resolves that by pushing the last child off-screen
     rather than by telling anyone.

     Three cuts, in order of how much room they buy and how little they cost:
     shrink the logo, drop the secondary CTA into the menu, tighten the rest.
     The primary CTA stays in the bar — it is the one thing the page is for. */
  .links { gap: 8px; }
  .nav .wrap { gap: 10px; padding: 0 16px; height: 76px; }

  .lk { gap: 8px; }
  .lk svg { width: 34px; height: 41px; }
  .wm { font-size: 19px; }

  /* Secondary CTA moves into the menu panel; nav-menu.js copies it there, so
     it is relocated rather than lost. */
  .links .cta.ghost { display: none; }

  .links .cta { font-size: 14.5px; padding: 9px 13px; white-space: nowrap; }
  .menu-btn, .search-btn { width: 36px; height: 36px; }
}

@media (max-width: 430px) {
  /* 430, not 380, and the number is measured rather than guessed. With the
     wordmark visible the bar needs 374px of content and gaps; a 390px phone —
     iPhone 14/15, most Androids — offers 358 after padding. That 16px deficit
     is exactly what sliced the CTA in the screenshot, and shrinking type alone
     did not close it.

     The wordmark is the right thing to drop: the shield alone still reads as
     VerApex, and the page title says the name anyway. Without it the bar needs
     272px, which fits every phone down to 320. */
  .wm { display: none; }
  .links .cta { font-size: 14px; padding: 8px 11px; }
}

@media (min-width: 661px) {
  /* Belt and braces: if the panel were ever left open and the viewport grew,
     it would float over desktop content with no button to close it. */
  .menu-panel { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-btn { transition: none; }
}