/* ============================================================
   MechaPaint - mobile.css
   Phone / small-tablet overrides. Loaded last, after every other
   stylesheet, so these rules win.

   The header on mobile keeps the brand and primary actions visible.
   ============================================================ */

@media (max-width: 780px) {

  /* ---------- header: brand only, centered, always visible ---------- */

  .nav {
    top: 0;
    z-index: 120;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
  }

  /* secondary nav links go away; primary actions stay visible */
  .nav .nav-links,
  .nav > .btn {
    display: none;
  }

  /* Brand-only header: the logo mark moves BETWEEN the two words, so the
     header reads Mecha <logo> Paint. Flex order does the rearranging, the
     markup order stays img, "Mecha", "Paint" for everything above 780px. */
  .nav .logo {
    margin: 0;
    font-size: 16px;
    gap: 4px;
    min-width: 0;
  }

  .nav .logo .logo-pre        { order: 1; }
  .nav .logo-mark             { order: 2; }
  .nav .logo span:not(.logo-pre) { order: 3; }

  .nav .logo-mark {
    width: 28px;
    height: 28px;
  }

  .nav .nav-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
  }

  .nav .nav-actions .btn-small {
    padding: 7px 9px;
    font-size: 12px;
    white-space: nowrap;
  }

  /* ---------- sale strip sits under the pinned header ---------- */

  .salebar {
    position: relative;
    z-index: 55;
  }
}