/* Mobile navigation for the captured (Tailwind) pages: home, FAQ, legal and
   every agent profile.

   Two problems this fixes on a phone:

   1. The nav links were `hidden md:flex` — below 768px they were simply
      deleted, so a phone had no way to reach Live Feed, How it works, Benefits
      or FAQ. They now move to a second row inside the same pill.
   2. Brand + language switch + "Get started" together overflowed the pill by
      about 20px, which pushed the switch on top of the wordmark. The row now
      wraps, and the brand is allowed to shrink instead of shoving its
      neighbours out.

   768px matches Tailwind's `md`, so this takes over exactly where `md:flex`
   stops applying and the two never fight. */

@media (max-width: 767px) {
  header nav {
    flex-wrap: wrap;
    row-gap: .3rem;
    border-radius: 1.35rem;
    padding-left: .75rem;
    padding-right: .75rem;
  }

  /* Beats Tailwind's `.hidden` on specificity alone — no !important needed. */
  header nav > div.hidden {
    display: flex;
    order: 3;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: .35rem 1.1rem;
  }
  header nav > div.hidden a { font-size: .88rem; }

  /* The wordmark yields space rather than forcing an overflow. */
  header nav > :first-child { min-width: 0; flex-shrink: 1; }

  /* A call to action should never break across two lines. */
  header nav a[href*="app.flowmarket"] {
    white-space: nowrap;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Below ~380px (iPhone SE and similar) the brand, switch and CTA still could
   not share a row, so the pill stacked three deep. Shrink the wordmark and the
   button just enough to keep it to two rows: identity + actions, then links. */
@media (max-width: 379px) {
  header nav > :first-child span { font-size: 1.05rem; }
  header nav > :first-child img { width: 2rem; height: 2rem; }
  header nav a[href*="app.flowmarket"] {
    padding-left: .8rem;
    padding-right: .8rem;
    font-size: .88rem;
  }
  header nav > div.hidden { gap: .3rem .8rem; }
  header nav > div.hidden a { font-size: .82rem; }
}