/* Daily Summa - shared marketing nav.
 *
 * Every page carried its own copy of the nav CSS, so a mobile fix was a
 * ten-file change and the tenth was always the one that got missed. This is
 * the one definition. Pages link it; nothing redefines it.
 *
 * Aug 30 2026: the nav had NO breakpoint at all. On a phone the logo collided
 * with the first link, "For Schools" wrapped mid-word, and "Get Started" ran
 * off the right edge.
 *
 * Two rows rather than a hamburger: nothing is hidden behind a tap and the
 * CTA stays visible, which matters on the page whose job is signup.
 *
 * Markup contract:
 *   <nav>
 *     <div class="nav-top">            (logo + mobile CTA; display:contents on desktop)
 *       <a class="nav-logo">
 *       <a class="nav-cta nav-cta-mobile">
 *     </div>
 *     <div class="nav-actions">
 *       <a class="nav-login"> x N
 *       <a class="nav-cta nav-cta-desktop">
 *     </div>
 *   </nav>
 */

.nav-top { display: contents; }
.nav-cta-mobile { display: none; }

@media (max-width: 760px) {
  nav {
    flex-direction: column;
    align-items: stretch;
    padding: 12px 18px 10px;
    gap: 10px;
  }
  .nav-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .nav-logo { font-size: 20px; }
  .nav-actions {
    justify-content: space-between;
    gap: 8px;
    width: 100%;
  }
  /* "For Schools" must not break across two lines. */
  .nav-login { font-size: 12.5px; white-space: nowrap; }
  .nav-cta {
    padding: 8px 14px;
    font-size: 12.5px;
    white-space: nowrap;
    flex: 0 0 auto;
  }
  .nav-cta-mobile  { display: inline-block; }
  .nav-cta-desktop { display: none; }

  /* Pages with a two-item nav (pricing: logo + CTA; privacy/terms: logo +
     back link) do not need two rows -- one row that fits is better. */
  nav:not(:has(.nav-actions)) {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .nav-back { font-size: 12.5px; white-space: nowrap; }
}